TSJR-314 - edit existing skill

Author: vas3a

src/apps/admin/src/skills-manager/components/categories-accordion/CategoriesAccordion.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useMemo } from 'react'
 
 import { Accordion, AccordionItem } from '../accordion'
 import { SkillsList } from '../skills-list'
@@ -12,6 +12,7 @@ interface CategoriesAccordionProps {
 
 const CategoriesAccordion: FC<CategoriesAccordionProps> = props => {
     const {
+        setEditSkill,
         skillsFilter,
         setEditCategory,
         categories,
@@ -50,19 +51,29 @@ const CategoriesAccordion: FC<CategoriesAccordionProps> = props => {
                         onSelect={bulkEditorCtx.toggleSkill}
                         isSelected={bulkEditorCtx.isSkillSelected}
                         editMode={!!bulkEditorCtx.isEditing}
+                        onEditSkill={setEditSkill}
                     />
                 )}
             </AccordionItem>
         ) : <></>
     }
 
+    // use a memo to persist the items rendering
+    // otheriwse, the order and mapping of the categories
+    // will trigger a new re-render of the accordion on each context change
+    const accordionItems = useMemo(() => (
+        !!bulkEditorCtx.isEditing ? (
+            renderCategoryAccordion(bulkEditorCtx.isEditing)
+        ) : (
+            categories
+                .map(renderCategoryAccordion)
+        )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    ), [bulkEditorCtx.isEditing, categories, groupedSkills])
+
     return (
         <Accordion defaultOpen={props.defaultOpen}>
-            {!!bulkEditorCtx.isEditing ? (
-                renderCategoryAccordion(bulkEditorCtx.isEditing)
-            ) : (
-                categories.map(renderCategoryAccordion)
-            )}
+            {accordionItems}
         </Accordion>
     )
 }

src/apps/admin/src/skills-manager/components/skill-modal/SkillModal.tsx

@@ -2,7 +2,12 @@ import { FC, ReactNode, useCallback, useMemo, useState } from 'react'
 
 import { BaseModal, Form, formGetInputModel, FormInputModel, FormValue, LoadingSpinner } from '~/libs/ui'
 
-import { saveStandardizedSkill, StandardizedSkill, StandardizedSkillCategory } from '../../services'
+import {
+    archiveStandardizedSkill,
+    saveStandardizedSkill,
+    StandardizedSkill,
+    StandardizedSkillCategory,
+} from '../../services'
 
 import { skillFormDef, SkillFormField } from './skill-form.config'
 
@@ -23,6 +28,7 @@ const SkillModal: FC<SkillModalProps> = props => {
         description: formGetInputModel(inputs, SkillFormField.description).value as string,
         id: props.skill.id as string,
         name: formGetInputModel(inputs, SkillFormField.name).value as string,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }), [])
 
     const saveAsync = useCallback(async (request: FormValue): Promise<void> => {
@@ -39,16 +45,37 @@ const SkillModal: FC<SkillModalProps> = props => {
             })
     }, [props.onClose, props.onSave])
 
+    const archiveSkill = useCallback(async (): Promise<void> => {
+        setLoading(true)
+
+        return archiveStandardizedSkill(props.skill)
+            .then(() => {
+                props.onSave.call(undefined)
+                props.onClose.call(undefined)
+            })
+            .catch((e: any) => {
+                setLoading(false)
+                return Promise.reject(e)
+            })
+    }, [props.onClose, props.skill, props.onSave])
+
     const formDef = useMemo(() => skillFormDef(
+        action,
+        archiveSkill,
         props.onClose,
         props.categories,
-    ), [props.categories, props.onClose])
+    ), [action, archiveSkill, props.categories, props.onClose])
+
+    const formValue = useMemo(() => ({
+        ...(props.skill as any),
+        categoryId: props.skill.category.id,
+    } as FormValue), [props.skill])
 
     function renderForm(): ReactNode {
         return (
             <Form
                 formDef={formDef}
-                formValues={props.skill as unknown as FormValue}
+                formValues={formValue}
                 requestGenerator={generateRequest}
                 save={saveAsync}
                 resetFormOnUnmount

src/apps/admin/src/skills-manager/components/skill-modal/skill-form.config.ts

@@ -13,6 +13,8 @@ const mapCategoryToSelectOption = (categories: StandardizedSkillCategory[]): Inp
 )
 
 export const skillFormDef = (
+    action: string,
+    onArchiveClick: () => void,
     onCancelClick: () => void,
     categories?: StandardizedSkillCategory[],
 ): FormDefinition => ({
@@ -26,6 +28,13 @@ export const skillFormDef = (
                 size: 'lg',
                 type: 'button',
             },
+            {
+                buttonStyle: 'secondary',
+                isSubmit: true,
+                label: 'Save and add another',
+                size: 'lg',
+                type: 'submit',
+            },
             {
                 buttonStyle: 'primary',
                 isSubmit: true,
@@ -34,6 +43,17 @@ export const skillFormDef = (
                 type: 'submit',
             },
         ],
+        secondaryGroup: action === 'edit' && [
+            {
+                buttonStyle: 'secondary',
+                isSubmit: false,
+                label: 'Archive skill',
+                onClick: onArchiveClick,
+                size: 'lg',
+                type: 'button',
+                variant: 'danger',
+            },
+        ],
     },
     groups: [
         {

src/apps/admin/src/skills-manager/components/skills-list/SkillsList.module.scss

@@ -15,7 +15,10 @@
     align-items: center;
     gap: $sp-2;
 
-    .isEditMode & {
-        cursor: pointer;
+    cursor: pointer;
+    transition: 0.15s ease-in-out;
+
+    &:hover {
+        background: rgba($tc-black, 0.075);
     }
 }

src/apps/admin/src/skills-manager/components/skills-list/SkillsList.tsx

@@ -13,11 +13,13 @@ interface SkillsListProps {
     editMode?: boolean
     onSelect: (skill: StandardizedSkill) => void
     isSelected: (skill: StandardizedSkill) => boolean
+    onEditSkill?: (skill: StandardizedSkill) => void
 }
 
 const SkillsList: FC<SkillsListProps> = props => {
     function handleToggle(skill: StandardizedSkill): void {
         if (!props.editMode) {
+            props.onEditSkill?.(skill)
             return
         }
 

src/apps/admin/src/skills-manager/context/skills-manager.context.tsx

@@ -1,5 +1,4 @@
 import { createContext, FC, ReactNode, useCallback, useContext, useMemo, useState } from 'react'
-import { orderBy } from 'lodash'
 import { SWRResponse } from 'swr'
 
 import { StandardizedSkill, StandardizedSkillCategory, useFetchCategories, useFetchSkills } from '../services'
@@ -43,7 +42,7 @@ export const SkillsManagerContext: FC<SkillsManagerContextProps> = props => {
     }: SWRResponse<StandardizedSkill[]> = useFetchSkills()
 
     const {
-        data: allCategories,
+        data: allCategories = [],
         mutate: refetchCategories,
     }: SWRResponse<StandardizedSkillCategory[]> = useFetchCategories()
 
@@ -58,7 +57,7 @@ export const SkillsManagerContext: FC<SkillsManagerContextProps> = props => {
 
     const contextValue = useMemo(() => ({
         bulkEditorCtx,
-        categories: orderBy(allCategories ?? [], 'name', 'asc'),
+        categories: allCategories,
         editCategory,
         editSkill,
         groupedSkills,

src/apps/admin/src/skills-manager/context/use-skills.context.tsx

@@ -9,7 +9,7 @@ const baseUrl = `${EnvironmentConfig.API.V5}/standardized-skills/categories`
 export interface StandardizedSkillCategory extends UserSkillCategory {}
 
 export const useFetchCategories = (): SWRResponse<StandardizedSkillCategory[]> => {
-    const url = `${baseUrl}?perPage=9999`
+    const url = `${baseUrl}?perPage=9999&sortBy=name`
 
     const response = useSWR(url, xhrGetAsync<StandardizedSkillCategory[]>, {
         refreshInterval: 0,

src/apps/admin/src/skills-manager/services/skills-categories.service.ts

@@ -2,7 +2,7 @@ import { omit } from 'lodash'
 import useSWR, { SWRResponse } from 'swr'
 
 import { EnvironmentConfig } from '~/config'
-import { UserSkill, xhrGetAsync, xhrPostAsync, xhrPutAsync } from '~/libs/core'
+import { UserSkill, xhrDeleteAsync, xhrGetAsync, xhrPostAsync, xhrPutAsync } from '~/libs/core'
 
 const baseUrl = `${EnvironmentConfig.API.V5}/standardized-skills/skills`
 
@@ -19,10 +19,15 @@ export const useFetchSkills = (): SWRResponse<StandardizedSkill[]> => {
     return response
 }
 
-export const saveStandardizedSkill = (category: StandardizedSkill)
-: Promise<StandardizedSkill> => {
-    const xhrSaveAsyncFn = category.id ? xhrPutAsync : xhrPostAsync
-    const url = `${baseUrl}${category.id ? `/${category.id}` : ''}`
+export const saveStandardizedSkill = (skill: StandardizedSkill): Promise<StandardizedSkill> => {
+    const xhrSaveAsyncFn = skill.id ? xhrPutAsync : xhrPostAsync
+    const url = `${baseUrl}${skill.id ? `/${skill.id}` : ''}`
 
-    return xhrSaveAsyncFn(url, omit(category, 'id'))
+    return xhrSaveAsyncFn(url, omit(skill, 'id'))
+}
+
+export const archiveStandardizedSkill = (skill: StandardizedSkill): Promise<StandardizedSkill> => {
+    const url = `${baseUrl}/${skill.id}`
+
+    return xhrDeleteAsync(url)
 }

src/apps/admin/src/skills-manager/services/skills.service.ts

@@ -53,9 +53,9 @@ $btn-secondary-border-width: $border;
 
     // Define variants
     &:global(.btn-variant-danger) {
-        --btn-variant: #{$red-110};
-        --btn-variant--hover: #{lighten($red-110, 10%)};
-        --btn-variant--active: #{darken($red-110, 10%)};
+        --btn-variant: #{$red-120};
+        --btn-variant--hover: #{lighten($red-120, 10%)};
+        --btn-variant--active: #{darken($red-120, 10%)};
     }
     &:global(.btn-variant-warning) {
         --btn-variant: #{$orange-140};