Cleaned some JS and better POO

frontend/generate/generate_frontend_files.py

@@ -35,13 +35,18 @@ templates = [
     'combinedReducers'
 ]
 
+API_BASE = "http://127.0.0.1:8000/api/"
+
 contexts = [
     {
-        'name': 'universities'
+        'name': 'universities',
+        'api_url': API_BASE + "university/"
     }, {
-        'name': 'countries'
+        'name': 'countries',
+        'api_url': API_BASE + "country/"
     }, {
-        'name': 'mainCampus'
+        'name': 'mainCampus',
+        'api_url': API_BASE + "main_campus/"
     }
 ]
 

frontend/generate/templates/actions.tpl

@@ -46,11 +46,11 @@ export function {{obj.name}}FetchDataSuccess({{obj.name}}) {
 }
 
 
-export function {{obj.name}}FetchData(url) {
+export function {{obj.name}}FetchData(pk="") {
     return (dispatch) => {
         dispatch({{obj.name}}IsLoading(true));
 
-        fetch(url)
+        fetch("{{obj.api_url}}"+pk)
             .then((response) => {
                 if (!response.ok) {
                     throw Error(response.statusText);

frontend/src/components/App.js

@@ -115,7 +115,7 @@ class App extends React.Component {
     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');
+            this.props.fetchData();
         }
     }
 
@@ -123,7 +123,7 @@ class App extends React.Component {
         // TODO ajouter expire date
 
         if (this.props.countries.invalidated) {
-            this.props.countries.fetchData('http://127.0.0.1:8000/api/country');
+            this.props.countries.fetchData();
         }
     }
 
@@ -211,7 +211,7 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
     return {
-        fetchData: (url) => dispatch(countriesFetchData(url)),
+        fetchData: () => dispatch(countriesFetchData()),
     };
 };
 

frontend/src/components/MyComponent.js

+import React, { Component } from 'react';
+
+class MyComponent extends Component {
+
+    checkProps(val) {
+        for (let el in this.props) {
+            let prop = this.props[el];
+            if (val in prop && prop[val]) {
+                return true;
+            }
+        }
+        return false;
+    }
+    checkPropsHasError() {
+        return this.checkProps('hasError');
+    }
+
+    checkPropsIsLoading() {
+        return this.checkProps('isLoading');
+    }
+}
+
+
+export default MyComponent;

frontend/src/components/map/UnivMap.js

-import React, { Component } from 'react';
+import React from 'react';
+import MyComponent from '../MyComponent'
 import { connect } from "react-redux";
 import Loading from '../other/Loading';
 import { Map, TileLayer, Marker, Popup, LayersControl, FeatureGroup, Circle, LayerGroup } from 'react-leaflet';
@@ -12,25 +13,28 @@ import {
 import UnivMarkers from './UnivMakers';
 
 
-class UnivMap extends Component {
+class UnivMap extends MyComponent {
 
     componentDidMount() {
-        if (this.props.universities.length == 0 || this.props.invalidated) {
-            this.props.fetchUniversitiesData('http://127.0.0.1:8000/api/university');
+        let univ_data = this.props.universities.fetched.universities;
+        if (univ_data.length == 0 || this.props.universities.invalidated) {
+            this.props.fetchUniversities();
         }
-        if (this.props.mainCampus.length == 0 || this.props.invalidated) {
-            this.props.fetchMainCampusData('http://127.0.0.1:8000/api/main_campus');
+
+        let main_campus_data = this.props.mainCampus.fetched.mainCampus;
+        if (main_campus_data.length == 0 || this.props.mainCampus.invalidated) {
+            this.props.fetchMainCampus();
         }
     }
 
     componentDidUpdate() {
         // TODO ajouter expire date
 
-        if (this.props.universitiesInvalidated) {
-            this.props.fetchUniversitiesData('http://127.0.0.1:8000/api/university');
+        if (this.props.universities.invalidated) {
+            this.props.fetchUniversities();
         }
-        if (this.props.mainCampusInvalidated) {
-            this.props.fetchMainCampusData('http://127.0.0.1:8000/api/main_campus');
+        if (this.props.mainCampus.invalidated) {
+            this.props.fetchMainCampus();
         }
     }
 
@@ -39,16 +43,11 @@ class UnivMap extends Component {
     }
 
     render() {
-        if (this.props.universitiesHasError || this.props.mainCampusHasError) {
+        if (this.checkPropsHasError()) {
             return <p>Sorry! There was an error loading the items</p>;
         }
 
-        if (this.props.universitiesIsLoading || this.props.universitiesInvalidated) {
-            return <Loading />;
-        }
-
-
-        if (this.props.mainCampusIsLoading || this.props.mainCampusInvalidated) {
+        if (this.checkPropsIsLoading()) {
             return <Loading />;
         }
 
@@ -91,7 +90,7 @@ class UnivMap extends Component {
                     </LayersControl.BaseLayer>
 
                 </LayersControl>
-                <UnivMarkers/>
+                <UnivMarkers />
             </Map>
 
         );
@@ -101,24 +100,15 @@ class UnivMap extends Component {
 
 const mapStateToProps = (state) => {
     return {
-        universities: state.universities.fetched.universities,
-        universitiesFetchedAt: state.universities.fetched.fetchedAt,
-        universitiesHasError: state.universities.hasError,
-        universitiesIsLoading: state.universities.isLoading,
-        universitiesInvalidated: state.universities.invalidated,
-
-        mainCampus: state.mainCampus.fetched.mainCampus,
-        mainCampusFetchedAt: state.mainCampus.fetched.fetchedAt,
-        mainCampusHasError: state.mainCampus.hasError,
-        mainCampusIsLoading: state.mainCampus.isLoading,
-        mainCampusInvalidated: state.mainCampus.invalidated,
+        universities: state.universities,
+        mainCampus: state.mainCampus,
     };
 };
 
 const mapDispatchToProps = (dispatch) => {
     return {
-        fetchUniversitiesData: (url) => dispatch(universitiesFetchData(url)),
-        fetchMainCampusData: (url) => dispatch(mainCampusFetchData(url)),
+        fetchUniversities: () => dispatch(universitiesFetchData()),
+        fetchMainCampus: () => dispatch(mainCampusFetchData()),
         // invalidateUniversities: (bool) => dispatch(universitiesInvalidated(bool)),
         // invalidateMainCampus: (bool) => dispatch(mainCampusInvalidated(bool))
     };