Merge pull request #64 from traP-jp/feature/49

🚧 MyAchievesをgridで表示させつつMissionsページと共通化
traP-jp · Jun 24, 2023 · 4d3e149 · 4d3e149
2 parents 81b67b8 + 15264cf
commit 4d3e149
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 83 deletions.
diff --git a/src/components/DashBoard/MyAchieves.tsx b/src/components/DashBoard/MyAchieves.tsx
@@ -1,24 +1,25 @@
-import { Flex, Loader } from '@mantine/core';
+import { Loader } from '@mantine/core';
 import type { FC } from 'react';
 import useSWR from 'swr';
-import { MissionPanel } from '@/components/DashBoard/MissionPanel';
+import { MissionList } from '@/components/MissionList';
 import { fetcher } from '@/lib/fetcher';
 import { getApiBaseUrl } from '@/lib/getApiBaseUrl';
-import type { GetUserResponse } from '@/schema/schema';
+import type { GetMissionsResponse, GetUserResponse } from '@/schema/schema';
 
 export const MyAchieves: FC = () => {
   const { data } = useSWR<GetUserResponse>(
     `${getApiBaseUrl()}/users/me`,
     fetcher,
   );
+  const { data: missions } = useSWR<GetMissionsResponse>(
+    `${getApiBaseUrl()}/missions`,
+    fetcher,
+  );
+  const achieves = missions
+    ? missions.filter((mission) => data?.achieves.includes(mission.id))
+    : undefined;
 
   if (data == undefined) return <Loader variant="oval" />;
 
-  return (
-    <Flex wrap="wrap" gap="xs" p="lg">
-      {data.achieves.map((missionId) => (
-        <MissionPanel key={missionId} missionId={missionId} />
-      ))}
-    </Flex>
-  );
+  return <MissionList missions={achieves} />;
 };
diff --git a/src/components/DashBoard/index.tsx b/src/components/DashBoard/index.tsx
@@ -70,9 +70,9 @@ export const DashBoard: FC = () => {
           <Center>
             <h2>Your recent achievement</h2>
           </Center>
-          <Center>
+          <div>
             <MyAchieves />
-          </Center>
+          </div>
         </div>
       </Layout>
     </>

diff --git a/src/components/MissionList.tsx b/src/components/MissionList.tsx
@@ -0,0 +1,76 @@
+import { css } from '@emotion/react';
+import { Card, Overlay, useMantineTheme, Text, Skeleton } from '@mantine/core';
+import { IconCheck } from '@tabler/icons-react';
+import Link from 'next/link';
+import type { FC } from 'react';
+import type { GetMissionResponse, GetUserResponse } from '@/schema/schema';
+
+export type MissionListProps = {
+  missions?: GetMissionResponse[];
+  user?: GetUserResponse;
+};
+
+export const MissionList: FC<MissionListProps> = ({ missions, user }) => {
+  const theme = useMantineTheme();
+
+  return (
+    <div
+      css={css`
+        display: grid;
+        margin-top: ${theme.spacing.md};
+        gap: 16px;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      `}
+    >
+      {missions
+        ? missions.map((mission) => (
+            <Link
+              href={`/missions/${mission.id}`}
+              key={mission.id}
+              css={css`
+                color: inherit;
+                text-decoration: none;
+              `}
+            >
+              <Card
+                shadow="xs"
+                padding="lg"
+                css={css`
+                  transition: all 0.2s;
+
+                  &:hover {
+                    box-shadow: ${theme.shadows.sm};
+                    opacity: 0.8;
+                  }
+                `}
+              >
+                {user?.achieves.includes(mission.id) && (
+                  <Overlay
+                    css={css`
+                      display: grid;
+                      background-color: ${theme.fn.rgba(theme.white, 0.8)};
+                      color: ${theme.colors.lime[5]};
+                      place-items: center;
+                    `}
+                  >
+                    <IconCheck size="5rem" />
+                  </Overlay>
+                )}
+                <Text fw="500" lineClamp={1} className="mission-title">
+                  {mission.name}
+                </Text>
+                <Text
+                  color="dimmed"
+                  lineClamp={2}
+                  h="3rem"
+                  className="mission-description"
+                >
+                  {mission.description}
+                </Text>
+              </Card>
+            </Link>
+          ))
+        : new Array(3).fill(0).map((_, i) => <Skeleton h={90} key={i} />)}
+    </div>
+  );
+};
diff --git a/src/pages/missions.tsx b/src/pages/missions.tsx
@@ -1,18 +1,10 @@
 import { css } from '@emotion/react';
-import {
-  Card,
-  Overlay,
-  RingProgress,
-  Skeleton,
-  Text,
-  useMantineTheme,
-} from '@mantine/core';
-import { IconCheck } from '@tabler/icons-react';
+import { RingProgress, useMantineTheme } from '@mantine/core';
 import type { NextPage } from 'next';
-import Link from 'next/link';
 import useSWR from 'swr';
 import { Description } from '@/components/Description';
 import { Layout } from '@/components/Layout';
+import { MissionList } from '@/components/MissionList';
 import { fetcher } from '@/lib/fetcher';
 import { getApiBaseUrl } from '@/lib/getApiBaseUrl';
 import type { GetMissionsResponse, GetUserResponse } from '@/schema/schema';
@@ -65,67 +57,7 @@ const Missions: NextPage = () => {
               />
             )}
           </h1>
-          <div
-            css={css`
-              display: grid;
-              margin-top: ${theme.spacing.md};
-              gap: 16px;
-              grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            `}
-          >
-            {missions
-              ? missions.map((mission) => (
-                  <Link
-                    href={`/missions/${mission.id}`}
-                    key={mission.id}
-                    css={css`
-                      color: inherit;
-                      text-decoration: none;
-                    `}
-                  >
-                    <Card
-                      shadow="xs"
-                      padding="lg"
-                      css={css`
-                        transition: all 0.2s;
-
-                        &:hover {
-                          box-shadow: ${theme.shadows.sm};
-                          opacity: 0.8;
-                        }
-                      `}
-                    >
-                      {user?.achieves.includes(mission.id) && (
-                        <Overlay
-                          css={css`
-                            display: grid;
-                            background-color: ${theme.fn.rgba(
-                              theme.white,
-                              0.8,
-                            )};
-                            color: ${theme.colors.lime[5]};
-                            place-items: center;
-                          `}
-                        >
-                          <IconCheck size="5rem" />
-                        </Overlay>
-                      )}
-                      <Text fw="500" lineClamp={1} className="mission-title">
-                        {mission.name}
-                      </Text>
-                      <Text
-                        color="dimmed"
-                        lineClamp={2}
-                        h="3rem"
-                        className="mission-description"
-                      >
-                        {mission.description}
-                      </Text>
-                    </Card>
-                  </Link>
-                ))
-              : new Array(3).fill(0).map((_, i) => <Skeleton h={90} key={i} />)}
-          </div>
+          <MissionList missions={missions} user={user} />
         </div>
       </Layout>
     </>