Issues/151

src/components/achievements/Info.tsx

@@ -44,34 +44,40 @@ const TagGroup = styled(Flex)`
   flex-wrap: wrap;
 `;
 
-export function Info(): ReactElement {
+export function Info({
+  name,
+  tags,
+  icon,
+  rateOfUnlocked,
+}: {
+  name: string;
+  icon: string;
+  tags: Array<string | undefined>;
+  rateOfUnlocked: number;
+}): ReactElement {
   return (
     <InfoBox direction="column">
       <Flex align="center" direction="column">
-        <Avatar
-          fallback="T"
-          size="9"
-          src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop"
-        />
+        <Avatar fallback="T" size="9" src={icon} />
 
         <Text mt="1rem" size="8" weight="bold">
-          恋愛失敗
+          {name}
         </Text>
       </Flex>
 
       <Flex direction="column" mt="2rem">
         <Text weight="bold">タグ</Text>
         <TagGroup>
           <TagStyle mr="0.6rem" mt="1rem">
-            #Love
+            #{tags[0]}
           </TagStyle>
-          <TagStyle mt="1rem">#Love</TagStyle>
+          <TagStyle mt="1rem">#{tags[1]}</TagStyle>
         </TagGroup>
       </Flex>
 
       <Flex direction="column" mt="2rem">
         <Text weight="bold">全体の実績解除率</Text>
-        <PercentageUnlocked mt="1rem">50%</PercentageUnlocked>
+        <PercentageUnlocked mt="1rem">{rateOfUnlocked}%</PercentageUnlocked>
       </Flex>
     </InfoBox>
   );

src/components/member/Card.tsx

@@ -45,7 +45,7 @@ export function MemberCard({
   point,
 }: {
   member: Member;
-  point: number;
+  point?: number;
 }): ReactElement {
   const navigate = useNavigate();
 
@@ -74,10 +74,11 @@ export function MemberCard({
       />
 
       <NameStyle as="div">{member.name}</NameStyle>
-
-      <PointStyle as="div" size="6">
-        {point}pt
-      </PointStyle>
+      {point == null ? null : (
+        <PointStyle as="div" size="6">
+          {point}pt
+        </PointStyle>
+      )}
     </CardStyle>
   );
 }

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

@@ -1,47 +1,88 @@
-import { Flex } from "@radix-ui/themes";
+import { Box, Flex, Text } from "@radix-ui/themes";
 import { type ReactElement } from "react";
+import { useParams } from "react-router-dom";
+import styled from "styled-components";
+import useSWRImmutable from "swr/immutable";
+import { match } from "ts-pattern";
+import { ErrorScreen } from "@/components/ErrorScreen";
 import { Info } from "@/components/achievements/Info";
-import { RecentUnlockedCard } from "@/components/achievements/RecentUnlockedCard";
+import { MemberCard } from "@/components/member/Card";
+import { useAchievements } from "@/hooks/db/achievements";
+import { useUnlockedAchievements } from "@/hooks/db/unlocked-achievements";
+import { useTeam } from "@/hooks/teams";
+import { S } from "@/lib/consts";
+import { fetchMembersAndUnlockedAchievementsAndAchievements } from "@/lib/utils/fetchers";
+import { handleSWRError } from "@/lib/utils/swr";
 
-// export default function Page(): ReactElement {
-//   const { id } = useParams("/achievements/:id");
-//   const { fetch } = useAchievements(useTeam);
-//   const swrAchievement = useSWRImmutable("achievements", fetch);
-
-//   return match(swrAchievement)
-//     .with(S.Loading, () => <p>Loading...</p>)
-//     .with(S.Success, ({ data }) => (
-//       <div>
-//         {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.join(", ")}</p>
-//               </div>
-//             );
-//           }
-//           return null;
-//         })}
-//       </div>
-//     ))
-//     .otherwise(({ data, error }) => (
-//       <ErrorScreen error={handleSWRError(data, error)} />
-//     ));
-// }
+const BoxStyle = styled(Box)`
+  margin: 0 auto;
+  height: 80vh;
+  overflow: scroll;
+`;
 
 export default function Page(): ReactElement {
-  return (
-    <Flex>
-      <Info />
-      <Flex overflow="scroll" width="100%">
-        <RecentUnlockedCard />
-      </Flex>
-    </Flex>
+  const { id } = useParams();
+  const { fetchMembers } = useTeam();
+  const { fetch: fetchAchievements } = useAchievements(useTeam);
+  const { fetch: fetchUnlockedAchievements } = useUnlockedAchievements(useTeam);
+  const swrMembersAndUnlockedAchievementsAndAchievements = useSWRImmutable(
+    "membersAndUnlockedAchievementsAndAchievements",
+    async () =>
+      await fetchMembersAndUnlockedAchievementsAndAchievements(
+        fetchMembers,
+        fetchAchievements,
+        fetchUnlockedAchievements,
+      ),
   );
+
+  return match(swrMembersAndUnlockedAchievementsAndAchievements)
+    .with(S.Loading, () => <p>Loading...</p>)
+    .with(
+      S.Success,
+      ({ data: { members, achievements, unlockedAchievements } }) => (
+        <>
+          {achievements.map((a) => {
+            if (a.id === Number(id)) {
+              const rateOfUnlocked = unlockedAchievements.filter(
+                (ua) => ua.achievementID === a.id,
+              ).length;
+
+              const thisAchievementUnlockedMembers = members.filter((m) =>
+                unlockedAchievements.some(
+                  (ua) =>
+                    ua.achievementID === a.id && ua.memberEmail === m.email,
+                ),
+              );
+              return (
+                <Flex key={a.id} gap="9">
+                  <Info
+                    key={a.id}
+                    icon={a.icon}
+                    name={a.name}
+                    rateOfUnlocked={rateOfUnlocked}
+                    tags={a.tags}
+                  />
+                  <div>
+                    <Box mt="20vh" />
+                    <BoxStyle>
+                      <Text size="8" weight="bold">
+                        最近解除したメンバー
+                      </Text>
+                      <Box mt="1rem" />
+                      {thisAchievementUnlockedMembers.map((m) => (
+                        <MemberCard key={m.email} member={m} />
+                      ))}
+                    </BoxStyle>
+                  </div>
+                </Flex>
+              );
+            }
+            return null;
+          })}
+        </>
+      ),
+    )
+    .otherwise(({ data, error }) => (
+      <ErrorScreen error={handleSWRError(data, error)} />
+    ));
 }