feat(frontend): member type

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;
+}

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 };
+  }
+};