diff --git a/components/SummonGrid/index.tsx b/components/SummonGrid/index.tsx index baf16dd9..ab86ffa1 100644 --- a/components/SummonGrid/index.tsx +++ b/components/SummonGrid/index.tsx @@ -1,11 +1,13 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import React, { useCallback, useEffect, useMemo, useState } from 'react' +import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react' import { useCookies } from 'react-cookie' import { useModal as useModal } from '~utils/useModal' import { AxiosResponse } from 'axios' import debounce from 'lodash.debounce' +import AppContext from '~context/AppContext' + import SearchModal from '~components/SearchModal' import SummonUnit from '~components/SummonUnit' import ExtraSummons from '~components/ExtraSummons' @@ -13,21 +15,9 @@ import ExtraSummons from '~components/ExtraSummons' import api from '~utils/api' import './index.scss' -// GridType -export enum GridType { - Class, - Character, - Weapon, - Summon -} - // Props interface Props { - partyId?: string - mainSummon: GridSummon | undefined - friendSummon: GridSummon | undefined - summons: GridArray - editable: boolean + slug?: string createParty: () => Promise> pushHistory?: (path: string) => void } @@ -47,6 +37,12 @@ const SummonGrid = (props: Props) => { // Set up state for party const [partyId, setPartyId] = useState('') + // Set up state for view management + const [found, setFound] = useState(false) + const [loading, setLoading] = useState(true) + const [editable, setEditable] = useState(false) + const { setEditable: setEditableContext } = useContext(AppContext) + // Set up states for Grid data const [summons, setSummons] = useState>({}) const [mainSummon, setMainSummon] = useState() @@ -62,22 +58,20 @@ const SummonGrid = (props: Props) => { // Create a state dictionary to store pure objects for Search const [searchGrid, setSearchGrid] = useState>({}) + // Fetch data from the server + useEffect(() => { + if (props.slug) fetchGrid(props.slug) + }, []) + // Initialize an array of current uncap values for each summon useEffect(() => { let initialPreviousUncapValues: {[key: number]: number} = {} - if (props.mainSummon) initialPreviousUncapValues[-1] = props.mainSummon.uncap_level - if (props.friendSummon) initialPreviousUncapValues[6] = props.friendSummon.uncap_level - Object.values(props.summons).map(o => initialPreviousUncapValues[o.position] = o.uncap_level) + if (mainSummon) initialPreviousUncapValues[-1] = mainSummon.uncap_level + if (friendSummon) initialPreviousUncapValues[6] = friendSummon.uncap_level + Object.values(summons).map(o => initialPreviousUncapValues[o.position] = o.uncap_level) setPreviousUncapValues(initialPreviousUncapValues) }, [props]) - // Set states from props - useEffect(() => { - setSummons(props.summons || {}) - setMainSummon(props.mainSummon) - setFriendSummon(props.friendSummon) - }, [props]) - // Update search grid whenever any summon is updated useEffect(() => { let newSearchGrid = Object.values(summons).map((o) => o.summon) @@ -91,6 +85,61 @@ const SummonGrid = (props: Props) => { setSearchGrid(newSearchGrid) }, [summons, mainSummon, friendSummon]) + // Methods: Fetching an object from the server + async function fetchGrid(shortcode: string) { + return api.endpoints.parties.getOneWithObject({ id: shortcode, object: 'summons' }) + .then(response => processResult(response)) + .catch(error => processError(error)) + } + + function processResult(response: AxiosResponse) { + // Store the response + const party = response.data.party + + // Get the party user and logged in user, if possible, to compare + const partyUser = (party.user_id) ? party.user_id : undefined + const loggedInUser = (cookies.user) ? cookies.user.user_id : '' + + if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) { + setEditable(true) + setEditableContext(true) + } + + // Store the important party and state-keeping values + setPartyId(party.id) + setFound(true) + setLoading(false) + + // Populate the weapons in state + populateSummons(party.summons) + } + + function processError(error: any) { + if (error.response != null) { + if (error.response.status == 404) { + setFound(false) + setLoading(false) + } + } else { + console.error(error) + } + } + + function populateSummons(list: [GridSummon]) { + let summons: GridArray = {} + + list.forEach((object: GridSummon) => { + if (object.main) + setMainSummon(object) + else if (object.friend) + setFriendSummon(object) + else if (!object.main && !object.friend && object.position != null) + summons[object.position] = object + }) + + setSummons(summons) + } + // Methods: Adding an object from search function openSearchModal(position: number) { setItemPositionForSearch(position) @@ -209,8 +258,8 @@ const SummonGrid = (props: Props) => {
Main Summon
{
Friend Summon
{ {Array.from(Array(numSummons)).map((x, i) => { return (
  • { openSearchModal(i) }} @@ -255,8 +304,8 @@ const SummonGrid = (props: Props) => { ) const subAuraSummonElement = (