From 589570ebfd7154d972bd39d54b86e6fdb11f624f Mon Sep 17 00:00:00 2001 From: Calli Date: Fri, 23 Jun 2023 19:28:38 +0300 Subject: [PATCH] simplify state management --- src/app/page.tsx | 119 ++++++++++++++++++++++------------------------- 1 file changed, 56 insertions(+), 63 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index d9c77ab..fc17d1b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -18,85 +18,78 @@ const Home = () => { const searchParams = useSearchParams(); const code = searchParams && searchParams.get("code"); - // Initialize SSO env - useEffect(() => { - fetch("api/env") - .then((r) => r.json()) - .then((j) => { - setEnvironment({ - EVE_SSO_CLIENT_ID: j.EVE_SSO_CLIENT_ID, - EVE_SSO_CALLBACK_URL: j.EVE_SSO_CALLBACK_URL, - }); - }); - }, []); - // Memoize chracter state manipulations - const addCharacter = useCallback((character: AccessToken) => { - setCharacters((chars) => [ - ...chars.filter( - (c) => c.character.characterId !== character.character.characterId - ), - character, - ]); - }, []); - const deleteCharacter = useCallback( - (character: AccessToken) => { - setCharacters( - characters.filter( - (c) => character.character.characterId !== c.character.characterId - ) - ); - }, - [characters] - ); + const deleteCharacter = (character: AccessToken) => { + const charactersToSave = characters.filter( + (c) => character.character.characterId !== c.character.characterId + ); + setCharacters(charactersToSave); + saveCharacters(charactersToSave); + }; - const updateCharacter = useCallback( - (character: AccessToken, updates: CharacterUpdate) => { - setCharacters( - characters.map((c) => { - if (c.character.characterId === character.character.characterId) - return { - ...c, - ...(updates.account ? { account: updates.account } : {}), - }; - return c; - }) - ); - }, - [characters] - ); + const updateCharacter = ( + character: AccessToken, + updates: CharacterUpdate + ) => { + const charactersToSave = characters.map((c) => { + if (c.character.characterId === character.character.characterId) + return { + ...c, + ...(updates.account ? { account: updates.account } : {}), + }; + return c; + }); + setCharacters(charactersToSave); + saveCharacters(charactersToSave); + }; - const refreshSession = useCallback((characters: AccessToken[]) => { - Promise.all(characters.map((c) => refreshToken(c))) - .then(setCharacters) - .finally(() => setSessionReady(true)); - }, []); + const refreshSession = (characters: AccessToken[]) => { + return Promise.all(characters.map((c) => refreshToken(c))); + }; - // Handle EVE SSO callback - useEffect(() => { + const handleCallback = async ( + characters: AccessToken[] + ): Promise => { if (code) { window.history.replaceState(null, "", "/"); - fetch(`api/token?code=${code}`) - .then((res) => res.json()) - .then(addCharacter) - .catch(); + const res = await fetch(`api/token?code=${code}`); + return [...characters, await res.json()]; } - }, [code, addCharacter]); + return Promise.resolve(characters); + }; - // Initialise saved characters - useEffect(() => { + const initializeCharacters = useCallback((): AccessToken[] => { const localStorageCharacters = localStorage.getItem("characters"); if (localStorageCharacters) { const characterArray: AccessToken[] = JSON.parse(localStorageCharacters); - setCharacters(characterArray); + return characterArray; } + return []; }, []); - // Update saved characters to local storage on state change - useEffect(() => { + const saveCharacters = (characters: AccessToken[]): AccessToken[] => { localStorage.setItem("characters", JSON.stringify(characters)); - }, [characters]); + return characters; + }; + + // Initialize EVE PI + useEffect(() => { + fetch("api/env") + .then((r) => r.json()) + .then((env) => { + setEnvironment({ + EVE_SSO_CLIENT_ID: env.EVE_SSO_CLIENT_ID, + EVE_SSO_CALLBACK_URL: env.EVE_SSO_CALLBACK_URL, + }); + }) + .then(initializeCharacters) + .then(refreshSession) + .then(handleCallback) + .then(saveCharacters) + .then(setCharacters) + .then(() => setSessionReady(true)); + }, []); return (