Feat/member list page (#44)

* feat: メンバーの一覧取得

* update:メンバー一覧

* fix:lint

---------

Co-authored-by: SatooRu65536 <[email protected]>

Author: hiroto09

Diff for: app/pages/MemberListPage/index.tsx

@@ -1,7 +1,38 @@
-export default function MemberListPage() {
+import type { MemberList } from '@/repository/member.repository';
+
+interface Props {
+  members: MemberList;
+}
+
+export default function MemberListPage({ members }: Props) {
   return (
     <div>
-      <h1>メンバー一覧画面</h1>
+      <div className="my-10 grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] place-items-center gap-10 px-10">
+        {members.map((member) => (
+          <div className="shadow-[0_2px_3px_rgba(0,0,0,0.25)]" key={member.id}>
+            <a href={`/member/${member.id}`}>
+              <img
+                alt="Image"
+                height={100}
+                src={member.MemberBase?.iconUrl}
+                width={200}
+              />
+              <div className="p-2">
+                <p>
+                  [
+                  {member.MemberAlumni?.graduatedYear ?? member.MemberActive?.grade ?? member.MemberActiveExternal?.organization}
+                  ]
+                  {member.MemberActiveInternal?.studentId ?? member.MemberActiveExternal?.organization}
+                </p>
+                <p className="my-2">
+                  {member.MemberBase?.lastName}
+                  {member.MemberBase?.firstName}
+                </p>
+              </div>
+            </a>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

Diff for: app/repository/member.repository.ts

@@ -0,0 +1,35 @@
+import type { PrismaClient } from '@prisma/client';
+import { err } from 'neverthrow';
+
+export const MemberRepository = {
+  list: async (prisma: PrismaClient) => {
+    const members = await prisma.member.findMany({
+      select: {
+        id: true,
+        email: true,
+        MemberBase: true,
+        MemberActive: true,
+        MemberActiveInternal: true,
+        MemberActiveExternal: true,
+        MemberAlumni: true,
+      },
+    });
+
+    const hasMemberProperties = members.every(
+      (m) => {
+        if (!m.MemberBase) return false;
+        if (!m.MemberActive) return false;
+
+        if (!m.MemberActiveInternal && !m.MemberActiveExternal) return false;
+
+        return true;
+      },
+    );
+
+    if (!hasMemberProperties) err('Member properties are not valid');
+
+    return members;
+  },
+};
+
+export type MemberList = Awaited<ReturnType<typeof MemberRepository.list>>;

Diff for: app/routes/_main._index.tsx

@@ -1,4 +1,7 @@
+import type { LoaderFunctionArgs } from '@remix-run/cloudflare';
 import MemberListPage from '@/pages/MemberListPage';
+import { MemberRepository } from '@/repository/member.repository';
+import { typedjson, useTypedLoaderData } from 'remix-typedjson';
 
 export function meta() {
   return [
@@ -7,12 +10,13 @@ export function meta() {
   ];
 }
 
-interface LoaderData {}
-
-export function loader(): LoaderData {
-  return { };
+export async function loader({ context }: LoaderFunctionArgs) {
+  const members = await MemberRepository.list(context.__prisma);
+  return typedjson({ members });
 }
 
 export default function Index() {
-  return <MemberListPage />;
+  const { members } = useTypedLoaderData<typeof loader>();
+
+  return <MemberListPage members={[...members, ...members, ...members, ...members, ...members, ...members, ...members]} />;
 };

Diff for: migrations/0001_create_table.sql

@@ -154,18 +154,20 @@ CREATE UNIQUE INDEX "Snapshot_id_key" ON "Snapshot"("id");
 -- Seed
 INSERT INTO "Member" ("id", "subject", "email", "securityRole", "updatedAt") VALUES
 ('0188c0f2-8e47-11ec-b909-0242ac120002', 'Mathematics', '[email protected]', 'OWNER', CURRENT_TIMESTAMP),
-('0188c0f2-8e47-11ec-b909-0242ac120003', 'Science', '[email protected]', 'USER', CURRENT_TIMESTAMP),
-('0188c0f2-8e47-11ec-b909-0242ac120004', 'History', '[email protected]', 'USER', CURRENT_TIMESTAMP);
+('0188c0f2-8e47-11ec-b909-0242ac120003', 'Science', '[email protected]', 'MEMBER', CURRENT_TIMESTAMP),
+('0188c0f2-8e47-11ec-b909-0242ac120004', 'History', '[email protected]', 'MEMBER', CURRENT_TIMESTAMP);
 
 -- Seed Data for MemberBase
 INSERT INTO "MemberBase" ("memberId", "iconUrl", "firstName", "lastName", "firstNameKana", "lastNameKana", "updatedAt") VALUES
-('0188c0f2-8e47-11ec-b909-0242ac120002', 'http://example.com/icon1.png', 'Taro', 'Yamada', 'タロウ', 'ヤマダ', CURRENT_TIMESTAMP),
-('0188c0f2-8e47-11ec-b909-0242ac120003', 'http://example.com/icon2.png', 'Hanako', 'Tanaka', 'ハナコ', 'タナカ', CURRENT_TIMESTAMP),
-('0188c0f2-8e47-11ec-b909-0242ac120004', 'http://example.com/icon3.png', 'Kenji', 'Suzuki', 'ケンジ', 'スズキ', CURRENT_TIMESTAMP);
+('0188c0f2-8e47-11ec-b909-0242ac120002', 'https://placehold.jp/3d4070/ffffff/150x150.png?text=taro', 'Taro', 'Yamada', 'タロウ', 'ヤマダ', CURRENT_TIMESTAMP),
+('0188c0f2-8e47-11ec-b909-0242ac120003', 'https://placehold.jp/3d4070/ffffff/150x150.png?text=tanaka', 'Hanako', 'Tanaka', 'ハナコ', 'タナカ', CURRENT_TIMESTAMP),
+('0188c0f2-8e47-11ec-b909-0242ac120004', 'https://placehold.jp/3d4070/ffffff/150x150.png?text=suzuki', 'Kenji', 'Suzuki', 'ケンジ', 'スズキ', CURRENT_TIMESTAMP);
 
 -- Seed Data for MemberActive
 INSERT INTO "MemberActive" ("memberId", "grade", "updatedAt") VALUES
-('0188c0f2-8e47-11ec-b909-0242ac120002', 'B1', CURRENT_TIMESTAMP);
+('0188c0f2-8e47-11ec-b909-0242ac120002', 'B1', CURRENT_TIMESTAMP),
+('0188c0f2-8e47-11ec-b909-0242ac120003', 'B2', CURRENT_TIMESTAMP),
+('0188c0f2-8e47-11ec-b909-0242ac120004', 'B3', CURRENT_TIMESTAMP);
 
 -- Seed Data for MemberActiveInternal
 INSERT INTO "MemberActiveInternal" ("memberId", "studentId", "role", "updatedAt") VALUES
@@ -187,3 +189,7 @@ INSERT INTO "MemberStatus" ("memberId", "hasDeleted", "lastRenewalDate", "update
 ('0188c0f2-8e47-11ec-b909-0242ac120002', false, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, '0188c0f2-8e47-11ec-b909-0242ac120002', '0188c0f2-8e47-11ec-b909-0242ac120002'),
 ('0188c0f2-8e47-11ec-b909-0242ac120003', false, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, '0188c0f2-8e47-11ec-b909-0242ac120002', '0188c0f2-8e47-11ec-b909-0242ac120002'),
 ('0188c0f2-8e47-11ec-b909-0242ac120004', false, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, '0188c0f2-8e47-11ec-b909-0242ac120002', '0188c0f2-8e47-11ec-b909-0242ac120002');
+
+-- Seed Data for MemberAlumni
+INSERT INTO "MemberAlumni" ("memberId", "graduatedYear", "oldRole", "updatedAt") VALUES
+('0188c0f2-8e47-11ec-b909-0242ac120002', 2023, '会長', CURRENT_TIMESTAMP);