Merge pull request #66 from traP-jp/feature/#57

♻️ useUserInfoのリファクタリングとそれに伴うエラーの修整
traP-jp · Jun 24, 2023 · 1d27785 · 1d27785
2 parents 4d3e149 + bcbb72c
commit 1d27785
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 62 deletions.
diff --git a/src/components/AuthButton.tsx b/src/components/AuthButton.tsx
@@ -9,14 +9,14 @@ import { getApiBaseUrl } from '@/lib/getApiBaseUrl';
 
 export const AuthButton: FC = () => {
   const theme = useMantineTheme();
-  const { userId } = useUserInfo() ?? { userId: undefined };
+  const { data, error } = useUserInfo();
   const { push } = useRouter();
   const isMobile = useMediaQuery(theme.fn.smallerThan('sm'));
 
-  if (userId !== undefined) {
+  if (error === undefined && data !== undefined) {
     return (
       <>
-        <UserAvatar userId={userId} iconSize={isMobile ? 24 : 32} />
+        <UserAvatar userId={data.id} iconSize={isMobile ? 24 : 32} />
       </>
     );
   }

diff --git a/src/components/DashBoard/MyAchieves.tsx b/src/components/DashBoard/MyAchieves.tsx
@@ -2,24 +2,26 @@ import { Loader } from '@mantine/core';
 import type { FC } from 'react';
 import useSWR from 'swr';
 import { MissionList } from '@/components/MissionList';
+import { useUserInfo } from '@/hooks/useUserInfo';
 import { fetcher } from '@/lib/fetcher';
 import { getApiBaseUrl } from '@/lib/getApiBaseUrl';
-import type { GetMissionsResponse, GetUserResponse } from '@/schema/schema';
+import type { GetMissionsResponse } from '@/schema/schema';
 
 export const MyAchieves: FC = () => {
-  const { data } = useSWR<GetUserResponse>(
-    `${getApiBaseUrl()}/users/me`,
-    fetcher,
-  );
+  const { data: user, error } = useUserInfo();
   const { data: missions } = useSWR<GetMissionsResponse>(
     `${getApiBaseUrl()}/missions`,
     fetcher,
   );
+
+  if (user == undefined || missions === undefined)
+    return <Loader variant="oval" />;
+
+  if (error !== undefined) return <div>Something went wrong</div>;
+
   const achieves = missions
-    ? missions.filter((mission) => data?.achieves.includes(mission.id))
+    ? missions.filter((mission) => user.achieves.includes(mission.id))
     : undefined;
 
-  if (data == undefined) return <Loader variant="oval" />;
-
   return <MissionList missions={achieves} />;
 };
diff --git a/src/components/DashBoard/Ranking.tsx b/src/components/DashBoard/Ranking.tsx
@@ -1,18 +1,12 @@
 import { css } from '@emotion/react';
 import { Center, Skeleton, Text, useMantineTheme } from '@mantine/core';
 import type { FC } from 'react';
-import useSWR from 'swr';
 import { getRankSuffix } from '@/components/DashBoard/getRankSuffix';
-import { fetcher } from '@/lib/fetcher';
-import { getApiBaseUrl } from '@/lib/getApiBaseUrl';
-import type { GetUserResponse } from '@/schema/schema';
+import { useUserInfo } from '@/hooks/useUserInfo';
 
 export const Ranking: FC = () => {
   const theme = useMantineTheme();
-  const { data } = useSWR<GetUserResponse>(
-    `${getApiBaseUrl()}/users/me`,
-    fetcher,
-  );
+  const { data } = useUserInfo();
 
   const getRankColor = (rank: number) =>
     rank === 1

diff --git a/src/components/DashBoard/useMyAchievesCount.ts b/src/components/DashBoard/useMyAchievesCount.ts
@@ -1,13 +1,7 @@
-import useSWR from 'swr';
-import { fetcher } from '@/lib/fetcher';
-import { getApiBaseUrl } from '@/lib/getApiBaseUrl';
-import type { GetUserResponse } from '@/schema/schema';
+import { useUserInfo } from '@/hooks/useUserInfo';
 
 export const useMyAchievesCount = () => {
-  const { data } = useSWR<GetUserResponse>(
-    `${getApiBaseUrl()}/users/me`,
-    fetcher,
-  );
+  const { data } = useUserInfo();
 
   return data?.achieves.length;
 };
diff --git a/src/components/UserAvatar.tsx b/src/components/UserAvatar.tsx
@@ -15,13 +15,11 @@ export const UserAvatar: FC<UserAvatarProps> = ({ userId, iconSize }) => {
 };
 
 export const MyUserAvatar: FC<Omit<UserAvatarProps, 'userId'>> = (props) => {
-  const info = useUserInfo();
+  const { data, error } = useUserInfo();
 
-  if (info === undefined) return null;
+  if (data === undefined) return <Skeleton circle />;
 
-  const { userId } = info;
+  if (error !== undefined) return null;
 
-  if (userId === undefined) return <Skeleton circle />;
-
-  return <UserAvatar userId={userId} {...props} />;
+  return <UserAvatar userId={data.id} {...props} />;
 };
diff --git a/src/hooks/useUserInfo.ts b/src/hooks/useUserInfo.ts
@@ -1,5 +1,6 @@
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
+import type { SWRResponse } from 'swr';
 import useSWR from 'swr';
 import { useConfirmation } from '@/features/confirmation/useConfirmation';
 import type { FetchError } from '@/lib/fetcher';
@@ -11,13 +12,16 @@ type UseUserInfoOptions = {
   requireAuth?: boolean;
 };
 
-export const useUserInfo = (option?: UseUserInfoOptions) => {
+export const useUserInfo = (
+  option?: UseUserInfoOptions,
+): SWRResponse<GetUserResponse, FetchError> => {
   const { push } = useRouter();
   const { openConfirmationDialog } = useConfirmation();
-  const { data, error } = useSWR<GetUserResponse, FetchError>(
+  const response = useSWR<GetUserResponse, FetchError>(
     `${getApiBaseUrl()}/users/me`,
     fetcher,
   );
+  const { error } = response;
 
   useEffect(() => {
     if (!option?.requireAuth) return;
@@ -36,9 +40,5 @@ export const useUserInfo = (option?: UseUserInfoOptions) => {
     });
   }, [error, openConfirmationDialog, option?.requireAuth, push]);
 
-  if (error) {
-    return undefined;
-  }
-
-  return { userId: data?.id };
+  return response;
 };
diff --git a/src/pages/missions.tsx b/src/pages/missions.tsx
@@ -5,9 +5,10 @@ import useSWR from 'swr';
 import { Description } from '@/components/Description';
 import { Layout } from '@/components/Layout';
 import { MissionList } from '@/components/MissionList';
+import { useUserInfo } from '@/hooks/useUserInfo';
 import { fetcher } from '@/lib/fetcher';
 import { getApiBaseUrl } from '@/lib/getApiBaseUrl';
-import type { GetMissionsResponse, GetUserResponse } from '@/schema/schema';
+import type { GetMissionsResponse } from '@/schema/schema';
 
 const Missions: NextPage = () => {
   const theme = useMantineTheme();
@@ -16,10 +17,7 @@ const Missions: NextPage = () => {
     `${getApiBaseUrl()}/missions`,
     fetcher,
   );
-  const { data: user, error: userError } = useSWR<GetUserResponse>(
-    `${getApiBaseUrl()}/users/me`,
-    fetcher,
-  );
+  const { data: user, error: userError } = useUserInfo();
 
   return (
     <>

diff --git a/src/pages/missions/[missionId].tsx b/src/pages/missions/[missionId].tsx
@@ -59,30 +59,31 @@ type MissionPageProps = {
 const Mission: NextPage<MissionPageProps> = ({ missionName }) => {
   const theme = useMantineTheme();
   const { missionId } = useRouter().query as { missionId: string };
-  const { data, mutate } = useSWR<GetMissionResponse>(
+  const { data: mission, mutate } = useSWR<GetMissionResponse>(
     `${getApiBaseUrl()}/missions/${missionId}`,
     fetcher,
   );
-  const { userId } = useUserInfo() ?? { userId: undefined };
+  const { data: user, error: userError } = useUserInfo();
   const { notify } = useNotification();
   const { animate, Canvas } = useClearAnimation();
 
   const toggleClearHandler = async () => {
-    if (data === undefined) return;
-    if (userId === undefined) return;
+    if (mission === undefined) return;
+    if (user === undefined) return;
+    if (userError !== undefined) return;
 
-    const clear = userId ? !data.achievers.includes(userId) : false;
+    const clear = user.id ? !mission.achievers.includes(user.id) : false;
 
     try {
-      await mutate(updateMissionState(missionId, userId, clear), {
+      await mutate(updateMissionState(missionId, user.id, clear), {
         populateCache: true,
         revalidate: false,
         rollbackOnError: true,
         optimisticData: {
-          ...data,
+          ...mission,
           achievers: clear
-            ? data.achievers.concat(userId)
-            : data.achievers.filter((user) => user !== userId),
+            ? mission.achievers.concat(user.id)
+            : mission.achievers.filter((achiever) => achiever !== user.id),
         },
       });
 
@@ -115,8 +116,8 @@ const Mission: NextPage<MissionPageProps> = ({ missionName }) => {
               line-height: 2rem;
             `}
           >
-            {data ? (
-              data.name
+            {mission ? (
+              mission.name
             ) : (
               <Skeleton width="70%" height="2rem" radius="xl" />
             )}
@@ -127,14 +128,14 @@ const Mission: NextPage<MissionPageProps> = ({ missionName }) => {
               padding: 1rem;
             `}
           >
-            {data ? (
+            {mission ? (
               <Text
                 color="dimmed"
                 css={css`
                   line-height: 1.15rem;
                 `}
               >
-                {data.description}
+                {mission.description}
               </Text>
             ) : (
               <Skeleton width="100%" height="1.15rem" radius="xl" />
@@ -145,8 +146,10 @@ const Mission: NextPage<MissionPageProps> = ({ missionName }) => {
 
           <Center>
             <div>
-              {data ? (
-                userId !== undefined && data.achievers.includes(userId) ? (
+              {mission ? (
+                user !== undefined &&
+                userError === undefined &&
+                mission.achievers.includes(user.id) ? (
                   <Stack>
                     <Button variant="filled" size="lg" disabled>
                       クリア済み
@@ -197,8 +200,8 @@ const Mission: NextPage<MissionPageProps> = ({ missionName }) => {
               達成した人
             </h2>
             <Flex p="1rem" gap="md">
-              {data
-                ? data.achievers.map((achiever) => (
+              {mission
+                ? mission.achievers.map((achiever) => (
                     <UserAvatar
                       userId={achiever}
                       key={achiever}