[$50] Skills drop-downs should load all the pages from Skills API once for all component instances #4213
Description
-
Load all skills
- We've updated the SkillsQuestion select to load skills from the Skills API V5 https://github.com/appirio-tech/connect-app/blob/dev/src/projects/detail/components/SkillsQuestion/SkillsQuestionBase.jsx#L55
- But Skills API only returns maximum 100 records per page.
- So we have to retrieve all the pages one by one to get all the skills, something like this https://github.com/topcoder-platform/u-bahn-es-processor/blob/562ed642a7fb8094eb4d6eebc0a4bfab47f587c8/src/common/helper.js#L44-L49
-
At the moment we are showing several instances of the skills questions, and each of them is loading skills for itself:
-
As now we would have to load several pages, there would be even more requests.
-
So we have to load skills only once for all the instances.
-
There is some caching is implemented, but it doesn't work when we are showing all the components at the same time. So we have to fix it. The fix could be to create a function which would return a promise and that promise would return skills loaded or cached:
// so the idea of code can be like this function getSkills() { if (!getSkills.cachedPromise) { getSkills.cachedPromise = new Promise(resolve, reject) { // load all skills pages resolve(skills); // reject(error) if error } } return getSkills.cachedPromise; } // inside component componentWillMount() { getSkills().then((skills) => { setOptions(....) }).catch(() => {...}) }
-
See the Skills Dropdown components by following this link https://connect.topcoder-dev.com/new-project/talent-as-a-service.