Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Rex Dri
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Environments
Packages & Registries
Packages & Registries
Container Registry
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Julien Jerphanion
Rex Dri
Commits
ff58b6fd
Commit
ff58b6fd
authored
Sep 16, 2018
by
Florent Chehab
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Cleaned MyComponent solves #23
parent
6dfa5edc
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
120 additions
and
102 deletions
+120
-102
frontend/src/components/MyComponent.js
frontend/src/components/MyComponent.js
+120
-102
No files found.
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()) {
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment