update:一旦 (#45)

* update:一旦

* style:lint

Author: hiroto09

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

@@ -1,7 +1,38 @@
-export default function MemberPage() {
+import type { LoaderData } from '@/routes/_main.member.($uuid)';
+
+interface Props {
+  member: LoaderData;
+}
+export default function MemberPage({ member }: Props) {
   return (
-    <div>
-      <h1>メンバー画面</h1>
+    <div className="mx-auto my-10 grid max-w-[600px] grid-cols-1 place-items-center gap-20 p-4 text-left sm:grid-cols-2">
+      <h2 className="text-lg font-bold">ユーザーID</h2>
+      <p>{member.member.id}</p>
+
+      <h2 className="text-lg font-bold">アイコン</h2>
+      <img alt="Image" height={100} src={member.base.iconUrl} width={200} />
+
+      <h2 className="text-lg font-bold">名前</h2>
+      <p>{member.base.lastName + member.base.firstName}</p>
+
+      <h2 className="text-lg font-bold">フリガナ</h2>
+      <p>{member.base.lastNameKana + member.base.firstNameKana}</p>
+
+      {member.type === 'ACTIVE' && (
+        <>
+          <h2 className="text-lg font-bold">学年</h2>
+          <p>{member.detail.grade}</p>
+        </>
+      )}
+      {member.type === 'ALUMNI' && (
+        <>
+          <h2 className="text-lg font-bold">卒業年度</h2>
+
+          <div>
+            {member.detail.graduatedYear}
+          </div>
+        </>
+      )}
     </div>
   );
 }

Diff for: app/routes/_main.member.($uuid).tsx

@@ -1,16 +1,83 @@
+import type { $Member } from '@/models/member';
+import type { $MemberActive } from '@/models/member/active';
+import type { $MemberAlumni } from '@/models/member/alumni';
+import type { $MemberBase } from '@/models/member/base';
+import type { ModelSchemaOf } from '@/types/model';
+import type { LoaderFunctionArgs } from '@remix-run/cloudflare';
+import { MemberId } from '@/models/member';
 import ErrorBoundaryPage from '@/pages/ErrorBoundaryPage';
 import MemberPage from '@/pages/MemberPage';
+import { Database } from '@/services/database.server';
 import { useRouteError } from '@remix-run/react';
+import { typedjson, useTypedLoaderData } from 'remix-typedjson';
 
-interface LoaderData {}
+export type LoaderData = {
+  member: ModelSchemaOf<$Member>;
+  base: ModelSchemaOf<$MemberBase>;
+} & ({
+  type: 'ACTIVE';
+  detail: ModelSchemaOf<$MemberActive>;
+} | {
+  type: 'ALUMNI';
+  detail: ModelSchemaOf<$MemberAlumni>;
+});
 
-export function loader(): LoaderData {
-  return {};
+export async function loader({ params, context }: LoaderFunctionArgs) {
+  const { Member } = context.db.models;
+
+  if (params.uuid === undefined) {
+    throw new Response('uuid が見つかりません', { status: 404 });
+  }
+
+  const memberId = MemberId
+    .from(params.uuid)
+    .match(
+      (id) => id,
+      () => {
+        throw new Response('不正な部員 ID です', { status: 400 });
+      },
+    );
+
+  const member = await Member
+    .fromWithResolved(memberId)
+    .andThen((m) => m.buildBySelf())
+    .match(
+      (m) => m,
+      Database.unwrapToResponse,
+    );
+  const memberBase = member.dataResolved.member.Base().match(
+    (m) => m,
+    Database.unwrapToResponse,
+  );
+
+  if (member.dataResolved.member.detail.type === 'ACTIVE') {
+    const memberDetail = member.dataResolved.member.detail.Data().match(
+      (m) => m,
+      Database.unwrapToResponse,
+    );
+    return typedjson({
+      member: member.data,
+      base: memberBase.data,
+      type: 'ACTIVE',
+      detail: memberDetail.data,
+    });
+  }
+  const memberDetail = member.dataResolved.member.detail.Data().match(
+    (m) => m,
+    Database.unwrapToResponse,
+  );
+  return typedjson({
+    member: member.data,
+    base: memberBase.data,
+    type: 'ALUMNI',
+    detail: memberDetail.data,
+  });
 }
 
 export default function Index() {
-  // const {} = useLoaderData<typeof loader>();
-  return <MemberPage />;
+  const member = useTypedLoaderData<LoaderData>();
+
+  return <MemberPage member={member} />;
 }
 
 export function ErrorBoundary() {

Diff for: app/services/session.server.ts

@@ -17,7 +17,7 @@ export function getSessionStorage(sessionSecret: string) {
         path: '/',
         sameSite: 'lax',
         secrets: [sessionSecret],
-        secure: process.env['NODE_ENV'] === 'production',
+        secure: process.env.NODE_ENV === 'production',
       },
     });
 

Diff for: tsconfig.json

@@ -30,6 +30,7 @@
     "allowJs": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
+    "noPropertyAccessFromIndexSignature": false,
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "baseUrl": ".",