style: lint pages/u/[user]/index.tsx
This commit is contained in:
parent
801392f1c6
commit
671db409a1
1 changed files with 79 additions and 59 deletions
|
|
@ -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 (
|
||||
<>
|
||||
<Head>
|
||||
<title key='title'>{`@${user.username} - pronouns.cc`}</title>
|
||||
<title key="title">{`@${user.username} - pronouns.cc`}</title>
|
||||
</Head>
|
||||
<IsOwnPageNotice user={user} />
|
||||
<div className="container mx-auto pb-[20vh]">
|
||||
<div className="
|
||||
<div
|
||||
className="
|
||||
m-2 p-2
|
||||
flex flex-col lg:flex-row
|
||||
justify-center lg:justify-start
|
||||
|
|
@ -38,7 +46,8 @@ export default function Index({ user, partialMembers }: Props) {
|
|||
lg:space-x-16
|
||||
space-y-4 lg:space-y-0
|
||||
border-b border-slate-200 dark:border-slate-700
|
||||
">
|
||||
"
|
||||
>
|
||||
<UserAvatar user={user} />
|
||||
<UserInfo user={user} />
|
||||
</div>
|
||||
|
|
@ -56,13 +65,15 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
|
|||
try {
|
||||
const [userResponse, partialMembersResponse] = await Promise.allSettled([
|
||||
fetchAPI<User>(`/users/${username}`),
|
||||
fetchAPI<PartialMember[]>(`/users/${username}/members`)
|
||||
fetchAPI<PartialMember[]>(`/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 ? (
|
||||
<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.
|
||||
<br />
|
||||
<BlueLink to="/edit/profile">Edit your profile</BlueLink>
|
||||
</div>
|
||||
) : <></>
|
||||
return isThisMyPage || true ? (
|
||||
<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.
|
||||
<br />
|
||||
<BlueLink to="/edit/profile">Edit your profile</BlueLink>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
}
|
||||
|
||||
function MemberList({
|
||||
user,
|
||||
partialMembers,
|
||||
className
|
||||
className,
|
||||
}: {
|
||||
user: User,
|
||||
partialMembers: PartialMember[],
|
||||
className?: string
|
||||
user: User;
|
||||
partialMembers: PartialMember[];
|
||||
className?: string;
|
||||
}) {
|
||||
console.log(partialMembers);
|
||||
return (
|
||||
<div className={`mx-auto flex-col items-center ${className || ''}`}>
|
||||
<h1 className='text-2xl'>Members</h1>
|
||||
<div className={`mx-auto flex-col items-center ${className || ""}`}>
|
||||
<h1 className="text-2xl">Members</h1>
|
||||
<ul>
|
||||
{partialMembers.map(partialMember =>
|
||||
{partialMembers.map((partialMember) => (
|
||||
<li className='before:[content:"-_"]' key={partialMember.id}>
|
||||
<BlueLink to={`/u/${user.username}/${partialMember.name}`}>
|
||||
<span>{partialMember.display_name ?? partialMember.name}</span>
|
||||
</BlueLink>
|
||||
</li>
|
||||
)}
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UserAvatar({ user }: { user: User }) {
|
||||
return (
|
||||
user.avatar_urls && user.avatar_urls.length !== 0 ? (
|
||||
<FallbackImage
|
||||
className="max-w-xs rounded-full"
|
||||
urls={user.avatar_urls}
|
||||
alt={`@${user.username}'s avatar`}
|
||||
/>
|
||||
) : <></>
|
||||
return user.avatar_urls && user.avatar_urls.length !== 0 ? (
|
||||
<FallbackImage
|
||||
className="max-w-xs rounded-full"
|
||||
urls={user.avatar_urls}
|
||||
alt={`@${user.username}'s avatar`}
|
||||
/>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -126,9 +137,7 @@ function UserInfo({ user }: { user: User }) {
|
|||
return (
|
||||
<div className="flex flex-col">
|
||||
{/* display name */}
|
||||
{display_name && (
|
||||
<h1 className="text-2xl font-bold">{display_name}</h1>
|
||||
)}
|
||||
{display_name && <h1 className="text-2xl font-bold">{display_name}</h1>}
|
||||
{/* username */}
|
||||
<h3
|
||||
className={`${
|
||||
|
|
@ -165,14 +174,14 @@ function UserInfo({ user }: { user: User }) {
|
|||
}
|
||||
|
||||
function LabelList({ source }: { source: Name[] | Pronoun[] }) {
|
||||
return (
|
||||
source?.length > 0 ? (
|
||||
<div className="border-b border-slate-200 dark:border-slate-700">
|
||||
{source.map((label, index) => (
|
||||
<LabelLine key={index} label={label} />
|
||||
))}
|
||||
</div>
|
||||
) : <></>
|
||||
return source?.length > 0 ? (
|
||||
<div className="border-b border-slate-200 dark:border-slate-700">
|
||||
{source.map((label, index) => (
|
||||
<LabelLine key={index} label={label} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -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 (
|
||||
<p className={`
|
||||
${status === WordStatus.Favourite ? 'text-lg font-bold' : ''}
|
||||
${status === WordStatus.Avoid ? 'text-slate-600 dark:text-slate-400' : ''}`}>
|
||||
<p
|
||||
className={`
|
||||
${status === WordStatus.Favourite ? "text-lg font-bold" : ""}
|
||||
${
|
||||
status === WordStatus.Avoid ? "text-slate-600 dark:text-slate-400" : ""
|
||||
}`}
|
||||
>
|
||||
<LabelStatusIcon status={status} /> {text}
|
||||
</p>
|
||||
);
|
||||
|
|
@ -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 (
|
||||
<Card title={field.name} draggable={draggable}>
|
||||
{Object.entries(fieldEntryStatus).map(([statusName, status], i) =>
|
||||
<LabelsLine key={i} labels={((field as any)[statusName])?.map((name: string) => ({ name, status }))} />
|
||||
)}
|
||||
{Object.entries(fieldEntryStatus).map(([statusName, status], i) => (
|
||||
<LabelsLine
|
||||
key={i}
|
||||
labels={(field as any)[statusName]?.map((name: string) => ({
|
||||
name,
|
||||
status,
|
||||
}))}
|
||||
/>
|
||||
))}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue