Loading countries added

frontend/src/actions/countries.js

+import {
+    COUNTRIES_HAS_ERROR,
+    COUNTRIES_IS_LOADING,
+    COUNTRIES_FETCH_DATA_SUCCESS,
+    COUNTRIES_INVALIDATED
+} from "../constants/action-types";
+
+
+export function countriesHasError(bool) {
+    return {
+        type: COUNTRIES_HAS_ERROR,
+        hasError: bool
+    };
+}
+
+export function countriesIsLoading(bool) {
+    return {
+        type: COUNTRIES_IS_LOADING,
+        isLoading: bool
+    };
+}
+
+export function countriesInvalidated(bool) {
+    return {
+        type: COUNTRIES_INVALIDATED,
+        invalidated: bool
+    };
+}
+
+export function countriesFetchDataSuccess(countries) {
+    countriesInvalidated(false)
+
+    return {
+        type: COUNTRIES_FETCH_DATA_SUCCESS,
+        countries,
+        countriesFetchedAt: Date.now()
+    };
+}
+
+
+export function countriesFetchData(url) {
+    return (dispatch) => {
+        dispatch(countriesIsLoading(true));
+
+        fetch(url)
+            .then((response) => {
+                if (!response.ok) {
+                    throw Error(response.statusText);
+                }
+
+                dispatch(countriesIsLoading(false));
+
+                return response;
+            })
+            .then((response) => response.json())
+            .then((countries) => {
+                dispatch(countriesInvalidated(false));
+                dispatch(countriesFetchDataSuccess(countries));
+            })
+            .catch(() => dispatch(countriesHasError(true)));
+    };
+}
\ No newline at end of file

frontend/src/components/App.js

@@ -16,12 +16,21 @@ import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import SchoolIcon from '@material-ui/icons/School';
 import { mainListItems, secondaryListItems } from './template/listItems';
 
+import { connect } from "react-redux";
+import Loading from './other/Loading';
+
+
 // import route Components here
 import {
     BrowserRouter as Router,
     Route,
 } from 'react-router-dom';
 
+import {
+    countriesFetchData,
+} from '../actions/countries';
+
+
 import PageMap from './pages/PageMap';
 import PageHome from './pages/PageHome';
 
@@ -103,7 +112,34 @@ class App extends React.Component {
         this.setState({ open: false });
     };
 
+    componentDidMount() {
+        if (this.props.countries.countries.length == 0 || this.props.invalidated) {
+            console.log("here mother uc", this.props.countries.countries);
+            this.props.fetchData('http://127.0.0.1:8000/api/country');
+        }
+    }
+
+    componentDidUpdate() {
+        // TODO ajouter expire date
+
+        if (this.props.countries.invalidated) {
+            this.props.countries.fetchData('http://127.0.0.1:8000/api/country');
+        }
+    }
+
+    componentWillUnmount() {
+        console.log("ça serait bien de save la config de la carte...");
+    }
+
     render() {
+        if (this.props.countries.hasError) {
+            return <p>Sorry! There was an error loading the items</p>;
+        }
+
+        if (this.props.countries.isLoading || this.props.countries.invalidated) {
+            return <Loading />;
+        }
+
         const { classes } = this.props;
 
         return (
@@ -160,4 +196,23 @@ App.propTypes = {
     classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(App);
+
+const mapStateToProps = (state) => {
+    return {
+        countries: {
+            countries: state.countriesFetched.countries,
+            fetchedAt: state.countriesFetched.fetchedAt,
+            hasError: state.countriesHasError,
+            isLoading: state.countriesIsLoading,
+            invalidated: state.countriesInvalidated
+        }
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        fetchData: (url) => dispatch(countriesFetchData(url)),
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(App));

frontend/src/components/map/UnivMap.js

@@ -3,25 +3,25 @@ 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 { 
+import {
     universitiesFetchData,
     universitiesInvalidated
- } from '../../actions/universities';
+} from '../../actions/universities';
 
 
 
 class UnivMap extends Component {
     componentDidMount() {
-        if ( this.props.universities.length==0 || this.props.invalidated){
+        if (this.props.universities.length == 0 || this.props.invalidated) {
             console.log("here mother uc", this.props.universities);
             this.props.fetchData('http://127.0.0.1:8000/api/university');
         }
     }
 
-    componentDidUpdate(){
+    componentDidUpdate() {
         // TODO ajouter expire date
 
-        if (this.props.invalidated){
+        if (this.props.invalidated) {
             this.props.fetchData('http://127.0.0.1:8000/api/university');
         }
     }
@@ -36,7 +36,7 @@ class UnivMap extends Component {
         }
 
         if (this.props.isLoading || this.props.invalidated) {
-            return <Loading/>;
+            return <Loading />;
         }
 
         return (

frontend/src/constants/action-types.js

@@ -2,3 +2,8 @@ export const UNIVERSITIES_HAS_ERROR = 'UNIVERSITIES_HAS_ERROR'
 export const UNIVERSITIES_IS_LOADING = 'UNIVERSITIES_IS_LOADING'
 export const UNIVERSITIES_FETCH_DATA_SUCCESS = 'UNIVERSITIES_FETCH_DATA_SUCCESS'
 export const UNIVERSITIES_INVALIDATED = 'UNIVERSITIES_INVALIDATED'
+
+export const COUNTRIES_HAS_ERROR = 'COUNTRIES_HAS_ERROR'
+export const COUNTRIES_IS_LOADING = 'COUNTRIES_IS_LOADING'
+export const COUNTRIES_FETCH_DATA_SUCCESS = 'COUNTRIES_FETCH_DATA_SUCCESS'
+export const COUNTRIES_INVALIDATED = 'COUNTRIES_INVALIDATED'

frontend/src/reducers/countries.js

+import {
+    COUNTRIES_HAS_ERROR,
+    COUNTRIES_IS_LOADING,
+    COUNTRIES_FETCH_DATA_SUCCESS,
+    COUNTRIES_INVALIDATED
+} from "../constants/action-types";
+
+
+export function countriesHasError(state = false, action) {
+    switch (action.type) {
+        case COUNTRIES_HAS_ERROR:
+            return action.hasError;
+
+        default:
+            return state;
+    }
+}
+
+export function countriesIsLoading(state = false, action) {
+    switch (action.type) {
+        case COUNTRIES_IS_LOADING:
+            return action.isLoading;
+
+        default:
+            return state;
+    }
+}
+
+export function countriesInvalidated(state = false, action) {
+    switch (action.type) {
+        case COUNTRIES_INVALIDATED:
+            return action.invalidated;
+
+        default:
+            return state;
+    }
+}
+
+export function countriesFetched(state = { countries: [], countriesFetchedAt: null }, action) {
+    switch (action.type) {
+        case COUNTRIES_FETCH_DATA_SUCCESS:
+            return {
+                countries: action.countries,
+                fetchedAt: action.countriesFetchedAt
+            }
+
+        default:
+            return state;
+    }
+}
\ No newline at end of file

frontend/src/reducers/index.js

@@ -6,12 +6,23 @@ import {
   universitiesInvalidated
 } from './universities';
 
+import { 
+  countriesFetched, 
+  countriesHasError, 
+  countriesIsLoading,
+  countriesInvalidated
+} from './countries';
+
 
 const rootReducer = combineReducers({
   universitiesFetched,
   universitiesHasError,
   universitiesIsLoading,
-  universitiesInvalidated
+  universitiesInvalidated,
+  countriesFetched, 
+  countriesHasError, 
+  countriesIsLoading,
+  countriesInvalidated
 })
 
 export default rootReducer