Commit f27fea4a authored by Florent Chehab's avatar Florent Chehab

Routing fully operationnal for University with error handling

parent 46c7d121
Pipeline #26986 passed with stages
in 2 minutes and 19 seconds
......@@ -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';
import {
SAVE_UNIVERSITY_BEING_VIEWED
} from "./action-types";
export function saveUniversityBeingViewed(univId) {
return {
type: SAVE_UNIVERSITY_BEING_VIEWED,
univId
};
}
......@@ -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>
......
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);
......@@ -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({
......
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;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment