Hi bernicecpz,

Here’s the sample datepicker in redux form app/components/Calendar/AddEventForm.js and for the submited value can check here /app/components/Calendar/AddEvent.js

Feel free if you have any further queries.

Kind Regards.

Hi bernicecpz,

To validate radio input, you need to use redux form. Then create custom field component which has radio input inside.

vary much like this http://dandelion.ux-maestro.com/app/forms/reduxform Please click ‘view code’ to show the source.

const renderRadioGroup = ({ input, ...rest }) => (
  <RadioGroup
    {...input}
    {...rest}
    valueselected={input.value}
    onChange={(event, value) => input.onChange(value)}
  />
);

After that add required attribute in Field

<Field name="radio" 
  className={classes.inlineWrap}
  required
  component={renderRadioGroup}>
     <FormControlLabel value="option1" control={<Radio />} label="Option 1" />
                    <FormControlLabel value="option2" control={<Radio />} label="Option 2" />
   </Field>

That’s all. Hope this can help.

Feel free if you have any further queries.

Kind Regards.

Hi ilhammeidi, I have tried your method mention above but it does not validate the radio button when I submit my redux form. It allows me to submit my redux form even when the radio button is not selected. What can be the problem? Thanks

Hi bernicecpz,

It seems for non input text or select need do manual validations. The manual validation checking itself base on value from custom field. Here’s the redux form validation docs: https://redux-form.com/6.6.3/examples/fieldlevelvalidation/

Hope this can help.

Feel free if you have any further queries.

Kind Regards.

Hi vinursy,

The starter-project made for you who want build app from scratch without being distracted from innate feature. In other word it’s an initial(empty) project with built in configuration setup.

This project main module including auth, errors, and simple dashboard page only.

You can can start develop your app with this starter project. And will be more suitable when use dandelion-pro as a reference.

Kind Regards.

then, how can i build the dandelion-pro directory? it seems that there is no postcss.config.js in the root directory

The postcss.config.js file should be there. We’re not sure, maybe accidentally deleted or not extracted completely. Please try to download again or create postcss.config.js manually. Here’s the code

file name: postcss.config.js

var autoprefixer = require('autoprefixer'); // eslint-disable-line

module.exports = {
  plugins: [
    autoprefixer({ browsers: 'last 2 versions' })
  ]
};

And then guide for the installation, running and build app already in documentation.

Feel free if You have any further queries.

Kind Regards.

Hi subbav,

This template has redux saga configuration only, but not implement in any modules yet.

We have plan to start implement it on next couple month.

Kind regards

Hi fhandres,

Here’s the questions bellow: 1. “connect the data to existing API” : You can use Axios to fetch data Here’s the sample by using axios in this template app/containers/UiElements/IonIcons.js and app/components/SourceReader/SourceReader.js

And then for better experience can use side-effect model such as redux-saga or redux-thunk. https://medium.freecodecamp.org/how-to-make-your-react-app-fully-functional-fully-reactive-and-able-to-handle-all-those-crazy-e5da8e7dac10

2. “Can we use async functions and show some spinner” Yes of course can. Just create custom component for spinner and show/hide it depend on state changes.

3. “include some custom validation functions” You can put in each function (edit, submit, etc) to validate the values

4. “the first request must be on demand” This answer most like the no.1 answer.

5.”add the toolbar (filtre,export,print) of datatable to crudtableform” For more complete table utilities can use https://devexpress.github.io/devextreme-reactive/react/grid/ but the license is Non-Commercial. Or if still want to use Dandelion components can use Advanced Data Table for filter, export, etc. http://dandelion.ux-maestro.com/app/tables/data-table and then for data modification can use Form Panel in Redux Form Editable Cell http://dandelion.ux-maestro.com/app/tables/editable-cell

Feel free if You have any further queries.

Kind regards.

Hi I was able to include the call to my api backend, going further I tried to create actionscreators, but anytime I include an action with api call, I got the error “Actions must be plain objects. Use custom middleware for async actions/ undefined is not an object/ Gettin”,

example of simple action (same results as using api calls) export const requestRecords = () => dispatch => { dispatch({type : ‘FETCH_records’}) }

I follow the instructions for saga actions but error still persists, could you please provide a basic example of using api calls inside actions. Is there a config I need to include in configureStore.js o reducers.js in order be able to use actions.

Hi fhandres.

The error “Actions must be plain objects. Use custom middleware for async actions/ undefined is not an object/ Gettin It’s probably the data type is plain object not immutable-object. So can try to call them without get() method

const mapDispatchToProps = {
     getNews: getNews,
};
const mapStateToProps = (state) => ({
    article: state.news,
})

Here’s the basic sample by using redux saga https://medium.com/@lavitr01051977/make-your-first-call-to-api-using-redux-saga-15aa995df5b6

Hope this can help. Feel free if you have any further queries.

Kind Regards.

Hi Christian,

Yes the id not included when submit the form value, because id is generated from reducers in create/submit actions.

And then the id will be inserted to the object with redux-form value.

Feel free if You have any further queries.

Kind regards

Hi ilhammeidi,

Thank you for your answer. Do we have way to catch the id value when saving new record?

How it is generated by reducer? I need more specific function or location where it is generated.

Thank you.

Christian

Hi Christian,

The reducer for Edit-Table in /app/redux/modules/crudTable.js The id is generated in

const staticKey = {
    id: (+new Date() + Math.floor(Math.random() * 999999)).toString(36),
  };

Feel free if You have any further queries.

Kind regards

Hi anbum,

Thanks for the feedback. We are still finding the best solution for this issue. Then for now can be fixed by set position:relative in header and add marginTop: theme.spacing.unit * 14: or marginTop: 112 in <main id=”mainContent”>

Feel free if You have any further queries.

Kind regards.

Hi bernicecpz,

To restrict view, can create new function with state of authentication inside. Here’s the sample https://github.com/joshgeller/react-redux-jwt-auth-example/blob/master/src/components/AuthenticatedComponent.js

If you’re using redux to store auth state, can put state reducer inside that function to validate.

Feel free if you have any further query.

Kind regards.

Hi ernicecpz,

To initial form value need the initial value which stored in reducer. If want to load data by use componentDidMount, can push the api-data to local state(initData) first. By following ReduxFormDemo, can put the init props in componentDidMount with parameter(initData) from local state. init(initData)

Feel free if you have any further query.

Kind regards.

Hi Author,

I have managed to stored the retrieved data into the initData object and able to load onto the form when the button is clicked. However, I still cannot get the componentDidMount to work. Here’s the code:

componentDidMount() { const { init } = this.props; this._isMounted = true; this.setState({ initData: { name: this.state.facility.name, description: this.state.facility.description, facilityType: this.state.facility.facilityType, capacity: this.state.facility.capacity, area: this.state.facility.area, facFeature: this.state.facility.facFeature, facStatus: this.state.facility.facStatus } }); console.log(“initData: ” + this.state.initData); // able to retrieve api data init(this.state.initData); }

This method still does not work. Please help thanks!

Hi bernicecpz,

This issue probably because the data is fetched from the api asynchronously. To make sure, can add timeout some (5-10) seconds to log it.

Or can handle it with promise by axios (https://www.npmjs.com/package/axios). Here’s the sample by using axios in this template app/containers/UiElements/IonIcons.js

And then for better experience can use side-effect model such as redux-saga or redux-thunk. https://medium.freecodecamp.org/how-to-make-your-react-app-fully-functional-fully-reactive-and-able-to-handle-all-those-crazy-e5da8e7dac10

Feel free if you have any further query.

Kind regards.

Hi bernicecpz,

suggestions={suggestions}
  onSuggestionsFetchRequested={this.handleSuggestionsFetchRequested}
  onSuggestionsClearRequested={this.handleSuggestionsClearRequested}
  renderSuggestionsContainer={renderSuggestionsContainer}
  getSuggestionValue={getSuggestionValue}
  renderSuggestion={renderSuggestion}

Please try to put in Autosuggest components, not in Field.

Here’s the example for autocomplete usage in redux-form https://redux-form.com/6.0.2/examples/react-widgets/ on hobbies field. FYI the example use different libraries, they use react-widgets.

Hope this can help. Feel free if you have any further query.

Kind regards.

Hi peboro,

Thanks for visited our portfolio.

This template can compile and watch scss automatically as well once the server is running up. We already setup the scss loader in webpack configuration.

For inline styling, can also by following react.js rule syntax.

Regards.

Hi bernicecpz.

The Snackbar/Notification can use the custom component /app/components/Notification/Notification.js or can include the original form Material UI http://dandelion.ux-maestro.com/app/ui/snackbar. But basically are same.

To show Snackbar/Notification can use internal state.open and set as true when form have been filled up and the record has been successfully added.

Or can also by stored the state in reducer. Please take a look in /app/redux/modules/contact.js and /app/containers/Pages/Contact/index.js. In Notification component /app/components/Notification/Notification.js it will open once props.messages has been filled.

Hope this can help.

Kind regards.

Hi bernicecpz,

Yes exactly, you can put the function to push the data there. The state.value form is map format, so in example if want to get the value you have to use get() method

submitForm(values) {
    setTimeout(() => {
      this.setState({ valueForm: values });
      console.log(`You submitted:\n\n${this.state.valueForm.get('email')}`); // eslint-disable-line
this.props.handleRegisterWithEmail(this.state.valueForm.get('email'), this.state.valueForm.get('password')); // eslint-disable-line
    }, 500); // simulate server latency
  }

Hope this can help.

Kind regards.

Hi bernicecpz,,

1. To pass the value, it need to get the value first, which stored in editorState After that convert to json or html format like in this demo http://dandelion.ux-maestro.com/app/forms/wysiwyg-editor. Then pass to database.

const content = {
  blocks: [{
    key: '637gr',
    text: 'Lorem ipsum dolor sit amet',
    type: 'unstyled',
    depth: 0,
    inlineStyleRanges: [],
    entityRanges: [],
    data: {}
  }],
  entityMap: {}
};

class Wysiwyg extends PureComponent {
  constructor(props) {
    super(props);
    const contentBlock = convertFromRaw(content);
    if (contentBlock) {
      const editorState = EditorState.createWithContent(contentBlock);
      this.state = {
        editorState,
      };
    }
  }
}

Here’s the full docs: https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp, hope this can help

Feel free if you have any further queries.

Kind regards.

Hi bernicecpz,

Here’e the answer bellow: 1. To validate form can use HTML 5 basic validation or use redux form validation. First need to wrap the table inside the form.

2. To validate not null, just put “required” attribute in form field. And for max value can use “max” attribute in field, or use redux-form validation i.e. an age validation in https://redux-form.com/6.4.3/examples/fieldlevelvalidation/

3. For this one need to store the value of different fields to the local state first. Then do the validation by referring from that state.

Feel free if you have any further queries.

Kind regards.

Hi tomas2387,

Thanks for visited my portfolio.

Actually we haven’t try it before. If want to intergrate with next.js or another starter-kit basically just take out components, containers and reducers, then move to the next.js project. And then need to adjust the webpack settings such as alias directory name, loaders, and also all default dependencies in package.json.

We have the dandelion starter-project version. If you like, we can share it to you, by message via my profile. We will send it to you’re email.

Kind regards.

Hello chrisab1234,

It’s use TreeTable component with redux and material ui.

Feel free if you have any further queries.

Kind regards.

Hello greciobeline,

For that issue could happen if you have a page that connected to reducer. In mapStateToProps please add …state

And also it’s probably the whole app wrapped with page/component that connected to reducer. So just do the same think above for those page/component.

To make sure it in production mode in local env please run npm run build then npm run start:prod

Hope this can help. Feel free if you have any further queries.

Kind regards.

Added that to Dashboard component and it worked like a charm!

But still curious about why this issue only showed up in production build… any idea?

Thanks anyway!

Hi greciobeline,

In build production all the script is built by webpack to become a single and uglify common javascript format. Maybe the router and reducer need all the complete state.

Regards.

Hi Dumont,

We are still figuring out about this issue. And when call an API the data should be not duplicated even call twice. We will give an update soon.

Kind regards.

Thanks.. waiting an update. Best Regards, Dumont

Hi FHDumont,

Thanks for purchasing.

In reducer redux-saga project usually has action that indicate data load fulfilled. In example something like this

So let say the Loading-spinner is shown by default, then when LOAD_DATA_FULFILLED, just put state complete: true to hide the spinner.

Hope this can help. Feel free if you have any further queries.

Kind regards.

Hi, thank you for your answer.

I would like use the same spinner that template already use, the same Loading in pageListAsync. Is it possible to start this spinner?

If not so I’ll use the usually way that you said.

Best Regards, Dumont

Hi Dumont,

Yes it can. The spinner is reusable component. Then might need put inside to hide/show it, which is following redux state.

Feel free if you have any further queries.

Kind regards.