feat: add (non-working) edit page

frontend/src/App.tsx

@@ -2,6 +2,7 @@ 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";
@@ -15,6 +16,7 @@ function App() {
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/u/:username" element={<User />} />
+          <Route path="/edit" element={<EditMe />} />
           <Route path="/login" element={<Login />} />
           <Route path="/login/discord" element={<Discord />} />
         </Routes>

frontend/src/lib/Card.tsx

@@ -1,11 +1,15 @@
 import React, { PropsWithChildren } from "react";
 
-export type Props = PropsWithChildren<{ title: string }>;
+export type Props = PropsWithChildren<{ title: string; draggable?: boolean }>;
 
-export default function Card({ title, children }: Props) {
+export default function Card({ title, draggable, children }: 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">
+      <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>

frontend/src/lib/FieldCard.tsx

@@ -9,9 +9,15 @@ import {
 import Card from "./Card";
 import type { Field } from "./types";
 
-export default function FieldCard({ field }: { field: Field }) {
+export default function FieldCard({
+  field,
+  draggable,
+}: {
+  field: Field;
+  draggable?: boolean;
+}) {
   return (
-    <Card title={field.name}>
+    <Card title={field.name} draggable={draggable}>
       {field.favourite.map((entry) => (
         <p className="text-lg font-bold">
           <HeartFill className="inline" /> {entry}

frontend/src/pages/EditMe.tsx

@@ -0,0 +1,53 @@
+import cloneDeep from "lodash/cloneDeep";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ReactSortable } from "react-sortablejs";
+import { useRecoilValue } from "recoil";
+
+import { userState } from "../lib/store";
+import { Field } from "../lib/types";
+import FieldCard from "../lib/FieldCard";
+
+interface FieldWithID extends Field {
+  id: number;
+}
+
+export default function EditMe() {
+  const navigate = useNavigate();
+
+  const meUser = useRecoilValue(userState);
+  if (!meUser) {
+    navigate("/");
+    return <>Loading...</>;
+  }
+
+  const [state, setState] = useState(cloneDeep(meUser));
+  // add an ID to every field (not returned by the API normally, but Sortable needs it)
+  const originalOrder = state.fields.map((f, i) => {
+    const fID = f as FieldWithID;
+    fID.id = i;
+    return fID;
+  });
+
+  const [fields, setFields] = useState(cloneDeep(originalOrder));
+  const fieldsUpdated =
+    fields.length !== state.fields.length ||
+    !fields.every((_, i) => fields[i].id === originalOrder[i].id);
+
+  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 md:grid-cols-3 gap-4 py-2"
+      >
+        {fields.map((field, i) => (
+          <FieldCard key={i} field={field} draggable></FieldCard>
+        ))}
+      </ReactSortable>
+    </div>
+  );
+}

frontend/src/pages/User.tsx

@@ -4,7 +4,6 @@ import { ArrowClockwise } from "react-bootstrap-icons";
 import ReactMarkdown from "react-markdown";
 import { Helmet } from "react-helmet";
 
-import NavItem from "../lib/NavItem";
 import type { User } from "../lib/types";
 import fetchAPI from "../lib/fetch";
 import FieldCard from "../lib/FieldCard";