pronounsfu/frontend/pages/u/[user]/index.tsx

import { GetServerSideProps } from "next";
import Head from "next/head";
import fetchAPI from "../../../lib/fetch";
import {
  Field,
  Member,
  Name,
  PartialMember,
  PartialUser,
  Person,
  Pronoun,
  User,
  WordStatus,
} from "../../../lib/types";
import ReactMarkdown from "react-markdown";
import { userState } from "../../../lib/state";
import { useRecoilValue } from "recoil";
import FallbackImage from "../../../components/FallbackImage";
import {
  EmojiLaughing,
  HandThumbsDown,
  HandThumbsUp,
  HeartFill,
  People,
} from "react-bootstrap-icons";
import BlueLink from "../../../components/BlueLink";
import React from "react";
import Card from "../../../components/Card";

interface Props {
  user: User;
  partialMembers: PartialMember[];
}

export default function Index({ user, partialMembers }: Props) {
  return (
    <PersonPage person={user} />
  );
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const name = context.params!.user;
  try {
    const [userResponse, partialMembersResponse] = await Promise.allSettled([
      fetchAPI<User>(`/users/${name}`),
      fetchAPI<PartialMember[]>(`/users/${name}/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) {
    console.log(e);
    return { notFound: true };
  }
};

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 = "";
  if (
    names?.filter((name) => name.status === WordStatus.Favourite)
      ?.length &&
    pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite)
      ?.length
  ) {
    description = `${personShortHandle(person)} goes by ${names
      .filter((name) => name.status === WordStatus.Favourite)
      .map((name) => name.name)
      .join(", ")} and uses ${pronouns
      .filter((pronoun) => pronoun.status === WordStatus.Favourite)
      .map(
        (pronoun) =>
          pronoun.display_text ??
          pronoun.pronouns.split("/").slice(0, 2).join("/")
      )
      .join(", ")} pronouns.`;
  } else if (
    names?.filter((name) => name.status === WordStatus.Favourite)?.length
  ) {
    description = `${personShortHandle(person)} goes by ${names
      .filter((name) => name.status === WordStatus.Favourite)
      .map((name) => name.name)
      .join(", ")}.`;
  } else if (
    pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite)
      ?.length
  ) {
    description = `${personShortHandle(person)} uses ${pronouns
      .filter((pronoun) => pronoun.status === WordStatus.Favourite)
      .map(
        (pronoun) =>
          pronoun.display_text ??
          pronoun.pronouns.split("/").slice(0, 2).join("/")
      )
      .join(", ")} pronouns.`;
  } else if (bio && bio !== "") {
    description = bio.slice(0, 500);
  }

  return (
    <Head>
      <meta key="og:sitename" property="og:site_name" content="pronouns.cc" />
      <meta
        key="og:title"
        property="og:title"
        content={
          display_name
            ? `${display_name} (${personFullHandle(person)})`
            : personFullHandle(person)
        }
      />
      {avatar_urls && avatar_urls.length > 0 ? (
        <meta
          key="og:image"
          property="og:image"
          content={avatar_urls[0]}
        />
      ) : (
        <></>
      )}
      <meta
        key="og:description"
        property="og:description"
        content={description}
      />
      <meta
        key="og:url"
        property="og:url"
        content={personURL(person)}
      />
    </Head>
  );
}

function IsOwnUserPageNotice({ person }: { person: Person }) {
  return useRecoilValue(userState)?.id === person.id ? (
    <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> user profile.
      <br />
      <BlueLink to="/edit/profile">Edit your profile</BlueLink>
    </div>
  ) : (
    <></>
  );
}

function MemberList({
  user,
  className,
}: {
  user: User;
  className?: string;
}) {
  const partialMembers = user.members;
  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.name}/${partialMember.name}`}>
              <span>{partialMember.display_name ?? partialMember.name}</span>
            </BlueLink>
          </li>
        ))}
      </ul>
    </div>
  );
}

function PersonAvatar({ person }: { person: Person }) {
  const { display_name, name, avatar_urls } = person;
  return avatar_urls && avatar_urls.length !== 0 ? (
    <FallbackImage
      className="max-w-xs rounded-full"
      urls={avatar_urls}
      alt={`${display_name || name}'s avatar`}
    />
  ) : (
    <></>
  );
}

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"
        }`}
      >
        {personFullHandle(person)}
      </h3>
      {/* bio */}
      {bio && (
        <ReactMarkdown className="prose dark:prose-invert prose-slate">
          {bio}
        </ReactMarkdown>
      )}
      {/* links */}
      {links?.length && (
        <div className="flex flex-col mx-auto lg:ml-auto">
          {links.map((link, index) => (
            <a
              key={index}
              href={link}
              rel="nofollow noopener noreferrer me"
              className="hover:underline text-sky-500 dark:text-sky-400"
            >
              {link}
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

function LabelList({ content }: { content: Name[] | Pronoun[] }) {
  return content?.length > 0 ? (
    <div className="border-b border-slate-200 dark:border-slate-700">
      {content.map((label, index) => (
        <LabelLine key={index} label={label} />
      ))}
    </div>
  ) : (
    <></>
  );
}

function LabelStatusIcon({ status }: { status: WordStatus }) {
  return React.createElement(
    {
      [WordStatus.Favourite]: HeartFill,
      [WordStatus.Okay]: HandThumbsUp,
      [WordStatus.Jokingly]: EmojiLaughing,
      [WordStatus.FriendsOnly]: People,
      [WordStatus.Avoid]: HandThumbsDown,
    }[status],
    { className: "inline" }
  );
}

function LabelsLine({ labels }: { labels: Name[] | Pronoun[] }) {
  if (!labels?.length) return <></>;
  const status = labels[0].status;
  const text = labels
    .map((label) =>
      "name" in label
        ? label.name
        : label.display_text ?? label.pronouns.split("/").slice(0, 2).join("/")
    )
    .join(", ");
  return (
    <p
      className={`
      ${status === WordStatus.Favourite ? "text-lg font-bold" : ""}
      ${
        status === WordStatus.Avoid ? "text-slate-600 dark:text-slate-400" : ""
      }`}
    >
      <LabelStatusIcon status={status} /> {text}
    </p>
  );
}

function LabelLine({ label }: { label: Name | Pronoun }) {
  return <LabelsLine labels={[label] as Name[] | Pronoun[]} />;
}

function FieldCardGrid({ fields }: { fields: Field[] }) {
  return (
    <div className="flex flex-col md:flex-row gap-4 py-2 [&>*]:flex-1">
      {fields?.map((field, index) => (
        <FieldCard field={field} key={index} />
      ))}
    </div>
  );
}

const fieldEntryStatus: { [key in string]: WordStatus } = {
  favourite: WordStatus.Favourite,
  okay: WordStatus.Okay,
  jokingly: WordStatus.Jokingly,
  friends_only: WordStatus.FriendsOnly,
  avoid: WordStatus.Avoid,
};

function FieldCard({
  field,
  draggable,
}: {
  field: Field;
  draggable?: boolean;
}) {
  return (
    <Card title={field.name} draggable={draggable}>
      {Object.entries(fieldEntryStatus).map(([statusName, status], i) => (
        <LabelsLine
          key={i}
          labels={(field as any)[statusName]?.map((name: string) => ({
            name,
            status,
          }))}
        />
      ))}
    </Card>
  );
}
feat(frontend): add /u/[user] 2022-08-16 18:04:06 -07:00			`import { GetServerSideProps } from "next";`
			`import Head from "next/head";`
			`import fetchAPI from "../../../lib/fetch";`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`import {`
			`Field,`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`Member,`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`Name,`
			`PartialMember,`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`PartialUser,`
			`Person,`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`Pronoun,`
			`User,`
			`WordStatus,`
			`} from "../../../lib/types";`
feat(frontend): add /u/[user] 2022-08-16 18:04:06 -07:00			`import ReactMarkdown from "react-markdown";`
feat(frontend): log in with Discord 2022-09-15 15:49:04 -07:00			`import { userState } from "../../../lib/state";`
			`import { useRecoilValue } from "recoil";`
feat(frontend): support multiple avatar urls 2022-09-20 05:12:46 -07:00			`import FallbackImage from "../../../components/FallbackImage";`
refactor: extract Button to component, reformat all files with Prettier 2022-11-18 05:11:52 -08:00			`import {`
			`EmojiLaughing,`
			`HandThumbsDown,`
			`HandThumbsUp,`
			`HeartFill,`
			`People,`
			`} from "react-bootstrap-icons";`
fix: change colour on hover for links 2022-11-18 06:26:52 -08:00			`import BlueLink from "../../../components/BlueLink";`
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`import React from "react";`
			`import Card from "../../../components/Card";`
feat(frontend): add /u/[user] 2022-08-16 18:04:06 -07:00
			`interface Props {`
			`user: User;`
feat: u/[user] members list 2022-11-20 13:05:51 -08:00			`partialMembers: PartialMember[];`
feat(frontend): add /u/[user] 2022-08-16 18:04:06 -07:00			`}`

feat: u/[user] members list 2022-11-20 13:05:51 -08:00			`export default function Index({ user, partialMembers }: Props) {`
feat(frontend): add /u/[user] 2022-08-16 18:04:06 -07:00			`return (`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`<PersonPage person={user} />`
feat(frontend): add /u/[user] 2022-08-16 18:04:06 -07:00			`);`
			`}`

refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`export const getServerSideProps: GetServerSideProps = async (context) => {`
refactor: minor api change, type reafactor 2022-11-20 16:58:17 -08:00			`const name = context.params!.user;`
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`try {`
feat: u/[user] members list 2022-11-20 13:05:51 -08:00			`const [userResponse, partialMembersResponse] = await Promise.allSettled([`
refactor: minor api change, type reafactor 2022-11-20 16:58:17 -08:00			fetchAPI<User>(`/users/${name}`),
			fetchAPI<PartialMember[]>(`/users/${name}/members`),
feat: u/[user] members list 2022-11-20 13:05:51 -08:00			`]);`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`if (userResponse.status === "rejected")`
			`throw new Error("Could not fetch user");`
feat: u/[user] members list 2022-11-20 13:05:51 -08:00			`const user = userResponse.value;`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`const partialMembers =`
			`partialMembersResponse.status === "fulfilled"`
			`? partialMembersResponse.value`
			`: [];`
feat: u/[user] members list 2022-11-20 13:05:51 -08:00			`return { props: { user, partialMembers } };`
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`} catch (e) {`
			`console.log(e);`
			`return { notFound: true };`
			`}`
refactor: extract Button to component, reformat all files with Prettier 2022-11-18 05:11:52 -08:00			`};`
fix: fix discord login page 2022-11-17 08:33:59 -08:00
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`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;`
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			`let description = "";`
			`if (`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`names?.filter((name) => name.status === WordStatus.Favourite)`
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			`?.length &&`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite)`
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			`?.length`
			`) {`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			description = `${personShortHandle(person)} goes by ${names
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			`.filter((name) => name.status === WordStatus.Favourite)`
fix(frontend): embed improvements 2022-11-20 14:31:46 -08:00			`.map((name) => name.name)`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`.join(", ")} and uses ${pronouns`
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			`.filter((pronoun) => pronoun.status === WordStatus.Favourite)`
fix(frontend): embed improvements 2022-11-20 14:31:46 -08:00			`.map(`
			`(pronoun) =>`
			`pronoun.display_text ??`
			`pronoun.pronouns.split("/").slice(0, 2).join("/")`
			`)`
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			.join(", ")} pronouns.`;
			`} else if (`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`names?.filter((name) => name.status === WordStatus.Favourite)?.length`
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			`) {`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			description = `${personShortHandle(person)} goes by ${names
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			`.filter((name) => name.status === WordStatus.Favourite)`
fix(frontend): embed improvements 2022-11-20 14:31:46 -08:00			`.map((name) => name.name)`
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			.join(", ")}.`;
			`} else if (`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite)`
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			`?.length`
			`) {`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			description = `${personShortHandle(person)} uses ${pronouns
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			`.filter((pronoun) => pronoun.status === WordStatus.Favourite)`
fix(frontend): embed improvements 2022-11-20 14:31:46 -08:00			`.map(`
			`(pronoun) =>`
			`pronoun.display_text ??`
			`pronoun.pronouns.split("/").slice(0, 2).join("/")`
			`)`
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			.join(", ")} pronouns.`;
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`} else if (bio && bio !== "") {`
			`description = bio.slice(0, 500);`
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			`}`

			`return (`
			`<Head>`
fix(frontend): embed improvements 2022-11-20 14:31:46 -08:00			`<meta key="og:sitename" property="og:site_name" content="pronouns.cc" />`
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			`<meta`
fix(frontend): embed improvements 2022-11-20 14:31:46 -08:00			`key="og:title"`
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			`property="og:title"`
			`content={`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`display_name`
			? `${display_name} (${personFullHandle(person)})`
			`: personFullHandle(person)`
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			`}`
			`/>`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`{avatar_urls && avatar_urls.length > 0 ? (`
fix(frontend): embed improvements 2022-11-20 14:31:46 -08:00			`<meta`
			`key="og:image"`
			`property="og:image"`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`content={avatar_urls[0]}`
fix(frontend): embed improvements 2022-11-20 14:31:46 -08:00			`/>`
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			`) : (`
			`<></>`
			`)}`
			`<meta`
fix(frontend): embed improvements 2022-11-20 14:31:46 -08:00			`key="og:description"`
			`property="og:description"`
			`content={description}`
			`/>`
			`<meta`
			`key="og:url"`
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			`property="og:url"`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`content={personURL(person)}`
feat(frontend): embeds 2022-11-20 14:00:52 -08:00			`/>`
			`</Head>`
			`);`
			`}`

refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`function IsOwnUserPageNotice({ person }: { person: Person }) {`
			`return useRecoilValue(userState)?.id === person.id ? (`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`<div className="lg:w-1/3 mx-auto bg-slate-100 dark:bg-slate-700 shadow rounded-md p-2">`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`You are currently viewing your <b>public</b> user profile.`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`<br />`
			`<BlueLink to="/edit/profile">Edit your profile</BlueLink>`
			`</div>`
			`) : (`
			`<></>`
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`);`
			`}`

feat: u/[user] members list 2022-11-20 13:05:51 -08:00			`function MemberList({`
			`user,`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`className,`
feat: u/[user] members list 2022-11-20 13:05:51 -08:00			`}: {`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`user: User;`
			`className?: string;`
feat: u/[user] members list 2022-11-20 13:05:51 -08:00			`}) {`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`const partialMembers = user.members;`
feat: u/[user] members list 2022-11-20 13:05:51 -08:00			`return (`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			<div className={`mx-auto flex-col items-center ${className \|\| ""}`}>
			`<h1 className="text-2xl">Members</h1>`
feat: u/[user] members list 2022-11-20 13:05:51 -08:00			`<ul>`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`{partialMembers.map((partialMember) => (`
feat: u/[user] members list 2022-11-20 13:05:51 -08:00			`<li className='before:[content:"-_"]' key={partialMember.id}>`
refactor: minor api change, type reafactor 2022-11-20 16:58:17 -08:00			<BlueLink to={`/u/${user.name}/${partialMember.name}`}>
feat: u/[user] members list 2022-11-20 13:05:51 -08:00			`<span>{partialMember.display_name ?? partialMember.name}</span>`
			`</BlueLink>`
			`</li>`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`))}`
feat: u/[user] members list 2022-11-20 13:05:51 -08:00			`</ul>`
			`</div>`
			`);`
			`}`

refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`function PersonAvatar({ person }: { person: Person }) {`
			`const { display_name, name, avatar_urls } = person;`
			`return avatar_urls && avatar_urls.length !== 0 ? (`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`<FallbackImage`
			`className="max-w-xs rounded-full"`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`urls={avatar_urls}`
			alt={`${display_name \|\| name}'s avatar`}
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`/>`
			`) : (`
			`<></>`
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`);`
			`}`
fix: fix discord login page 2022-11-17 08:33:59 -08:00
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`function PersonInfo({ person }: { person: Person }) {`
			`const { display_name, name, bio, links } = person;`
refactor: extract Button to component, reformat all files with Prettier 2022-11-18 05:11:52 -08:00			`return (`
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`<div className="flex flex-col">`
			`{/* display name */}`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`{display_name && <h1 className="text-2xl font-bold">{display_name}</h1>}`
refactor: minor api change, type reafactor 2022-11-20 16:58:17 -08:00			`{/* name */}`
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`<h3`
			className={`${
			`display_name`
			`? "text-xl italic text-slate-600 dark:text-slate-400"`
			`: "text-2xl font-bold"`
			}`}
			`>`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`{personFullHandle(person)}`
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`</h3>`
			`{/* bio */}`
			`{bio && (`
			`<ReactMarkdown className="prose dark:prose-invert prose-slate">`
			`{bio}`
			`</ReactMarkdown>`
			`)}`
			`{/* links */}`
			`{links?.length && (`
			`<div className="flex flex-col mx-auto lg:ml-auto">`
			`{links.map((link, index) => (`
			`<a`
			`key={index}`
			`href={link}`
			`rel="nofollow noopener noreferrer me"`
			`className="hover:underline text-sky-500 dark:text-sky-400"`
			`>`
			`{link}`
			`</a>`
			`))}`
			`</div>`
			`)}`
			`</div>`
			`);`
			`}`

refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`function LabelList({ content }: { content: Name[] \| Pronoun[] }) {`
			`return content?.length > 0 ? (`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`<div className="border-b border-slate-200 dark:border-slate-700">`
refactor: prepare user page code for member page 2022-11-20 18:39:09 -08:00			`{content.map((label, index) => (`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`<LabelLine key={index} label={label} />`
			`))}`
			`</div>`
			`) : (`
			`<></>`
refactor: extract Button to component, reformat all files with Prettier 2022-11-18 05:11:52 -08:00			`);`
fix: fix discord login page 2022-11-17 08:33:59 -08:00			`}`

refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`function LabelStatusIcon({ status }: { status: WordStatus }) {`
			`return React.createElement(`
			`{`
			`[WordStatus.Favourite]: HeartFill,`
			`[WordStatus.Okay]: HandThumbsUp,`
			`[WordStatus.Jokingly]: EmojiLaughing,`
			`[WordStatus.FriendsOnly]: People,`
			`[WordStatus.Avoid]: HandThumbsDown,`
			`}[status],`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`{ className: "inline" }`
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`);`
			`}`
fix: fix discord login page 2022-11-17 08:33:59 -08:00
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`function LabelsLine({ labels }: { labels: Name[] \| Pronoun[] }) {`
fix(frontend): fix LabelsLine, change grid to flex in FieldCardGrid 2022-11-20 13:43:21 -08:00			`if (!labels?.length) return <></>;`
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`const status = labels[0].status;`
			`const text = labels`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`.map((label) =>`
			`"name" in label`
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`? label.name`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`: label.display_text ?? label.pronouns.split("/").slice(0, 2).join("/")`
			`)`
			`.join(", ");`
refactor: extract Button to component, reformat all files with Prettier 2022-11-18 05:11:52 -08:00			`return (`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`<p`
			className={`
			`${status === WordStatus.Favourite ? "text-lg font-bold" : ""}`
			`${`
			`status === WordStatus.Avoid ? "text-slate-600 dark:text-slate-400" : ""`
			}`}
			`>`
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`<LabelStatusIcon status={status} /> {text}`
refactor: extract Button to component, reformat all files with Prettier 2022-11-18 05:11:52 -08:00			`</p>`
			`);`
fix: fix discord login page 2022-11-17 08:33:59 -08:00			`}`

refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`function LabelLine({ label }: { label: Name \| Pronoun }) {`
			`return <LabelsLine labels={[label] as Name[] \| Pronoun[]} />;`
			`}`
feat(frontend): add /u/[user] 2022-08-16 18:04:06 -07:00
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`function FieldCardGrid({ fields }: { fields: Field[] }) {`
			`return (`
fix(frontend): fix LabelsLine, change grid to flex in FieldCardGrid 2022-11-20 13:43:21 -08:00			`<div className="flex flex-col md:flex-row gap-4 py-2 [&>*]:flex-1">`
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`{fields?.map((field, index) => (`
			`<FieldCard field={field} key={index} />`
			`))}`
			`</div>`
			`);`
			`}`
feat(frontend): add /u/[user] 2022-08-16 18:04:06 -07:00
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`const fieldEntryStatus: { [key in string]: WordStatus } = {`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`favourite: WordStatus.Favourite,`
			`okay: WordStatus.Okay,`
			`jokingly: WordStatus.Jokingly,`
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`friends_only: WordStatus.FriendsOnly,`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`avoid: WordStatus.Avoid,`
feat(frontend): add /u/[user] 2022-08-16 18:04:06 -07:00			`};`
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00
			`function FieldCard({`
			`field,`
			`draggable,`
			`}: {`
			`field: Field;`
			`draggable?: boolean;`
			`}) {`
			`return (`
			`<Card title={field.name} draggable={draggable}>`
style: lint pages/u/[user]/index.tsx 2022-11-20 13:35:10 -08:00			`{Object.entries(fieldEntryStatus).map(([statusName, status], i) => (`
			`<LabelsLine`
			`key={i}`
			`labels={(field as any)[statusName]?.map((name: string) => ({`
			`name,`
			`status,`
			`}))}`
			`/>`
			`))}`
refactor: user page code adjustments 2022-11-20 07:04:53 -08:00			`</Card>`
			`);`
			`}`