React JS Buenos Aires - 4 sept. 2018

4. <Modal
show={showSaveChanges}
{...config}
>
<span>Save Changes?</span>
</Modal>
<Modal
show={showConfimExit}
{...config}
>
<span>Exit now?</span>
</Modal>
<Modal
show={showGlobalError}
{...config}
>
<span>{error}</span>
</Modal>
<Modal
show={showDidYouKnow}
{...config}
>
<span>{hintMessage}</span>
</Modal>

5. ●
●
●
●

8. () => {...}
{
show: true,
icon: <Warning/>
title: 'Oh snap!'
message: 'An error has...',
buttons: [
{ label: 'Dismiss' }
],
}

9. () => {...}
{
show: true,
icon: <Warning/>
title: 'Oh snap!'
message: 'An error has...',
buttons: [
{ label: 'Dismiss' }
],
}
mapStateToProps

10. {
show: true,
icon: <Warning/>
title: 'Oh snap!'
message: 'An error has...',
buttons: [
{ label: 'Dismiss' }
],
}
<Modals />
sync

11. {
show: true,
icon: <Warning/>
title: 'Oh snap!'
message: 'An error has...',
buttons: [
{ label: 'Dismiss' }
],
}

13. const configConfirmChangesModal = (state) => (
state.userIsConfirmingChanges
? {
show: true,
title: 'Confirm Changes',
message: 'Are you sure?',
buttons: [
{ label: 'Yes' },
{ label: 'No' }
]
}
: configClosedModal();
);

14. const configConfirmChangesModal = (state) => (
state.userIsConfirmingChanges
? {
show: true,
title: 'Confirm Changes',
message: 'Are you sure?',
buttons: [
{ label: 'Yes' },
{ label: 'No' }
]
}
: { show: false };
);

15. const configConfirmChangesModal = (state) => (
state.userIsConfirmingChanges
? {
show: true,
title: 'Confirm Changes',
message: 'Are you sure?',
buttons: [
{ label: 'Yes' },
{ label: 'No' }
]
}
: configClosedModal();
);

16. const configLoadingModal = (override) => ({
layout: LAYOUT.MESSAGING,
size: SIZE.SMALL,
titleIcon: ICON.LOADING,
...override,
});
const configSuccessModal = (override) => ({
layout: LAYOUT.MESSAGING,
size: SIZE.SMALL,
titleIcon: ICON.SUCCESS,
...override,
});

17. const AppModals = connect(
combineConfigurators(
configConfirmSaveModal,
configGlobalErrorModal,
configDataUsageWarningModal,
// ... other modals config
)
)(Modals);

18. const Modals = ({ configs }) => (
<div>
{configs.map(({ content, ...props }) => (
<Modal {...props}>
{content}
</Modal>
})}
</div>
);

19. const App = () => (
<MainContainer>
<Provider>
<AppModals />
{/* other stuff */}
</Provider>
</MainContainer>
);

20. const AppModals = compose(
connect(combineConfigurators(
configConfirmSaveModal,
configGlobalErrorModal,
configDataUsageWarningModal,
// ... other modals config
)),
withActionDispatching,
)(Modals);

21. const configConfirmChangesModal = (state) => (
state.userIsConfirmingChanges
? {
title: 'Confirm Changes',
message: 'Are you sure?',
buttons: [
{ label: 'Yes', action: acceptChanges() },
{ label: 'No', action: discardChanges() }
]
} : configClosedModal();
);

22. export const withActionDispatching = (Modals) =>
({ modalsConfig, dispatch }) => {
const dispatcherConfig = modalsConfig.map(config => ({
...config,
onButtonClick: button => (
(dispatch && button.action)
? dispatch(button.action)
: config.onButtonClick && config.onButtonClick(button)
),
}));
return <Modals modalsConfig={dispatcherConfig} />;
};