diff --git a/components/Party/index.tsx b/components/Party/index.tsx index e9ee23e0..f3b9035c 100644 --- a/components/Party/index.tsx +++ b/components/Party/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React, { useCallback, useEffect, useMemo, useState } from 'react' import { useSnapshot } from 'valtio' import { useCookies } from 'react-cookie' import clonedeep from 'lodash.clonedeep' @@ -24,12 +24,12 @@ interface Props { const Party = (props: Props) => { // Cookies - const [cookies, _] = useCookies(['user']) - const headers = (cookies.user != null) ? { - headers: { - 'Authorization': `Bearer ${cookies.user.access_token}` - } - } : {} + const [cookies] = useCookies(['user']) + const headers = useMemo(() => { + return (cookies.user != null) ? { + headers: { 'Authorization': `Bearer ${cookies.user.access_token}` } + } : {} + }, [cookies.user]) // Set up states const { party } = useSnapshot(appState) @@ -41,16 +41,6 @@ const Party = (props: Props) => { appState.grid = resetState.grid }, []) - // Fetch data from the server - useEffect(() => { - const shortcode = (props.slug) ? props.slug : undefined - - if (shortcode) - fetchDetails(shortcode) - else - appState.party.editable = true - }, [props.slug, fetchDetails]) - // Methods: Creating a new party async function createParty(extra: boolean = false) { let body = { @@ -92,7 +82,6 @@ const Party = (props: Props) => { appState.party.raid = raid }) } - } // Methods: Navigating with segmented control @@ -116,13 +105,7 @@ const Party = (props: Props) => { } // Methods: Fetch party details - function fetchDetails(shortcode: string) { - return api.endpoints.parties.getOne({ id: shortcode, params: headers }) - .then(response => processResult(response)) - .catch(error => processError(error)) - } - - function processResult(response: AxiosResponse) { + const processResult = useCallback((response: AxiosResponse) => { appState.party.id = response.data.party.id appState.party.user = response.data.party.user appState.party.favorited = response.data.party.favorited @@ -131,18 +114,32 @@ 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 - } + }, []) - function processError(error: any) { - if (error.response != null) { - if (error.response.status == 404) { - // setFound(false) - // setLoading(false) - } - } else { + const handleError = useCallback((error: any) => { + if (error.response != null && error.response.status == 404) { + // setFound(false) + } else if (error.response != null) { console.error(error) + } else { + console.error("There was an error.") } - } + }, []) + + const fetchDetails = useCallback((shortcode: string) => { + return api.endpoints.parties.getOne({ id: shortcode, params: headers }) + .then(response => processResult(response)) + .catch(error => handleError(error)) + }, [headers, processResult, handleError]) + + useEffect(() => { + const shortcode = (props.slug) ? props.slug : undefined + + if (shortcode) + fetchDetails(shortcode) + else + appState.party.editable = true + }, [props.slug, fetchDetails]) // Render: JSX components const navigation = (