feat(frontend): add new field, new field entry, save buttons to edit profile page

frontend/components/Button.tsx

@@ -10,6 +10,7 @@ export interface Props {
   onClick?: MouseEventHandler<HTMLButtonElement>;
   style?: ButtonStyle;
   bold?: boolean;
+  noRound?: boolean;
   children?: ReactNode;
 }
 
@@ -33,7 +34,9 @@ function PrimaryButton(props: Props) {
     <button
       type="button"
       onClick={props.onClick}
-      className="bg-blue-500 dark:bg-blue-500 hover:bg-blue-700 hover:dark:bg-blue-800 p-2 rounded-md text-white"
+      className={`bg-blue-500 dark:bg-blue-500 hover:bg-blue-700 hover:dark:bg-blue-800 p-2 ${
+        !props.noRound && "rounded-md"
+      } text-white`}
     >
       <span className={props.bold ? "font-bold" : ""}>{props.children}</span>
     </button>
@@ -45,7 +48,9 @@ function SuccessButton(props: Props) {
     <button
       type="button"
       onClick={props.onClick}
-      className="bg-green-600 dark:bg-green-700 hover:bg-green-700 hover:dark:bg-green-800 p-2 rounded-md text-white"
+      className={`bg-green-600 dark:bg-green-700 hover:bg-green-700 hover:dark:bg-green-800 p-2 ${
+        !props.noRound && "rounded-md"
+      } text-white`}
     >
       <span className={props.bold ? "font-bold" : ""}>{props.children}</span>
     </button>
@@ -57,7 +62,9 @@ function DangerButton(props: Props) {
     <button
       type="button"
       onClick={props.onClick}
-      className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2 rounded-md text-white"
+      className={`bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2  ${
+        !props.noRound && "rounded-md"
+      } text-white`}
     >
       <span className={props.bold ? "font-bold" : ""}>{props.children}</span>
     </button>

frontend/components/Editable.tsx

@@ -4,12 +4,14 @@ import {
   HandThumbsUp,
   Heart,
   People,
+  Plus,
   Trash3,
 } from "react-bootstrap-icons";
 
 import Card from "./Card";
 import TextInput from "./TextInput";
 import Button, { ButtonStyle } from "./Button";
+import { useState } from "react";
 
 export interface EditField {
   id: number;
@@ -28,6 +30,8 @@ export enum PronounChoice {
 type EditableCardProps = {
   field: EditField;
   onChangeName: React.ChangeEventHandler<HTMLInputElement>;
+  onChangePronoun: React.ChangeEventHandler<HTMLInputElement>;
+  onAddPronoun(pronoun: string): void;
   onChangeFavourite(
     e: React.MouseEvent<HTMLButtonElement>,
     entry: string
@@ -40,6 +44,8 @@ type EditableCardProps = {
 };
 
 export function EditableCard(props: EditableCardProps) {
+  const [input, setInput] = useState("");
+
   const footer = (
     <div className="flex justify-between">
       <TextInput value={props.field.name} onChange={props.onChangeName} />
@@ -55,8 +61,12 @@ export function EditableCard(props: EditableCardProps) {
         {Object.keys(props.field.pronouns).map((pronoun, index) => {
           const choice = props.field.pronouns[pronoun];
           return (
-            <li className="flex justify-between my-1" key={index}>
+            <li className="flex justify-between my-1 items-center" key={index}>
-              <div>{pronoun}</div>
+              <TextInput
+                value={pronoun}
+                prevValue={pronoun}
+                onChange={props.onChangePronoun}
+              />
               <div className="rounded-md">
                 <button
                   type="button"
@@ -123,6 +133,18 @@ export function EditableCard(props: EditableCardProps) {
             </li>
           );
         })}
+        <li className="flex justify-between my-1 items-center">
+          <TextInput value={input} onChange={(e) => setInput(e.target.value)} />
+          <Button
+            style={ButtonStyle.success}
+            onClick={() => {
+              props.onAddPronoun(input);
+              setInput("");
+            }}
+          >
+            <Plus aria-hidden className="inline" /> Add
+          </Button>
+        </li>
       </ul>
     </Card>
   );

frontend/components/TextInput.tsx

@@ -2,6 +2,7 @@ import { ChangeEventHandler } from "react";
 
 export type Props = {
   contrastBackground?: boolean;
+  prevValue?: string;
   defaultValue?: string;
   value?: string;
   onChange?: ChangeEventHandler<HTMLInputElement>;
@@ -15,6 +16,7 @@ export default function TextInput(props: Props) {
   return (
     <input
       type="text"
+      data-prev-value={props.prevValue ?? props.value}
       className={`p-1 lg:p-2 rounded-md ${bg} border-slate-300 text-black dark:border-slate-900 dark:text-white`}
       defaultValue={props.defaultValue}
       value={props.value}

frontend/pages/edit/profile.tsx

@@ -1,13 +1,12 @@
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import { useRecoilState } from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
 import Loading from "../../components/Loading";
 import fetchAPI from "../../lib/fetch";
 import { userState } from "../../lib/state";
 import { MeUser, Field } from "../../lib/types";
 import cloneDeep from "lodash/cloneDeep";
 import { ReactSortable } from "react-sortablejs";
-import Card from "../../components/Card";
 
 import {
   EditableCard,
@@ -15,8 +14,11 @@ import {
   PronounChoice,
 } from "../../components/Editable";
 
+import Button, { ButtonStyle } from "../../components/Button";
+import { Plus, Save, Trash } from "react-bootstrap-icons";
+
 export default function Index() {
-  const [user, setUser] = useRecoilState(userState);
+  const user = useRecoilValue(userState);
   const router = useRouter();
   const [state, setState] = useState(cloneDeep(user));
 
@@ -49,6 +51,16 @@ export default function Index() {
     : [];
 
   const [fields, setFields] = useState(cloneDeep(originalOrder));
+  const resetFields = () => {
+    setFields(cloneDeep(originalOrder));
+  };
+  const addField = () => {
+    if (fields.length >= 25) return;
+
+    const lastId = fields[fields.length - 1]?.id ?? 0;
+
+    setFields([...fields, { id: lastId + 1, name: "", pronouns: {} }]);
+  };
 
   useEffect(() => {
     if (!user) {
@@ -61,11 +73,53 @@ export default function Index() {
   }
 
   const fieldsUpdated = !fieldsEqual(fields, originalOrder);
+  const isEdited = fieldsUpdated;
 
   return (
     <div className="container mx-auto">
+      <h1 className="p-2 border-b border-slate-300 dark:border-slate-600 flex items-center justify-between">
+        <span className="text-3xl">Editing your profile</span>
+        {isEdited && (
+          <Button
+            style={ButtonStyle.success}
+            onClick={() =>
+              updateUser({
+                displayName: state!.display_name,
+                bio: state!.bio,
+                fields,
+              })
+            }
+          >
+            <Save aria-hidden className="inline" /> Save changes
+          </Button>
+        )}
+      </h1>
+
       <div>{`fieldsUpdated: ${fieldsUpdated}`}</div>
-      {/* @ts-ignore: This component isn't updated to have a "children" prop yet, but it accepts it just fine. */}
+      <h3 className="p-2 border-b border-slate-300 dark:border-slate-600 flex items-center justify-between">
+        <span className="text-xl">Fields</span>
+        <div className="inline">
+          <Button
+            noRound
+            style={ButtonStyle.success}
+            onClick={() => addField()}
+          >
+            {" "}
+            <Plus aria-hidden className="inline" />
+            Add field
+          </Button>
+          {fieldsUpdated && (
+            <Button
+              noRound
+              style={ButtonStyle.danger}
+              onClick={() => resetFields()}
+            >
+              <Trash aria-hidden className="inline" />
+              Reset fields
+            </Button>
+          )}
+        </div>
+      </h3>
       <ReactSortable
         handle=".handle"
         list={fields}
@@ -76,6 +130,22 @@ export default function Index() {
           <EditableCard
             key={i}
             field={field}
+            onChangePronoun={(e) => {
+              const prev =
+                e.target.attributes.getNamedItem("data-prev-value")?.value;
+              if (!prev || !e.target.value) return;
+
+              const choice = field.pronouns[prev];
+              delete field.pronouns[prev];
+
+              field.pronouns[e.target.value] = choice;
+
+              setFields([...fields]);
+            }}
+            onAddPronoun={(pronoun) => {
+              field.pronouns[pronoun] = PronounChoice.okay;
+              setFields([...fields]);
+            }}
             onChangeName={(e) => {
               field.name = e.target.value;
               setFields([...fields]);
@@ -125,8 +195,8 @@ function fieldsEqual(arr1: EditField[], arr2: EditField[]) {
 }
 
 async function updateUser(args: {
-  displayName: string;
+  displayName: string | null;
-  bio: string;
+  bio: string | null;
   fields: EditField[];
 }) {
   const newFields = args.fields.map((editField) => {
@@ -139,22 +209,22 @@ async function updateUser(args: {
       avoid: [],
     };
 
-    Object.keys(editField).forEach((pronoun) => {
+    Object.keys(editField.pronouns).forEach((pronoun) => {
       switch (editField.pronouns[pronoun]) {
         case PronounChoice.favourite:
-          field.favourite?.push(pronoun);
+          field.favourite!.push(pronoun);
           break;
         case PronounChoice.okay:
-          field.okay?.push(pronoun);
+          field.okay!.push(pronoun);
           break;
         case PronounChoice.jokingly:
-          field.jokingly?.push(pronoun);
+          field.jokingly!.push(pronoun);
           break;
         case PronounChoice.friendsOnly:
-          field.friends_only?.push(pronoun);
+          field.friends_only!.push(pronoun);
           break;
         case PronounChoice.avoid:
-          field.avoid?.push(pronoun);
+          field.avoid!.push(pronoun);
           break;
       }
     });
@@ -163,8 +233,8 @@ async function updateUser(args: {
   });
 
   return await fetchAPI<MeUser>("/users/@me", "PATCH", {
-    display_name: args.displayName,
+    display_name: args.displayName ?? null,
-    bio: args.bio,
+    bio: args.bio ?? null,
     fields: newFields,
   });
 }