Cleaned MyComponent solves #23

frontend/src/components/MyComponent.js

@@ -9,74 +9,70 @@ class MyComponent extends Component {
   __apiAttr = null;
   ignoreInvalidation = false;
 
-  getFetchedData(prop) {
-    return this.props[prop].fetched.data;
-  }
-
-  getAllFetchedData() {
-    let out = Object()
-    const { props } = this;
-    for (let prop_key in props) {
-      let prop = props[prop_key];
-      if (prop === Object(prop) && 'fetched' in prop) {
-        out[prop_key] = prop.fetched.data;
+  constructor(props) {
+    super(props);
+
+    // a little bit of optimization for later
+    this.fetchAbleProps = Array();
+    if (typeof props != 'undefined') {
+      const { fetchData } = props;
+      for (let propKey in fetchData) {
+        this.fetchAbleProps.push(propKey);
       }
     }
-    return out;
   }
 
-  joinCampus(campus) {
-    const { universities, countries, cities } = this.getAllFetchedData();
-    let res = Object.assign({}, campus); //copy for safety
-    res.university = universities[campus.university];
-    res.city = cities[campus.city]
-    res.country = countries[res.city.country]
-    return res;
+  // React default functions override
+  componentDidMount() {
+    this.loadPropsIfNeeded();
+    this.myComponentDidMount();
+    this.forceUpdate(); // bug otherwies
   }
+  myComponentDidMount() { };
 
-  getUnivCityAndCountry(univId) {
-    const univMainCampus = this.findMainCampus(univId);
-    const cities = this.getFetchedData("cities");
-    const countries = this.getFetchedData("countries");
-    const city = cities[univMainCampus.city];
-    const country = countries[city.country];
-    return { city, country }
+  shouldComponentUpdate(nextProps, nextState) {
+    if (this.nextProps && typeof this.nextProps.visible != 'undefined' && !this.nextProps.visible) {
+      // don't rerender components that won't be visible.
+      return false;
+    }
+    if (this.props.visible === false && !this.nextProps) {
+      // don't rerender components if it is still not visible
+      return false;
+    }
+    // if (this.nextProps && typeof this.nextProps.visible != 'undefined' && this.nextProps.visible) {
+    //   // render if nextprops should be visible
+    //   return true;
+    // }
+    return this.myShouldComponentUpdate(nextProps, nextState);
   }
+  myShouldComponentUpdate(nextProps, nextState) { return true; }
 
-  findMainCampus(univId) {
-    const mainCampuses = this.getFetchedData('mainCampuses');
-    for (let main_campus_pk in mainCampuses) {
-      const campus = mainCampuses[main_campus_pk]
-      if (campus.university == univId) {
-        return campus;
-      }
-    }
-    return null;
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    // TODO ajouter expire date
+    this.loadPropsIfNeeded();
+    this.myComponentDidUpdate(prevProps, prevState, snapshot);
   }
+  myComponentDidUpdate() { };
+
 
+  // General work on fetcheable props
   checkProps(val) {
-    const { props } = this;
-    for (let el in props) {
-      let prop = props[el];
-      if (prop === Object(prop) && val in prop && prop[val]) {
-        return true;
-      }
-    }
-    return false;
+    return this.fetchAbleProps.some((propKey) => {
+      return this.props[propKey][val]
+    })
   }
 
   checkPropsHasError() {
-    const { props } = this;
-    for (let prop_key in props) {
-      let prop = props[prop_key];
-      if (prop === Object(prop) && 'fetchHasError' in prop) {
-        if (prop.fetchHasError.status) {
-          if (prop_key in this.customErrorHandlers) {
-            console.log("icicicicici");
-            return this.customErrorHandlers[prop_key](prop.fetchHasError.error);
-          } else {
-            return true;
-          }
+    for (let idx in this.fetchAbleProps) {
+      const propKey = this.fetchAbleProps[idx];
+      const prop = this.props[propKey];
+
+      if (prop.fetchHasError.status) {
+        if (propKey in this.customErrorHandlers) {
+          console.log("icicicicici");
+          return this.customErrorHandlers[propKey](prop.fetchHasError.error);
+        } else {
+          return true;
         }
       }
     }
@@ -95,71 +91,93 @@ class MyComponent extends Component {
     return this.checkProps('isSaving');
   }
 
-  loadPropsIfNeeded(dontFetch = false) {
-    let propsLoaded = true;
-    if (this.checkPropsHasError()) {
-      return false;
+  propIsUsable(propKey) {
+    const prop = this.props[propKey];
+    if ((!prop.fetched.fetchedAt) || (!this.ignoreInvalidation && prop.invalidated)) {
+      return false
     }
+    return true;
+  }
+
+  propsThatNeedToBeFetch() {
+    return this.fetchAbleProps.filter((propKey) => {
+      const prop = this.props[propKey];
 
-    const { props } = this;
-    for (let prop_key in props) {
-      let prop = props[prop_key];
-      if (prop === Object(prop) && 'fetched' in prop) {
-        if ((!prop.fetched.fetchedAt) || (!this.ignoreInvalidation && prop.invalidated)) {
-          propsLoaded = false;
-          if (!dontFetch) {
-            if (!prop.isLoading) {
-              if (this.__apiAttr && this.__apiAttr[prop_key]) {
-                props.fetchData[prop_key](this.props[this.__apiAttr[prop_key]]);
-              } else {
-                props.fetchData[prop_key]();
-              }
-            }
-          }
+      if (!this.propIsUsable(propKey)) {
+        if (!prop.fetchHasError.status && !prop.isLoading) {
+          return true;
         }
       }
-    }
-    return propsLoaded;
+      return false;
+    })
+  }
+
+  loadPropsIfNeeded() {
+    this.propsThatNeedToBeFetch().map((propKey) => {
+      if (this.__apiAttr && this.__apiAttr[propKey]) {
+        this.props.fetchData[propKey](this.props[this.__apiAttr[propKey]]);
+      } else {
+        this.props.fetchData[propKey]();
+      }
+    })
   }
 
   allFetchedDataAreReady() {
-    return this.loadPropsIfNeeded(true);
+    return !this.fetchAbleProps.some((propKey) => {
+      if (!this.propIsUsable(propKey)) {
+        return true;
+      }
+      return false;
+    })
   }
 
-  componentDidMount() {
-    this.loadPropsIfNeeded();
-    this.myComponentDidMount();
-    this.forceUpdate(); // bug otherwies
+  getFetchedData(propKey) {
+    return this.props[propKey].fetched.data;
   }
-  myComponentDidMount() { };
 
-  shouldComponentUpdate(nextProps, nextState) {
-    if (this.nextProps && typeof this.nextProps.visible != 'undefined' && !this.nextProps.visible) {
-      // don't rerender components that won't be visible.
-      return false;
-    }
-    if (this.props.visible === false && !this.nextProps) {
-      // don't rerender components if it is still not visible
-      return false;
-    }
-    // if (this.nextProps && typeof this.nextProps.visible != 'undefined' && this.nextProps.visible) {
-    //   // render if nextprops should be visible
-    //   return true;
-    // }
-    return this.myShouldComponentUpdate(nextProps, nextState);
+  getAllFetchedData() {
+    let out = Object()
+    this.fetchAbleProps.map((propKey) => {
+      out[propKey] = this.props[propKey].fetched.data;
+    })
+    return out;
   }
-  myShouldComponentUpdate(nextProps, nextState){ return true; }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // TODO ajouter expire date
-    this.loadPropsIfNeeded();
-    this.myComponentDidUpdate(prevProps, prevState, snapshot);
+
+  // utilities functions shared by subclasses
+  joinCampus(campus) {
+    const { universities, countries, cities } = this.getAllFetchedData();
+    let res = Object.assign({}, campus); //copy for safety
+    res.university = universities[campus.university];
+    res.city = cities[campus.city]
+    res.country = countries[res.city.country]
+    return res;
+  }
+
+  getUnivCityAndCountry(univId) {
+    const univMainCampus = this.findMainCampus(univId);
+    const cities = this.getFetchedData("cities");
+    const countries = this.getFetchedData("countries");
+    const city = cities[univMainCampus.city];
+    const country = countries[city.country];
+    return { city, country }
+  }
+
+  findMainCampus(univId) {
+    const mainCampuses = this.getFetchedData('mainCampuses');
+    for (let mainCampusPk in mainCampuses) {
+      const campus = mainCampuses[mainCampusPk]
+      if (campus.university == univId) {
+        return campus;
+      }
+    }
+    return null;
   }
-  myComponentDidUpdate() { };
 
+  // Override of the default render behaviour to wait for data to arrive.
   render() {
     if (this.checkPropsHasError()) {
-      return <p>Sorry! There was an error loading the items</p>;
+      return <p>Une erreur est survenue lors du téléchargement des données. Merci de recharger la page et si l'erreur persiste, merci de contacter les administrateurs du site.</p>;
     }
 
     if (!this.allFetchedDataAreReady()) {