Issues/110

src/pages/achievements/[id]/index.tsx

@@ -1,5 +1,5 @@
 import { type ReactElement } from "react";
-import useSWR from "swr";
+import useSWRImmutable from "swr/immutable";
 import { match } from "ts-pattern";
 import { useAchievements } from "@/hooks/db/achievements";
 import { useTeam } from "@/hooks/teams";
@@ -10,31 +10,36 @@ import { type Achievement } from "@/types/post-data/achievements";
 export default function Page(): ReactElement {
   const { id } = useParams("/achievements/:id");
   const { fetch } = useAchievements(useTeam);
-  const swrAchievement = useSWR("achievement", fetchAchievement);
+  const swrAchievement = useSWRImmutable("achievement", fetchAchievement);
 
-  async function fetchAchievement(): Promise<Achievement> {
+  async function fetchAchievement(): Promise<Achievement[]> {
     const achievements = await fetch();
 
     if (achievements == null) throw new Error("No unlockedAchievements found.");
 
-    const achievement = achievements.find((a) => a.id === Number(id));
-
-    if (achievement == null) throw new Error("No achievement found.");
-
-    return achievement;
+    return achievements;
   }
 
   return match(swrAchievement)
     .with(S.Loading, () => <p>Loading...</p>)
     .with(S.Success, ({ data }) => (
       <div>
-        <h1>name: {data.name}</h1>
-        <p>id: {data.id}</p>
-        <p>description: {data.description}</p>
-        <p>icon: {data.icon}</p>
-        <p>createdAt: {String(data.createdAt)}</p>
-        <p>updatedAt: {String(data.updatedAt)}</p>
-        <p>tags: {data.tags.map((tag) => tag.name).join(", ")}</p>
+        {data.map((d) => {
+          if (d.id === Number(id)) {
+            return (
+              <div key={d.id}>
+                <h1>name: {d.name}</h1>
+                <p>id: {d.id}</p>
+                <p>description: {d.description}</p>
+                <p>icon: {d.icon}</p>
+                <p>createdAt: {String(d.createdAt)}</p>
+                <p>updatedAt: {String(d.updatedAt)}</p>
+                <p>tags: {d.tags.map((tag) => tag.name).join(", ")}</p>
+              </div>
+            );
+          }
+          return null;
+        })}
       </div>
     ))
     .otherwise(({ error }) => {

src/pages/achievements/index.tsx

@@ -19,24 +19,20 @@ export default function Page(): ReactElement {
   const { fetch } = useAchievements(useTeam);
   const swrAchievements = useSWR("achievements", fetchAchievements);
 
-  async function fetchAchievements(): Promise<{
-    achievements: Achievement[];
-  }> {
+  async function fetchAchievements(): Promise<Achievement[]> {
     const achievements = await fetch();
 
     if (achievements == null) throw new Error("No achievements found.");
 
-    return {
-      achievements,
-    };
+    return achievements;
   }
 
   return match(swrAchievements)
     .with(S.Loading, () => <div>Loading...</div>)
-    .with(S.Success, ({ data: { achievements } }) => (
+    .with(S.Success, ({ data }) => (
       <BoxStyle width="70%">
         <Box mt="20vh" />
-        {achievements.map((achievement) => {
+        {data.map((achievement) => {
           const typedAchievement = achievement as unknown as Achievement;
           return (
             <AchievementCard

src/pages/members/[id]/index.tsx

@@ -1,82 +1,49 @@
-import { Box, Flex, Table } from "@radix-ui/themes";
 import { type ReactElement } from "react";
-import styled from "styled-components";
-import Members from "@/assets/members.json";
-import UnlockedAchievements from "@/assets/unlockedAchievements.json";
-import { RecentUnlockedCard } from "@/components/achievements/RecentUnlockedCard";
-import { Info } from "@/components/member/Info";
+import useSWRImmutable from "swr/immutable";
+import { match } from "ts-pattern";
+import { useTeam } from "@/hooks/teams";
+import { S } from "@/lib/consts";
 import { useParams } from "@/router";
-import { type UnlockedAchievement } from "@/types/post-data/unlocked-achievements";
-
-const BoxStyle = styled(Box)`
-  margin: 0 auto;
-`;
-
-const FlexStyle = styled(Flex)`
-  margin: 1rem 1rem;
-`;
-
-const ScrollStyle = styled.div`
-  height: calc(100vh - 4.8rem);
-  width: 100%;
-  overflow: scroll;
-`;
+import { type Member } from "@/types/member";
 
 export default function Page(): ReactElement {
-  // const { params } = useMatch('/posts/$id')
-  const { id } = useParams("/achievements/:id");
-
-  const memberRecentUnlocked = UnlockedAchievements.unlockedAchievements.filter(
-    (a) => a.memberEmail === id,
-  );
-
-  const memberList = Members.members.map((m) => {
-    const unlockedArchievements =
-      UnlockedAchievements.unlockedAchievements.filter(
-        (u) => u.memberEmail === m.email,
-      );
-    return {
-      ...m,
-      unlockedCount: unlockedArchievements.length,
-    };
-  });
-  let memberIndex: number = 0;
-  memberList.sort((a, b) => b.unlockedCount - a.unlockedCount);
-  memberList.forEach((m, index) => {
-    if (m.email === id) {
-      memberIndex = index + 1;
-    }
-  });
-
-  return (
-    <FlexStyle gap="5">
-      <Info id={id} point={memberRecentUnlocked.length} rank={memberIndex} />
-      <BoxStyle width="70%">
-        <ScrollStyle>
-          <Table.Root>
-            <Table.Header>
-              <Table.Row>
-                <Table.ColumnHeaderCell> </Table.ColumnHeaderCell>
-                <Table.ColumnHeaderCell> </Table.ColumnHeaderCell>
-                <Table.ColumnHeaderCell>名前</Table.ColumnHeaderCell>
-                <Table.ColumnHeaderCell>説明</Table.ColumnHeaderCell>
-                <Table.ColumnHeaderCell>タグ</Table.ColumnHeaderCell>
-              </Table.Row>
-            </Table.Header>
-
-            <Table.Body>
-              {memberRecentUnlocked.map((achievement) => (
-                <RecentUnlockedCard
-                  key={achievement.memberEmail}
-                  unlockedAchievement={
-                    achievement as unknown as UnlockedAchievement
-                  }
-                />
-              ))}
-            </Table.Body>
-          </Table.Root>
-        </ScrollStyle>
-      </BoxStyle>
-    </FlexStyle>
-  );
+  const { id } = useParams("/members/:id");
+  const { fetchMembers } = useTeam();
+  const swrMembers = useSWRImmutable("members", fetchMember);
+
+  async function fetchMember(): Promise<Member[]> {
+    const members = await fetchMembers();
+
+    if (members == null) throw new Error("No unlockedAchievements found.");
+
+    return members;
+  }
+
+  return match(swrMembers)
+    .with(S.Loading, () => <p>Loading...</p>)
+    .with(S.Success, ({ data }) => (
+      <div>
+        {data.map((d) => {
+          if (d.email === id) {
+            return (
+              <div key={d.email}>
+                <h1>name: {d.name}</h1>
+                <p>screen_name: {d.screen_name}</p>
+                <p>email: {d.email}</p>
+                <p>myself: {d.myself}</p>
+                <p>createdAt: {String(d.joined_at)}</p>
+                <p>posts_count: {d.posts_count}</p>
+                <p>last_accessed_at: {d.last_accessed_at}</p>
+                <p>role: {d.role}</p>
+                <p>icon: {d.icon}</p>
+              </div>
+            );
+          }
+          return null;
+        })}
+      </div>
+    ))
+    .otherwise(({ error }) => {
+      throw error;
+    });
 }