From 619dd7d0a67806886eb48fee3ffba7b2515b9122 Mon Sep 17 00:00:00 2001 From: Florent Chehab Date: Mon, 27 Aug 2018 15:40:47 +0200 Subject: [PATCH] Cleaned some JS and better POO --- frontend/generate/generate_frontend_files.py | 11 +++-- frontend/generate/templates/actions.tpl | 4 +- frontend/src/components/App.js | 6 +-- frontend/src/components/MyComponent.js | 24 +++++++++ frontend/src/components/map/UnivMap.js | 52 ++++++++------------ 5 files changed, 58 insertions(+), 39 deletions(-) create mode 100644 frontend/src/components/MyComponent.js diff --git a/frontend/generate/generate_frontend_files.py b/frontend/generate/generate_frontend_files.py index 937225f4..f145c726 100644 --- a/frontend/generate/generate_frontend_files.py +++ b/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/" } ] diff --git a/frontend/generate/templates/actions.tpl b/frontend/generate/templates/actions.tpl index 27236f57..ecd4750e 100644 --- a/frontend/generate/templates/actions.tpl +++ b/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); diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js index 21a3cbf6..35d2a15c 100644 --- a/frontend/src/components/App.js +++ b/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()), }; }; diff --git a/frontend/src/components/MyComponent.js b/frontend/src/components/MyComponent.js new file mode 100644 index 00000000..12438757 --- /dev/null +++ b/frontend/src/components/MyComponent.js @@ -0,0 +1,24 @@ +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; diff --git a/frontend/src/components/map/UnivMap.js b/frontend/src/components/map/UnivMap.js index b1362b01..48f82056 100644 --- a/frontend/src/components/map/UnivMap.js +++ b/frontend/src/components/map/UnivMap.js @@ -1,4 +1,5 @@ -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

Sorry! There was an error loading the items

; } - if (this.props.universitiesIsLoading || this.props.universitiesInvalidated) { - return ; - } - - - if (this.props.mainCampusIsLoading || this.props.mainCampusInvalidated) { + if (this.checkPropsIsLoading()) { return ; } @@ -91,7 +90,7 @@ class UnivMap extends Component { - + ); @@ -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)) }; -- GitLab