teamSelect画面の修正

SystemEngineeringTeam · Jun 23, 2024 · 3406303 · 3406303
1 parent 9840439
commit 3406303
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 34 deletions.
diff --git a/src/pages/auth/callback/index.tsx b/src/pages/auth/callback/index.tsx
@@ -12,22 +12,41 @@ import { $accessTokenData } from "@/lib/stores/auth";
 import { useNavigate } from "@/router";
 import { type AccessTokenData } from "@/types/auth";
 
-export default function Page(): ReactElement {
+function TeamSelector(): ReactElement {
   const { fetchJoinedTeams, markTeamNameAsSelected } = useMember();
-  const swrTokenAndTeams = useSWR("tokenAndTeams", fetchTokenAndTeams);
-  const accessTokenData = useStore($accessTokenData);
-  const navigate = useNavigate();
+  const swrJoinedTeams = useSWR("joinedTeams", fetchJoinedTeams);
 
   const FlexStyled = styled(Flex)`
     gap: 1rem;
   `;
 
-  type TokenAndTeams = {
-    tokenData: AccessTokenData;
-    teams: Awaited<ReturnType<typeof fetchJoinedTeams>>;
-  };
+  return match(swrJoinedTeams)
+    .with(S.Loading, () => <p>Loading...</p>)
+    .with(S.Success, ({ data }) => (
+      <FlexStyled>
+        {data.map((team) => (
+          <Card
+            key={team.name}
+            onClick={() => {
+              markTeamNameAsSelected(team.name);
+            }}
+          >
+            <img alt={team.name} src={team.icon} />
+          </Card>
+        ))}
+      </FlexStyled>
+    ))
+    .otherwise(({ error }) => {
+      throw error;
+    });
+}
 
-  async function fetchTokenAndTeams(): Promise<TokenAndTeams> {
+export default function Page(): ReactElement {
+  const swrTokenAndTeams = useSWR("tokenAndTeams", fetchTokenAndTeams);
+  const accessTokenData = useStore($accessTokenData);
+  const navigate = useNavigate();
+
+  async function fetchTokenAndTeams(): Promise<AccessTokenData> {
     if (accessTokenData != null) {
       // eslint-disable-next-line no-console
       console.warn("Access token has already been set");
@@ -41,37 +60,14 @@ export default function Page(): ReactElement {
     const tokenData = await requestAccessTokenData(code);
     $accessTokenData.set(tokenData);
 
-    const teams = await fetchJoinedTeams();
-
-    return {
-      tokenData,
-      teams,
-    };
-  }
-
-  function handleTeamClick(teamName: string): void {
-    markTeamNameAsSelected(teamName);
-    navigate("/ranking");
+    return tokenData;
   }
 
   return (
     <Center>
       {match(swrTokenAndTeams)
         .with(S.Loading, () => <p>Loading...</p>)
-        .with(S.Success, ({ data: { teams } }) => (
-          <FlexStyled>
-            {teams.map((team) => (
-              <Card
-                key={team.name}
-                onClick={() => {
-                  handleTeamClick(team.name);
-                }}
-              >
-                <img alt={team.name} src={team.icon} />
-              </Card>
-            ))}
-          </FlexStyled>
-        ))
+        .with(S.Success, () => <TeamSelector />)
         .otherwise(({ error }) => {
           throw error;
         })}

diff --git a/src/router.ts b/src/router.ts
@@ -13,6 +13,7 @@ export type Path =
   | `/members`
   | `/members/:id`
   | `/ranking`
+  | `/test`
   | `/unlocked`;
 
 export type Params = {