feat: Ordering of Skills in Skill Select list. Issue #498

Author: mbaghel

local/login-locally/package-lock.json

@@ -0,0 +1,36 @@
+/**
+ * useLoadSkills hook
+ */
+import { useEffect, useState } from "react";
+import { flatten, partition } from "lodash";
+import { useData } from "hooks/useData";
+import { getSkills } from "services/skills";
+import { getRoles } from "services/roles";
+
+/**
+ * Hook which loads all skills and roles, then partitions skills based
+ * on whether any role requires the given skill.
+ *
+ * @returns [skills, error] tuple with `skills` array and `error` object
+ */
+export const useLoadSkills = () => {
+  const [skills, skillsError] = useData(getSkills);
+  const [roles, rolesError] = useData(getRoles);
+  const [partedSkills, setPartedSkills] = useState();
+
+  useEffect(() => {
+    if (skills && roles) {
+      const requiredSkills = new Set();
+      roles.forEach((role) => {
+        role.listOfSkills.forEach((skill) => {
+          requiredSkills.add(skill);
+        });
+      });
+      setPartedSkills(() =>
+        flatten(partition(skills, (skill) => requiredSkills.has(skill.name)))
+      );
+    }
+  }, [skills, roles]);
+
+  return [partedSkills, skillsError || rolesError];
+};

package-lock.json

@@ -7,13 +7,12 @@
  */
 import React, { useCallback, useState } from "react";
 import { useDispatch } from "react-redux";
-import { useData } from "hooks/useData";
 import { setIsLoading } from "../../actions";
 import SkillsList from "./components/SkillsList";
-import { getSkills } from "services/skills";
 import LoadingIndicator from "components/LoadingIndicator";
 import SkillListPopup from "../../components/SkillListPopup";
 import SearchAndSubmit from "../../components/SearchAndSubmit";
+import { useLoadSkills } from "../../hooks/useLoadSkills";
 
 function InputSkills() {
   const dispatch = useDispatch();
@@ -26,7 +25,7 @@ function InputSkills() {
   const [popupSelectedSkills, setPopupSelectedSkills] = useState([]);
   const [popupOpen, setPopupOpen] = useState(false);
   const [isPopupLoading, setIsPopupLoading] = useState(false);
-  const [skills, loadingError] = useData(getSkills);
+  const [skills, loadingError] = useLoadSkills();
 
   const toggleSkill = useCallback(
     (skill) => {