2022-08-16 18:04:06 -07:00
|
|
|
import { GetServerSideProps } from "next";
|
|
|
|
|
import Head from "next/head";
|
|
|
|
|
import fetchAPI from "../../../lib/fetch";
|
2022-11-20 13:35:10 -08:00
|
|
|
import {
|
|
|
|
|
Field,
|
|
|
|
|
Name,
|
|
|
|
|
PartialMember,
|
|
|
|
|
Pronoun,
|
|
|
|
|
User,
|
|
|
|
|
WordStatus,
|
|
|
|
|
} from "../../../lib/types";
|
2022-08-16 18:04:06 -07:00
|
|
|
import ReactMarkdown from "react-markdown";
|
2022-09-15 15:49:04 -07:00
|
|
|
import { userState } from "../../../lib/state";
|
|
|
|
|
import { useRecoilValue } from "recoil";
|
2022-09-20 05:12:46 -07:00
|
|
|
import FallbackImage from "../../../components/FallbackImage";
|
2022-11-18 05:11:52 -08:00
|
|
|
import {
|
|
|
|
|
EmojiLaughing,
|
|
|
|
|
HandThumbsDown,
|
|
|
|
|
HandThumbsUp,
|
|
|
|
|
HeartFill,
|
|
|
|
|
People,
|
|
|
|
|
} from "react-bootstrap-icons";
|
2022-11-18 06:26:52 -08:00
|
|
|
import BlueLink from "../../../components/BlueLink";
|
2022-11-20 07:04:53 -08:00
|
|
|
import React from "react";
|
|
|
|
|
import Card from "../../../components/Card";
|
2022-08-16 18:04:06 -07:00
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
user: User;
|
2022-11-20 13:05:51 -08:00
|
|
|
partialMembers: PartialMember[];
|
2022-08-16 18:04:06 -07:00
|
|
|
}
|
|
|
|
|
|
2022-11-20 13:05:51 -08:00
|
|
|
export default function Index({ user, partialMembers }: Props) {
|
2022-08-16 18:04:06 -07:00
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
2022-11-20 13:35:10 -08:00
|
|
|
<title key="title">{`@${user.username} - pronouns.cc`}</title>
|
2022-08-16 18:04:06 -07:00
|
|
|
</Head>
|
2022-11-20 07:04:53 -08:00
|
|
|
<IsOwnPageNotice user={user} />
|
2022-11-20 13:05:51 -08:00
|
|
|
<div className="container mx-auto pb-[20vh]">
|
2022-11-20 13:35:10 -08:00
|
|
|
<div
|
|
|
|
|
className="
|
2022-11-20 07:04:53 -08:00
|
|
|
m-2 p-2
|
|
|
|
|
flex flex-col lg:flex-row
|
|
|
|
|
justify-center lg:justify-start
|
|
|
|
|
items-center lg:items-start
|
|
|
|
|
lg:space-x-16
|
|
|
|
|
space-y-4 lg:space-y-0
|
|
|
|
|
border-b border-slate-200 dark:border-slate-700
|
2022-11-20 13:35:10 -08:00
|
|
|
"
|
|
|
|
|
>
|
2022-11-20 07:04:53 -08:00
|
|
|
<UserAvatar user={user} />
|
|
|
|
|
<UserInfo user={user} />
|
2022-08-16 18:04:06 -07:00
|
|
|
</div>
|
2022-11-20 07:04:53 -08:00
|
|
|
<LabelList source={user.names} />
|
|
|
|
|
<LabelList source={user.pronouns} />
|
|
|
|
|
<FieldCardGrid fields={user.fields} />
|
2022-11-20 13:05:51 -08:00
|
|
|
<MemberList user={user} partialMembers={partialMembers} />
|
2022-08-16 18:04:06 -07:00
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2022-11-20 07:04:53 -08:00
|
|
|
export const getServerSideProps: GetServerSideProps = async (context) => {
|
2022-11-20 13:05:51 -08:00
|
|
|
const username = context.params!.user;
|
2022-11-20 07:04:53 -08:00
|
|
|
try {
|
2022-11-20 13:05:51 -08:00
|
|
|
const [userResponse, partialMembersResponse] = await Promise.allSettled([
|
|
|
|
|
fetchAPI<User>(`/users/${username}`),
|
2022-11-20 13:35:10 -08:00
|
|
|
fetchAPI<PartialMember[]>(`/users/${username}/members`),
|
2022-11-20 13:05:51 -08:00
|
|
|
]);
|
2022-11-20 13:35:10 -08:00
|
|
|
if (userResponse.status === "rejected")
|
|
|
|
|
throw new Error("Could not fetch user");
|
2022-11-20 13:05:51 -08:00
|
|
|
const user = userResponse.value;
|
2022-11-20 13:35:10 -08:00
|
|
|
const partialMembers =
|
|
|
|
|
partialMembersResponse.status === "fulfilled"
|
|
|
|
|
? partialMembersResponse.value
|
|
|
|
|
: [];
|
2022-11-20 13:05:51 -08:00
|
|
|
return { props: { user, partialMembers } };
|
2022-11-20 07:04:53 -08:00
|
|
|
} catch (e) {
|
|
|
|
|
console.log(e);
|
|
|
|
|
return { notFound: true };
|
|
|
|
|
}
|
2022-11-18 05:11:52 -08:00
|
|
|
};
|
2022-11-17 08:33:59 -08:00
|
|
|
|
2022-11-20 07:04:53 -08:00
|
|
|
function IsOwnPageNotice({ user }: { user: User }) {
|
|
|
|
|
const isThisMyPage = useRecoilValue(userState)?.id === user.id;
|
2022-11-20 13:35:10 -08:00
|
|
|
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>
|
|
|
|
|
) : (
|
|
|
|
|
<></>
|
2022-11-20 07:04:53 -08:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2022-11-20 13:05:51 -08:00
|
|
|
function MemberList({
|
|
|
|
|
user,
|
|
|
|
|
partialMembers,
|
2022-11-20 13:35:10 -08:00
|
|
|
className,
|
2022-11-20 13:05:51 -08:00
|
|
|
}: {
|
2022-11-20 13:35:10 -08:00
|
|
|
user: User;
|
|
|
|
|
partialMembers: PartialMember[];
|
|
|
|
|
className?: string;
|
2022-11-20 13:05:51 -08:00
|
|
|
}) {
|
|
|
|
|
console.log(partialMembers);
|
|
|
|
|
return (
|
2022-11-20 13:35:10 -08:00
|
|
|
<div className={`mx-auto flex-col items-center ${className || ""}`}>
|
|
|
|
|
<h1 className="text-2xl">Members</h1>
|
2022-11-20 13:05:51 -08:00
|
|
|
<ul>
|
2022-11-20 13:35:10 -08:00
|
|
|
{partialMembers.map((partialMember) => (
|
2022-11-20 13:05:51 -08:00
|
|
|
<li className='before:[content:"-_"]' key={partialMember.id}>
|
|
|
|
|
<BlueLink to={`/u/${user.username}/${partialMember.name}`}>
|
|
|
|
|
<span>{partialMember.display_name ?? partialMember.name}</span>
|
|
|
|
|
</BlueLink>
|
|
|
|
|
</li>
|
2022-11-20 13:35:10 -08:00
|
|
|
))}
|
2022-11-20 13:05:51 -08:00
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2022-11-20 07:04:53 -08:00
|
|
|
function UserAvatar({ user }: { user: User }) {
|
2022-11-20 13:35:10 -08:00
|
|
|
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`}
|
|
|
|
|
/>
|
|
|
|
|
) : (
|
|
|
|
|
<></>
|
2022-11-20 07:04:53 -08:00
|
|
|
);
|
|
|
|
|
}
|
2022-11-17 08:33:59 -08:00
|
|
|
|
2022-11-20 07:04:53 -08:00
|
|
|
function UserInfo({ user }: { user: User }) {
|
|
|
|
|
const { display_name, username, bio, links } = user;
|
2022-11-18 05:11:52 -08:00
|
|
|
return (
|
2022-11-20 07:04:53 -08:00
|
|
|
<div className="flex flex-col">
|
|
|
|
|
{/* display name */}
|
2022-11-20 13:35:10 -08:00
|
|
|
{display_name && <h1 className="text-2xl font-bold">{display_name}</h1>}
|
2022-11-20 07:04:53 -08:00
|
|
|
{/* username */}
|
|
|
|
|
<h3
|
|
|
|
|
className={`${
|
|
|
|
|
display_name
|
|
|
|
|
? "text-xl italic text-slate-600 dark:text-slate-400"
|
|
|
|
|
: "text-2xl font-bold"
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
@{username}
|
|
|
|
|
</h3>
|
|
|
|
|
{/* bio */}
|
|
|
|
|
{bio && (
|
|
|
|
|
<ReactMarkdown className="prose dark:prose-invert prose-slate">
|
|
|
|
|
{bio}
|
|
|
|
|
</ReactMarkdown>
|
|
|
|
|
)}
|
|
|
|
|
{/* links */}
|
|
|
|
|
{links?.length && (
|
|
|
|
|
<div className="flex flex-col mx-auto lg:ml-auto">
|
|
|
|
|
{links.map((link, index) => (
|
|
|
|
|
<a
|
|
|
|
|
key={index}
|
|
|
|
|
href={link}
|
|
|
|
|
rel="nofollow noopener noreferrer me"
|
|
|
|
|
className="hover:underline text-sky-500 dark:text-sky-400"
|
|
|
|
|
>
|
|
|
|
|
{link}
|
|
|
|
|
</a>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function LabelList({ source }: { source: Name[] | Pronoun[] }) {
|
2022-11-20 13:35:10 -08:00
|
|
|
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>
|
|
|
|
|
) : (
|
|
|
|
|
<></>
|
2022-11-18 05:11:52 -08:00
|
|
|
);
|
2022-11-17 08:33:59 -08:00
|
|
|
}
|
|
|
|
|
|
2022-11-20 07:04:53 -08:00
|
|
|
function LabelStatusIcon({ status }: { status: WordStatus }) {
|
|
|
|
|
return React.createElement(
|
|
|
|
|
{
|
|
|
|
|
[WordStatus.Favourite]: HeartFill,
|
|
|
|
|
[WordStatus.Okay]: HandThumbsUp,
|
|
|
|
|
[WordStatus.Jokingly]: EmojiLaughing,
|
|
|
|
|
[WordStatus.FriendsOnly]: People,
|
|
|
|
|
[WordStatus.Avoid]: HandThumbsDown,
|
|
|
|
|
}[status],
|
2022-11-20 13:35:10 -08:00
|
|
|
{ className: "inline" }
|
2022-11-20 07:04:53 -08:00
|
|
|
);
|
|
|
|
|
}
|
2022-11-17 08:33:59 -08:00
|
|
|
|
2022-11-20 07:04:53 -08:00
|
|
|
function LabelsLine({ labels }: { labels: Name[] | Pronoun[] }) {
|
|
|
|
|
if (labels.length === 0) return <></>;
|
|
|
|
|
const status = labels[0].status;
|
|
|
|
|
const text = labels
|
2022-11-20 13:35:10 -08:00
|
|
|
.map((label) =>
|
|
|
|
|
"name" in label
|
2022-11-20 07:04:53 -08:00
|
|
|
? label.name
|
2022-11-20 13:35:10 -08:00
|
|
|
: label.display_text ?? label.pronouns.split("/").slice(0, 2).join("/")
|
|
|
|
|
)
|
|
|
|
|
.join(", ");
|
2022-11-18 05:11:52 -08:00
|
|
|
return (
|
2022-11-20 13:35:10 -08:00
|
|
|
<p
|
|
|
|
|
className={`
|
|
|
|
|
${status === WordStatus.Favourite ? "text-lg font-bold" : ""}
|
|
|
|
|
${
|
|
|
|
|
status === WordStatus.Avoid ? "text-slate-600 dark:text-slate-400" : ""
|
|
|
|
|
}`}
|
|
|
|
|
>
|
2022-11-20 07:04:53 -08:00
|
|
|
<LabelStatusIcon status={status} /> {text}
|
2022-11-18 05:11:52 -08:00
|
|
|
</p>
|
|
|
|
|
);
|
2022-11-17 08:33:59 -08:00
|
|
|
}
|
|
|
|
|
|
2022-11-20 07:04:53 -08:00
|
|
|
function LabelLine({ label }: { label: Name | Pronoun }) {
|
|
|
|
|
return <LabelsLine labels={[label] as Name[] | Pronoun[]} />;
|
|
|
|
|
}
|
2022-08-16 18:04:06 -07:00
|
|
|
|
2022-11-20 07:04:53 -08:00
|
|
|
function FieldCardGrid({ fields }: { fields: Field[] }) {
|
|
|
|
|
return (
|
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 py-2">
|
|
|
|
|
{fields?.map((field, index) => (
|
|
|
|
|
<FieldCard field={field} key={index} />
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
2022-08-16 18:04:06 -07:00
|
|
|
|
2022-11-20 07:04:53 -08:00
|
|
|
const fieldEntryStatus: { [key in string]: WordStatus } = {
|
2022-11-20 13:35:10 -08:00
|
|
|
favourite: WordStatus.Favourite,
|
|
|
|
|
okay: WordStatus.Okay,
|
|
|
|
|
jokingly: WordStatus.Jokingly,
|
2022-11-20 07:04:53 -08:00
|
|
|
friends_only: WordStatus.FriendsOnly,
|
2022-11-20 13:35:10 -08:00
|
|
|
avoid: WordStatus.Avoid,
|
2022-08-16 18:04:06 -07:00
|
|
|
};
|
2022-11-20 07:04:53 -08:00
|
|
|
|
|
|
|
|
function FieldCard({
|
|
|
|
|
field,
|
|
|
|
|
draggable,
|
|
|
|
|
}: {
|
|
|
|
|
field: Field;
|
|
|
|
|
draggable?: boolean;
|
|
|
|
|
}) {
|
|
|
|
|
return (
|
|
|
|
|
<Card title={field.name} draggable={draggable}>
|
2022-11-20 13:35:10 -08:00
|
|
|
{Object.entries(fieldEntryStatus).map(([statusName, status], i) => (
|
|
|
|
|
<LabelsLine
|
|
|
|
|
key={i}
|
|
|
|
|
labels={(field as any)[statusName]?.map((name: string) => ({
|
|
|
|
|
name,
|
|
|
|
|
status,
|
|
|
|
|
}))}
|
|
|
|
|
/>
|
|
|
|
|
))}
|
2022-11-20 07:04:53 -08:00
|
|
|
</Card>
|
|
|
|
|
);
|
|
|
|
|
}
|
