adding skills to experiences, profiles, and projects

client/src/components/profileForm/ProfileForm.tsx

@@ -10,15 +10,21 @@ import { faSave, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { ScreenSize } from '../../enums/screenSize';
 import { useBreakpoints } from '../../hooks/breakpoints/UseBreakpoints';
 import { useAppContext } from '../../hooks/appContext/UseAppContext';
+import { Skill } from '../skills/Skill.interface';
+import { useSkills } from '../../hooks/skills/UseSkills';
+import MultiSelectDropdown from '../multiSelectDropdown/MultiSelectDropdown';
 
 const ProfileForm = ({ isDrawerOpen, mode, onOpenClose, profileId }: ProfileFormProps) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const appContext = useAppContext();
+    const { skills } = useSkills();
+    const projectSkills: Skill[] = []
   const defaultValues = {
     name: '',
     headline: '',
     summary: '',
     userId: '',
+    skills: projectSkills,
     statusId: 1
   }
   const methods = useForm({
@@ -27,6 +33,20 @@ const ProfileForm = ({ isDrawerOpen, mode, onOpenClose, profileId }: ProfileForm
   // const watchRepoName = methods.watch(['repoName'])
   const { screenSize } = useBreakpoints();
 
+  const onSetSelectedSkills = (selectedSkill: Skill) => {
+    const selectedSkillExists = state.selectedSkills.find((skill) => skill.id === selectedSkill.id)
+    let newSelectedSkills: Skill[];
+
+    if (selectedSkillExists) {
+      newSelectedSkills = state.selectedSkills.filter((skill) => skill.id !== selectedSkillExists.id)
+    } else {
+      newSelectedSkills = [...state.selectedSkills, selectedSkill]
+    }
+    
+    dispatch({ type: 'SET_SELECTED_SKILLS', payload: newSelectedSkills })
+    methods.setValue('skills', newSelectedSkills)
+  }
+
   const onCancel = () => {
     methods.reset(defaultValues);
     dispatch({ type: 'SET_IS_DISABLED', payload: false });
@@ -80,9 +100,13 @@ const ProfileForm = ({ isDrawerOpen, mode, onOpenClose, profileId }: ProfileForm
         const response: AxiosResponse = await httpClient.get(
           `api/profiles/${profileId}`
         );
-        const entry = response.data;
+        const profile = response.data;
 
-        methods.reset(entry);
+        if (profile.skills) {
+          dispatch({ type: 'SET_SELECTED_SKILLS', payload: profile.skills })
+        }
+
+        methods.reset(profile);
       } catch (error) {
         const axiosError = error as AxiosError;
         console.log(axiosError)
@@ -97,6 +121,12 @@ const ProfileForm = ({ isDrawerOpen, mode, onOpenClose, profileId }: ProfileForm
     }
   }, [profileId]);
 
+  useEffect(() => {
+    if (skills) {
+      dispatch({ type: 'SET_SKILL_OPTIONS', payload: skills })
+    }
+  }, [skills])
+
   return (
     <div className='drawer drawer-end'>
       <input type='checkbox' className='drawer-toggle' onChange={() => {}} checked={isDrawerOpen} />
@@ -175,6 +205,22 @@ const ProfileForm = ({ isDrawerOpen, mode, onOpenClose, profileId }: ProfileForm
                     )}
                   />
                 </div>
+                <div className={`col-span-3 self-center after:content-['*'] after:ms-0.5`}>
+                  <span>Skills</span>
+                </div>
+                <div className='col-span-9'>
+                  <Controller
+                    name="skills"
+                    control={methods.control}
+                    render={() => (
+                      <MultiSelectDropdown 
+                        skills={state.skillOptions}
+                        onChange={onSetSelectedSkills}
+                        selectedSkills={state.selectedSkills}
+                      />
+                    )}
+                  />
+                </div>
                 <div className='col-span-12 justify-self-end self-center'>
                   <button
                     className='btn'