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

refactor: prepare user page code for member page

Browse source
This commit is contained in:
hanabi 2022-11-20 21:39:09 -05:00
parent 373ccf4b63
commit 212d69b7ac
2 changed files with 99 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/lib/types.ts
View file

@ -7,7 +7,7 @@ export interface PartialPerson {
export type PartialUser = PartialPerson; export type PartialUser = PartialPerson;
export type PartialMember = PartialPerson; export type PartialMember = PartialPerson;
export interface Person extends PartialPerson { interface _Person extends PartialPerson {
bio: string | null; bio: string | null;
links: string[] | null; links: string[] | null;
names: Name[]; names: Name[];
@ -15,14 +15,16 @@ export interface Person extends PartialPerson {
fields: Field[]; fields: Field[];
} }
export interface Member extends Person { export interface Member extends _Person {
user: PartialUser; user: PartialUser;
} }
export interface User extends Person { export interface User extends _Person {
members: PartialMember[]; members: PartialMember[];
} }
export type Person = Member | User;
export interface MeUser extends User { export interface MeUser extends User {
discord: string | null; discord: string | null;
discord_username: string | null; discord_username: string | null;

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

@ -3,8 +3,11 @@ import Head from "next/head";
import fetchAPI from "../../../lib/fetch"; import fetchAPI from "../../../lib/fetch";
import { import {
Field, Field,
Member,
Name, Name,
PartialMember, PartialMember,
PartialUser,
Person,
Pronoun, Pronoun,
User, User,
WordStatus, WordStatus,
@ -31,33 +34,7 @@ interface Props {
export default function Index({ user, partialMembers }: Props) { export default function Index({ user, partialMembers }: Props) {
return ( return (
<> <PersonPage person={user} />
<Head>
<title key="title">{`@${user.name} - pronouns.cc`}</title>
</Head>
<UserHead user={user} />
<IsOwnPageNotice user={user} />
<div className="container mx-auto pb-[20vh]">
<div
className="
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
"
>
<UserAvatar user={user} />
<UserInfo user={user} />
</div>
<LabelList source={user.names} />
<LabelList source={user.pronouns} />
<FieldCardGrid fields={user.fields} />
<MemberList user={user} partialMembers={partialMembers} />
</div>
</>
); );
} }
@ -82,18 +59,76 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
} }
}; };
function UserHead({ user }: { user: User }) { function PersonPage({ person }: { person: Person }) {
return (
<>
<Head>
<title key="title">{`${personFullHandle(person)} - pronouns.cc`}</title>
</Head>
<PersonHead person={person} />
<IsOwnUserPageNotice person={person} />
<div className="container mx-auto pb-[20vh]">
<div
className="
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
"
>
<PersonAvatar person={person} />
<PersonInfo person={person} />
</div>
<LabelList content={person.names} />
<LabelList content={person.pronouns} />
<FieldCardGrid fields={person.fields} />
{ 'user' in person && (
<MemberList user={person as any as User} />
)}
</div>
</>
);
}
/** Full handle of a person. */
function personFullHandle(person: Person) {
return 'user' in person
? `&${person.name}@${person.user.name}`
: `@${person.name}`;
}
/** Short handle of a person. */
function personShortHandle(person: Person) {
return ('user' in person ? '&' : '@') + person.name;
}
/** The user (account) associated with a person. */
function personUser(person: Person) {
return 'user' in person ? person.user : person;
}
/** The (relative) URL pointing to a person. */
function personURL(person: Person) {
const domain = typeof window !== "undefined" ? window.location.origin : process.env.DOMAIN;
return `${domain}/u/${'user' in person ? `${person.user.name}/` : ''}${person.name}`;
}
function PersonHead({ person }: { person: Person }) {
const { id, name, display_name, avatar_urls, bio, links, names, pronouns, fields } = person;
let description = ""; let description = "";
if ( if (
user.names?.filter((name) => name.status === WordStatus.Favourite) names?.filter((name) => name.status === WordStatus.Favourite)
?.length && ?.length &&
user.pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite) pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite)
?.length ?.length
) { ) {
description = `@${user.name} goes by ${user.names description = `${personShortHandle(person)} goes by ${names
.filter((name) => name.status === WordStatus.Favourite) .filter((name) => name.status === WordStatus.Favourite)
.map((name) => name.name) .map((name) => name.name)
.join(", ")} and uses ${user.pronouns .join(", ")} and uses ${pronouns
.filter((pronoun) => pronoun.status === WordStatus.Favourite) .filter((pronoun) => pronoun.status === WordStatus.Favourite)
.map( .map(
(pronoun) => (pronoun) =>
@ -102,17 +137,17 @@ function UserHead({ user }: { user: User }) {
) )
.join(", ")} pronouns.`; .join(", ")} pronouns.`;
} else if ( } else if (
user.names?.filter((name) => name.status === WordStatus.Favourite)?.length names?.filter((name) => name.status === WordStatus.Favourite)?.length
) { ) {
description = `@${user.name} goes by ${user.names description = `${personShortHandle(person)} goes by ${names
.filter((name) => name.status === WordStatus.Favourite) .filter((name) => name.status === WordStatus.Favourite)
.map((name) => name.name) .map((name) => name.name)
.join(", ")}.`; .join(", ")}.`;
} else if ( } else if (
user.pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite) pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite)
?.length ?.length
) { ) {
description = `@${user.name} uses ${user.pronouns description = `${personShortHandle(person)} uses ${pronouns
.filter((pronoun) => pronoun.status === WordStatus.Favourite) .filter((pronoun) => pronoun.status === WordStatus.Favourite)
.map( .map(
(pronoun) => (pronoun) =>
@ -120,13 +155,10 @@ function UserHead({ user }: { user: User }) {
pronoun.pronouns.split("/").slice(0, 2).join("/") pronoun.pronouns.split("/").slice(0, 2).join("/")
) )
.join(", ")} pronouns.`; .join(", ")} pronouns.`;
} else if (user.bio && user.bio !== "") { } else if (bio && bio !== "") {
description = user.bio.slice(0, 500); description = bio.slice(0, 500);
} }
const domain =
typeof window !== "undefined" ? window.location.origin : process.env.DOMAIN;
return ( return (
<Head> <Head>
<meta key="og:sitename" property="og:site_name" content="pronouns.cc" /> <meta key="og:sitename" property="og:site_name" content="pronouns.cc" />
@ -134,16 +166,16 @@ function UserHead({ user }: { user: User }) {
key="og:title" key="og:title"
property="og:title" property="og:title"
content={ content={
user.display_name display_name
? `${user.display_name} (@${user.name})` ? `${display_name} (${personFullHandle(person)})`
: `@${user.name}` : personFullHandle(person)
} }
/> />
{user.avatar_urls && user.avatar_urls.length > 0 ? ( {avatar_urls && avatar_urls.length > 0 ? (
<meta <meta
key="og:image" key="og:image"
property="og:image" property="og:image"
content={user.avatar_urls[0]} content={avatar_urls[0]}
/> />
) : ( ) : (
<></> <></>
@ -156,17 +188,16 @@ function UserHead({ user }: { user: User }) {
<meta <meta
key="og:url" key="og:url"
property="og:url" property="og:url"
content={`${domain}/u/${user.name}`} content={personURL(person)}
/> />
</Head> </Head>
); );
} }
function IsOwnPageNotice({ user }: { user: User }) { function IsOwnUserPageNotice({ person }: { person: Person }) {
const isThisMyPage = useRecoilValue(userState)?.id === user.id; return useRecoilValue(userState)?.id === person.id ? (
return 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> user profile.
<br /> <br />
<BlueLink to="/edit/profile">Edit your profile</BlueLink> <BlueLink to="/edit/profile">Edit your profile</BlueLink>
</div> </div>
@ -177,14 +208,12 @@ function IsOwnPageNotice({ user }: { user: User }) {
function MemberList({ function MemberList({
user, user,
partialMembers,
className, className,
}: { }: {
user: User; user: User;
partialMembers: PartialMember[];
className?: string; className?: string;
}) { }) {
console.log(partialMembers); const partialMembers = user.members;
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>
@ -201,20 +230,21 @@ function MemberList({
); );
} }
function UserAvatar({ user }: { user: User }) { function PersonAvatar({ person }: { person: Person }) {
return user.avatar_urls && user.avatar_urls.length !== 0 ? ( const { display_name, name, avatar_urls } = person;
return avatar_urls && avatar_urls.length !== 0 ? (
<FallbackImage <FallbackImage
className="max-w-xs rounded-full" className="max-w-xs rounded-full"
urls={user.avatar_urls} urls={avatar_urls}
alt={`@${user.name}'s avatar`} alt={`${display_name || name}'s avatar`}
/> />
) : ( ) : (
<></> <></>
); );
} }
function UserInfo({ user }: { user: User }) { function PersonInfo({ person }: { person: Person }) {
const { display_name, name, bio, links } = user; const { display_name, name, bio, links } = person;
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
{/* display name */} {/* display name */}
@ -227,7 +257,7 @@ function UserInfo({ user }: { user: User }) {
: "text-2xl font-bold" : "text-2xl font-bold"
}`} }`}
> >
@{name} {personFullHandle(person)}
</h3> </h3>
{/* bio */} {/* bio */}
{bio && ( {bio && (
@ -254,10 +284,10 @@ function UserInfo({ user }: { user: User }) {
); );
} }
function LabelList({ source }: { source: Name[] | Pronoun[] }) { function LabelList({ content }: { content: Name[] | Pronoun[] }) {
return source?.length > 0 ? ( return content?.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) => ( {content.map((label, index) => (
<LabelLine key={index} label={label} /> <LabelLine key={index} label={label} />
))} ))}
</div> </div>