feat: add working user page

frontend/src/lib/FieldCard.tsx

@@ -0,0 +1,44 @@
+import {
+  HeartFill,
+  HandThumbsUp,
+  HandThumbsDown,
+  People,
+  EmojiLaughing,
+} from "react-bootstrap-icons";
+
+import type { Field } from "./types";
+
+export default function FieldCard({ field }: { field: Field }) {
+  return (
+    <div className=" bg-slate-100 dark:bg-slate-700 rounded-md shadow">
+      <h1 className="text-2xl p-2 border-b border-zinc-200 dark:border-slate-800">{field.name}</h1>
+      <div className="flex flex-col p-2">
+        {field.favourite.map((entry) => (
+          <p className="text-lg font-bold">
+            <HeartFill className="inline" /> {entry}
+          </p>
+        ))}
+        {field.okay.length !== 0 && (
+          <p>
+            <HandThumbsUp className="inline" /> {field.okay.join(", ")}
+          </p>
+        )}
+        {field.jokingly.length !== 0 && (
+          <p>
+            <EmojiLaughing className="inline" /> {field.jokingly.join(", ")}
+          </p>
+        )}
+        {field.friends_only.length !== 0 && (
+          <p>
+            <People className="inline" /> {field.friends_only.join(", ")}
+          </p>
+        )}
+        {field.avoid.length !== 0 && (
+          <p className="text-slate-600 dark:text-slate-400">
+            <HandThumbsDown className="inline" /> {field.avoid.join(", ")}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/lib/fetch.ts

@@ -0,0 +1,14 @@
+import axios from "axios";
+import type { APIError } from "./types";
+
+export default async function fetchAPI<T>(path: string) {
+  const resp = await axios.get<T | APIError>(`/api/v1${path}`, {
+    headers: {
+      Authorization: localStorage.getItem("pronouns-token"),
+      "Content-Type": "application/json",
+    },
+  });
+  if (resp.status !== 200) throw resp.data as APIError;
+
+  return resp.data as T;
+}

frontend/src/lib/types.ts

@@ -1,11 +1,5 @@
 export interface MeUser {
-  id: string;
-  username: string;
-  display_name: string | null;
-  bio: string | null;
   avatar_source: string | null;
-  avatar_url: string | null;
-  links: string[] | null;
   discord: string | null;
   discord_username: string | null;
 }
@@ -15,9 +9,10 @@ export interface User {
   username: string;
   display_name: string | null;
   bio: string | null;
-  avatar_source: string | null;
+  avatar_url: string | null;
   links: string[] | null;
   members: PartialMember[];
+  fields: Field[];
 }
 
 export interface PartialMember {
@@ -26,6 +21,15 @@ export interface PartialMember {
   avatar_url: string | null;
 }
 
+export interface Field {
+  name: string;
+  favourite: string[] | null;
+  okay: string[] | null;
+  jokingly: string[] | null;
+  friends_only: string[] | null;
+  avoid: string[] | null;
+}
+
 export interface APIError {
   code: ErrorCode;
   message?: string;

frontend/src/pages/User.tsx

@@ -1,21 +1,12 @@
 import React, { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { ArrowClockwise } from "react-bootstrap-icons";
-import { selectorFamily, useRecoilValue } from "recoil";
-import axios from "axios";
+import ReactMarkdown from "react-markdown";
+import { Helmet } from "react-helmet";
+
 import type { APIError, User } from "../lib/types";
-
-const userPageState = selectorFamily({
-  key: "userPageState",
-  get: (username: string) => async () => {
-    const res = await axios.get(`/api/v1/users/${username}`);
-    if (res.status !== 200) {
-      throw res.data as APIError;
-    }
-
-    return res.data as User;
-  },
-});
+import fetchAPI from "../lib/fetch";
+import FieldCard from "../lib/FieldCard";
 
 function UserPage() {
   const params = useParams();
@@ -23,10 +14,8 @@ function UserPage() {
   const [user, setUser] = useState<User>(null);
 
   useEffect(() => {
-    axios.get(`/api/v1/users/${params.username}`).then((res) => {
-      if (res.status !== 200) throw res.data as APIError;
-
-      setUser(res.data as User);
+    fetchAPI<User>(`/users/${params.username}`).then((res) => {
+      setUser(res);
     });
   }, []);
 
@@ -41,9 +30,56 @@ function UserPage() {
 
   return (
     <>
-      <h1 className="text-xl font-bold">
-        {user.username} ({user.id})
-      </h1>
+      <Helmet>
+        <title>@{user.username} - pronouns.cc</title>
+      </Helmet>
+      <div className="container mx-auto">
+        <div className="flex flex-col lg:flex-row justify-center lg:justify-start items-center space-y-4 lg:space-y-0 lg:space-x-16 lg:items-start">
+          {user.avatar_url && (
+            <img
+              className="max-w-max lg:max-w-lg rounded-full"
+              src={user.avatar_url}
+            />
+          )}
+          <div className="flex flex-col lg:mx-auto">
+            {user.display_name && (
+              <h1 className="text-2xl font-bold">{user.display_name}</h1>
+            )}
+            <h3
+              className={`${
+                user.display_name
+                  ? "text-xl italic text-slate-600 dark:text-slate-400"
+                  : "text-2xl font-bold"
+              }`}
+            >
+              @{user.username}
+            </h3>
+            {user.bio && (
+              <ReactMarkdown className="prose dark:prose-invert prose-slate">
+                {user.bio}
+              </ReactMarkdown>
+            )}
+            {user.links.length !== 0 && (
+              <div className="flex flex-col mx-auto lg:ml-auto">
+                {user.links.map((link) => (
+                  <a
+                    href={link}
+                    rel="nofollow noopener noreferrer me"
+                    className="hover:underline text-sky-500 dark:text-sky-400"
+                  >
+                    {link}
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 py-2">
+          {user.fields.map((field) => (
+            <FieldCard field={field}></FieldCard>
+          ))}
+        </div>
+      </div>
     </>
   );
 }

package.json

@@ -10,10 +10,12 @@
   "dependencies": {
     "@sentry/react": "^6.19.7",
     "@sentry/tracing": "^6.19.7",
+    "@types/react-helmet": "^6.1.5",
     "axios": "^0.27.2",
     "react": "^18.0.0",
     "react-bootstrap-icons": "^1.8.2",
     "react-dom": "^18.0.0",
+    "react-helmet": "^6.1.0",
     "react-markdown": "^8.0.3",
     "react-router-dom": "6",
     "recoil": "^0.7.2"

yarn.lock

@@ -430,6 +430,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-helmet@^6.1.5":
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.5.tgz#35f89a6b1646ee2bc342a33a9a6c8777933f9083"
+  integrity sha512-/ICuy7OHZxR0YCAZLNg9r7I9aijWUWvxaPR6uTuyxe8tAj5RL4Sw1+R6NhXUtOsarkGYPmaHdBDvuXh2DIN/uA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^18.0.0":
   version "18.0.8"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.8.tgz#a051eb380a9fbcaa404550543c58e1cf5ce4ab87"
@@ -1472,6 +1479,21 @@ react-dom@^18.0.0:
     loose-envify "^1.1.0"
     scheduler "^0.22.0"
 
+react-fast-compare@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -1523,6 +1545,11 @@ react-router@6.3.0:
   dependencies:
     history "^5.2.0"
 
+react-side-effect@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
+  integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
+
 react@^18.0.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"