Save job and job skill to party

components/CharacterGrid/index.tsx

@@ -165,6 +165,42 @@ const CharacterGrid = (props: Props) => {
     setIncoming(undefined)
   }
 
+  // Methods: Saving job and job skills
+  const saveJob = function (job: Job) {
+    console.log("Save job!")
+    if (party.id && appState.party.editable) {
+      api.endpoints.parties.update(
+        party.id,
+        {
+          party: { job_id: job ? job.id : "" },
+        },
+        headers
+      )
+    }
+  }
+
+  const saveJobSkill = function (skill: JobSkill, position: number) {
+    if (party.id && appState.party.editable) {
+      const positionedKey = `skill${position}_id`
+
+      let skillObject: {
+        [key: string]: string | undefined
+        skill1_id?: string
+        skill2_id?: string
+        skill3_id?: string
+      } = {}
+
+      skillObject[positionedKey] = skill.id
+      api.endpoints.parties.update(
+        party.id,
+        {
+          party: skillObject,
+        },
+        headers
+      )
+    }
+  }
+
   // Methods: Helpers
   function characterUncapLevel(character: Character) {
     let uncapLevel
@@ -256,7 +292,11 @@ const CharacterGrid = (props: Props) => {
   return (
     <div>
       <div id="CharacterGrid">
-        <JobSection editable={party.editable} />
+        <JobSection
+          editable={party.editable}
+          saveJob={saveJob}
+          saveSkill={saveJobSkill}
+        />
         <CharacterConflictModal
           open={modalOpen}
           incomingCharacter={incoming}

components/JobSection/index.tsx

@@ -15,6 +15,8 @@ import "./index.scss"
 // Props
 interface Props {
   editable: boolean
+  saveJob: (job: Job) => void
+  saveSkill: (skill: JobSkill, position: number) => void
 }
 
 const JobSection = (props: Props) => {
@@ -38,14 +40,23 @@ const JobSection = (props: Props) => {
   })
 
   useEffect(() => {
-    if (job) appState.party.job = job
+    if (job) {
+      appState.party.job = job
+      setBaseSkills(job)
+    }
   }, [job])
 
   function receiveJob(job?: Job) {
     console.log(`Receiving job! Row ${job?.row}: ${job?.name.en}`)
     if (job) {
       setJob(job)
+      props.saveJob(job)
+      setBaseSkills(job)
+    }
+  }
 
+  function setBaseSkills(job?: Job) {
+    if (job) {
       const baseSkills = appState.jobSkills.filter(
         (skill) => skill.job.id === job.id && skill.main
       )
@@ -95,7 +106,11 @@ const JobSection = (props: Props) => {
     )
   }
 
-  function updateObject(object: SearchableObject, position: number) {}
+  function updateObject(object: SearchableObject, position: number) {
+    const skill = object as JobSkill
+
+    props.saveSkill(skill, position)
+  }
 
   // Render: JSX components
   return (
@@ -105,10 +120,7 @@ const JobSection = (props: Props) => {
         <div className="Overlay" />
       </div>
       <div className="JobDetails">
-        <JobDropdown
+        <JobDropdown currentJob={party.job?.id} onChange={receiveJob} />
-          currentJob={party.job ? party.job.id : undefined}
-          onChange={receiveJob}
-        />
         <ul className="JobSkills">
           {[...Array(numSkills)].map((e, i) => (
             <li key={`job-${i}`}>