From 478debac3cd87db98a56ee51ada9f23ea09c8839 Mon Sep 17 00:00:00 2001
From: Vigneshkumar Chinnachamy M <chinnachamy.vignesh@gmail.com>
Date: Sun, 13 Dec 2020 02:36:22 +0530
Subject: [PATCH 1/3] load and cache all skills for skills question

---
 src/api/skills.js                             | 48 +++++++++++++++++++
 .../SkillsQuestion/SkillsQuestionBase.jsx     | 28 ++++-------
 2 files changed, 57 insertions(+), 19 deletions(-)
 create mode 100644 src/api/skills.js

diff --git a/src/api/skills.js b/src/api/skills.js
new file mode 100644
index 000000000..d912a1572
--- /dev/null
+++ b/src/api/skills.js
@@ -0,0 +1,48 @@
+import { TC_API_URL, SKILL_PROVIDER_ID } from '../config/constants'
+import { axiosInstance as axios } from './requestInterceptor'
+
+const skillPageSize = 100
+let cachedSkillsAsPromise
+
+/**
+ * Loads and caches all the skills the first time. Returns the skills list from the cache from the second time.
+ */
+export function getSkills() {
+  cachedSkillsAsPromise = cachedSkillsAsPromise || getAllSkills().catch(ex => {
+    console.error('Error loading skills', ex)
+    cachedSkillsAsPromise = null
+  })
+
+  return cachedSkillsAsPromise
+}
+
+/**
+ * Recursively loads all the pages from skills api.
+ */
+function getAllSkills() {
+  let skills = []
+
+  return new Promise((resolve, reject) => {
+    const loop = (page) => getSkillsPage(page)
+      .then((skillResponse) => {
+        skills = skills.concat(skillResponse.data)
+        if (skillResponse.data.length === skillPageSize) {
+          page++
+          loop(page)
+        } else {
+          resolve(skills)
+        }
+      })
+      .catch(ex => reject(ex))
+
+    loop(1)
+  })
+}
+
+/**
+ * Loads the skills in the given page.
+ * @param {number} page The page number to load
+ */
+function getSkillsPage(page) {
+  return axios.get(`${TC_API_URL}/v5/skills?skillProviderId=${SKILL_PROVIDER_ID}&perPage=${skillPageSize}&orderBy=name&page=${page}`)
+}
\ No newline at end of file
diff --git a/src/projects/detail/components/SkillsQuestion/SkillsQuestionBase.jsx b/src/projects/detail/components/SkillsQuestion/SkillsQuestionBase.jsx
index 684f11c0a..2c99acac5 100644
--- a/src/projects/detail/components/SkillsQuestion/SkillsQuestionBase.jsx
+++ b/src/projects/detail/components/SkillsQuestion/SkillsQuestionBase.jsx
@@ -3,11 +3,8 @@ import _ from 'lodash'
 import SkillsCheckboxGroup from './SkillsCheckboxGroup'
 import Select from '../../../../components/Select/Select'
 import './SkillsQuestion.scss'
-import { axiosInstance as axios } from '../../../../api/requestInterceptor'
-import { TC_API_URL, SKILL_PROVIDER_ID } from '../../../../config/constants'
 import { createFilter } from 'react-select'
-
-let cachedOptions
+import { getSkills } from '../../../../api/skills'
 
 /**
  * If `categoriesMapping` is defined - filter options using selected categories.
@@ -42,7 +39,7 @@ class SkillsQuestion extends React.PureComponent {
   constructor(props) {
     super(props)
     this.state = {
-      options: cachedOptions || [],
+      options: [],
       availableOptions: [],
       customOptionValue: '',
     }
@@ -51,20 +48,13 @@ class SkillsQuestion extends React.PureComponent {
   }
 
   componentWillMount() {
-    if (!cachedOptions) {
-      axios.get(`${TC_API_URL}/v5/skills?skillProviderId=${SKILL_PROVIDER_ID}&perPage=100&orderBy=name`)
-        .then(resp => {
-          const options = _.get(resp, 'data', [])
-
-          cachedOptions = options.map((option) => ({
-            skillId: option.id,
-            name: option.name
-          }))
-          this.updateOptions(cachedOptions)
-        })
-    } else {
-      this.updateOptions(cachedOptions)
-    }
+    getSkills().then(skills => {
+      const options = skills.map(skill => ({
+        skillId: skill.id,
+        name: skill.name
+      }))
+      this.updateOptions(options)
+    })
   }
 
   componentWillReceiveProps(nextProps) {

From ad04c7bd8e40dab496f6a685539fd4a90fd688d5 Mon Sep 17 00:00:00 2001
From: Vigneshkumar Chinnachamy M <chinnachamy.vignesh@gmail.com>
Date: Sun, 13 Dec 2020 02:38:34 +0530
Subject: [PATCH 2/3] add new line at the end of the file - skills.js

---
 src/api/skills.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/skills.js b/src/api/skills.js
index d912a1572..892c3716a 100644
--- a/src/api/skills.js
+++ b/src/api/skills.js
@@ -45,4 +45,4 @@ function getAllSkills() {
  */
 function getSkillsPage(page) {
   return axios.get(`${TC_API_URL}/v5/skills?skillProviderId=${SKILL_PROVIDER_ID}&perPage=${skillPageSize}&orderBy=name&page=${page}`)
-}
\ No newline at end of file
+}

From 89359de54cee8708a16147388b970a7dff5cf58c Mon Sep 17 00:00:00 2001
From: Vigneshkumar Chinnachamy M <chinnachamy.vignesh@gmail.com>
Date: Sun, 13 Dec 2020 18:57:18 +0530
Subject: [PATCH 3/3] handle error while loading skills

---
 src/api/skills.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/api/skills.js b/src/api/skills.js
index 892c3716a..aa5cc4529 100644
--- a/src/api/skills.js
+++ b/src/api/skills.js
@@ -11,6 +11,7 @@ export function getSkills() {
   cachedSkillsAsPromise = cachedSkillsAsPromise || getAllSkills().catch(ex => {
     console.error('Error loading skills', ex)
     cachedSkillsAsPromise = null
+    return [];
   })
 
   return cachedSkillsAsPromise