07 Form Update dependencies

[brauliodiez]

Update dependencies and check if code is uptodate

[carlostxm]

Hi @brauliodiez ,

I'm having some trouble migrating from react-router 3 to 4. While some componets as has been directly moved to react-router-dom some others have been removed such as:

• hashHistory
  hashHistory stopped working in 4.0.0 remix-run/react-router#4752
• IndexRoute
  Can no longer import { IndexRoute, browserHistory } from version 4. remix-run/react-router#4732

So it's needed to rethink the app to update.

What do you suggest to do?

BR.

Carlos.

[arp82]

Hi Carlos,

Some things that need to be changed:

• you will need to add the react-router-dom dependecy. Since v4, that library stores elements such as Route, Link and others that previously were included in the full react-router package. So, for example, you may need to add import statements like the one below
  import { Route, HashRouter, Switch } from 'react-router-dom';

• hashHistory is removed in v4. Instead, you should be using a HashRouter tag instead of the Router tag + history property. Please, find below an updated example of the router.tsx file:

<Provider store={store}>
      <HashRouter>
        <div className="container-fluid">
          <Route component={App} />
          <Switch>
            <Route exact path="/" component={About} />
            <Route path="/about" component={About} />
            <Route path="/members" component={MembersPageContainer} />
            <Route path="/member" component={MemberPageContainer} />
          </Switch>
        </div>
      </HashRouter>
    </Provider>

• In the old code, IndexRoute was being used to append the code in app.tsx (so that the Header component was always visible) and add the rest of the components as children according to the URL. Alas, nesting Route tags is no longer allowed in react-router v4. An alternative to this is to add a Route component without a path and with App as the component property (this ensures that App is rendered always, regardless of the actual URL). Then, using the Switch statement, we render the first Route component for which a match is found between the URL and the path property. When adding the 'exact' property, we are asking to do a full, "if and only if" match (this way, in the code above, we are telling React to render the About component if we are in the root path /, but not in other paths that might match that pattern partially)

• There is an added problem to this: in the old version, the Route components were appended as children of the IndexRoute component. This is no longer the case, so we need to modify the code in app.tsx to remove the line that renders its children. Furthermore, for the lack of a better option, we may need to move the wrapping div in app.tsx (div className="container-fluid" .... ) into the route.tsx file, as now each Route component would not be being rendered inside that wrapper (this will depend on the actual code)

[carlostxm]

Hi,

I have some doubts regarding the hashHistory refactor. In my PR I am using the global object history and it works but I am not sure if it's correct.

I think would be better to access using this.props.history in the child components but I have not found a way to do it. Any suggestion?

[arp82]

I do not know if it is applicable to this case without looking further into the code, but here is how I did it in a personal project, taking for example a Redux Action to delete one object from the collection in the Backend

export function deleteBoardGame(id, onSuccessCallback) {
    const url = `${ROOT_URL}/${BOARD_GAMES_ENDPOINT}/${id}`;
    const promise = axios.delete(url).then(() => {
        onSuccessCallback();
        return id;
    });

    return {
        type: DELETE_BOARD_GAME,
        payload: promise,
    };
}

Then when calling that action from the corresponding Container, I added a callback to navigate backwards using this.props.history. The code can be found below (in this case, I just go back straight away to the root URL)

    deleteBoardGame = () => {
        const {id} = this.props.match.params;
        this.props.deleteBoardGame(id, () => {
            this.props.history.push('/');
        });
    }

The only problem with this approach is that it may need a deeper refactoring of the code that goes beyond the original scope of this issue.