simplify state management
This commit is contained in:
119
src/app/page.tsx
119
src/app/page.tsx
@@ -18,85 +18,78 @@ const Home = () => {
|
|||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const code = searchParams && searchParams.get("code");
|
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
|
// Memoize chracter state manipulations
|
||||||
const addCharacter = useCallback((character: AccessToken) => {
|
|
||||||
setCharacters((chars) => [
|
|
||||||
...chars.filter(
|
|
||||||
(c) => c.character.characterId !== character.character.characterId
|
|
||||||
),
|
|
||||||
character,
|
|
||||||
]);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const deleteCharacter = useCallback(
|
const deleteCharacter = (character: AccessToken) => {
|
||||||
(character: AccessToken) => {
|
const charactersToSave = characters.filter(
|
||||||
setCharacters(
|
(c) => character.character.characterId !== c.character.characterId
|
||||||
characters.filter(
|
);
|
||||||
(c) => character.character.characterId !== c.character.characterId
|
setCharacters(charactersToSave);
|
||||||
)
|
saveCharacters(charactersToSave);
|
||||||
);
|
};
|
||||||
},
|
|
||||||
[characters]
|
|
||||||
);
|
|
||||||
|
|
||||||
const updateCharacter = useCallback(
|
const updateCharacter = (
|
||||||
(character: AccessToken, updates: CharacterUpdate) => {
|
character: AccessToken,
|
||||||
setCharacters(
|
updates: CharacterUpdate
|
||||||
characters.map((c) => {
|
) => {
|
||||||
if (c.character.characterId === character.character.characterId)
|
const charactersToSave = characters.map((c) => {
|
||||||
return {
|
if (c.character.characterId === character.character.characterId)
|
||||||
...c,
|
return {
|
||||||
...(updates.account ? { account: updates.account } : {}),
|
...c,
|
||||||
};
|
...(updates.account ? { account: updates.account } : {}),
|
||||||
return c;
|
};
|
||||||
})
|
return c;
|
||||||
);
|
});
|
||||||
},
|
setCharacters(charactersToSave);
|
||||||
[characters]
|
saveCharacters(charactersToSave);
|
||||||
);
|
};
|
||||||
|
|
||||||
const refreshSession = useCallback((characters: AccessToken[]) => {
|
const refreshSession = (characters: AccessToken[]) => {
|
||||||
Promise.all(characters.map((c) => refreshToken(c)))
|
return Promise.all(characters.map((c) => refreshToken(c)));
|
||||||
.then(setCharacters)
|
};
|
||||||
.finally(() => setSessionReady(true));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Handle EVE SSO callback
|
const handleCallback = async (
|
||||||
useEffect(() => {
|
characters: AccessToken[]
|
||||||
|
): Promise<AccessToken[]> => {
|
||||||
if (code) {
|
if (code) {
|
||||||
window.history.replaceState(null, "", "/");
|
window.history.replaceState(null, "", "/");
|
||||||
fetch(`api/token?code=${code}`)
|
const res = await fetch(`api/token?code=${code}`);
|
||||||
.then((res) => res.json())
|
return [...characters, await res.json()];
|
||||||
.then(addCharacter)
|
|
||||||
.catch();
|
|
||||||
}
|
}
|
||||||
}, [code, addCharacter]);
|
return Promise.resolve(characters);
|
||||||
|
};
|
||||||
|
|
||||||
// Initialise saved characters
|
const initializeCharacters = useCallback((): AccessToken[] => {
|
||||||
useEffect(() => {
|
|
||||||
const localStorageCharacters = localStorage.getItem("characters");
|
const localStorageCharacters = localStorage.getItem("characters");
|
||||||
if (localStorageCharacters) {
|
if (localStorageCharacters) {
|
||||||
const characterArray: AccessToken[] = JSON.parse(localStorageCharacters);
|
const characterArray: AccessToken[] = JSON.parse(localStorageCharacters);
|
||||||
setCharacters(characterArray);
|
return characterArray;
|
||||||
}
|
}
|
||||||
|
return [];
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Update saved characters to local storage on state change
|
const saveCharacters = (characters: AccessToken[]): AccessToken[] => {
|
||||||
useEffect(() => {
|
|
||||||
localStorage.setItem("characters", JSON.stringify(characters));
|
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 (
|
return (
|
||||||
<SessionContext.Provider
|
<SessionContext.Provider
|
||||||
|
Reference in New Issue
Block a user