From 7411c1e918efef9bc26dfb2b3af46bdc1392c497 Mon Sep 17 00:00:00 2001
From: Melvin Teo <62491197+meleongg@users.noreply.github.com>
Date: Thu, 30 Nov 2023 11:53:02 -0800
Subject: [PATCH] Moved applyCustomSort into utilities, used it for role
 selection question

---
 src/components/ApplicationForm/BasicInfo.js | 13 +-------
 src/components/ApplicationForm/Skills.js    | 34 +++++++++++----------
 src/utility/utilities.js                    | 14 ++++++++-
 3 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/components/ApplicationForm/BasicInfo.js b/src/components/ApplicationForm/BasicInfo.js
index 5e4a9126..29876d7c 100644
--- a/src/components/ApplicationForm/BasicInfo.js
+++ b/src/components/ApplicationForm/BasicInfo.js
@@ -7,7 +7,7 @@ import {
   ETHNICITY_OPTIONS,
   PRONOUN_OPTIONS,
 } from '../../utility/Constants'
-import { creatableDropdownValue, findElement } from '../../utility/utilities'
+import { applyCustomSort, creatableDropdownValue, findElement } from '../../utility/utilities'
 import Dropdown from '../Input/Dropdown'
 import Select from '../Input/Select'
 import { TextInput } from '../Input/TextInput'
@@ -359,17 +359,6 @@ const StyledTextInput = styled(TextInput)`
   margin: 0.5em 1em 1em 0;
 `
 
-const applyCustomSort = (data, sort) => {
-  data.sort((a, b) => {
-    const indexA = sort.indexOf(a[0])
-    const indexB = sort.indexOf(b[0])
-
-    return indexA - indexB
-  })
-
-  return data
-}
-
 // form part 1
 export default ({ refs, errors, formInputs, onChange }) => (
   <>
diff --git a/src/components/ApplicationForm/Skills.js b/src/components/ApplicationForm/Skills.js
index 014f9210..ce121c18 100644
--- a/src/components/ApplicationForm/Skills.js
+++ b/src/components/ApplicationForm/Skills.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { CONTRIBUTION_ROLE_OPTIONS, copyText } from '../../utility/Constants'
+import { applyCustomSort } from '../../utility/utilities'
 import { Select, TextArea, TextInput } from '../Input'
 import ResumeUploadBtn from '../ResumeUploadBtn'
 import { CenteredH1, ErrorMessage, P, QuestionHeading, ErrorSpan as Required } from '../Typography'
@@ -91,22 +92,23 @@ export default ({ refs, errors, formInputs, onChange, role, handleResume }) => {
         </SubHeading>
         {errors?.contributionRole && <ErrorMessage>{errors?.contributionRole}</ErrorMessage>}
         {formInputs &&
-          Object.entries(formInputs?.contributionRole)
-            .sort()
-            .map(([key, val]) => (
-              <Select
-                key={key}
-                type="checkbox"
-                label={CONTRIBUTION_ROLE_OPTIONS[key]}
-                checked={val}
-                onChange={() =>
-                  onChange({
-                    contributionRole: { ...formInputs.contributionRole, [key]: !val },
-                  })
-                }
-                customRef={key === 'vegetarian' ? refs['contributionRoleRef'] : null}
-              />
-            ))}
+          applyCustomSort(
+            Object.entries(formInputs?.contributionRole),
+            Object.keys(CONTRIBUTION_ROLE_OPTIONS)
+          ).map(([key, val]) => (
+            <Select
+              key={key}
+              type="checkbox"
+              label={CONTRIBUTION_ROLE_OPTIONS[key]}
+              checked={val}
+              onChange={() =>
+                onChange({
+                  contributionRole: { ...formInputs.contributionRole, [key]: !val },
+                })
+              }
+              customRef={key === 'vegetarian' ? refs['contributionRoleRef'] : null}
+            />
+          ))}
         {formInputs?.contributionRole?.other && (
           <TextInput
             placeholder="Please Specify"
diff --git a/src/utility/utilities.js b/src/utility/utilities.js
index 5965b232..1f522c75 100644
--- a/src/utility/utilities.js
+++ b/src/utility/utilities.js
@@ -2,7 +2,7 @@
 // "balanced" (subarrays' lengths differ as less as possible) or
 // "even" (all subarrays but the last have the same length):
 
-import { useState, useCallback } from 'react'
+import { useCallback, useState } from 'react'
 
 // https://stackoverflow.com/questions/8188548/splitting-a-js-array-into-n-arrays
 export const chunkify = (a, n, balanced) => {
@@ -144,3 +144,15 @@ export const cutString = (string, maxLength) => {
   }
   return `${string.substring(0, cut)}...`
 }
+
+// for multi-select dropdown hacker app questions
+export const applyCustomSort = (data, sort) => {
+  data.sort((a, b) => {
+    const indexA = sort.indexOf(a[0])
+    const indexB = sort.indexOf(b[0])
+
+    return indexA - indexB
+  })
+
+  return data
+}