search

twlevelup / watch_edition_react

A smartwatch simulator, built in ReactJS
MIT License
3 stars 2 forks source link

Migrated the app to use Redux for handling button mappings #24

Closed sinan-aumarah closed 7 years ago

sinan-aumarah commented 7 years ago

Hi all,

So I think think this is the cleanest solution (I might be biased :stuck_out_tongue: ). From a student perspective, it's very simple now to attach and reconfigure buttons based on which screen you're on.

So now we don't have handler mappers or anything hacky. it's as simple as wrapping the screen component with WithButtonConfigs(screenComponent, newButtonConfigs{}) i.e. 

export const ContactScreenButtons = {
  LEFT: () => ButtonAction.goToPage('/'),
  RIGHT: () => ButtonAction.goToPage('/counter'),
};

export default WithButtonConfigs(ContactListScreen, ContactScreenButtons);

WithButtonConfigs is an HOC redux container that wraps the screen component and trigger dispatch(REMAP_BUTTONS action) once the screen component is mounted. This action will change the state of the buttons and thus remap them on page view/navigation.

Note: the top and bottom buttons are set to scroll up or down by default and we probably don't need to overwrite them.

Let me know what you think

sinan-aumarah commented 7 years ago

@AMitchemTW Thanks. Agreed with your points. As for the connectedRouter; this is the only thing that worked for me with react-router v4 and history.push(). There is a compatibility bug with redux-router and react-router v4 and connectedRouter to fix it.