Populate skills from props instead of state

We're essentially ensuring consistency between the backend by frontend by using the backend as more of a source of truth.

components/CharacterGrid/index.tsx

@@ -10,7 +10,7 @@ import JobSection from "~components/JobSection"
 import CharacterUnit from "~components/CharacterUnit"
 import CharacterConflictModal from "~components/CharacterConflictModal"
 
-import type { SearchableObject } from "~types"
+import type { JobSkillObject, SearchableObject } from "~types"
 
 import api from "~utils/api"
 import { appState } from "~utils/appState"
@@ -48,6 +48,15 @@ const CharacterGrid = (props: Props) => {
   const [conflicts, setConflicts] = useState<GridCharacter[]>([])
   const [position, setPosition] = useState(0)
 
+  // Set up state for data
+  const [job, setJob] = useState<Job | undefined>()
+  const [jobSkills, setJobSkills] = useState<JobSkillObject>({
+    0: undefined,
+    1: undefined,
+    2: undefined,
+    3: undefined,
+  })
+
   // Create a temporary state to store previous character uncap values
   const [previousUncapValues, setPreviousUncapValues] = useState<{
     [key: number]: number | undefined
@@ -64,6 +73,13 @@ const CharacterGrid = (props: Props) => {
     else appState.party.editable = false
   }, [props.new, accountData, party])
 
+  useEffect(() => {
+    console.log("In useeffect")
+    console.log(party.jobSkills)
+    setJob(party.job)
+    setJobSkills(party.jobSkills)
+  }, [party])
+
   // Initialize an array of current uncap values for each characters
   useEffect(() => {
     let initialPreviousUncapValues: { [key: number]: number } = {}
@@ -167,14 +183,22 @@ const CharacterGrid = (props: Props) => {
 
   // Methods: Saving job and job skills
   const saveJob = function (job: Job) {
+    const payload = {
+      party: { job_id: job ? job.id : "" },
+    }
+
     if (party.id && appState.party.editable) {
-      api.endpoints.parties.update(
-        party.id,
-        {
-          party: { job_id: job ? job.id : "" },
-        },
-        headers
-      )
+      api.endpoints.parties
+        .update(party.id, payload, headers)
+        .then((response) => {
+          const newParty = response.data.party
+
+          setJob(newParty.job)
+          appState.party.job = newParty.job
+
+          setJobSkills(newParty.job_skills)
+          appState.party.jobSkills = newParty.job_skills
+        })
     }
   }
 
@@ -184,6 +208,7 @@ const CharacterGrid = (props: Props) => {
 
       let skillObject: {
         [key: string]: string | undefined
+        skill0_id?: string
         skill1_id?: string
         skill2_id?: string
         skill3_id?: string
@@ -292,6 +317,8 @@ const CharacterGrid = (props: Props) => {
     <div>
       <div id="CharacterGrid">
         <JobSection
+          job={job}
+          jobSkills={jobSkills}
           editable={party.editable}
           saveJob={saveJob}
           saveSkill={saveJobSkill}

components/JobSection/index.tsx

@@ -8,12 +8,14 @@ import SearchModal from "~components/SearchModal"
 
 import { appState } from "~utils/appState"
 
-import type { SearchableObject } from "~types"
+import type { JobSkillObject, SearchableObject } from "~types"
 
 import "./index.scss"
 
 // Props
 interface Props {
+  job?: Job
+  jobSkills: JobSkillObject
   editable: boolean
   saveJob: (job: Job) => void
   saveSkill: (skill: JobSkill, position: number) => void
@@ -25,15 +27,32 @@ const JobSection = (props: Props) => {
   const [job, setJob] = useState<Job>()
   const [imageUrl, setImageUrl] = useState("")
 
-  const { party } = useSnapshot(appState)
+  const { party, jobSkills } = useSnapshot(appState)
 
   const [numSkills, setNumSkills] = useState(4)
-  const [skills, setSkills] = useState<JobSkill[]>([])
+  const [skills, setSkills] = useState<{ [key: number]: JobSkill | undefined }>(
+    []
+  )
+
+  const selectRef = React.createRef<HTMLSelectElement>()
 
   useEffect(() => {
+    console.log("party has changed")
     // Set current job based on ID
-    if (party.job) setJob(party.job)
-  }, [])
+    console.log(props.jobSkills)
+
+    if (props.job) {
+      setJob(props.job)
+      setSkills({
+        0: props.jobSkills[0],
+        1: props.jobSkills[1],
+        2: props.jobSkills[2],
+        3: props.jobSkills[3],
+      })
+
+      if (selectRef.current) selectRef.current.value = props.job.id
+    }
+  }, [props])
 
   useEffect(() => {
     generateImageUrl()
@@ -41,8 +60,9 @@ const JobSection = (props: Props) => {
 
   useEffect(() => {
     if (job) {
-      appState.party.job = job
-      setBaseSkills(job)
+      if (job.id != party.job.id) appState.party.job = job
+      if (job.row === "1") setNumSkills(3)
+      else setNumSkills(4)
     }
   }, [job])
 
@@ -50,20 +70,6 @@ const JobSection = (props: Props) => {
     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
-      )
-
-      if (job.row === "1") setNumSkills(3)
-      else setNumSkills(4)
-
-      setSkills(baseSkills)
     }
   }
 
@@ -80,11 +86,19 @@ const JobSection = (props: Props) => {
     setImageUrl(imgSrc)
   }
 
+  const canEditSkill = (skill?: JobSkill) => {
+    if (job && skill) {
+      if (skill.job.id === job.id && skill.main && !skill.sub) return false
+    }
+
+    return props.editable
+  }
+
   const skillItem = (index: number, editable: boolean) => {
     return (
       <JobSkillItem
         skill={skills[index]}
-        editable={!skills[index]?.main && editable}
+        editable={canEditSkill(skills[index])}
         key={`skill-${index}`}
         hasJob={job != undefined && job.id != "-1"}
       />
@@ -98,16 +112,20 @@ const JobSection = (props: Props) => {
         fromPosition={index}
         object="job_skills"
         job={job}
-        send={updateObject}
+        send={saveJobSkill}
       >
         {skillItem(index, true)}
       </SearchModal>
     )
   }
 
-  function updateObject(object: SearchableObject, position: number) {
+  function saveJobSkill(object: SearchableObject, position: number) {
     const skill = object as JobSkill
 
+    const newSkills = skills
+    newSkills[position] = skill
+    setSkills(newSkills)
+
     props.saveSkill(skill, position)
   }
 
@@ -119,11 +137,15 @@ const JobSection = (props: Props) => {
         <div className="Overlay" />
       </div>
       <div className="JobDetails">
-        <JobDropdown currentJob={party.job?.id} onChange={receiveJob} />
+        <JobDropdown
+          currentJob={party.job?.id}
+          onChange={receiveJob}
+          ref={selectRef}
+        />
         <ul className="JobSkills">
           {[...Array(numSkills)].map((e, i) => (
             <li key={`job-${i}`}>
-              {job && job.id != "-1" && !skills[i]?.main && props.editable
+              {canEditSkill(skills[i])
                 ? editableSkillItem(i)
                 : skillItem(i, false)}
             </li>