fix: do not fetch from api if space is saved

closes #95

src/Home.js

@@ -116,7 +116,7 @@ class Home extends Component {
           })}
         >
           <div className={classes.drawerHeader} />
-          <SpaceGrid spaces={spaces} />
+          <SpaceGrid spaces={spaces} saved />
         </main>
       </div>
     );

src/actions/space.js

@@ -299,8 +299,9 @@ const loadSpace = ({ fileLocation }) => dispatch => {
   });
 };
 
-const getSpace = ({ id }) => dispatch => {
-  if (window.navigator.onLine) {
+const getSpace = ({ id, saved = false }) => dispatch => {
+  // only get the space from the api if not saved
+  if (!saved) {
     dispatch(getRemoteSpace({ id }));
   } else {
     dispatch(getLocalSpace({ id }));

src/components/phase/Phase.js

@@ -37,6 +37,7 @@ class Phase extends Component {
   render() {
     const { phase, space, dispatchSelectPhase, start } = this.props;
     const phases = space.get('phases');
+    const saved = space.get('saved');
     const lang = space.get('language');
     const description = space.get('description');
     if (!phase || phase.isEmpty()) {
@@ -47,6 +48,7 @@ class Phase extends Component {
           selectPhase={dispatchSelectPhase}
           start={start}
           lang={lang}
+          saved={saved}
         />
       );
     }

src/components/space/SpaceGrid.js

@@ -32,10 +32,12 @@ class SpaceGrid extends Component {
     history: PropTypes.shape({ length: PropTypes.number.isRequired })
       .isRequired,
     dispatchClearSpace: PropTypes.func.isRequired,
+    saved: PropTypes.bool,
   };
 
   static defaultProps = {
     folder: null,
+    saved: false,
   };
 
   componentDidMount() {
@@ -78,7 +80,7 @@ class SpaceGrid extends Component {
   };
 
   render() {
-    const { spaces, classes, history } = this.props;
+    const { spaces, classes, history, saved } = this.props;
 
     // spaces is a set to mapping through it will return a set
     const MediaCards = spaces.map(space => {
@@ -90,7 +92,7 @@ class SpaceGrid extends Component {
           size="large"
           color="primary"
           id={id}
-          onClick={() => replace(`/space/${id}`)}
+          onClick={() => replace(`/space/${id}?saved=${saved}`)}
           fullWidth
         >
           <RemoveRedEyeIcon className={classes.leftIcon} />
@@ -118,7 +120,7 @@ class SpaceGrid extends Component {
       );
     }
     return (
-      <Grid container spacing={16}>
+      <Grid container spacing={6}>
         {MediaCards}
       </Grid>
     );

src/components/space/SpaceScreen.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import Qs from 'qs';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -57,6 +58,9 @@ class SpaceScreen extends Component {
         id: PropTypes.string.isRequired,
       }),
     }).isRequired,
+    location: PropTypes.shape({
+      search: PropTypes.string.isRequired,
+    }).isRequired,
     history: PropTypes.shape({ length: PropTypes.number.isRequired })
       .isRequired,
   };
@@ -66,9 +70,13 @@ class SpaceScreen extends Component {
       match: {
         params: { id },
       },
+      location: { search },
       dispatchGetSpace,
     } = this.props;
-    dispatchGetSpace({ id });
+
+    // tell action creator if this space has already been saved
+    const { saved } = Qs.parse(search, { ignoreQueryPrefix: true });
+    dispatchGetSpace({ id, saved: saved === 'true' });
   }
 
   componentDidUpdate() {
@@ -137,7 +145,7 @@ class SpaceScreen extends Component {
     const phases = space.get('phases') || [];
     //  const description = space.get('description');
     return (
-      <div className={classes.root} style={{ height: '100%' }}>
+      <div className={classes.root}>
         <CssBaseline />
         <SpaceHeader
           handleDrawerOpen={this.handleDrawerOpen}