Skip to content

GitLab

Commit ff58b6fd authored by Florent Chehab's avatar Florent Chehab
Browse files

Cleaned MyComponent solves #23

parent 6dfa5edc
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 102 deletions
frontend/src/components/MyComponent.js
View file @ ff58b6fd
......@@ -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()) {
......
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