Commit 0717fd76 authored by Florent Chehab's avatar Florent Chehab
Browse files

Loading component added and tweaks

parent a7a9c61c
import React, { Component } from 'react';
import { connect } from "react-redux";
import Loading from './other/Loading';
import { Map, TileLayer, Marker, Popup, LayersControl, FeatureGroup, Circle, LayerGroup } from 'react-leaflet';
// import MarkerClusterGroup from 'react-leaflet-markercluster';
import {
......@@ -8,6 +9,7 @@ import {
} from '../actions/universities';
class UnivMap extends Component {
componentDidMount() {
if ( this.props.universities.length==0 || this.props.invalidated){
......@@ -24,21 +26,17 @@ class UnivMap extends Component {
}
}
componentWillUnmount() {
console.log("ça serait bien de save la config de la carte...");
}
render() {
if (this.props.hasError) {
return <p>Sorry! There was an error loading the items</p>;
}
if (this.props.isLoading || this.props.invalidated) {
return <p>Loading</p>;
return <Loading/>;
}
return (
......
......@@ -31,7 +31,6 @@ class UnivMapReloadButton extends Component {
}
}
const mapStateToProps = (state) => {
return {
invalidated: state.universitiesInvalidated
......
......@@ -8,6 +8,7 @@ import LocationCityIcon from '@material-ui/icons/LocationCity';
import PeopleIcon from '@material-ui/icons/People';
import BarChartIcon from '@material-ui/icons/BarChart';
import HomeIcon from '@material-ui/icons/Home';
import SearchIcon from '@material-ui/icons/Search';
import AssignmentIcon from '@material-ui/icons/Assignment';
import { NavLink } from 'react-router-dom'
......@@ -22,6 +23,7 @@ export const mainListItems = (
<ListItemText primary="Accueil" />
</ListItem>
</NavLink>
<NavLink to={'/app/map/'}>
<ListItem button>
<ListItemIcon>
......@@ -31,18 +33,27 @@ export const mainListItems = (
</ListItem>
</NavLink>
<ListItem button>
<ListItemIcon>
<SearchIcon />
</ListItemIcon>
<ListItemText primary="Recherche" />
</ListItem>
<ListItem button>
<ListItemIcon>
<LocationCityIcon />
</ListItemIcon>
<ListItemText primary="Université" />
</ListItem>
<ListItem button>
<ListItemIcon>
<PeopleIcon />
</ListItemIcon>
<ListItemText primary="????" />
</ListItem>
<ListItem button>
<ListItemIcon>
<BarChartIcon />
......
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import CircularProgress from '@material-ui/core/CircularProgress';
const styles = theme => ({
progress: {
margin: theme.spacing.unit * 2,
},
});
class Loading extends React.Component {
timer = null;
state = {
completed: 0,
};
componentDidMount() {
this.timer = setInterval(this.progress, 20);
}
componentWillUnmount() {
clearInterval(this.timer);
}
progress = () => {
const { completed } = this.state;
this.setState({ completed: completed >= 100 ? 0 : completed + 1 });
};
render() {
const { classes } = this.props;
return (
<div>
<CircularProgress
className={classes.progress}
variant="determinate"
size={50}
value={this.state.completed}
/>
</div>
);
}
}
Loading.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Loading);
\ No newline at end of file
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