Merge branch 'main' into issues/93

src/hooks/db/_esaDB.ts

@@ -36,7 +36,6 @@ export function useEsaDB<T>(
       await create();
       await waitMs(1000);
     }
-
     const data = await fetch();
     config.atom.set(data);
     console.log("init!");

src/lib/localstorage.ts

@@ -0,0 +1,18 @@
+export function localStorageProvider(): Map<string, any> {
+  // 初期化時に、 `localStorage` から Map にデータを復元します。
+  const map = new Map<string, any>(
+    JSON.parse(localStorage.getItem("app-cache") ?? "[]") as
+      | Iterable<readonly [string, any]>
+      | null
+      | undefined,
+  );
+
+  // アプリが終了する前に、すべてのデータを `localStorage` に保存します。
+  window.addEventListener("beforeunload", () => {
+    const appCache = JSON.stringify(Array.from(map.entries()));
+    localStorage.setItem("app-cache", appCache);
+  });
+
+  // パフォーマンスのために、書き込みと読み取りには引き続き Map を使用します。
+  return map;
+}

src/main.tsx

@@ -1,7 +1,13 @@
 import { Routes } from "@generouted/react-router";
 import { createRoot } from "react-dom/client";
+import { SWRConfig } from "swr";
+import { localStorageProvider } from "@/lib/localstorage";
 
 const root = document.getElementById("root");
 if (root == null) throw new Error("Root element not found");
 
-createRoot(root).render(<Routes />);
+createRoot(root).render(
+  <SWRConfig value={{ provider: localStorageProvider }}>
+    <Routes />
+  </SWRConfig>,
+);

src/pages/achievements/index.tsx

@@ -1,5 +1,5 @@
 import { Box } from "@radix-ui/themes";
-import { useEffect, type ReactElement } from "react";
+import { type ReactElement } from "react";
 import styled from "styled-components";
 import useSWR from "swr";
 import { match } from "ts-pattern";
@@ -16,7 +16,7 @@ const BoxStyle = styled(Box)`
 `;
 
 export default function Page(): ReactElement {
-  const { init, fetch } = useAchievements(useTeam);
+  const { fetch } = useAchievements(useTeam);
   const swrAchievements = useSWR("achievements", fetchAchievements);
 
   async function fetchAchievements(): Promise<{
@@ -31,10 +31,6 @@ export default function Page(): ReactElement {
     };
   }
 
-  useEffect(() => {
-    void init();
-  }, []);
-
   return match(swrAchievements)
     .with(S.Loading, () => <div>Loading...</div>)
     .with(S.Success, ({ data: { achievements } }) => (

src/pages/auth/callback/index.tsx

@@ -5,7 +5,10 @@ import styled from "styled-components";
 import useSWR from "swr";
 import { match } from "ts-pattern";
 import { Center } from "@/components/Center";
+import { useAchievements } from "@/hooks/db/achievements";
+import { useUnlockedAchievements } from "@/hooks/db/unlocked-achievements";
 import { useMember } from "@/hooks/member";
+import { useTeam } from "@/hooks/teams";
 import { S } from "@/lib/consts";
 import { requestAccessTokenData } from "@/lib/services/esa";
 import { $accessTokenData } from "@/lib/stores/auth";
@@ -57,6 +60,8 @@ export default function Page(): ReactElement {
   const navigate = useNavigate();
 
   async function fetchTokenAndTeams(): Promise<AccessTokenData> {
+    const { init: initAchievements } = useAchievements(useTeam);
+    const { init: initUnlockedAchievements } = useUnlockedAchievements(useTeam);
     if (accessTokenData != null) {
       // eslint-disable-next-line no-console
       console.warn("Access token has already been set");
@@ -70,6 +75,9 @@ export default function Page(): ReactElement {
     const tokenData = await requestAccessTokenData(code);
     $accessTokenData.set(tokenData);
 
+    await initAchievements();
+    await initUnlockedAchievements();
+
     return tokenData;
   }
 

src/pages/members/index.tsx

@@ -1,5 +1,5 @@
 import { Box, Table } from "@radix-ui/themes";
-import { useEffect, type ReactElement } from "react";
+import { type ReactElement } from "react";
 import styled from "styled-components";
 // import SampleMember from "@/assets/members.json";
 // import SampleUnlockedAchievements from "@/assets/unlockedAchievements.json";
@@ -23,7 +23,7 @@ const BoxStyle = styled(Box)`
 
 export default function Page(): ReactElement {
   const { fetchMembers } = useTeam();
-  const { init, fetch } = useUnlockedAchievements(useTeam);
+  const { fetch } = useUnlockedAchievements(useTeam);
   const swrMembersWithUnlockedCount = useSWR(
     "membersWithUnlockedCount",
     fetchMembersWithUnlockedCount,
@@ -49,10 +49,6 @@ export default function Page(): ReactElement {
       .sort((a, b) => b.unlockedCount - a.unlockedCount);
   }
 
-  useEffect(() => {
-    void init();
-  }, []);
-
   return match(swrMembersWithUnlockedCount)
     .with(S.Loading, () => <div>Loading...</div>)
     .with(S.Success, ({ data }) => (

src/pages/ranking/index.tsx

@@ -1,5 +1,5 @@
 import { Text, Box } from "@radix-ui/themes";
-import { useEffect, type ReactElement } from "react";
+import { type ReactElement } from "react";
 import styled from "styled-components";
 import useSWR from "swr";
 import { match } from "ts-pattern";
@@ -19,7 +19,7 @@ type MembersWithUnlockedCount = Array<
 
 export default function Page(): ReactElement {
   const { fetchMembers } = useTeam();
-  const { init, fetch } = useUnlockedAchievements(useTeam);
+  const { fetch } = useUnlockedAchievements(useTeam);
   const swrMembersWithUnlockedCount = useSWR(
     "membersWithUnlockedCount",
     fetchMembersWithUnlockedCount,
@@ -53,9 +53,6 @@ export default function Page(): ReactElement {
     };
   }
 
-  useEffect(() => {
-    void init();
-  }, []);
   const RankingCardStyle = styled.div`
     border-radius: 50px;
     top: 16vh;

src/pages/unlocked/index.tsx

@@ -15,13 +15,9 @@ const BoxStyle = styled(Box)`
 `;
 
 export default function Page(): ReactElement {
-  const { init, fetch } = useAchievements(useTeam);
+  const { fetch } = useAchievements(useTeam);
   const swrFetchAchievements = useSWR("fetchAchievements", fetch);
 
-  useEffect(() => {
-    void init();
-  }, []);
-
   return match(swrFetchAchievements)
     .with(S.Loading, () => <p>Loading...</p>)
     .with(S.Success, ({ data }) => (