ulith/pronounss
1
0
Fork 0
forked from mirrors/pronouns.cc
Code Pull requests 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 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 ReactMarkdown from "react-markdown";
import { userState } from "../lib/state"; import { userState } from "../lib/state";
import { useRecoilValue } from "recoil"; import { useRecoilValue } from "recoil";
@ -41,7 +41,10 @@ export default function PersonPage({ person }: { person: Person }) {
<LabelList content={person.names ?? []} /> <LabelList content={person.names ?? []} />
<LabelList content={person.pronouns ?? []} /> <LabelList content={person.pronouns ?? []} />
<FieldCardGrid fields={person.fields ?? []} /> <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> </div>
</> </>
); );
@ -65,7 +68,7 @@ function personUser(person: Person) {
} }
/** The (relative) URL pointing to a person. */ /** The (relative) URL pointing to a person. */
function personURL(person: Person) { function personURL(person: PartialPerson | Member) {
const domain = const domain =
typeof window !== "undefined" ? window.location.origin : process.env.DOMAIN; typeof window !== "undefined" ? window.location.origin : process.env.DOMAIN;
return `${domain}/u/${"user" in person ? `${person.user.name}/` : ""}${ 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; const { display_name, name, bio, links } = person;
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
{/* display name */}
{display_name && <h1 className="text-2xl font-bold">{display_name}</h1>}
{/* name */} {/* name */}
<h3 <h1 className="text-2xl font-bold">{display_name === null ? name : display_name}</h1>
className={`${ {/* handle */}
display_name <h3 className="text-xl font-light text-slate-600 dark:text-slate-400">
? "text-xl italic text-slate-600 dark:text-slate-400"
: "text-2xl font-bold"
}`}
>
{personFullHandle(person)} {personFullHandle(person)}
</h3> </h3>
{/* bio */} {/* bio */}

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

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