feat(graph): display a not found component for graphs not found

src/scenes/graph/components/not-found.component.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import Container from '@material-ui/core/Container';
+import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = (theme) => ({
+  title: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(4),
+  },
+  text: {
+    marginBottom: theme.spacing(2),
+  },
+});
+
+function NotFound({ classes }) {
+  return (
+    <Container>
+      <Typography component="h1" variant="h1" className={classes.title}>
+        Graph not found!
+      </Typography>
+      <Typography component="p" variant="body1" className={classes.text}>
+        That's unfortunate. If you are looking for a graph that was there before, remember that they are stored in your browser. Are you using a
+        different browser?
+      </Typography>
+      <Typography component="p" variant="body1" className={classes.text}>
+        To avoid accidental losses, remember that you can export your graphs from the top right corner and save them as JSON files into your computer
+        that you can then import into Grapher whenever you want.
+      </Typography>
+      <Link href="/">Go to your graphs</Link>
+    </Container>
+  );
+}
+
+export default withStyles(styles, { withTheme: true })(NotFound);

src/scenes/graph/graph.component.js

@@ -11,13 +11,20 @@ import Export from './components/export';
 import Onboarding from './components/onboarding';
 import GraphLarge from './components/graph-large.component';
 import GraphSmall from './components/graph-small.component';
+import NotFound from './components/not-found.component';
+
+export default function Graph({ graphId, graphName, loadedGraphId, loadGraph, openGraphList, loadError }) {
+  const theme = useTheme();
+  const bigScreen = useMediaQuery(theme.breakpoints.up('md'));
+
+  if (loadError) {
+    return <NotFound />;
+  }
 
-export default function Graph({ graphId, graphName, loadedGraphId, loadGraph, openGraphList, classes }) {
   if (!!graphId && graphId !== loadedGraphId) {
     loadGraph(graphId);
   }
-  const theme = useTheme();
-  const bigScreen = useMediaQuery(theme.breakpoints.up('md'));
+
   return (
     <>
       <Navbar title={graphName} onBack={openGraphList}>

src/scenes/graph/graph.component.spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { createShallow } from '@material-ui/core/test-utils';
 
 import Graph from './graph.component';
+import NotFound from './components/not-found.component';
 
 describe(Graph.name, () => {
   let shallow;
@@ -35,4 +36,9 @@ describe(Graph.name, () => {
     shallow(<Graph loadGraph={loadGraph} graphId={'foo'} loadedGraphId={'bar'} />);
     expect(loadGraph).toHaveBeenCalledWith('foo');
   });
+
+  it('returns the NotFound component if the loadError prop is true', () => {
+    const component = shallow(<Graph loadGraph={loadGraph} graphId={'foo'} loadedGraphId={'bar'} loadError={true} />);
+    expect(component.find(NotFound).getElement()).toBeDefined();
+  });
 });

src/scenes/graph/graph.container.js

@@ -3,14 +3,15 @@ import { withRouter } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 
 import Graph from './graph.component';
-import { loadGraph, getId, getName } from '../../ducks/graph';
+import { loadGraph, getId, getName, getLoadError } from '../../ducks/graph';
 import { openGraphList } from '../../ducks/navigation.duck';
 
 function mapStateToProps(state, ownProps) {
   return {
     graphId: ownProps.match.params.graphId,
     loadedGraphId: getId(state),
     graphName: getName(state),
+    loadError: getLoadError(state),
   };
 }