feat(frontend): add /u/[user]

frontend/components/BlueLink.tsx

@@ -0,0 +1,14 @@
+import Link from "next/link";
+
+export type Props = {
+  to: string;
+  children?: React.ReactNode;
+};
+
+export default function BlueLink({ to, children }: Props) {
+  return (
+    <Link href={to} className="hover:underline text-sky-500 dark:text-sky-400">
+      {children}
+    </Link>
+  );
+}

frontend/components/Card.tsx

@@ -0,0 +1,28 @@
+import React, { ReactNode } from "react";
+
+export type Props = {
+  children?: ReactNode | undefined;
+  title: string;
+  draggable?: boolean;
+  footer?: ReactNode | undefined;
+};
+
+export default function Card({ title, draggable, children, footer }: Props) {
+  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${
+          draggable && " handle hover:cursor-grab"
+        }`}
+      >
+        {title}
+      </h1>
+      <div className="flex flex-col p-2">{children}</div>
+      {footer && (
+        <div className="p-2 border-t border-zinc-200 dark:border-slate-800">
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/components/FieldCard.tsx

@@ -0,0 +1,64 @@
+import {
+  HeartFill,
+  HandThumbsUp,
+  HandThumbsDown,
+  People,
+  EmojiLaughing,
+} from "react-bootstrap-icons";
+import BlueLink from "./BlueLink";
+
+import Card from "./Card";
+import type { Field } from "../lib/types";
+
+function linkPronoun(input: string) {
+  if (input.includes(" ") || input.split("/").length !== 5)
+    return <span>{input}</span>;
+
+  const [sub, obj, possDet, possPro, reflexive] = input.split("/");
+
+  return (
+    <BlueLink to={`/pronouns/${sub}/${obj}/${possDet}/${possPro}/${reflexive}`}>
+      <span>
+        {sub}/{obj}/{possDet}
+      </span>
+    </BlueLink>
+  );
+}
+
+export default function FieldCard({
+  field,
+  draggable,
+}: {
+  field: Field;
+  draggable?: boolean;
+}) {
+  return (
+    <Card title={field.name} draggable={draggable}>
+      {field.favourite?.map((entry) => (
+        <p className="text-lg font-bold" key={entry}>
+          <HeartFill className="inline" /> {linkPronoun(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>
+      )}
+    </Card>
+  );
+}

frontend/components/Navigation.tsx

@@ -72,8 +72,10 @@ export default function Navigation() {
         <div className="max-w-8xl mx-auto">
           <div className="py-4 mx-4">
             <div className="flex items-center">
-              <Link href="/">
-                <Logo />
+              <Link href="/" passHref>
+                <a>
+                  <Logo />
+                </a>
               </Link>
               <div className="ml-auto flex items-center">
                 <nav className="hidden lg:flex">

frontend/lib/fetch.ts

@@ -1,19 +1,23 @@
 import type { APIError } from "./types";
 
+const apiBase = process.env.API_BASE ?? "http://localhost:8080";
+
 export default async function fetchAPI<T>(
   path: string,
   method = "GET",
   body: any = null
 ) {
   let headers = {};
-  const token = localStorage.getItem("pronouns-token");
+  const token =
+    typeof localStorage !== "undefined" &&
+    localStorage.getItem("pronouns-token");
   if (token) {
     headers = {
       Authorization: token,
     };
   }
 
-  const resp = await fetch(`/api/v1${path}`, {
+  const resp = await fetch(`${apiBase}/v1${path}`, {
     method,
     headers: {
       ...headers,

frontend/next.config.js

@@ -2,6 +2,14 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-}
+  async rewrites() {
+    return [
+      {
+        source: "/api/:path*",
+        destination: "http://localhost:8080/:path*", // Proxy to Backend
+      },
+    ];
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

frontend/pages/_app.tsx

@@ -3,10 +3,14 @@ import type { AppProps } from "next/app";
 import Container from "../components/Container";
 import Navigation from "../components/Navigation";
 import { RecoilRoot } from "recoil";
+import Head from "next/head";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <RecoilRoot>
+      <Head>
+        <title key="title">pronouns.cc</title>
+      </Head>
       <Navigation />
       <Container>
         <Component {...pageProps} />

frontend/pages/api/hello.ts

@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
-}

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

@@ -0,0 +1,92 @@
+import { GetServerSideProps } from "next";
+import Head from "next/head";
+import fetchAPI from "../../../lib/fetch";
+import { User } from "../../../lib/types";
+import FieldCard from "../../../components/FieldCard";
+import Card from "../../../components/Card";
+import ReactMarkdown from "react-markdown";
+
+interface Props {
+  user: User;
+}
+
+export default function Index({ user }: Props) {
+  return (
+    <>
+      <Head>
+        <title key="title">@{user.username} - pronouns.cc</title>
+      </Head>
+      <div className="container mx-auto">
+        <div className="flex flex-col m-2 p-2 lg:flex-row justify-center lg:justify-start items-center space-y-4 lg:space-y-0 lg:space-x-16 lg:items-start border-b border-slate-200 dark:border-slate-700">
+          {user.avatar_url && (
+            <img className="max-w-xs rounded-full" src={user.avatar_url} />
+          )}
+          <div className="flex flex-col">
+            {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 && user.fields?.length && (
+              <div className="flex flex-col mx-auto lg:ml-auto">
+                {user.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>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 py-2">
+          {user.fields?.map((field, index) => (
+            <FieldCard key={index} field={field}></FieldCard>
+          ))}
+          {user.links?.length && (
+            <Card title="Links">
+              {user.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>
+              ))}
+            </Card>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  try {
+    const user = await fetchAPI<User>(`/users/${context.params!.user}`);
+
+    return { props: { user } };
+  } catch (e) {
+    console.log(e);
+
+    return { notFound: true };
+  }
+};