feat(frontend): incomplete port to next.js

Makefile

@@ -1,23 +1,7 @@
-.PHONY: all
-all: frontend css backend
-	mv api pronouns
-
 .PHONY: migrate
 migrate:
 	go run -v ./scripts/migrate
 
 .PHONY: backend
-backend: css
-	CGO_ENABLED=0 go build -v -o api -ldflags="-buildid= -X codeberg.org/u1f320/pronouns.cc/backend/server.Revision=`git rev-parse --short HEAD`" ./backend
-
-.PHONY: frontend
-frontend:
-	yarn build
-
-.PHONY: css
-css:
-	yarn tailwindcss -m -o frontend/style.css
-
-.PHONY: dev
-dev:
-	yarn dev
+backend:
+	CGO_ENABLED=0 go build -v -o pronouns -ldflags="-buildid= -X codeberg.org/u1f320/pronouns.cc/backend/server.Revision=`git rev-parse --short HEAD`" ./backend

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

frontend/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

frontend/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

frontend/components/NavItem.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import Link from "next/link";
+
+export interface Props {
+  children?: ReactNode | undefined;
+  href: string;
+  plain?: boolean | undefined; // Do not wrap in <li></li>
+}
+
+export default function NavItem(props: Props) {
+  const ret = (
+    <Link
+      className="hover:text-sky-500 dark:hover:text-sky-400"
+      href={props.href}
+    >
+      {props.children}
+    </Link>
+  );
+
+  if (props.plain) {
+    return ret;
+  }
+  return <li>{ret}</li>;
+}

frontend/components/Navigation.tsx

@@ -1,15 +1,15 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
 import { MoonStars, Sun, List } from "react-bootstrap-icons";
 
+import Link from "next/link";
 import NavItem from "./NavItem";
 import Logo from "./logo";
 import { useRecoilState } from "recoil";
-import { userState } from "./store";
-import fetchAPI from "./fetch";
-import { APIError, ErrorCode, MeUser } from "./types";
+import { userState } from "../lib/state";
+import fetchAPI from "../lib/fetch";
+import { APIError, ErrorCode, MeUser } from "../lib/types";
 
-function Navigation() {
+export default function Navigation() {
   const [user, setUser] = useRecoilState(userState);
 
   useEffect(() => {
@@ -27,21 +27,24 @@ function Navigation() {
         }
       }
     );
-  }, []);
+  }, [user, setUser]);
 
-  const [darkTheme, setDarkTheme] = useState<boolean>(
+  const [darkTheme, setDarkTheme] = useState<boolean>(false);
+  const [showMenu, setShowMenu] = useState(false);
+
+  useEffect(() => {
+    setDarkTheme(
       localStorage.theme === "dark" ||
         (!("theme" in localStorage) &&
           window.matchMedia("(prefers-color-scheme: dark)").matches)
     );
 
-  const [showMenu, setShowMenu] = useState(false);
-
     if (darkTheme) {
       document.documentElement.classList.add("dark");
     } else {
       document.documentElement.classList.remove("dark");
     }
+  }, [darkTheme]);
 
   const storeTheme = (useDarkTheme: boolean | null) => {
     if (useDarkTheme === null) {
@@ -53,13 +56,13 @@ function Navigation() {
 
   const nav = user ? (
     <>
-      <NavItem to={`/u/${user.username}`}>@{user.username}</NavItem>
-      <NavItem to="/settings">Settings</NavItem>
-      <NavItem to="/logout">Log out</NavItem>
+      <NavItem href={`/u/${user.username}`}>@{user.username}</NavItem>
+      <NavItem href="/settings">Settings</NavItem>
+      <NavItem href="/logout">Log out</NavItem>
     </>
   ) : (
     <>
-      <NavItem to="/login">Log in</NavItem>
+      <NavItem href="/login">Log in</NavItem>
     </>
   );
 
@@ -69,7 +72,7 @@ function Navigation() {
         <div className="max-w-8xl mx-auto">
           <div className="py-4 mx-4">
             <div className="flex items-center">
-              <Link to="/">
+              <Link href="/">
                 <Logo />
               </Link>
               <div className="ml-auto flex items-center">
@@ -119,5 +122,3 @@ function Navigation() {
     </>
   );
 }
-
-export default Navigation;

frontend/components/logo.tsx

@@ -17,7 +17,7 @@ function Logo() {
       <g transform="translate(-49.754 -142.45)">
         <g
           transform="matrix(.33073 0 0 -.33073 50.093 154.62)"
-          clip-path="url(#clipPath16)"
+          clipPath="url(#clipPath16)"
         >
           <path
             d="m35.347 20.107-8.899 3.294-3.323 10.891c-0.128 0.42-0.516 0.708-0.956 0.708-0.439 0-0.828-0.288-0.956-0.708l-3.322-10.891-8.9-3.294c-0.393-0.146-0.653-0.52-0.653-0.938s0.26-0.793 0.653-0.937l8.896-3.293 3.323-11.223c0.126-0.425 0.516-0.716 0.959-0.716s0.833 0.291 0.959 0.716l3.324 11.223 8.896 3.293c0.392 0.144 0.652 0.519 0.652 0.937s-0.26 0.792-0.653 0.938"

frontend/data.go

@@ -1,9 +0,0 @@
-package frontend
-
-import "embed"
-
-//go:embed dist/*
-var Data embed.FS
-
-//go:embed style.css
-var CSS []byte

frontend/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>pronouns.cc</title>
-  </head>
-  <body class="bg-white dark:bg-slate-800 text-black dark:text-white">
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

frontend/lib/fetch.ts

@@ -1,4 +1,3 @@
-import axios from "axios";
 import type { APIError } from "./types";
 
 export default async function fetchAPI<T>(

frontend/lib/state.ts

@@ -0,0 +1,7 @@
+import { atom } from "recoil";
+import { MeUser } from "./types";
+
+export const userState = atom<MeUser | null>({
+  key: "userState",
+  default: null,
+});

frontend/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

frontend/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+}
+
+module.exports = nextConfig

frontend/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "pronouns",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "12.2.2",
+    "react": "18.2.0",
+    "react-bootstrap-icons": "^1.8.4",
+    "react-dom": "18.2.0",
+    "react-markdown": "^8.0.3",
+    "react-sortablejs": "^6.1.4",
+    "recoil": "^0.7.5",
+    "sortablejs": "^1.15.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.2",
+    "@tailwindcss/typography": "^0.5.3",
+    "@types/node": "18.0.3",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
+    "@types/sortablejs": "^1.13.0",
+    "autoprefixer": "^10.4.7",
+    "eslint": "8.19.0",
+    "eslint-config-next": "12.2.2",
+    "postcss": "^8.4.14",
+    "tailwindcss": "^3.1.6",
+    "typescript": "4.7.4"
+  }
+}

frontend/pages/_app.tsx

@@ -0,0 +1,18 @@
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import Container from "../components/Container";
+import Navigation from "../components/Navigation";
+import { RecoilRoot } from "recoil";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <RecoilRoot>
+      <Navigation />
+      <Container>
+        <Component {...pageProps} />
+      </Container>
+    </RecoilRoot>
+  );
+}
+
+export default MyApp;

frontend/pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body className="bg-white dark:bg-slate-800 text-black dark:text-white">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

frontend/pages/api/hello.ts

@@ -0,0 +1,13 @@
+// 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/postcss.config.js

@@ -0,0 +1,8 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

frontend/public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

frontend/src/App.css

@@ -1,42 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-button {
-  font-size: calc(10px + 2vmin);
-}

frontend/src/App.tsx

@@ -1,30 +0,0 @@
-import { Routes, Route } from "react-router-dom";
-import "./App.css";
-import Container from "./lib/Container";
-import Navigation from "./lib/Navigation";
-import EditMe from "./pages/EditMe";
-import Home from "./pages/Home";
-import Discord from "./pages/login/Discord";
-import Login from "./pages/login/Login";
-import User from "./pages/User";
-
-function App() {
-  return (
-    <>
-      <Navigation />
-      <Container>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/u/:username" element={<User />} />
-          <Route path="/u/:username/:member" element={<User />} />
-          <Route path="/edit" element={<EditMe />} />
-          <Route path="/edit/:member" element={<EditMe />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/login/discord" element={<Discord />} />
-        </Routes>
-      </Container>
-    </>
-  );
-}
-
-export default App;

frontend/src/favicon.svg

@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.5 47.5" style="enable-background:new 0 0 47.5 47.5;" xml:space="preserve" version="1.1" id="svg2"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath16" clipPathUnits="userSpaceOnUse"><path id="path18" d="M 0,38 38,38 38,0 0,0 0,38 Z"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,47.5)" id="g10"><g id="g12"><g clip-path="url(#clipPath16)" id="g14"><g transform="translate(35.3467,20.1069)" id="g20"><path id="path22" style="fill:#aa8ed6;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 -8.899,3.294 -3.323,10.891 c -0.128,0.42 -0.516,0.708 -0.956,0.708 -0.439,0 -0.828,-0.288 -0.956,-0.708 L -17.456,3.294 -26.356,0 c -0.393,-0.146 -0.653,-0.52 -0.653,-0.938 0,-0.418 0.26,-0.793 0.653,-0.937 l 8.896,-3.293 3.323,-11.223 c 0.126,-0.425 0.516,-0.716 0.959,-0.716 0.443,0 0.833,0.291 0.959,0.716 l 3.324,11.223 8.896,3.293 c 0.392,0.144 0.652,0.519 0.652,0.937 C 0.653,-0.52 0.393,-0.146 0,0"/></g><g transform="translate(15.3472,9.1064)" id="g24"><path id="path26" style="fill:#fcab40;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 -2.313,0.856 -0.9,3.3 c -0.119,0.436 -0.514,0.738 -0.965,0.738 -0.451,0 -0.846,-0.302 -0.965,-0.738 l -0.9,-3.3 L -8.356,0 c -0.393,-0.145 -0.653,-0.52 -0.653,-0.937 0,-0.418 0.26,-0.793 0.653,-0.938 l 2.301,-0.853 0.907,-3.622 c 0.111,-0.444 0.511,-0.756 0.97,-0.756 0.458,0 0.858,0.312 0.97,0.756 L -2.301,-2.728 0,-1.875 c 0.393,0.145 0.653,0.52 0.653,0.938 C 0.653,-0.52 0.393,-0.145 0,0"/></g><g transform="translate(11.0093,30.769)" id="g28"><path id="path30" style="fill:#5dadec;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 -2.365,0.875 -3.24,3.24 c -0.146,0.393 -0.52,0.653 -0.938,0.653 -0.419,0 -0.793,-0.26 -0.938,-0.653 L -5.992,0.875 -8.356,0 c -0.393,-0.146 -0.653,-0.52 -0.653,-0.938 0,-0.418 0.26,-0.792 0.653,-0.938 l 2.364,-0.875 0.876,-2.365 c 0.145,-0.393 0.519,-0.653 0.938,-0.653 0.418,0 0.792,0.26 0.938,0.653 L -2.365,-2.751 0,-1.876 c 0.393,0.146 0.653,0.52 0.653,0.938 C 0.653,-0.52 0.393,-0.146 0,0"/></g></g></g></g></svg>

frontend/src/lib/BlueLink.tsx

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

frontend/src/lib/Card.tsx

@@ -1,28 +0,0 @@
-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/src/lib/FieldCard.tsx

@@ -1,62 +0,0 @@
-import {
-  HeartFill,
-  HandThumbsUp,
-  HandThumbsDown,
-  People,
-  EmojiLaughing,
-} from "react-bootstrap-icons";
-import BlueLink from "./BlueLink";
-
-import Card from "./Card";
-import type { Field } from "./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}`}>
-      {sub}/{obj}/{possDet}
-    </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">
-          <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/src/lib/Loading.tsx

@@ -1,10 +0,0 @@
-import { ThreeDots } from "react-bootstrap-icons";
-
-export default function Loading() {
-  return (
-    <div className="flex flex-col pt-32 items-center">
-      <ThreeDots size={64} className="animate-bounce" aria-hidden="true" />
-      <span className="font-bold text-xl">Loading...</span>
-    </div>
-  );
-}

frontend/src/lib/NavItem.tsx

@@ -1,22 +0,0 @@
-import { ReactNode, PropsWithChildren } from "react";
-import { Link } from "react-router-dom";
-
-export interface Props {
-    children?: ReactNode | undefined;
-    to: string;
-    plain?: boolean | undefined; // Do not wrap in <li></li>
-}
-
-export default function NavItem(props: Props) {
-    const ret = <Link
-        className="hover:text-sky-500 dark:hover:text-sky-400"
-        to={props.to}
-    >
-        {props.children}
-    </Link>
-
-    if (props.plain) {
-        return ret
-    }
-    return <li>{ret}</li>;
-}

frontend/src/lib/TextInput.tsx

@@ -1,19 +0,0 @@
-import { ChangeEventHandler } from "react";
-
-export type Props = {
-  defaultValue?: string;
-  value?: string;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-};
-
-export default function TextInput(props: Props) {
-  return (
-    <input
-      type="text"
-      className="p-1 lg:p-2 rounded-md bg-white border-slate-300 text-black dark:bg-slate-800 dark:border-slate-900 dark:text-white"
-      defaultValue={props.defaultValue}
-      value={props.value}
-      onChange={props.onChange}
-    />
-  );
-}

frontend/src/lib/store.ts

@@ -1,34 +0,0 @@
-import axios from "axios";
-import { atom, useRecoilState, useRecoilValue } from "recoil";
-import fetchAPI from "./fetch";
-import { APIError, ErrorCode, MeUser } from "./types";
-
-export const userState = atom<MeUser>({
-  key: "userState",
-  default: getCurrentUser(),
-});
-
-async function getCurrentUser() {
-  const token = localStorage.getItem("pronouns-token");
-  if (!token) return null;
-
-  try {
-    return await fetchAPI<MeUser>("/users/@me");
-  } catch (e) {
-    if (
-      (e as APIError).code === ErrorCode.Forbidden ||
-      (e as APIError).code === ErrorCode.InvalidToken
-    ) {
-      localStorage.removeItem("pronouns-token");
-    }
-
-    console.log("Error fetching /users/@me:", e);
-  }
-
-  return null;
-}
-
-export function isMeUser(id: string): boolean {
-  const meUser = useRecoilValue(userState);
-  return meUser && meUser.id === id;
-}

frontend/src/main.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
-import { RecoilRoot } from "recoil";
-import * as Sentry from "@sentry/react";
-import { BrowserTracing } from "@sentry/tracing";
-
-import App from "./App";
-import "./index.css";
-
-if (import.meta.env.VITE_SENTRY_DSN) {
-  Sentry.init({
-    dsn: import.meta.env.VITE_SENTRY_DSN,
-    integrations: [new BrowserTracing()],
-
-    tracesSampleRate: 1.0,
-  });
-}
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <RecoilRoot>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </RecoilRoot>
-);

frontend/src/pages/EditMe.tsx

@@ -1,295 +0,0 @@
-import cloneDeep from "lodash/cloneDeep";
-
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { ReactSortable } from "react-sortablejs";
-import { useRecoilValue } from "recoil";
-import {
-  EmojiLaughing,
-  HandThumbsDown,
-  HandThumbsUp,
-  Heart,
-  People,
-  Trash3,
-} from "react-bootstrap-icons";
-
-import { userState } from "../lib/store";
-import Loading from "../lib/Loading";
-import Card from "../lib/Card";
-import TextInput from "../lib/TextInput";
-import fetchAPI from "../lib/fetch";
-import { MeUser, Field } from "../lib/types";
-
-interface EditField {
-  id: number;
-  name: string;
-  pronouns: Record<string, PronounChoice>;
-}
-
-enum PronounChoice {
-  favourite,
-  okay,
-  jokingly,
-  friendsOnly,
-  avoid,
-}
-
-function fieldsEqual(arr1: EditField[], arr2: EditField[]) {
-  if (arr1?.length !== arr2?.length) return false;
-
-  if (!arr1.every((_, i) => arr1[i].id === arr2[i].id)) return false;
-
-  return arr1.every((_, i) =>
-    Object.keys(arr1[i].pronouns).every(
-      (val) => arr1[i].pronouns[val] === arr2[i].pronouns[val]
-    )
-  );
-}
-
-async function updateUser(args: {
-  displayName: string;
-  bio: string;
-  fields: EditField[];
-}) {
-  const newFields = args.fields.map((editField) => {
-    const field: Field = {
-      name: editField.name,
-      favourite: [],
-      okay: [],
-      jokingly: [],
-      friends_only: [],
-      avoid: [],
-    };
-
-    Object.keys(editField).forEach((pronoun) => {
-      switch (editField.pronouns[pronoun]) {
-        case PronounChoice.favourite:
-          field.favourite?.push(pronoun);
-          break;
-        case PronounChoice.okay:
-          field.okay?.push(pronoun);
-          break;
-        case PronounChoice.jokingly:
-          field.jokingly?.push(pronoun);
-          break;
-        case PronounChoice.friendsOnly:
-          field.friends_only?.push(pronoun);
-          break;
-        case PronounChoice.avoid:
-          field.avoid?.push(pronoun);
-          break;
-      }
-    });
-
-    return field;
-  });
-
-  return await fetchAPI<MeUser>("/users/@me", "PATCH", {
-    display_name: args.displayName,
-    bio: args.bio,
-    fields: newFields,
-  });
-}
-
-export default function EditMe() {
-  const navigate = useNavigate();
-
-  const meUser = useRecoilValue(userState);
-
-  useEffect(() => {
-    if (!meUser) {
-      navigate("/");
-    }
-  });
-  if (!meUser) {
-    return <Loading />;
-  }
-
-  const [state, setState] = useState(cloneDeep(meUser));
-  // convert all fields to EditFields
-  const originalOrder = state.fields.map((f, i) => {
-    const field: EditField = {
-      id: i,
-      name: f.name,
-      pronouns: {},
-    };
-
-    f.favourite?.forEach((val) => {
-      field.pronouns[val] = PronounChoice.favourite;
-    });
-    f.okay?.forEach((val) => {
-      field.pronouns[val] = PronounChoice.okay;
-    });
-    f.jokingly?.forEach((val) => {
-      field.pronouns[val] = PronounChoice.jokingly;
-    });
-    f.friends_only?.forEach((val) => {
-      field.pronouns[val] = PronounChoice.friendsOnly;
-    });
-    f.avoid?.forEach((val) => {
-      field.pronouns[val] = PronounChoice.avoid;
-    });
-
-    return field;
-  });
-
-  const [fields, setFields] = useState(cloneDeep(originalOrder));
-  const fieldsUpdated = !fieldsEqual(fields, originalOrder);
-
-  return (
-    <div className="container mx-auto">
-      <div>{`fieldsUpdated: ${fieldsUpdated}`}</div>
-      {/* @ts-ignore: This component isn't updated to have a "children" prop yet, but it accepts it just fine. */}
-      <ReactSortable
-        handle=".handle"
-        list={fields}
-        setList={setFields}
-        className="grid grid-cols-1 xl:grid-cols-2 gap-4 py-2"
-      >
-        {fields.map((field, i) => (
-          <EditableCard
-            key={i}
-            field={field}
-            onChangeName={(e) => {
-              field.name = e.target.value;
-              setFields([...fields]);
-            }}
-            onChangeFavourite={(e, entry: string) => {
-              field.pronouns[entry] = PronounChoice.favourite;
-              setFields([...fields]);
-            }}
-            onChangeOkay={(e, entry: string) => {
-              field.pronouns[entry] = PronounChoice.okay;
-              setFields([...fields]);
-            }}
-            onChangeJokingly={(e, entry: string) => {
-              field.pronouns[entry] = PronounChoice.jokingly;
-              setFields([...fields]);
-            }}
-            onChangeFriends={(e, entry: string) => {
-              field.pronouns[entry] = PronounChoice.friendsOnly;
-              setFields([...fields]);
-            }}
-            onChangeAvoid={(e, entry: string) => {
-              field.pronouns[entry] = PronounChoice.avoid;
-              setFields([...fields]);
-            }}
-            onClickDelete={(_) => {
-              const newFields = [...fields];
-              newFields.splice(i, 1);
-              setFields(newFields);
-            }}
-          />
-        ))}
-      </ReactSortable>
-    </div>
-  );
-}
-
-type EditableCardProps = {
-  field: EditField;
-  onChangeName: React.ChangeEventHandler<HTMLInputElement>;
-  onChangeFavourite(
-    e: React.MouseEvent<HTMLButtonElement>,
-    entry: string
-  ): void;
-  onChangeOkay(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
-  onChangeJokingly(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
-  onChangeFriends(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
-  onChangeAvoid(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
-  onClickDelete: React.MouseEventHandler<HTMLButtonElement>;
-};
-
-function EditableCard(props: EditableCardProps) {
-  const footer = (
-    <div className="flex justify-between">
-      <TextInput value={props.field.name} onChange={props.onChangeName} />
-      <button
-        type="button"
-        onClick={props.onClickDelete}
-        className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2 rounded-md"
-      >
-        <Trash3 aria-hidden className="inline" />{" "}
-        <span className="font-bold">Delete</span>
-      </button>
-    </div>
-  );
-
-  return (
-    <Card title={props.field.name} draggable footer={footer}>
-      <ul>
-        {Object.keys(props.field.pronouns).map((pronoun, index) => {
-          const choice = props.field.pronouns[pronoun];
-          return (
-            <li className="flex justify-between my-1" key={index}>
-              <div>{pronoun}</div>
-              <div className="rounded-md">
-                <button
-                  type="button"
-                  onClick={(e) => props.onChangeFavourite(e, pronoun)}
-                  className={`${
-                    choice == PronounChoice.favourite
-                      ? "bg-slate-500"
-                      : "bg-slate-600"
-                  } hover:bg-slate-400 p-2`}
-                >
-                  <Heart />
-                </button>
-                <button
-                  type="button"
-                  onClick={(e) => props.onChangeOkay(e, pronoun)}
-                  className={`${
-                    choice == PronounChoice.okay
-                      ? "bg-slate-500"
-                      : "bg-slate-600"
-                  } hover:bg-slate-400 p-2`}
-                >
-                  <HandThumbsUp />
-                </button>
-                <button
-                  type="button"
-                  onClick={(e) => props.onChangeJokingly(e, pronoun)}
-                  className={`${
-                    choice == PronounChoice.jokingly
-                      ? "bg-slate-500"
-                      : "bg-slate-600"
-                  } hover:bg-slate-400 p-2`}
-                >
-                  <EmojiLaughing />
-                </button>
-                <button
-                  type="button"
-                  onClick={(e) => props.onChangeFriends(e, pronoun)}
-                  className={`${
-                    choice == PronounChoice.friendsOnly
-                      ? "bg-slate-500"
-                      : "bg-slate-600"
-                  } hover:bg-slate-400 p-2`}
-                >
-                  <People />
-                </button>
-                <button
-                  type="button"
-                  onClick={(e) => props.onChangeAvoid(e, pronoun)}
-                  className={`${
-                    choice == PronounChoice.avoid
-                      ? "bg-slate-500"
-                      : "bg-slate-600"
-                  } hover:bg-slate-400 p-2`}
-                >
-                  <HandThumbsDown />
-                </button>
-                <button
-                  type="button"
-                  className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2"
-                >
-                  <Trash3 />
-                </button>
-              </div>
-            </li>
-          );
-        })}
-      </ul>
-    </Card>
-  );
-}

frontend/src/pages/User.tsx

@@ -1,114 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Link, useParams } from "react-router-dom";
-import { ArrowClockwise } from "react-bootstrap-icons";
-import ReactMarkdown from "react-markdown";
-import { Helmet } from "react-helmet";
-
-import type { User } from "../lib/types";
-import fetchAPI from "../lib/fetch";
-import FieldCard from "../lib/FieldCard";
-import Card from "../lib/Card";
-import { userState } from "../lib/store";
-import { useRecoilValue } from "recoil";
-import Loading from "../lib/Loading";
-
-function UserPage() {
-  const params = useParams();
-
-  const [user, setUser] = useState<User>(null);
-  const meUser = useRecoilValue(userState);
-
-  useEffect(() => {
-    fetchAPI<User>(`/users/${params.username}`).then((res) => {
-      setUser(res);
-    });
-  }, [params.username]);
-
-  if (user == null) {
-    return <Loading />;
-  }
-
-  return (
-    <>
-      <Helmet>
-        <title>@{user.username} - pronouns.cc</title>
-      </Helmet>
-      {meUser && meUser.id === user.id && (
-        <div className="lg:w-1/3 mx-auto bg-slate-100 dark:bg-slate-700 shadow rounded-md p-2">
-          <span>
-            You are currently viewing your{" "}
-            <span className="font-bold">public</span> profile.
-          </span>
-          <br />
-          <Link
-            to="/edit"
-            className="hover:underline text-sky-500 dark:text-sky-400"
-          >
-            Edit your profile
-          </Link>
-        </div>
-      )}
-      <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 default UserPage;

frontend/src/pages/login/Discord.tsx

@@ -1,77 +0,0 @@
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useRecoilState } from "recoil";
-import fetchAPI from "../../lib/fetch";
-import Loading from "../../lib/Loading";
-import { userState } from "../../lib/store";
-import { MeUser } from "../../lib/types";
-
-interface CallbackResponse {
-  has_account: boolean;
-  token?: string;
-  user?: MeUser;
-
-  discord?: string;
-  ticket?: string;
-  require_invite?: boolean;
-}
-
-export default function Discord() {
-  const navigate = useNavigate();
-  const params = new URLSearchParams(window.location.search);
-
-  const [state, setState] = useState({
-    hasAccount: false,
-    isLoading: false,
-    token: null,
-    user: null,
-    discord: null,
-    ticket: null,
-    error: null,
-  });
-
-  const [user, setUser] = useRecoilState(userState);
-
-  useEffect(() => {
-    if (state.isLoading) return;
-    setState({ ...state, isLoading: true });
-
-    fetchAPI<CallbackResponse>("/auth/discord/callback", "POST", {
-      callback_domain: window.location.origin,
-      code: params.get("code"),
-      state: params.get("state"),
-    }).then(
-      (resp) => {
-        setState({
-          hasAccount: resp.has_account,
-          isLoading: false,
-          token: resp.token,
-          user: resp.user,
-          discord: resp.discord,
-          ticket: resp.ticket,
-          error: null,
-        });
-
-        console.log("token:", resp.token);
-        localStorage.setItem("pronouns-token", resp.token);
-
-        setUser(resp.user);
-      },
-      (err) => {
-        console.log(err);
-        setState({ ...state, error: err, isLoading: false });
-      }
-    );
-  }, []);
-
-  if (user) {
-    // we got a token + user, save it and return to the home page
-    navigate("/");
-  }
-
-  if (user || state.isLoading) {
-    return <Loading />;
-  }
-
-  return <>wow such login</>;
-}

frontend/src/pages/login/Login.tsx

@@ -1,52 +0,0 @@
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useRecoilValue } from "recoil";
-import fetchAPI from "../../lib/fetch";
-import Loading from "../../lib/Loading";
-import { userState } from "../../lib/store";
-
-interface URLsResponse {
-  discord: string;
-}
-
-export default function Login() {
-  const [state, setState] = useState({
-    loading: false,
-    error: null,
-    discord: "",
-  });
-
-  if (useRecoilValue(userState) !== null) {
-    const nav = useNavigate();
-    nav("/");
-  }
-
-  useEffect(() => {
-    if (state.loading) return;
-    setState({ ...state, loading: true });
-
-    fetchAPI<URLsResponse>("/auth/urls", "POST", {
-      callback_domain: window.location.origin,
-    }).then(
-      (resp) => {
-        setState({ loading: false, error: null, discord: resp.discord });
-      },
-      (err) => {
-        console.log(err);
-        setState({ ...state, loading: false, error: err });
-      }
-    );
-  }, []);
-
-  if (state.loading) {
-    return <Loading />;
-  } else if (state.error) {
-    return <>Error: {`${state.error}`}</>;
-  }
-
-  return (
-    <>
-      <a href={state.discord}>Login with Discord</a>
-    </>
-  );
-}

frontend/tailwind.config.js

@@ -1,6 +1,9 @@
 module.exports = {
   darkMode: "class",
-  content: ["./frontend/index.html", "./frontend/src/**/*.{vue,js,ts,jsx,tsx}"],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
   theme: {
     extend: {},
   },

frontend/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

package.json

@@ -1,41 +0,0 @@
-{
-  "name": "pronouns",
-  "private": true,
-  "version": "0.0.0",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@sentry/react": "^6.19.7",
-    "@sentry/tracing": "^6.19.7",
-    "axios": "^0.27.2",
-    "lodash": "^4.17.21",
-    "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",
-    "react-select": "^5.3.2",
-    "react-sortablejs": "^6.1.1",
-    "recoil": "^0.7.2",
-    "sortablejs": "^1.15.0"
-  },
-  "devDependencies": {
-    "@tailwindcss/forms": "^0.5.1",
-    "@tailwindcss/typography": "^0.5.2",
-    "@types/lodash": "^4.14.182",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@types/react-helmet": "^6.1.5",
-    "@types/sortablejs": "^1.13.0",
-    "@vitejs/plugin-react": "^1.3.0",
-    "autoprefixer": "^10.4.7",
-    "postcss": "^8.4.13",
-    "tailwindcss": "^3.0.24",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.7"
-  }
-}

postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

tsconfig.node.json

@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node"
-  },
-  "include": ["vite.config.ts"]
-}

vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

vite.config.ts

@@ -1,17 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  root: "frontend",
-  plugins: [react()],
-  server: {
-    proxy: {
-      "/api": {
-        // assumes port 8080 in .env for development
-        target: "http://localhost:8080",
-        changeOrigin: true,
-      },
-    },
-  },
-});