Routing fully operationnal for University with error handling

frontend/src/actions/action-types.js

@@ -3,3 +3,4 @@ export const SAVE_SELECTED_UNIVERSITIES = 'SAVE_SELECTED_UNIVERSITIES';
 export const SAVE_FILTER_CONFIG = 'SAVE_FILTER_CONFIG';
 export const SAVE_APP_THEME = 'SAVE_APP_THEME';
 export const SAVE_APP_COLOR_PICKER = 'SAVE_APP_COLOR_PICKER';
+export const SAVE_UNIVERSITY_BEING_VIEWED = 'SAVE_UNIVERSITY_BEING_VIEWED';

frontend/src/actions/universityPage.js

+
+import {
+    SAVE_UNIVERSITY_BEING_VIEWED
+} from "./action-types";
+
+
+export function saveUniversityBeingViewed(univId) {
+    return {
+        type: SAVE_UNIVERSITY_BEING_VIEWED,
+        univId
+    };
+}

frontend/src/components/App.js

@@ -23,6 +23,7 @@ import MyComponent from './MyComponent'
 // import route Components here
 import {
   Route,
+  Redirect
 } from 'react-router-dom';
 
 import {
@@ -164,6 +165,12 @@ class App extends MyComponent {
             <Route path="/app/search" component={PageSearch} />
             <Route path="/app/map" component={PageMap} />
             <Route path="/app/university/:id" component={PageUniversity} />
+
+            <Route
+              exact
+              path="/app/university/"
+              render={() => (<Redirect to="/app/university/undefined" />)}
+            />
             <Route path="/app/filter" component={PageFilter} />
             <Route path="/app/settings" component={PageSettings} />
           </main>

frontend/src/components/pages/PageUniversity.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
+import MyComponent from '../MyComponent';
+import { connect } from "react-redux";
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Button from '@material-ui/core/Button';
 
-const styles = theme => ({
-    myPaper: {
-        padding: 16
+import {
+  NavLink,
+  Redirect
+} from 'react-router-dom';
+
+import {
+  universitiesFetchData,
+} from '../../generated/actions';
+
+import {
+  saveUniversityBeingViewed
+} from '../../actions/universityPage';
+
+
+function renderUniversityNotFound() {
+  return (
+    <Dialog
+      open={true}
+      //onClose={this.handleClose}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogTitle id="alert-dialog-title">{"L'université demandée n'est pas reconnue !"}</DialogTitle>
+      <DialogActions>
+        <NavLink to="/app/university">
+          <Button variant="contained" color="primary">
+            C'est noté, ramenez-moi sur le droit chemin.
+          </Button>
+        </NavLink>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+function renderUniversityUndefinedButHavePrevious(univId) {
+  return (
+    <Redirect to={"/app/university/" + univId} />
+  )
+}
+
+function renderFirstTimeHere() {
+  return (
+    <Paper>
+      <Typography >
+        C'est la première fois que vous utilisé cet onglet et vous n'avez pas encore util....
+      </Typography>
+    </Paper>
+  )
+}
+
+function renderDefaultView(univId) {
+  return (
+    <Paper>
+
+      <Typography variant="display1">
+        Université {univId}
+      </Typography>
+
+    </Paper>
+  );
+}
+
+class PageUniversity extends MyComponent {
+
+  myComponentDidUpdate() {
+    if (this.props.universities.fetched.fetchedAt) {
+      // we have the university data
+      const { universities } = this.getAllFetchedData();
+      const { match, universityBeingViewed } = this.props;
+      const requestedUniversity = match.params.id;
+      if (requestedUniversity != 'undefined' && requestedUniversity in universities && requestedUniversity != universityBeingViewed) {
+        this.props.saveUniversityInView(requestedUniversity);
+      }
     }
-});
 
-class PageUniversity extends React.Component {
-    render() {
-        const { classes, match } = this.props;
-        return (
-            <Paper className={classes.myPaper}>
+  }
 
-                <Typography variant="display1">
-                    Université {match.params.id}
-                </Typography>
+  myRender() {
+    const { match, universityBeingViewed } = this.props;
+    const requestedUnivId = match.params.id;
+    const { universities } = this.getAllFetchedData();
 
-            </Paper>
-        );
+    if (requestedUnivId == 'undefined') {
+      if (universityBeingViewed != null) {
+        return renderUniversityUndefinedButHavePrevious(universityBeingViewed);
+      } else {
+        return renderFirstTimeHere();
+      }
+    } else {
+      if (requestedUnivId in universities) {
+        return renderDefaultView(requestedUnivId);
+      } else {
+        return renderUniversityNotFound();
+      }
     }
+  }
 }
 
 PageUniversity.propTypes = {
-    classes: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired,
+};
+
+
+
+const mapStateToProps = (state) => {
+  return {
+    universities: state.universities,
+    universityBeingViewed: state.app.universityBeingViewed
+    // mainCampuses: state.mainCampuses,
+    // cities: state.cities,
+    // countries: state.countries
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    fetchData: {
+      universities: () => dispatch(universitiesFetchData()),
+      // mainCampuses: () => dispatch(mainCampusesFetchData()),
+      // cities: () => dispatch(citiesFetchData()),
+      // countries: () => dispatch(countriesFetchData())
+    },
+    saveUniversityInView: (univId) => dispatch(saveUniversityBeingViewed(univId))
+  };
 };
 
-export default withStyles(styles)(PageUniversity);
+export default connect(mapStateToProps, mapDispatchToProps, null, {
+  pure: false
+})(PageUniversity);

frontend/src/reducers/index.js

@@ -15,13 +15,15 @@ import { saveMainMapPosition } from './map';
 import { saveSelectedUniversities } from './filter';
 import { saveFilterConfig } from './filter';
 import { saveAppTheme, saveAppColorPicker } from './theme';
+import { saveUniversityBeingViewed } from './universityPage';
 
 const appReducers = combineReducers({
   mainMap: saveMainMapPosition,
   selectedUniversities: saveSelectedUniversities,
   filter: saveFilterConfig,
   appTheme: saveAppTheme,
-  colorPickerState: saveAppColorPicker
+  colorPickerState: saveAppColorPicker,
+  universityBeingViewed: saveUniversityBeingViewed
 })
 
 const rootReducer = combineReducers({

frontend/src/reducers/universityPage.js

+import { SAVE_UNIVERSITY_BEING_VIEWED } from '../actions/action-types'
+
+export function saveUniversityBeingViewed(state = null, action) {
+    switch (action.type) {
+        case SAVE_UNIVERSITY_BEING_VIEWED:
+            return action.univId
+
+        default:
+            return state;
+    }
+}
+