From 8aa7491f809bea84de45e6c6ef7b8f1b68abb085 Mon Sep 17 00:00:00 2001 From: Tibor Postek Date: Fri, 28 Feb 2020 10:41:53 +0100 Subject: [PATCH] #117 add snack bar for error handling --- js/components/errorHandling/errorBoundary.js | 43 +++++++------------ js/components/header/constants.js | 7 +++ js/components/header/headerContext.js | 6 ++- .../preview/redux/dispatchActions.js | 2 +- js/components/routes/Routes.js | 16 +++++-- .../session/withSnapshotManagement.js | 13 ++---- js/components/userFeedback/reportForm.js | 4 +- 7 files changed, 46 insertions(+), 45 deletions(-) create mode 100644 js/components/header/constants.js diff --git a/js/components/errorHandling/errorBoundary.js b/js/components/errorHandling/errorBoundary.js index 920c31e3a4..0e07697b48 100644 --- 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 ( - + <> {children} - -
-

Something went wrong - unexpected error. Please contact Fragalysis support!

-
{msg}
- - -
- - + {error !== null && ( + + {({ setSnackBarTitle, setSnackBarColor }) => { + setSnackBarTitle('Something went wrong!'); + setSnackBarColor(snackbarColors.default); + return null; + }} + + )} + ); } } diff --git a/js/components/header/constants.js b/js/components/header/constants.js new file mode 100644 index 0000000000..8a33eb5a06 --- /dev/null +++ b/js/components/header/constants.js @@ -0,0 +1,7 @@ +export const snackbarColors = { + default: 'default', + error: 'error', + warning: 'warning', + info: 'info', + success: 'success' +}; diff --git a/js/components/header/headerContext.js b/js/components/header/headerContext.js index 1dabc46a85..7fc0a3d040 100644 --- 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 ( { 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 index ce10662594..2cfe41abe9 100644 --- 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 index 987d8e404b..615b52c9a5 100644 --- 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={{snackBarTitle}} - action={[ + action={ - ]} - /> + } + > + {snackBarColor !== snackbarColors.default && ( + + {snackBarTitle} + + )} + ); }); diff --git a/js/components/session/withSnapshotManagement.js b/js/components/session/withSnapshotManagement.js index e63b415047..db74448cd7 100644 --- 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 ; }); diff --git a/js/components/userFeedback/reportForm.js b/js/components/userFeedback/reportForm.js index de0bb98129..5463cd971d 100644 --- 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 }) => { ); + setSnackBarColor(snackbarColors.default); handleCloseForm(); };