From ec980bc67f2f6a3be38a1272a5fff0ee5f32d046 Mon Sep 17 00:00:00 2001
From: Sam <sam@nilptr.dev>
Date: Thu, 27 Oct 2022 17:11:10 +0200
Subject: [PATCH] feat(frontend): member type

---
 frontend/lib/types.ts                | 21 ++++++++++++++++-
 frontend/pages/u/[user]/[member].tsx | 35 ++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 frontend/pages/u/[user]/[member].tsx

diff --git a/frontend/lib/types.ts b/frontend/lib/types.ts
index 38c6c78..e5e6b8d 100644
--- a/frontend/lib/types.ts
+++ b/frontend/lib/types.ts
@@ -11,13 +11,25 @@ export interface User {
   avatar_urls: string[] | null;
   links: string[] | null;
   members: PartialMember[];
+  names: Name[];
+  pronouns: Pronoun[];
   fields: Field[];
 }
 
 export interface PartialMember {
   id: string;
   name: string;
-  avatar_url: string | null;
+  avatar_urls: string[] | null;
+}
+
+export interface Member extends PartialMember {
+  bio: string | null;
+  links: string[] | null;
+  id: string;
+  name: string;
+  avatar_urls: string[] | null;
+
+  user?: PartialUser;
 }
 
 export interface Name {
@@ -71,3 +83,10 @@ export interface SignupRequest {
   ticket: string;
   invite_code?: string;
 }
+
+export interface PartialUser {
+  id: string;
+  username: string;
+  display_name: string | null;
+  avatar_urls: string[] | null;
+}
diff --git a/frontend/pages/u/[user]/[member].tsx b/frontend/pages/u/[user]/[member].tsx
new file mode 100644
index 0000000..d139ada
--- /dev/null
+++ b/frontend/pages/u/[user]/[member].tsx
@@ -0,0 +1,35 @@
+import { GetServerSideProps } from "next";
+import fetchAPI from "../../../lib/fetch";
+import { Member, User } from "../../../lib/types";
+import { userState } from "../../../lib/state";
+import { useRecoilValue } from "recoil";
+
+interface Props {
+  member: Member;
+}
+
+export default function MemberPage({ member }: Props) {
+  const isOwnMember = useRecoilValue(userState)?.id === member.user?.id;
+
+  return (
+    <>
+      <div>hi! this is {isOwnMember ? "" : "not "}your own member.</div>
+      <h1>name: {member.name}</h1>
+      <p>{member.bio}</p>
+    </>
+  );
+}
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  try {
+    const member = await fetchAPI<Member>(
+      `/users/${context.params!.user}/members/${context.params!.member}`
+    );
+
+    return { props: { member } };
+  } catch (e) {
+    console.log(e);
+
+    return { notFound: true };
+  }
+};