fix: show loader for nearby spaces

closes #72
graasp · May 6, 2019 · 2397937 · 2397937
1 parent ead4dbc
commit 2397937
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 11 deletions.
diff --git a/src/actions/space/index.js b/src/actions/space/index.js
@@ -314,7 +314,7 @@ const getSpacesNearby = async ({
   radius = DEFAULT_RADIUS,
 }) => async dispatch => {
   try {
-    flagGettingSpacesNearby(true);
+    dispatch(flagGettingSpacesNearby(true));
 
     const url = `${GET_SPACES_NEARBY_ENDPOINT}?lat=${latitude}&lon=${longitude}&radius=${radius}`;
     const response = await fetch(url, DEFAULT_GET_REQUEST);
@@ -331,7 +331,7 @@ const getSpacesNearby = async ({
   } catch (err) {
     toastr.error(ERROR_MESSAGE_HEADER, ERROR_GETTING_SPACES_NEARBY);
   } finally {
-    dispatch(flagGettingSpace(false));
+    dispatch(flagGettingSpacesNearby(false));
   }
 };
 

diff --git a/src/components/SpacesNearby.js b/src/components/SpacesNearby.js
@@ -9,7 +9,6 @@ import Drawer from '@material-ui/core/Drawer';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
 import Divider from '@material-ui/core/Divider';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -19,6 +18,7 @@ import Styles from '../Styles';
 import MainMenu from './common/MainMenu';
 import { getSpacesNearby } from '../actions';
 import SpaceGrid from './space/SpaceGrid';
+import Loader from './common/Loader';
 
 class SpacesNearby extends Component {
   state = {
@@ -34,10 +34,12 @@ class SpacesNearby extends Component {
     dispatchGetSpacesNearby: PropTypes.func.isRequired,
     geolocation: PropTypes.instanceOf(Map),
     spaces: PropTypes.instanceOf(Set).isRequired,
+    activity: PropTypes.bool,
   };
 
   static defaultProps = {
     geolocation: Map(),
+    activity: false,
   };
 
   constructor(props) {
@@ -74,8 +76,23 @@ class SpacesNearby extends Component {
   };
 
   render() {
-    const { classes, theme, spaces } = this.props;
+    const { classes, theme, spaces, activity } = this.props;
     const { open } = this.state;
+
+    if (activity) {
+      return (
+        <div className={classNames(classes.root)} style={{ height: '100%' }}>
+          <CssBaseline />
+          <AppBar position="fixed">
+            <Toolbar />
+          </AppBar>
+          <main className="Main">
+            <Loader />
+          </main>
+        </div>
+      );
+    }
+
     return (
       <div className={classes.root}>
         <CssBaseline />
@@ -123,9 +140,6 @@ class SpacesNearby extends Component {
           })}
         >
           <div className={classes.drawerHeader} />
-          <Typography variant="h5" color="inherit">
-            Spaces Nearby
-          </Typography>
           <SpaceGrid spaces={spaces} />
         </main>
       </div>
@@ -134,8 +148,9 @@ class SpacesNearby extends Component {
 }
 
 const mapStateToProps = ({ User, Space }) => ({
-  spaces: Space.get('nearby'),
   geolocation: User.getIn(['current', 'geolocation']),
+  spaces: Space.getIn(['nearby', 'content']),
+  activity: Space.getIn(['nearby', 'activity']),
 });
 
 const mapDispatchToProps = {

diff --git a/src/reducers/SpaceReducer.js b/src/reducers/SpaceReducer.js
@@ -28,7 +28,10 @@ const INITIAL_STATE = Immutable.Map({
     deleted: false,
   }),
   saved: Immutable.Set(),
-  nearby: Immutable.Set(),
+  nearby: Immutable.Map({
+    content: Immutable.Set(),
+    activity: false,
+  }),
 });
 
 export default (state = INITIAL_STATE, { type, payload }) => {
@@ -63,9 +66,9 @@ export default (state = INITIAL_STATE, { type, payload }) => {
     case SAVE_SPACE_SUCCEEDED:
       return state.setIn(['current', 'content'], Immutable.Map(payload));
     case FLAG_GETTING_SPACES_NEARBY:
-      return state.setIn(['current', 'activity'], payload);
+      return state.setIn(['nearby', 'activity'], payload);
     case GET_SPACES_NEARBY_SUCCEEDED:
-      return state.setIn(['nearby'], payload);
+      return state.setIn(['nearby', 'content'], payload);
     default:
       return state;
   }