Persist and recall accessory from server

components/CharacterGrid/index.tsx

@@ -55,6 +55,7 @@ const CharacterGrid = (props: Props) => {
     2: undefined,
     3: undefined,
   })
+  const [jobAccessory, setJobAccessory] = useState<JobAccessory>()
   const [errorMessage, setErrorMessage] = useState('')
 
   // Create a temporary state to store previous weapon uncap values and transcendence stages
@@ -81,6 +82,7 @@ const CharacterGrid = (props: Props) => {
   useEffect(() => {
     setJob(appState.party.job)
     setJobSkills(appState.party.jobSkills)
+    setJobAccessory(appState.party.accessory)
   }, [appState])
 
   // Initialize an array of current uncap values for each characters
@@ -186,7 +188,7 @@ const CharacterGrid = (props: Props) => {
   }
 
   // Methods: Saving job and job skills
-  const saveJob = async function (job?: Job) {
+  async function saveJob(job?: Job) {
     const payload = {
       party: {
         job_id: job ? job.id : -1,
@@ -214,7 +216,7 @@ const CharacterGrid = (props: Props) => {
     }
   }
 
-  const saveJobSkill = function (skill: JobSkill, position: number) {
+  function saveJobSkill(skill: JobSkill, position: number) {
     if (party.id && appState.party.editable) {
       const positionedKey = `skill${position}_id`
 
@@ -253,6 +255,29 @@ const CharacterGrid = (props: Props) => {
     }
   }
 
+  async function saveAccessory(accessory: JobAccessory) {
+    const payload = {
+      party: {
+        accessory_id: accessory.id,
+      },
+    }
+
+    if (appState.party.id) {
+      const response = await api.endpoints.parties.update(
+        appState.party.id,
+        payload
+      )
+      const team = response.data
+
+      setJobAccessory(team.accessory)
+      appState.party.accessory = team.accessory
+    }
+  }
+
+  useEffect(() => {
+    console.log(jobAccessory)
+  }, [jobAccessory])
+
   // Methods: Helpers
   function characterUncapLevel(character: Character) {
     let uncapLevel
@@ -474,9 +499,11 @@ const CharacterGrid = (props: Props) => {
         <JobSection
           job={job}
           jobSkills={jobSkills}
+          jobAccessory={jobAccessory}
           editable={party.editable}
           saveJob={saveJob}
           saveSkill={saveJobSkill}
+          saveAccessory={saveAccessory}
         />
         <CharacterConflictModal
           open={modalOpen}

components/JobAccessoryPopover/index.tsx

@@ -52,8 +52,8 @@ const JobAccessoryPopover = ({
   }, [modalOpen])
 
   // Event handlers
-  function handleAccessorySelected() {
+  function handleAccessorySelected(value: string) {
-    onAccessorySelected
+    onAccessorySelected(value)
     closePopover()
   }
 

components/JobSection/index.tsx

@@ -19,9 +19,11 @@ import './index.scss'
 interface Props {
   job?: Job
   jobSkills: JobSkillObject
+  jobAccessory?: JobAccessory
   editable: boolean
   saveJob: (job?: Job) => void
   saveSkill: (skill: JobSkill, position: number) => void
+  saveAccessory: (accessory: JobAccessory) => void
 }
 
 const JobSection = (props: Props) => {
@@ -56,6 +58,7 @@ const JobSection = (props: Props) => {
       2: props.jobSkills[2],
       3: props.jobSkills[3],
     })
+    setCurrentAccessory(props.jobAccessory)
 
     if (selectRef.current && props.job) selectRef.current.value = props.job.id
   }, [props])
@@ -90,13 +93,12 @@ const JobSection = (props: Props) => {
 
   function handleAccessorySelected(value: string) {
     const accessory = accessories.find((accessory) => accessory.id === value)
-    if (accessory) setCurrentAccessory(accessory)
+    if (accessory) {
+      setCurrentAccessory(accessory)
+      props.saveAccessory(accessory)
+    }
   }
 
-  useEffect(() => {
-    console.log(currentAccessory)
-  }, [currentAccessory])
-
   function generateImageUrl() {
     let imgSrc = ''
 

components/Party/index.tsx

@@ -147,6 +147,7 @@ const Party = (props: Props) => {
     appState.party.updated_at = team.updated_at
     appState.party.job = team.job
     appState.party.jobSkills = team.job_skills
+    appState.party.accessory = team.accessory
 
     appState.party.id = team.id
     appState.party.extra = team.extra

components/SelectItem/index.tsx

@@ -14,10 +14,11 @@ const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
   { children, ...props },
   forwardedRef
 ) {
+  const { altText, iconSrc, ...rest } = props
   return (
     <Select.Item
       className={classNames('SelectItem', props.className)}
-      {...props}
+      {...rest}
       ref={forwardedRef}
       value={`${props.value}`}
     >

types/Party.d.ts

@@ -20,6 +20,7 @@ interface Party {
   chain_count?: number
   job: Job
   job_skills: JobSkillObject
+  accessory: JobAccessory
   shortcode: string
   extra: boolean
   favorited: boolean

utils/appState.tsx

@@ -18,6 +18,17 @@ const emptyJob: Job = {
   },
 }
 
+const emptyJobAccessory: JobAccessory = {
+  id: '-1',
+  granblue_id: '-1',
+  job: emptyJob,
+  name: {
+    en: '',
+    ja: '',
+  },
+  rarity: 0,
+}
+
 interface AppState {
   [key: string]: any
 
@@ -29,6 +40,7 @@ interface AppState {
     description: string | undefined
     job: Job
     jobSkills: JobSkillObject
+    accessory: JobAccessory
     raid: Raid | undefined
     element: number
     fullAuto: boolean
@@ -83,6 +95,7 @@ export const initialAppState: AppState = {
       2: undefined,
       3: undefined,
     },
+    accessory: emptyJobAccessory,
     raid: undefined,
     fullAuto: false,
     autoGuard: false,

utils/reportError.tsx

@@ -13,7 +13,7 @@ export function printError(error: any, type?: string) {
   if (type === 'axios') {
     const response = handleAxiosError(error)
     console.log(`${response?.status} ${response?.statusText}`)
-    console.log(response?.data.toJSON())
+    console.log(response?.data)
   } else {
     console.log(handleError(error))
   }