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 ReactMarkdown from "react-markdown"; import { userState } from "../../../lib/state"; import { useRecoilValue } from "recoil"; import FallbackImage from "../../../components/FallbackImage"; import { EmojiLaughing, HandThumbsDown, HandThumbsUp, HeartFill, People, } from "react-bootstrap-icons"; import BlueLink from "../../../components/BlueLink"; import React from "react"; import Card from "../../../components/Card"; interface Props { user: User; partialMembers: PartialMember[]; } export default function Index({ user, partialMembers }: Props) { return ( <> {`@${user.username} - pronouns.cc`}
); } export const getServerSideProps: GetServerSideProps = async (context) => { const username = context.params!.user; try { const [userResponse, partialMembersResponse] = await Promise.allSettled([ fetchAPI(`/users/${username}`), fetchAPI(`/users/${username}/members`), ]); if (userResponse.status === "rejected") throw new Error("Could not fetch user"); const user = userResponse.value; const partialMembers = partialMembersResponse.status === "fulfilled" ? partialMembersResponse.value : []; return { props: { user, partialMembers } }; } catch (e) { console.log(e); return { notFound: true }; } }; function UserHead({ user }: { user: User }) { let description = ""; if ( user.names?.filter((name) => name.status === WordStatus.Favourite) ?.length && user.pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite) ?.length ) { description = `@${user.username} goes by ${user.names .filter((name) => name.status === WordStatus.Favourite) .map((name) => name.name) .join(", ")} and uses ${user.pronouns .filter((pronoun) => pronoun.status === WordStatus.Favourite) .map( (pronoun) => pronoun.display_text ?? pronoun.pronouns.split("/").slice(0, 2).join("/") ) .join(", ")} pronouns.`; } else if ( user.names?.filter((name) => name.status === WordStatus.Favourite)?.length ) { description = `@${user.username} goes by ${user.names .filter((name) => name.status === WordStatus.Favourite) .map((name) => name.name) .join(", ")}.`; } else if ( user.pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite) ?.length ) { description = `@${user.username} uses ${user.pronouns .filter((pronoun) => pronoun.status === WordStatus.Favourite) .map( (pronoun) => pronoun.display_text ?? pronoun.pronouns.split("/").slice(0, 2).join("/") ) .join(", ")} pronouns.`; } else if (user.bio && user.bio !== "") { description = user.bio.slice(0, 500); } const domain = typeof window !== "undefined" ? window.location.origin : process.env.DOMAIN; return ( {user.avatar_urls && user.avatar_urls.length > 0 ? ( ) : ( <> )} ); } 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
) : ( <> ); } function MemberList({ user, partialMembers, className, }: { user: User; partialMembers: PartialMember[]; className?: string; }) { console.log(partialMembers); return (

Members

    {partialMembers.map((partialMember) => (
  • {partialMember.display_name ?? partialMember.name}
    • ))}
); } function UserAvatar({ user }: { user: User }) { return user.avatar_urls && user.avatar_urls.length !== 0 ? ( ) : ( <> ); } function UserInfo({ user }: { user: User }) { const { display_name, username, bio, links } = user; return (
{/* display name */} {display_name &&

{display_name}

} {/* username */}

@{username}

{/* bio */} {bio && ( {bio} )} {/* links */} {links?.length && (
{links.map((link, index) => ( {link} ))}
)}
); } function LabelList({ source }: { source: Name[] | Pronoun[] }) { return source?.length > 0 ? (
{source.map((label, index) => ( ))}
) : ( <> ); } function LabelStatusIcon({ status }: { status: WordStatus }) { return React.createElement( { [WordStatus.Favourite]: HeartFill, [WordStatus.Okay]: HandThumbsUp, [WordStatus.Jokingly]: EmojiLaughing, [WordStatus.FriendsOnly]: People, [WordStatus.Avoid]: HandThumbsDown, }[status], { className: "inline" } ); } function LabelsLine({ labels }: { labels: Name[] | Pronoun[] }) { if (!labels?.length) return <>; const status = labels[0].status; const text = labels .map((label) => "name" in label ? label.name : label.display_text ?? label.pronouns.split("/").slice(0, 2).join("/") ) .join(", "); return (

{text}

); } function LabelLine({ label }: { label: Name | Pronoun }) { return ; } function FieldCardGrid({ fields }: { fields: Field[] }) { return (
{fields?.map((field, index) => ( ))}
); } const fieldEntryStatus: { [key in string]: WordStatus } = { favourite: WordStatus.Favourite, okay: WordStatus.Okay, jokingly: WordStatus.Jokingly, friends_only: WordStatus.FriendsOnly, avoid: WordStatus.Avoid, }; function FieldCard({ field, draggable, }: { field: Field; draggable?: boolean; }) { return ( {Object.entries(fieldEntryStatus).map(([statusName, status], i) => ( ({ name, status, }))} /> ))} ); }