From 9a3d83309240f1187d01769fde6996bac395f8a1 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Tue, 24 Jan 2023 02:39:04 -0800 Subject: [PATCH] Persist and recall accessory from server --- components/CharacterGrid/index.tsx | 31 ++++++++++++++++++++++-- components/JobAccessoryPopover/index.tsx | 4 +-- components/JobSection/index.tsx | 12 +++++---- components/Party/index.tsx | 1 + components/SelectItem/index.tsx | 3 ++- types/Party.d.ts | 1 + utils/appState.tsx | 13 ++++++++++ utils/reportError.tsx | 2 +- 8 files changed, 56 insertions(+), 11 deletions(-) diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx index d4c72e6e..73cfcc08 100644 --- a/components/CharacterGrid/index.tsx +++ b/components/CharacterGrid/index.tsx @@ -55,6 +55,7 @@ const CharacterGrid = (props: Props) => { 2: undefined, 3: undefined, }) + const [jobAccessory, setJobAccessory] = useState() 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) => { 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 = '' diff --git a/components/Party/index.tsx b/components/Party/index.tsx index 07e47403..f3fb8249 100644 --- a/components/Party/index.tsx +++ b/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 diff --git a/components/SelectItem/index.tsx b/components/SelectItem/index.tsx index 12ee6cff..bf6f9b6b 100644 --- a/components/SelectItem/index.tsx +++ b/components/SelectItem/index.tsx @@ -14,10 +14,11 @@ const SelectItem = React.forwardRef(function selectItem( { children, ...props }, forwardedRef ) { + const { altText, iconSrc, ...rest } = props return ( diff --git a/types/Party.d.ts b/types/Party.d.ts index 9b8d0978..536d01e5 100644 --- a/types/Party.d.ts +++ b/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 diff --git a/utils/appState.tsx b/utils/appState.tsx index 8dbc9c69..9d402008 100644 --- a/utils/appState.tsx +++ b/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, diff --git a/utils/reportError.tsx b/utils/reportError.tsx index d24d6008..2302e57a 100644 --- a/utils/reportError.tsx +++ b/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)) }