From 13ddd2131a5140fe3f7c3206d5d501375246b8ef Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 28 Feb 2022 11:57:02 -0800 Subject: [PATCH 1/8] Fix useEffect looping in RaidDropdown --- components/RaidDropdown/index.tsx | 55 +++++++++++++------------------ 1 file changed, 22 insertions(+), 33 deletions(-) diff --git a/components/RaidDropdown/index.tsx b/components/RaidDropdown/index.tsx index 5fe72268..dad6b5d7 100644 --- a/components/RaidDropdown/index.tsx +++ b/components/RaidDropdown/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React, { useCallback, useEffect, useState } from 'react' import { useCookies } from 'react-cookie' import { appState } from '~utils/appState' @@ -15,47 +15,36 @@ interface Props { } const RaidDropdown = React.forwardRef(function useFieldSet(props, ref) { - const [cookies, _] = useCookies(['user']) - const headers = (cookies.user != null) ? { - headers: { 'Authorization': `Bearer ${cookies.user.access_token}` } - } : {} - + const [cookies] = useCookies(['user']) const [raids, setRaids] = useState() const [flatRaids, setFlatRaids] = useState() const raidGroups = [ - 'Assorted', - 'Omega', - 'T1 Summons', - 'T2 Summons', - 'Primarchs', - 'Nightmare', - 'Omega (Impossible)', - 'Omega II', - 'Tier 1 Summons (Impossible)', - 'Tier 3 Summons', - 'Ennead', - 'Malice', - '6-Star Raids', - 'Six-Dragons', - 'Nightmare (Impossible)', - 'Astral', + 'Assorted', 'Omega', 'T1 Summons', 'T2 Summons', + 'Primarchs', 'Nightmare', 'Omega (Impossible)', 'Omega II', + 'Tier 1 Summons (Impossible)', 'Tier 3 Summons', 'Ennead', 'Malice', + '6-Star Raids', 'Six-Dragons', 'Nightmare (Impossible)', 'Astral', 'Super Ultimate' ] useEffect(() => { + const headers = (cookies.user != null) ? { + headers: { 'Authorization': `Bearer ${cookies.user.access_token}` } + } : {} + + function fetchRaids() { + console.log("Fetching list of raids...") + api.endpoints.raids.getAll(headers) + .then((response) => { + const raids = response.data.map((r: any) => r.raid) + + appState.raids = raids + organizeRaids(raids) + }) + } + fetchRaids() - }, [fetchRaids]) - - function fetchRaids() { - api.endpoints.raids.getAll(headers) - .then((response) => { - const raids = response.data.map((r: any) => r.raid) - - appState.raids = raids - organizeRaids(raids) - }) - } + }, []) function organizeRaids(raids: Raid[]) { const numGroups = Math.max.apply(Math, raids.map(raid => raid.group)) From 0f843c8e196c900b26d955fdd0e4bf7a2b4ced98 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 28 Feb 2022 12:41:01 -0800 Subject: [PATCH 2/8] Fix useEffect looping in teams --- pages/teams.tsx | 59 ++++++++++++++++++++++++++++++++++--------------- 1 file changed, 41 insertions(+), 18 deletions(-) diff --git a/pages/teams.tsx b/pages/teams.tsx index 5fcc6b6f..25540fdb 100644 --- a/pages/teams.tsx +++ b/pages/teams.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React, { useCallback, useEffect, useState } from 'react' import { useRouter } from 'next/router' import { useCookies } from 'react-cookie' import clonedeep from 'lodash.clonedeep' @@ -13,7 +13,7 @@ const TeamsRoute: React.FC = () => { const router = useRouter() // Cookies - const [cookies, _] = useCookies(['user']) + const [cookies] = useCookies(['user']) const headers = (cookies.user != null) ? { 'Authorization': `Bearer ${cookies.user.access_token}` } : {} @@ -21,31 +21,33 @@ const TeamsRoute: React.FC = () => { const [found, setFound] = useState(false) const [loading, setLoading] = useState(true) const [scrolled, setScrolled] = useState(false) + const [parties, setParties] = useState([]) - useEffect(() => { - console.log(`Fetching teams...`) - fetchTeams() - }, [fetchTeams]) + const [element, setElement] = useState(null) + const [raidId, setRaidId] = useState(null) + const [recencyInSeconds, setRecencyInSeconds] = useState(null) useEffect(() => { window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll); }, []) - async function fetchTeams(element?: number, raid?: string, recency?: number) { - const params = { + const fetchTeams = useCallback(() => { + console.log(`Fetching teams with filters... ${element} ${raidId} ${recencyInSeconds}`) + + const filterParams = { params: { - element: (element && element >= 0) ? element : undefined, - raid: (raid && raid != '0') ? raid : undefined, - recency: (recency && recency > 0) ? recency : undefined + element: element, + raid: raidId, + recency: recencyInSeconds }, headers: { 'Authorization': `Bearer ${cookies.user.access_token}` } } - api.endpoints.parties.getAll(params) + api.endpoints.parties.getAll(filterParams) .then(response => { const parties: Party[] = response.data setParties(parties.map((p: any) => p.party).sort((a, b) => (a.created_at > b.created_at) ? -1 : 1)) @@ -55,14 +57,35 @@ const TeamsRoute: React.FC = () => { setLoading(false) }) .catch(error => { - if (error.response != null) { - if (error.response.status == 404) { - setFound(false) - } - } else { + 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.") } }) + }, [element, raidId, recencyInSeconds, cookies.user]) + + useEffect(() => { + fetchTeams() + }, [fetchTeams]) + + function receiveFilters(element?: number, raid?: string, recency?: number) { + if (element != null && element >= 0) + setElement(element) + else + setElement(null) + + if (raid && raid != '0') + setRaidId(raid) + else + setRaidId(null) + + if (recency && recency > 0) + setRecencyInSeconds(recency) + else + setRecencyInSeconds(null) } function toggleFavorite(teamId: string, favorited: boolean) { @@ -152,7 +175,7 @@ const TeamsRoute: React.FC = () => { return (
- + { (parties.length > 0) ? renderGrids() : renderNoGrids() }
) From 42e0f3aebd291adcd218dad65aceff146d031b4a Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 28 Feb 2022 12:49:21 -0800 Subject: [PATCH 3/8] Extract api error handling into a method --- pages/teams.tsx | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/pages/teams.tsx b/pages/teams.tsx index 25540fdb..c6e43cca 100644 --- a/pages/teams.tsx +++ b/pages/teams.tsx @@ -31,7 +31,17 @@ const TeamsRoute: React.FC = () => { useEffect(() => { window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll); - }, []) + }, []) + + 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 fetchTeams = useCallback(() => { console.log(`Fetching teams with filters... ${element} ${raidId} ${recencyInSeconds}`) @@ -56,16 +66,8 @@ const TeamsRoute: React.FC = () => { setFound(true) setLoading(false) }) - .catch(error => { - 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.") - } - }) - }, [element, raidId, recencyInSeconds, cookies.user]) + .catch(error => handleError(error)) + }, [element, raidId, recencyInSeconds, cookies.user, handleError]) useEffect(() => { fetchTeams() From dc78720d66ac92d517a0caa07d52b1c6b74933cd Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 28 Feb 2022 12:49:38 -0800 Subject: [PATCH 4/8] Fix useEffect looping in saved --- pages/saved.tsx | 71 +++++++++++++++++++++++++++++++++---------------- 1 file changed, 48 insertions(+), 23 deletions(-) diff --git a/pages/saved.tsx b/pages/saved.tsx index 17de5857..8f547c60 100644 --- a/pages/saved.tsx +++ b/pages/saved.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React, { useCallback, useEffect, useState } from 'react' import { useRouter } from 'next/router' import { useCookies } from 'react-cookie' import clonedeep from 'lodash.clonedeep' @@ -13,7 +13,7 @@ const SavedRoute: React.FC = () => { const router = useRouter() // Cookies - const [cookies, _] = useCookies(['user']) + const [cookies] = useCookies(['user']) const headers = (cookies.user != null) ? { 'Authorization': `Bearer ${cookies.user.access_token}` } : {} @@ -21,31 +21,43 @@ const SavedRoute: React.FC = () => { const [found, setFound] = useState(false) const [loading, setLoading] = useState(true) const [scrolled, setScrolled] = useState(false) + const [parties, setParties] = useState([]) - useEffect(() => { - console.log(`Fetching favorite teams...`) - fetchTeams() - }, [fetchTeams]) + const [element, setElement] = useState(null) + const [raidId, setRaidId] = useState(null) + const [recencyInSeconds, setRecencyInSeconds] = useState(null) useEffect(() => { window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll); - }, []) + }, []) - async function fetchTeams(element?: number, raid?: string, recency?: number) { - const params = { + 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 fetchTeams = useCallback(() => { + console.log(`Fetching favorite teams with filters... ${element} ${raidId} ${recencyInSeconds}`) + + const filterParams = { params: { - element: (element && element >= 0) ? element : undefined, - raid: (raid && raid != '0') ? raid : undefined, - recency: (recency && recency > 0) ? recency : undefined + element: element, + raid: raidId, + recency: recencyInSeconds }, headers: { 'Authorization': `Bearer ${cookies.user.access_token}` } } - api.savedTeams(params) + api.savedTeams(filterParams) .then(response => { const parties: Party[] = response.data setParties(parties.map((p: any) => p.party).sort((a, b) => (a.created_at > b.created_at) ? -1 : 1)) @@ -54,15 +66,28 @@ const SavedRoute: React.FC = () => { setFound(true) setLoading(false) }) - .catch(error => { - if (error.response != null) { - if (error.response.status == 404) { - setFound(false) - } - } else { - console.error(error) - } - }) + .catch(error => handleError(error)) + }, [element, raidId, recencyInSeconds, cookies.user, handleError]) + + useEffect(() => { + fetchTeams() + }, [fetchTeams]) + + function receiveFilters(element?: number, raid?: string, recency?: number) { + if (element != null && element >= 0) + setElement(element) + else + setElement(null) + + if (raid && raid != '0') + setRaidId(raid) + else + setRaidId(null) + + if (recency && recency > 0) + setRecencyInSeconds(recency) + else + setRecencyInSeconds(null) } function toggleFavorite(teamId: string, favorited: boolean) { @@ -152,7 +177,7 @@ const SavedRoute: React.FC = () => { return (
- + { (parties.length > 0) ? renderGrids() : renderNoGrids() }
) From af7d40f6e32f33b110d9ff8f91eeb7fed3be0d4a Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 28 Feb 2022 12:51:48 -0800 Subject: [PATCH 5/8] Move organizeRaids into useCallback hook --- components/RaidDropdown/index.tsx | 42 +++++++++++++++---------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/components/RaidDropdown/index.tsx b/components/RaidDropdown/index.tsx index dad6b5d7..63dca87a 100644 --- a/components/RaidDropdown/index.tsx +++ b/components/RaidDropdown/index.tsx @@ -27,26 +27,7 @@ const RaidDropdown = React.forwardRef(function useFiel 'Super Ultimate' ] - useEffect(() => { - const headers = (cookies.user != null) ? { - headers: { 'Authorization': `Bearer ${cookies.user.access_token}` } - } : {} - - function fetchRaids() { - console.log("Fetching list of raids...") - api.endpoints.raids.getAll(headers) - .then((response) => { - const raids = response.data.map((r: any) => r.raid) - - appState.raids = raids - organizeRaids(raids) - }) - } - - fetchRaids() - }, []) - - function organizeRaids(raids: Raid[]) { + const organizeRaids = useCallback((raids: Raid[]) => { const numGroups = Math.max.apply(Math, raids.map(raid => raid.group)) let groupedRaids = [] @@ -67,7 +48,26 @@ const RaidDropdown = React.forwardRef(function useFiel }) setRaids(groupedRaids) - } + }, [props.allOption]) + + useEffect(() => { + const headers = (cookies.user != null) ? { + headers: { 'Authorization': `Bearer ${cookies.user.access_token}` } + } : {} + + function fetchRaids() { + console.log("Fetching list of raids...") + api.endpoints.raids.getAll(headers) + .then((response) => { + const raids = response.data.map((r: any) => r.raid) + + appState.raids = raids + organizeRaids(raids) + }) + } + + fetchRaids() + }, [cookies.user, organizeRaids]) function raidGroup(index: number) { const options = raids && raids.length > 0 && raids[index].length > 0 && From 0fa993161b900bfb987d492b8545338a9601b7f7 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 28 Feb 2022 12:52:11 -0800 Subject: [PATCH 6/8] Remove flatRaids state --- components/RaidDropdown/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/RaidDropdown/index.tsx b/components/RaidDropdown/index.tsx index 63dca87a..3d9e4399 100644 --- a/components/RaidDropdown/index.tsx +++ b/components/RaidDropdown/index.tsx @@ -17,7 +17,6 @@ interface Props { const RaidDropdown = React.forwardRef(function useFieldSet(props, ref) { const [cookies] = useCookies(['user']) const [raids, setRaids] = useState() - const [flatRaids, setFlatRaids] = useState() const raidGroups = [ 'Assorted', 'Omega', 'T1 Summons', 'T2 Summons', From 82c38705d1c35e852a49c07ae2c4e0fc672f6a6b Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 28 Feb 2022 12:58:38 -0800 Subject: [PATCH 7/8] Fix useEffect looping in Party --- components/Party/index.tsx | 65 ++++++++++++++++++-------------------- 1 file changed, 31 insertions(+), 34 deletions(-) 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 = ( From ec7b080ad9b03f59833969484145a7668315feff Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 28 Feb 2022 12:59:37 -0800 Subject: [PATCH 8/8] Remove logs --- components/RaidDropdown/index.tsx | 1 - pages/[username].tsx | 1 - pages/saved.tsx | 2 -- pages/teams.tsx | 2 -- 4 files changed, 6 deletions(-) diff --git a/components/RaidDropdown/index.tsx b/components/RaidDropdown/index.tsx index 3d9e4399..208af245 100644 --- a/components/RaidDropdown/index.tsx +++ b/components/RaidDropdown/index.tsx @@ -55,7 +55,6 @@ const RaidDropdown = React.forwardRef(function useFiel } : {} function fetchRaids() { - console.log("Fetching list of raids...") api.endpoints.raids.getAll(headers) .then((response) => { const raids = response.data.map((r: any) => r.raid) diff --git a/pages/[username].tsx b/pages/[username].tsx index eba50ebd..96d4b88e 100644 --- a/pages/[username].tsx +++ b/pages/[username].tsx @@ -21,7 +21,6 @@ const ProfileRoute: React.FC = () => { }) useEffect(() => { - console.log(`Fetching profile for ${username}...`) fetchProfile(username as string) }, [username]) diff --git a/pages/saved.tsx b/pages/saved.tsx index 8f547c60..ef2b28ac 100644 --- a/pages/saved.tsx +++ b/pages/saved.tsx @@ -44,8 +44,6 @@ const SavedRoute: React.FC = () => { }, []) const fetchTeams = useCallback(() => { - console.log(`Fetching favorite teams with filters... ${element} ${raidId} ${recencyInSeconds}`) - const filterParams = { params: { element: element, diff --git a/pages/teams.tsx b/pages/teams.tsx index c6e43cca..76c6d21b 100644 --- a/pages/teams.tsx +++ b/pages/teams.tsx @@ -44,8 +44,6 @@ const TeamsRoute: React.FC = () => { }, []) const fetchTeams = useCallback(() => { - console.log(`Fetching teams with filters... ${element} ${raidId} ${recencyInSeconds}`) - const filterParams = { params: { element: element,