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

feat(frontend): member page

Browse source
This commit is contained in:
hanabi 2022-11-20 22:16:07 -05:00
parent 050a27a389
commit ed6bc06e6f
2 changed files with 12 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
frontend/components/PersonPage.tsx
View file

@ -1,5 +1,5 @@
import Head from "next/head";
import { Field, Name, Person, Pronoun, User, WordStatus } from "../lib/types";
import { Field, Member, Name, PartialPerson, Person, Pronoun, User, WordStatus } from "../lib/types";
import ReactMarkdown from "react-markdown";
import { userState } from "../lib/state";
import { useRecoilValue } from "recoil";
@ -41,7 +41,10 @@ export default function PersonPage({ person }: { person: Person }) {
<LabelList content={person.names ?? []} />
<LabelList content={person.pronouns ?? []} />
<FieldCardGrid fields={person.fields ?? []} />
{!("user" in person) && <MemberList user={person as any as User} />}
{"user" in person
? <BlueLink to={personURL(person.user)}>{`< ${person.user.display_name}`}</BlueLink>
: <MemberList user={person as any as User} />
}
</div>
</>
);
@ -65,7 +68,7 @@ function personUser(person: Person) {
}
/** The (relative) URL pointing to a person. */
function personURL(person: Person) {
function personURL(person: PartialPerson | Member) {
const domain =
typeof window !== "undefined" ? window.location.origin : process.env.DOMAIN;
return `${domain}/u/${"user" in person ? `${person.user.name}/` : ""}${
@ -199,16 +202,10 @@ function PersonInfo({ person }: { person: Person }) {
const { display_name, name, bio, links } = person;
return (
<div className="flex flex-col">
{/* display name */}
{display_name && <h1 className="text-2xl font-bold">{display_name}</h1>}
{/* name */}
<h3
className={`${
display_name
? "text-xl italic text-slate-600 dark:text-slate-400"
: "text-2xl font-bold"
}`}
>
<h1 className="text-2xl font-bold">{display_name === null ? name : display_name}</h1>
{/* handle */}
<h3 className="text-xl font-light text-slate-600 dark:text-slate-400">
{personFullHandle(person)}
</h3>
{/* bio */}

15
frontend/pages/u/[user]/[member].tsx
View file

@ -1,23 +1,14 @@
import { GetServerSideProps } from "next";
import fetchAPI from "../../../lib/fetch";
import { Member, User } from "../../../lib/types";
import { userState } from "../../../lib/state";
import { useRecoilValue } from "recoil";
import { Member } from "../../../lib/types";
import PersonPage from "../../../components/PersonPage";
interface Props {
member: Member;
}
export default function MemberPage({ member }: Props) {
const isOwnMember = useRecoilValue(userState)?.id === member.user?.id;
return (
<>
<div>hi! this is {isOwnMember ? "" : "not "}your own member.</div>
<h1>name: {member.name}</h1>
<p>{member.bio}</p>
</>
);
return <PersonPage person={member} />;
}
export const getServerSideProps: GetServerSideProps = async (context) => {