sam/pronounscc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

style: lint pages/u/[user]/index.tsx

Browse source
This commit is contained in:
sam 2022-11-20 22:35:10 +01:00
parent 801392f1c6
commit 671db409a1
1 changed files with 79 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

138
frontend/pages/u/[user]/index.tsx
View file

@ -1,7 +1,14 @@
import { GetServerSideProps } from "next"; import { GetServerSideProps } from "next";
import Head from "next/head"; import Head from "next/head";
import fetchAPI from "../../../lib/fetch"; 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 ReactMarkdown from "react-markdown";
import { userState } from "../../../lib/state"; import { userState } from "../../../lib/state";
import { useRecoilValue } from "recoil"; import { useRecoilValue } from "recoil";
@ -26,11 +33,12 @@ export default function Index({ user, partialMembers }: Props) {
return ( return (
<> <>
<Head> <Head>
<title key='title'>{`@${user.username} - pronouns.cc`}</title> <title key="title">{`@${user.username} - pronouns.cc`}</title>
</Head> </Head>
<IsOwnPageNotice user={user} /> <IsOwnPageNotice user={user} />
<div className="container mx-auto pb-[20vh]"> <div className="container mx-auto pb-[20vh]">
<div className=" <div
className="
m-2 p-2 m-2 p-2
flex flex-col lg:flex-row flex flex-col lg:flex-row
justify-center lg:justify-start justify-center lg:justify-start
@ -38,7 +46,8 @@ export default function Index({ user, partialMembers }: Props) {
lg:space-x-16 lg:space-x-16
space-y-4 lg:space-y-0 space-y-4 lg:space-y-0
border-b border-slate-200 dark:border-slate-700 border-b border-slate-200 dark:border-slate-700
"> "
>
<UserAvatar user={user} /> <UserAvatar user={user} />
<UserInfo user={user} /> <UserInfo user={user} />
</div> </div>
@ -56,13 +65,15 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
try { try {
const [userResponse, partialMembersResponse] = await Promise.allSettled([ const [userResponse, partialMembersResponse] = await Promise.allSettled([
fetchAPI<User>(`/users/${username}`), fetchAPI<User>(`/users/${username}`),
fetchAPI<PartialMember[]>(`/users/${username}/members`) fetchAPI<PartialMember[]>(`/users/${username}/members`),
]); ]);
if (userResponse.status === 'rejected') if (userResponse.status === "rejected")
throw new Error('Could not fetch user'); throw new Error("Could not fetch user");
const user = userResponse.value; const user = userResponse.value;
const partialMembers = partialMembersResponse.status === 'fulfilled' const partialMembers =
? partialMembersResponse.value : []; partialMembersResponse.status === "fulfilled"
? partialMembersResponse.value
: [];
return { props: { user, partialMembers } }; return { props: { user, partialMembers } };
} catch (e) { } catch (e) {
console.log(e); console.log(e);
@ -72,52 +83,52 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
function IsOwnPageNotice({ user }: { user: User }) { function IsOwnPageNotice({ user }: { user: User }) {
const isThisMyPage = useRecoilValue(userState)?.id === user.id; const isThisMyPage = useRecoilValue(userState)?.id === user.id;
return ( return isThisMyPage || true ? (
isThisMyPage || true ? ( <div className="lg:w-1/3 mx-auto bg-slate-100 dark:bg-slate-700 shadow rounded-md p-2">
<div className="lg:w-1/3 mx-auto bg-slate-100 dark:bg-slate-700 shadow rounded-md p-2"> You are currently viewing your <b>public</b> profile.
You are currently viewing your <b>public</b> profile. <br />
<br /> <BlueLink to="/edit/profile">Edit your profile</BlueLink>
<BlueLink to="/edit/profile">Edit your profile</BlueLink> </div>
</div> ) : (
) : <></> <></>
); );
} }
function MemberList({ function MemberList({
user, user,
partialMembers, partialMembers,
className className,
}: { }: {
user: User, user: User;
partialMembers: PartialMember[], partialMembers: PartialMember[];
className?: string className?: string;
}) { }) {
console.log(partialMembers); console.log(partialMembers);
return ( return (
<div className={`mx-auto flex-col items-center ${className || ''}`}> <div className={`mx-auto flex-col items-center ${className || ""}`}>
<h1 className='text-2xl'>Members</h1> <h1 className="text-2xl">Members</h1>
<ul> <ul>
{partialMembers.map(partialMember => {partialMembers.map((partialMember) => (
<li className='before:[content:"-_"]' key={partialMember.id}> <li className='before:[content:"-_"]' key={partialMember.id}>
<BlueLink to={`/u/${user.username}/${partialMember.name}`}> <BlueLink to={`/u/${user.username}/${partialMember.name}`}>
<span>{partialMember.display_name ?? partialMember.name}</span> <span>{partialMember.display_name ?? partialMember.name}</span>
</BlueLink> </BlueLink>
</li> </li>
)} ))}
</ul> </ul>
</div> </div>
); );
} }
function UserAvatar({ user }: { user: User }) { function UserAvatar({ user }: { user: User }) {
return ( return user.avatar_urls && user.avatar_urls.length !== 0 ? (
user.avatar_urls && user.avatar_urls.length !== 0 ? ( <FallbackImage
<FallbackImage className="max-w-xs rounded-full"
className="max-w-xs rounded-full" urls={user.avatar_urls}
urls={user.avatar_urls} alt={`@${user.username}'s avatar`}
alt={`@${user.username}'s avatar`} />
/> ) : (
) : <></> <></>
); );
} }
@ -126,9 +137,7 @@ function UserInfo({ user }: { user: User }) {
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
{/* display name */} {/* display name */}
{display_name && ( {display_name && <h1 className="text-2xl font-bold">{display_name}</h1>}
<h1 className="text-2xl font-bold">{display_name}</h1>
)}
{/* username */} {/* username */}
<h3 <h3
className={`${ className={`${
@ -165,14 +174,14 @@ function UserInfo({ user }: { user: User }) {
} }
function LabelList({ source }: { source: Name[] | Pronoun[] }) { function LabelList({ source }: { source: Name[] | Pronoun[] }) {
return ( return source?.length > 0 ? (
source?.length > 0 ? ( <div className="border-b border-slate-200 dark:border-slate-700">
<div className="border-b border-slate-200 dark:border-slate-700"> {source.map((label, index) => (
{source.map((label, index) => ( <LabelLine key={index} label={label} />
<LabelLine key={index} label={label} /> ))}
))} </div>
</div> ) : (
) : <></> <></>
); );
} }
@ -185,7 +194,7 @@ function LabelStatusIcon({ status }: { status: WordStatus }) {
[WordStatus.FriendsOnly]: People, [WordStatus.FriendsOnly]: People,
[WordStatus.Avoid]: HandThumbsDown, [WordStatus.Avoid]: HandThumbsDown,
}[status], }[status],
{ className: 'inline' } { className: "inline" }
); );
} }
@ -193,15 +202,20 @@ function LabelsLine({ labels }: { labels: Name[] | Pronoun[] }) {
if (labels.length === 0) return <></>; if (labels.length === 0) return <></>;
const status = labels[0].status; const status = labels[0].status;
const text = labels const text = labels
.map(label => .map((label) =>
'name' in label "name" in label
? label.name ? label.name
: label.display_text ?? label.pronouns.split('/').slice(0, 2).join('/')) : label.display_text ?? label.pronouns.split("/").slice(0, 2).join("/")
.join(', '); )
.join(", ");
return ( return (
<p className={` <p
${status === WordStatus.Favourite ? 'text-lg font-bold' : ''} className={`
${status === WordStatus.Avoid ? 'text-slate-600 dark:text-slate-400' : ''}`}> ${status === WordStatus.Favourite ? "text-lg font-bold" : ""}
${
status === WordStatus.Avoid ? "text-slate-600 dark:text-slate-400" : ""
}`}
>
<LabelStatusIcon status={status} /> {text} <LabelStatusIcon status={status} /> {text}
</p> </p>
); );
@ -222,11 +236,11 @@ function FieldCardGrid({ fields }: { fields: Field[] }) {
} }
const fieldEntryStatus: { [key in string]: WordStatus } = { const fieldEntryStatus: { [key in string]: WordStatus } = {
favourite: WordStatus.Favourite, favourite: WordStatus.Favourite,
okay: WordStatus.Okay, okay: WordStatus.Okay,
jokingly: WordStatus.Jokingly, jokingly: WordStatus.Jokingly,
friends_only: WordStatus.FriendsOnly, friends_only: WordStatus.FriendsOnly,
avoid: WordStatus.Avoid, avoid: WordStatus.Avoid,
}; };
function FieldCard({ function FieldCard({
@ -238,9 +252,15 @@ function FieldCard({
}) { }) {
return ( return (
<Card title={field.name} draggable={draggable}> <Card title={field.name} draggable={draggable}>
{Object.entries(fieldEntryStatus).map(([statusName, status], i) => {Object.entries(fieldEntryStatus).map(([statusName, status], i) => (
<LabelsLine key={i} labels={((field as any)[statusName])?.map((name: string) => ({ name, status }))} /> <LabelsLine
)} key={i}
labels={(field as any)[statusName]?.map((name: string) => ({
name,
status,
}))}
/>
))}
</Card> </Card>
); );
} }