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

refactor: minor api change, type reafactor

Browse source
This commit is contained in:
hanabi 2022-11-20 19:58:17 -05:00
parent 2be1c9550b
commit 8aeefb56da
2 changed files with 40 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
frontend/lib/types.ts
View file

@ -1,43 +1,33 @@
export interface PartialPerson {
id: string;
name: string;
display_name: string | null;
avatar_urls: string[] | null;
}
export type PartialUser = PartialPerson;
export type PartialMember = PartialPerson;
export interface Person extends PartialPerson {
bio: string | null;
links: string[] | null;
names: Name[];
pronouns: Pronoun[];
fields: Field[];
}
export interface Member extends Person {
user?: PartialUser;
}
export interface User extends Person {
members: PartialMember[];
}
export interface MeUser extends User { export interface MeUser extends User {
discord: string | null; discord: string | null;
discord_username: string | null; discord_username: string | null;
} }
export interface User {
id: string;
username: string;
display_name: string | null;
bio: string | null;
avatar_urls: string[] | null;
links: string[] | null;
members: PartialMember[];
names: Name[];
pronouns: Pronoun[];
fields: Field[];
}
export interface PartialMember {
id: string;
name: string;
display_name: string | null;
avatar_urls: string[] | null;
}
export interface Member extends PartialMember {
bio: string | null;
links: string[] | null;
id: string;
display_name: string | null;
name: string;
avatar_urls: string[] | null;
names: Name[];
pronouns: Pronoun[];
fields: Field[];
user?: PartialUser;
}
export interface Name { export interface Name {
name: string; name: string;
status: WordStatus; status: WordStatus;
@ -109,10 +99,3 @@ export interface SignupResponse {
user: MeUser; user: MeUser;
token: string; token: string;
} }
export interface PartialUser {
id: string;
username: string;
display_name: string | null;
avatar_urls: string[] | null;
}

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

@ -33,7 +33,7 @@ export default function Index({ user, partialMembers }: Props) {
return ( return (
<> <>
<Head> <Head>
<title key="title">{`@${user.username} - pronouns.cc`}</title> <title key="title">{`@${user.name} - pronouns.cc`}</title>
</Head> </Head>
<UserHead user={user} /> <UserHead user={user} />
<IsOwnPageNotice user={user} /> <IsOwnPageNotice user={user} />
@ -62,11 +62,11 @@ export default function Index({ user, partialMembers }: Props) {
} }
export const getServerSideProps: GetServerSideProps = async (context) => { export const getServerSideProps: GetServerSideProps = async (context) => {
const username = context.params!.user; const name = context.params!.user;
try { try {
const [userResponse, partialMembersResponse] = await Promise.allSettled([ const [userResponse, partialMembersResponse] = await Promise.allSettled([
fetchAPI<User>(`/users/${username}`), fetchAPI<User>(`/users/${name}`),
fetchAPI<PartialMember[]>(`/users/${username}/members`), fetchAPI<PartialMember[]>(`/users/${name}/members`),
]); ]);
if (userResponse.status === "rejected") if (userResponse.status === "rejected")
throw new Error("Could not fetch user"); throw new Error("Could not fetch user");
@ -90,7 +90,7 @@ function UserHead({ user }: { user: User }) {
user.pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite) user.pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite)
?.length ?.length
) { ) {
description = `@${user.username} goes by ${user.names description = `@${user.name} goes by ${user.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 ${user.pronouns
@ -104,7 +104,7 @@ function UserHead({ user }: { user: User }) {
} else if ( } else if (
user.names?.filter((name) => name.status === WordStatus.Favourite)?.length user.names?.filter((name) => name.status === WordStatus.Favourite)?.length
) { ) {
description = `@${user.username} goes by ${user.names description = `@${user.name} goes by ${user.names
.filter((name) => name.status === WordStatus.Favourite) .filter((name) => name.status === WordStatus.Favourite)
.map((name) => name.name) .map((name) => name.name)
.join(", ")}.`; .join(", ")}.`;
@ -112,7 +112,7 @@ function UserHead({ user }: { user: User }) {
user.pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite) user.pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite)
?.length ?.length
) { ) {
description = `@${user.username} uses ${user.pronouns description = `@${user.name} uses ${user.pronouns
.filter((pronoun) => pronoun.status === WordStatus.Favourite) .filter((pronoun) => pronoun.status === WordStatus.Favourite)
.map( .map(
(pronoun) => (pronoun) =>
@ -135,8 +135,8 @@ function UserHead({ user }: { user: User }) {
property="og:title" property="og:title"
content={ content={
user.display_name user.display_name
? `${user.display_name} (@${user.username})` ? `${user.display_name} (@${user.name})`
: `@${user.username}` : `@${user.name}`
} }
/> />
{user.avatar_urls && user.avatar_urls.length > 0 ? ( {user.avatar_urls && user.avatar_urls.length > 0 ? (
@ -156,7 +156,7 @@ function UserHead({ user }: { user: User }) {
<meta <meta
key="og:url" key="og:url"
property="og:url" property="og:url"
content={`${domain}/u/${user.username}`} content={`${domain}/u/${user.name}`}
/> />
</Head> </Head>
); );
@ -191,7 +191,7 @@ function MemberList({
<ul> <ul>
{partialMembers.map((partialMember) => ( {partialMembers.map((partialMember) => (
<li className='before:[content:"-_"]' key={partialMember.id}> <li className='before:[content:"-_"]' key={partialMember.id}>
<BlueLink to={`/u/${user.username}/${partialMember.name}`}> <BlueLink to={`/u/${user.name}/${partialMember.name}`}>
<span>{partialMember.display_name ?? partialMember.name}</span> <span>{partialMember.display_name ?? partialMember.name}</span>
</BlueLink> </BlueLink>
</li> </li>
@ -206,7 +206,7 @@ function UserAvatar({ user }: { user: User }) {
<FallbackImage <FallbackImage
className="max-w-xs rounded-full" className="max-w-xs rounded-full"
urls={user.avatar_urls} urls={user.avatar_urls}
alt={`@${user.username}'s avatar`} alt={`@${user.name}'s avatar`}
/> />
) : ( ) : (
<></> <></>
@ -214,12 +214,12 @@ function UserAvatar({ user }: { user: User }) {
} }
function UserInfo({ user }: { user: User }) { function UserInfo({ user }: { user: User }) {
const { display_name, username, bio, links } = user; const { display_name, name, bio, links } = user;
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
{/* display name */} {/* 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 */} {/* name */}
<h3 <h3
className={`${ className={`${
display_name display_name
@ -227,7 +227,7 @@ function UserInfo({ user }: { user: User }) {
: "text-2xl font-bold" : "text-2xl font-bold"
}`} }`}
> >
@{username} @{name}
</h3> </h3>
{/* bio */} {/* bio */}
{bio && ( {bio && (