diff --git a/components/Party/index.tsx b/components/Party/index.tsx index 2dfb7ace..b00c1104 100644 --- a/components/Party/index.tsx +++ b/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() const [currentTab, setCurrentTab] = useState(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) => {