Snackbar Alert component that reacts to changes in a MobX store

index.tsx

// -- 1 --
import Snackbar from '@material-ui/core/Snackbar';
import { observer } from 'mobx-react';
import React from 'react';
import AlertContent from './content';
import alertsStore from './store';

const Alerts = () => {
  // -- 2 --
  return alertsStore.current.cata({
    // -- 4 --
    Just: alert => (
      <Snackbar
        // -- 5 --
        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
        open={alert.display}
        onClose={alertsStore.hide}
        onExited={alertsStore.process}
        autoHideDuration={6000}
      >
        // -- 6 --
        <AlertContent alert={alert} />
      </Snackbar>
    ),
    // -- 3 --
    Nothing: () => <></>,
  });
};

// -- 7 --
export default observer(Alerts);