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>
     </>
   );
 }