{field.favourite.map((entry) => (
{entry}
diff --git a/frontend/src/pages/EditMe.tsx b/frontend/src/pages/EditMe.tsx
new file mode 100644
index 0000000..8205877
--- /dev/null
+++ b/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 (
+
+
{`fieldsUpdated: ${fieldsUpdated}`}
+ {/* @ts-ignore: This component isn't updated to have a "children" prop yet, but it accepts it just fine. */}
+
+ {fields.map((field, i) => (
+
+ ))}
+
+