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 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

{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 === 0) 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 }))} /> )} ); }