xchem#117 add snack bar for error handling

pavol-brunclik-m2ms · Mar 10, 2020 · c81704b · c81704b
1 parent 258e212
commit c81704b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 45 deletions.
diff --git a/js/components/errorHandling/errorBoundary.js b/js/components/errorHandling/errorBoundary.js
@@ -2,9 +2,10 @@
  * Created by abradley on 24/09/2018.
  */
 import * as Sentry from '@sentry/browser';
-import React, { Fragment, Component } from 'react';
-import { Button } from '../common/Inputs/Button';
-import Modal from '../common/Modal';
+import React, { Component } from 'react';
+
+import { HeaderContext } from '../header/headerContext';
+import { snackbarColors } from '../header/constants';
 
 export class ErrorBoundary extends Component {
   constructor(props) {
@@ -33,34 +34,20 @@ export class ErrorBoundary extends Component {
     const { children } = this.props;
     const { error } = this.state;
 
-    let msg = null;
-    if (process.env.NODE_ENV !== 'production' && error !== null) {
-      msg = error.toString();
-    }
-
     //render fallback UI
     return (
-      <Fragment>
+      <>
         {children}
-        <Modal open={error !== null}>
-          <div>
-            <h3>Something went wrong - unexpected error. Please contact Fragalysis support!</h3>
-            <div>{msg}</div>
-            <Button color="primary" onClick={() => this.setState({ error: null })}>
-              Close
-            </Button>
-            <Button
-              color="primary"
-              onClick={() => {
-                this.setState({ error: null, errorInfo: null });
-                Sentry.showReportDialog();
-              }}
-            >
-              Report feedback
-            </Button>
-          </div>
-        </Modal>
-      </Fragment>
+        {error !== null && (
+          <HeaderContext.Consumer>
+            {({ setSnackBarTitle, setSnackBarColor }) => {
+              setSnackBarTitle('Something went wrong!');
+              setSnackBarColor(snackbarColors.default);
+              return null;
+            }}
+          </HeaderContext.Consumer>
+        )}
+      </>
     );
   }
 }
diff --git a/js/components/header/headerContext.js b/js/components/header/headerContext.js
@@ -1,4 +1,5 @@
 import React, { createContext, useState, memo } from 'react';
+import { snackbarColors } from './constants';
 
 export const HeaderContext = createContext();
 
@@ -8,6 +9,7 @@ export const HeaderProvider = memo(props => {
   const [headerNavbarTitle, setHeaderNavbarTitle] = useState('');
   const [headerButtons, setHeaderButtons] = useState(null);
   const [snackBarTitle, setSnackBarTitle] = useState(null);
+  const [snackBarColor, setSnackBarColor] = useState(snackbarColors.default);
 
   return (
     <HeaderContext.Provider
@@ -21,7 +23,9 @@ export const HeaderProvider = memo(props => {
         headerButtons,
         setHeaderButtons,
         snackBarTitle,
-        setSnackBarTitle
+        setSnackBarTitle,
+        snackBarColor,
+        setSnackBarColor
       }}
     >
       {props.children}

diff --git a/js/components/preview/redux/dispatchActions.js b/js/components/preview/redux/dispatchActions.js
@@ -3,7 +3,7 @@ import { SUFFIX, VIEWS } from '../../../constants/constants';
 import { loadObject, setProteinsHasLoaded, setOrientation } from '../../../reducers/ngl/dispatchActions';
 import { reloadSummaryReducer } from '../summary/redux/actions';
 import { reloadCompoundsReducer } from '../compounds/redux/actions';
-import { reloadMoleculeReducer } from '../molecule/redux/actions';
+// import { reloadMoleculeReducer } from '../molecule/redux/actions';
 
 const loadProtein = nglView => (dispatch, getState) => {
   const state = getState();

diff --git a/js/components/routes/Routes.js b/js/components/routes/Routes.js
@@ -1,5 +1,6 @@
 import React, { memo, useContext } from 'react';
 import { Box, IconButton, makeStyles, Snackbar, useTheme } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
 import Header from '../header';
 import { Route, Switch } from 'react-router-dom';
 import { Management } from '../management/management';
@@ -13,6 +14,7 @@ import { URLS } from './constants';
 import { HeaderContext } from '../header/headerContext';
 import { Close } from '@material-ui/icons';
 import SessionList from '../session/sessionList';
+import { snackbarColors } from '../header/constants';
 import { Projects } from '../projects';
 import { ProjectDetailSessionList } from '../projects/projectDetailSessionList';
 import { useSelector } from 'react-redux';
@@ -27,7 +29,7 @@ const useStyles = makeStyles(theme => ({
 const Routes = memo(() => {
   const classes = useStyles();
   const theme = useTheme();
-  const { headerHeight, setHeaderHeight, snackBarTitle, setSnackBarTitle } = useContext(HeaderContext);
+  const { headerHeight, setHeaderHeight, snackBarTitle, setSnackBarTitle, snackBarColor } = useContext(HeaderContext);
   const contentHeight = `calc(100vh - ${headerHeight}px - ${2 * theme.spacing(1)}px)`;
   const contentWidth = `100%`;
   const snapshot = useSelector(state => state.projectReducers.snapshot);
@@ -86,12 +88,18 @@ const Routes = memo(() => {
           'aria-describedby': 'message-id'
         }}
         message={<span id="message-id">{snackBarTitle}</span>}
-        action={[
+        action={
           <IconButton key="close" aria-label="close" color="inherit" onClick={handleCloseSnackbar}>
             <Close />
           </IconButton>
-        ]}
-      />
+        }
+      >
+        {snackBarColor !== snackbarColors.default && (
+          <Alert severity={snackBarColor} onClose={handleCloseSnackbar}>
+            {snackBarTitle}
+          </Alert>
+        )}
+      </Snackbar>
     </Box>
   );
 });

diff --git a/js/components/session/withSnapshotManagement.js b/js/components/session/withSnapshotManagement.js
@@ -8,6 +8,7 @@ import { savingStateConst } from './constants';
 import { NglContext } from '../nglView/nglProvider';
 import { HeaderContext } from '../header/headerContext';
 import { setTargetAndReloadSession, reloadScene, newSession } from './redux/dispatchActions';
+import { snackbarColors } from '../header/constants';
 
 /**
  * Created by ricgillams on 13/06/2018.
@@ -19,7 +20,7 @@ export const withSnapshotManagement = WrappedComponent => {
 
     const { pathname } = window.location;
     const { nglViewList } = useContext(NglContext);
-    const { setHeaderNavbarTitle, setHeaderButtons, setSnackBarTitle } = useContext(HeaderContext);
+    const { setHeaderNavbarTitle, setHeaderButtons, setSnackBarTitle, setSnackBarColor } = useContext(HeaderContext);
     const dispatch = useDispatch();
     const savingState = useSelector(state => state.apiReducers.savingState);
     const sessionTitle = useSelector(state => state.apiReducers.sessionTitle);
@@ -73,15 +74,7 @@ export const withSnapshotManagement = WrappedComponent => {
         setSnackBarTitle(null);
         setHeaderNavbarTitle('');
       };
-    }, [
-      disableButtons,
-      dispatch,
-      sessionTitle,
-      setHeaderNavbarTitle,
-      setHeaderButtons,
-      setSnackBarTitle,
-      targetIdList
-    ]);
+    }, [disableButtons, dispatch, sessionTitle, setHeaderNavbarTitle, setHeaderButtons, setSnackBarTitle, targetIdList, setSnackBarColor]);
 
     return <WrappedComponent {...rest} />;
   });

diff --git a/js/components/userFeedback/reportForm.js b/js/components/userFeedback/reportForm.js
@@ -15,6 +15,7 @@ import { createIssue } from './githubApi';
 import { canCaptureScreen, captureScreen, isFirefox, isChrome } from './browserApi';
 import { resetForm, setName, setEmail, setTitle, setDescription } from './redux/actions';
 import { useDispatch, useSelector } from 'react-redux';
+import { snackbarColors } from '../header/constants';
 
 const useStyles = makeStyles(theme => ({
   buttonGreen: {
@@ -71,7 +72,7 @@ export const ReportForm = memo(({ formType }) => {
 
   const dispatch = useDispatch();
   const formState = useSelector(state => state.issueReducers);
-  const { setSnackBarTitle } = useContext(HeaderContext);
+  const { setSnackBarTitle, setSnackBarColor } = useContext(HeaderContext);
 
   /* Specific form type functions */
   const isValidType = () => {
@@ -147,6 +148,7 @@ export const ReportForm = memo(({ formType }) => {
         </a>
       </>
     );
+    setSnackBarColor(snackbarColors.default);
     handleCloseForm();
   };