FreakU
/
pronounsfu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: u/[user] members list

This commit is contained in:
hanabi 2022-11-20 16:05:51 -05:00
parent 2eefad74cf
commit 8a9e842901
1 changed files with 42 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/pages/u/[user]/index.tsx
View File

@ -1,7 +1,7 @@
import { GetServerSideProps } from "next"; import { GetServerSideProps } from "next";
import Head from "next/head"; import Head from "next/head";
import fetchAPI from "../../../lib/fetch"; import fetchAPI from "../../../lib/fetch";
import { Field, Name, Pronoun, User, WordStatus } from "../../../lib/types"; import { Field, Name, PartialMember, Pronoun, User, WordStatus } from "../../../lib/types";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import { userState } from "../../../lib/state"; import { userState } from "../../../lib/state";
import { useRecoilValue } from "recoil"; import { useRecoilValue } from "recoil";
@ -19,16 +19,17 @@ import Card from "../../../components/Card";
interface Props { interface Props {
user: User; user: User;
partialMembers: PartialMember[];
} }
export default function Index({ user }: Props) { export default function Index({ user, partialMembers }: Props) {
return ( return (
<> <>
<Head> <Head>
<title key='title'>{`@${user.username} - pronouns.cc`}</title> <title key='title'>{`@${user.username} - pronouns.cc`}</title>
</Head> </Head>
<IsOwnPageNotice user={user} /> <IsOwnPageNotice user={user} />
<div className="container mx-auto"> <div className="container mx-auto pb-[20vh]">
<div className=" <div className="
m-2 p-2 m-2 p-2
flex flex-col lg:flex-row flex flex-col lg:flex-row
@ -44,19 +45,27 @@ export default function Index({ user }: Props) {
<LabelList source={user.names} /> <LabelList source={user.names} />
<LabelList source={user.pronouns} /> <LabelList source={user.pronouns} />
<FieldCardGrid fields={user.fields} /> <FieldCardGrid fields={user.fields} />
<MemberList user={user} partialMembers={partialMembers} />
</div> </div>
</> </>
); );
} }
export const getServerSideProps: GetServerSideProps = async (context) => { export const getServerSideProps: GetServerSideProps = async (context) => {
const username = context.params!.user;
try { try {
const user = await fetchAPI<User>(`/users/${context.params!.user}`); const [userResponse, partialMembersResponse] = await Promise.allSettled([
fetchAPI<User>(`/users/${username}`),
return { props: { user } }; fetchAPI<PartialMember[]>(`/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) { } catch (e) {
console.log(e); console.log(e);
return { notFound: true }; return { notFound: true };
} }
}; };
@ -74,6 +83,32 @@ function IsOwnPageNotice({ user }: { user: User }) {
); );
} }
function MemberList({
user,
partialMembers,
className
}: {
user: User,
partialMembers: PartialMember[],
className?: string
}) {
console.log(partialMembers);
return (
<div className={`mx-auto flex-col items-center ${className || ''}`}>
<h1 className='text-2xl'>Members</h1>
<ul>
{partialMembers.map(partialMember =>
<li className='before:[content:"-_"]' key={partialMember.id}>
<BlueLink to={`/u/${user.username}/${partialMember.name}`}>
<span>{partialMember.display_name ?? partialMember.name}</span>
</BlueLink>
</li>
)}
</ul>
</div>
);
}
function UserAvatar({ user }: { user: User }) { function UserAvatar({ user }: { user: User }) {
return ( return (
user.avatar_urls && user.avatar_urls.length !== 0 ? ( user.avatar_urls && user.avatar_urls.length !== 0 ? (