Skip to content

Commit

Permalink
feat(graph): display a not found component for graphs not found
Browse files Browse the repository at this point in the history
  • Loading branch information
davidballester committed Nov 15, 2019
1 parent 5c83142 commit 01eff77
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 4 deletions.
37 changes: 37 additions & 0 deletions src/scenes/graph/components/not-found.component.js
Original file line number Diff line number Diff line change
@@ -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);
13 changes: 10 additions & 3 deletions src/scenes/graph/graph.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
6 changes: 6 additions & 0 deletions src/scenes/graph/graph.component.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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();
});
});
3 changes: 2 additions & 1 deletion src/scenes/graph/graph.container.js
Original file line number Diff line number Diff line change
Expand Up @@ -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),
};
}

Expand Down

0 comments on commit 01eff77

Please sign in to comment.