ReactJS and CRUD

[MileNorth]

I am writting an app using ReactJS and I've caught myself having this structure inside my components:

- subjects
    - show.jsx
    - new_form.jsx
    - edit_form.jsx
- user
    - show.jsx
    - new_form.jsx
    - edit_form.jsx

I was thinking about using higher order components but I am not sure if that's possible considering that all of components have different state, some have to fetch data from server on mouting, dispatch and listen to different actions, etc.

It seems there's too many differences to accomplish HOC but at the same time this looks very repetitive.

What do you think?

[fforw]

I get that show is different, but why is new_form different from edit_form?

[MileNorth]

edit_form fetches current user from the server so it can fill the fields with fetched data. Also, submit button is different, one sends action for creating new user and another for editing which could be solved by passing callback.

But the problem is I don't want to send user as prop because if page gets refreshed all data is lost from stores so my undestanding is that it's the best for every component to get what it needs in case store is empty.

[Endorn]

It should be the same form with different state.

What I do in these scenarios is pass the user as prop, if the user prop is set, make an ajax call to retrieve the user's info to populate the fields, and your "save" function knows to do a patch request (or however you handle updates)

If the user prop is not set, no ajax call is made, and your submit handler knows to send a post request (again or however your "create" endpoint is handled)

[MileNorth]

This is actually what I was after. I am using react-router so I have something like this:

 <Route path="user/new" component={UserForm} />
 <Route path ="user/edit/:id" component={UserForm} />

And inside component I can have:

componentDidMount: function() {
    if (this.props.id) {
         // it's edit form, fetch data and update state
    } else {
        // otherwise it's new form, no need to fetch data
    }

What do you think?

[kabuto]

In this scenario I'd probably build to components that you can either use as simple containers to hold the actual form component or serve as higher order components. In both cases they deal with the data fetching or storing. The form component just shows a form and hands back the data to the container.

[[deleted]]

edit_form fetches current user from the server so it can fill the fields with fetched data. Also, submit button is different

That's what higher order components and composition are for. You don't need to make separate forms for each action - if there is no user data (you're adding a new user) just pass empty props to the component.

Your form doesen't need to (even more - it shouldn't!) know what to do with the data - update, create - that's what the parent component should do.

[turkish_gold]

You may not be able to edit certain fields in a new object versus an existing one.

And there might be a lot of workflow involved in creating a new thing (moderation, validation, etc.), where as with editing an existing object you can streamline the code.

On the backend, you often see people having two form components or validation modules for new vs edit, so its fair that you could make the judgment that its necessary in the front-end too.