diff --git a/frontend/pages/u/[user]/index.tsx b/frontend/pages/u/[user]/index.tsx index 422a631..f0b3b5d 100644 --- a/frontend/pages/u/[user]/index.tsx +++ b/frontend/pages/u/[user]/index.tsx @@ -1,7 +1,14 @@ import { GetServerSideProps } from "next"; import Head from "next/head"; import fetchAPI from "../../../lib/fetch"; -import { Field, Name, PartialMember, Pronoun, User, WordStatus } from "../../../lib/types"; +import { + Field, + Name, + PartialMember, + Pronoun, + User, + WordStatus, +} from "../../../lib/types"; import ReactMarkdown from "react-markdown"; import { userState } from "../../../lib/state"; import { useRecoilValue } from "recoil"; @@ -26,11 +33,12 @@ export default function Index({ user, partialMembers }: Props) { return ( <> - {`@${user.username} - pronouns.cc`} + {`@${user.username} - pronouns.cc`}
-
+ " + >
@@ -56,13 +65,15 @@ export const getServerSideProps: GetServerSideProps = async (context) => { try { const [userResponse, partialMembersResponse] = await Promise.allSettled([ fetchAPI(`/users/${username}`), - fetchAPI(`/users/${username}/members`) + fetchAPI(`/users/${username}/members`), ]); - if (userResponse.status === 'rejected') - throw new Error('Could not fetch user'); + if (userResponse.status === "rejected") + throw new Error("Could not fetch user"); const user = userResponse.value; - const partialMembers = partialMembersResponse.status === 'fulfilled' - ? partialMembersResponse.value : []; + const partialMembers = + partialMembersResponse.status === "fulfilled" + ? partialMembersResponse.value + : []; return { props: { user, partialMembers } }; } catch (e) { console.log(e); @@ -72,52 +83,52 @@ export const getServerSideProps: GetServerSideProps = async (context) => { function IsOwnPageNotice({ user }: { user: User }) { const isThisMyPage = useRecoilValue(userState)?.id === user.id; - return ( - isThisMyPage || true ? ( -
- You are currently viewing your public profile. -
- Edit your profile -
- ) : <> + return isThisMyPage || true ? ( +
+ You are currently viewing your public profile. +
+ Edit your profile +
+ ) : ( + <> ); } function MemberList({ user, partialMembers, - className + className, }: { - user: User, - partialMembers: PartialMember[], - className?: string + user: User; + partialMembers: PartialMember[]; + className?: string; }) { console.log(partialMembers); return ( -
-

Members

+
+

Members

    - {partialMembers.map(partialMember => + {partialMembers.map((partialMember) => (
  • {partialMember.display_name ?? partialMember.name}
    • - )} + ))}
); } function UserAvatar({ user }: { user: User }) { - return ( - user.avatar_urls && user.avatar_urls.length !== 0 ? ( - - ) : <> + return user.avatar_urls && user.avatar_urls.length !== 0 ? ( + + ) : ( + <> ); } @@ -126,9 +137,7 @@ function UserInfo({ user }: { user: User }) { return (
{/* display name */} - {display_name && ( -

{display_name}

- )} + {display_name &&

{display_name}

} {/* username */}

0 ? ( -
- {source.map((label, index) => ( - - ))} -
- ) : <> + return source?.length > 0 ? ( +
+ {source.map((label, index) => ( + + ))} +
+ ) : ( + <> ); } @@ -185,7 +194,7 @@ function LabelStatusIcon({ status }: { status: WordStatus }) { [WordStatus.FriendsOnly]: People, [WordStatus.Avoid]: HandThumbsDown, }[status], - { className: 'inline' } + { className: "inline" } ); } @@ -193,15 +202,20 @@ function LabelsLine({ labels }: { labels: Name[] | Pronoun[] }) { if (labels.length === 0) return <>; const status = labels[0].status; const text = labels - .map(label => - 'name' in label + .map((label) => + "name" in label ? label.name - : label.display_text ?? label.pronouns.split('/').slice(0, 2).join('/')) - .join(', '); + : label.display_text ?? label.pronouns.split("/").slice(0, 2).join("/") + ) + .join(", "); return ( -

+

{text}

); @@ -222,11 +236,11 @@ function FieldCardGrid({ fields }: { fields: Field[] }) { } const fieldEntryStatus: { [key in string]: WordStatus } = { - favourite: WordStatus.Favourite, - okay: WordStatus.Okay, - jokingly: WordStatus.Jokingly, + favourite: WordStatus.Favourite, + okay: WordStatus.Okay, + jokingly: WordStatus.Jokingly, friends_only: WordStatus.FriendsOnly, - avoid: WordStatus.Avoid, + avoid: WordStatus.Avoid, }; function FieldCard({ @@ -238,9 +252,15 @@ function FieldCard({ }) { return ( - {Object.entries(fieldEntryStatus).map(([statusName, status], i) => - ({ name, status }))} /> - )} + {Object.entries(fieldEntryStatus).map(([statusName, status], i) => ( + ({ + name, + status, + }))} + /> + ))} ); }