Save and receive job from backend

components/Party/index.tsx

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router'
 import { useSnapshot } from 'valtio'
 import { useCookies } from 'react-cookie'
 import clonedeep from 'lodash.clonedeep'
+import { subscribeKey } from 'valtio/utils'
 
 import PartySegmentedControl from '~components/PartySegmentedControl'
 import PartyDetails from '~components/PartyDetails'
@@ -38,14 +39,25 @@ const Party = (props: Props) => {
 
     // Set up states
     const { party } = useSnapshot(appState)
+
+    const [job, setJob] = useState<Job>()
     const [currentTab, setCurrentTab] = useState<GridType>(GridType.Weapon)
 
+    // Update job when state changes
+    subscribeKey(appState.party, 'job', (value: Job) => {
+        setJob(value)
+    })
+
     // Reset state on first load
     useEffect(() => {
         const resetState = clonedeep(initialAppState)
         appState.grid = resetState.grid
     }, [])
 
+    useEffect(() => {
+        jobChanged()
+    }, [job])
+
     // Methods: Creating a new party
     async function createParty(extra: boolean = false) {
         let body = {
@@ -69,6 +81,14 @@ const Party = (props: Props) => {
         }
     }
 
+    function jobChanged() {
+        if (party.id) {
+            api.endpoints.parties.update(party.id, {
+                'party': { 'job_id': (job) ? job.id : '' }
+            }, headers)
+        }
+    }
+
     function updateDetails(name?: string, description?: string, raid?: Raid) {
         if (appState.party.name !== name ||
             appState.party.description !== description ||
@@ -145,6 +165,7 @@ const Party = (props: Props) => {
         appState.party.name = response.data.party.name
         appState.party.description = response.data.party.description
         appState.party.raid = response.data.party.raid
+        appState.party.job = response.data.party.job
     }, [])
 
     const handleError = useCallback((error: any) => {