From 36b7d267233b59f585eb37ec6b1fd9594867bb78 Mon Sep 17 00:00:00 2001
From: Sam <sam@nilptr.dev>
Date: Wed, 17 Aug 2022 03:04:06 +0200
Subject: [PATCH] feat(frontend): add /u/[user]

---
 frontend/components/BlueLink.tsx   | 14 +++++
 frontend/components/Card.tsx       | 28 +++++++++
 frontend/components/FieldCard.tsx  | 64 +++++++++++++++++++++
 frontend/components/Navigation.tsx |  6 +-
 frontend/lib/fetch.ts              |  8 ++-
 frontend/next.config.js            | 12 +++-
 frontend/pages/_app.tsx            |  4 ++
 frontend/pages/api/hello.ts        | 13 -----
 frontend/pages/u/[user]/index.tsx  | 92 ++++++++++++++++++++++++++++++
 9 files changed, 222 insertions(+), 19 deletions(-)
 create mode 100644 frontend/components/BlueLink.tsx
 create mode 100644 frontend/components/Card.tsx
 create mode 100644 frontend/components/FieldCard.tsx
 delete mode 100755 frontend/pages/api/hello.ts
 create mode 100644 frontend/pages/u/[user]/index.tsx

diff --git a/frontend/components/BlueLink.tsx b/frontend/components/BlueLink.tsx
new file mode 100644
index 0000000..706ebe4
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/frontend/components/Card.tsx b/frontend/components/Card.tsx
new file mode 100644
index 0000000..92189ff
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/frontend/components/FieldCard.tsx b/frontend/components/FieldCard.tsx
new file mode 100644
index 0000000..29711ea
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/frontend/components/Navigation.tsx b/frontend/components/Navigation.tsx
index 5463b8a..9f29cfc 100644
--- a/frontend/components/Navigation.tsx
+++ b/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">
diff --git a/frontend/lib/fetch.ts b/frontend/lib/fetch.ts
index 93c4da3..e9a823e 100644
--- a/frontend/lib/fetch.ts
+++ b/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,
diff --git a/frontend/next.config.js b/frontend/next.config.js
index ae88795..3ea1f7d 100755
--- a/frontend/next.config.js
+++ b/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;
diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
index 35ea1c7..471768f 100755
--- a/frontend/pages/_app.tsx
+++ b/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} />
diff --git a/frontend/pages/api/hello.ts b/frontend/pages/api/hello.ts
deleted file mode 100755
index f8bcc7e..0000000
--- a/frontend/pages/api/hello.ts
+++ /dev/null
@@ -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' })
-}
diff --git a/frontend/pages/u/[user]/index.tsx b/frontend/pages/u/[user]/index.tsx
new file mode 100644
index 0000000..47290bf
--- /dev/null
+++ b/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 };
+  }
+};