From 66a0830ef255fdbb39fbced8f1dc974ae042e7be Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Sat, 4 Mar 2023 23:03:30 +0100
Subject: [PATCH] feat(frontend): support new fields

---
 frontend/components/Editable.tsx | 52 ++++++++----------
 frontend/pages/edit/profile.tsx  | 94 ++++++++++----------------------
 2 files changed, 51 insertions(+), 95 deletions(-)

diff --git a/frontend/components/Editable.tsx b/frontend/components/Editable.tsx
index 7c4ab7b..bfd9a10 100644
--- a/frontend/components/Editable.tsx
+++ b/frontend/components/Editable.tsx
@@ -12,19 +12,12 @@ import Card from "./Card";
 import TextInput from "./TextInput";
 import Button, { ButtonStyle } from "./Button";
 import { useState } from "react";
+import { WordStatus } from "../lib/api-fetch";
 
 export interface EditField {
   id: number;
   name: string;
-  pronouns: Record<string, PronounChoice>;
-}
-
-export enum PronounChoice {
-  favourite,
-  okay,
-  jokingly,
-  friendsOnly,
-  avoid,
+  values: Array<{ value: string; status: WordStatus }>;
 }
 
 type EditableCardProps = {
@@ -32,15 +25,15 @@ type EditableCardProps = {
   onChangeName: React.ChangeEventHandler<HTMLInputElement>;
   onChangePronoun: React.ChangeEventHandler<HTMLInputElement>;
   onAddPronoun(pronoun: string): void;
-  onDeletePronoun(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
+  onDeletePronoun(e: React.MouseEvent<HTMLButtonElement>, index: number): void;
   onChangeFavourite(
     e: React.MouseEvent<HTMLButtonElement>,
-    entry: string
+    index: number
   ): 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;
+  onChangeOkay(e: React.MouseEvent<HTMLButtonElement>, index: number): void;
+  onChangeJokingly(e: React.MouseEvent<HTMLButtonElement>, index: number): void;
+  onChangeFriends(e: React.MouseEvent<HTMLButtonElement>, index: number): void;
+  onChangeAvoid(e: React.MouseEvent<HTMLButtonElement>, index: number): void;
   onClickDelete: React.MouseEventHandler<HTMLButtonElement>;
 };
 
@@ -76,21 +69,20 @@ export function EditableCard(props: EditableCardProps) {
   return (
     <Card title={props.field.name} draggable footer={footer}>
       <ul>
-        {Object.keys(props.field.pronouns).map((pronoun, index) => {
-          const choice = props.field.pronouns[pronoun];
+        {props.field.values.map((value, index) => {
           return (
             <li className="flex justify-between my-1 items-center" key={index}>
               <TextInput
-                value={pronoun}
-                prevValue={pronoun}
+                value={value.value}
+                prevValue={value.value}
                 onChange={props.onChangePronoun}
               />
               <div className="rounded-md">
                 <button
                   type="button"
-                  onClick={(e) => props.onChangeFavourite(e, pronoun)}
+                  onClick={(e) => props.onChangeFavourite(e, index)}
                   className={`${
-                    choice == PronounChoice.favourite
+                    value.status == WordStatus.Favourite
                       ? "bg-slate-500"
                       : "bg-slate-600"
                   } text-white hover:bg-slate-400 p-2`}
@@ -99,9 +91,9 @@ export function EditableCard(props: EditableCardProps) {
                 </button>
                 <button
                   type="button"
-                  onClick={(e) => props.onChangeOkay(e, pronoun)}
+                  onClick={(e) => props.onChangeOkay(e, index)}
                   className={`${
-                    choice == PronounChoice.okay
+                    value.status == WordStatus.Okay
                       ? "bg-slate-500"
                       : "bg-slate-600"
                   } text-white hover:bg-slate-400 p-2`}
@@ -110,9 +102,9 @@ export function EditableCard(props: EditableCardProps) {
                 </button>
                 <button
                   type="button"
-                  onClick={(e) => props.onChangeJokingly(e, pronoun)}
+                  onClick={(e) => props.onChangeJokingly(e, index)}
                   className={`${
-                    choice == PronounChoice.jokingly
+                    value.status == WordStatus.Jokingly
                       ? "bg-slate-500"
                       : "bg-slate-600"
                   } text-white hover:bg-slate-400 p-2`}
@@ -121,9 +113,9 @@ export function EditableCard(props: EditableCardProps) {
                 </button>
                 <button
                   type="button"
-                  onClick={(e) => props.onChangeFriends(e, pronoun)}
+                  onClick={(e) => props.onChangeFriends(e, index)}
                   className={`${
-                    choice == PronounChoice.friendsOnly
+                    value.status == WordStatus.FriendsOnly
                       ? "bg-slate-500"
                       : "bg-slate-600"
                   } text-white hover:bg-slate-400 p-2`}
@@ -132,9 +124,9 @@ export function EditableCard(props: EditableCardProps) {
                 </button>
                 <button
                   type="button"
-                  onClick={(e) => props.onChangeAvoid(e, pronoun)}
+                  onClick={(e) => props.onChangeAvoid(e, index)}
                   className={`${
-                    choice == PronounChoice.avoid
+                    value.status == WordStatus.Avoid
                       ? "bg-slate-500"
                       : "bg-slate-600"
                   } text-white hover:bg-slate-400 p-2`}
@@ -143,7 +135,7 @@ export function EditableCard(props: EditableCardProps) {
                 </button>
                 <button
                   type="button"
-                  onClick={(e) => props.onDeletePronoun(e, pronoun)}
+                  onClick={(e) => props.onDeletePronoun(e, index)}
                   className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2"
                 >
                   <Trash3 />
diff --git a/frontend/pages/edit/profile.tsx b/frontend/pages/edit/profile.tsx
index e7dbe25..6ea7b75 100644
--- a/frontend/pages/edit/profile.tsx
+++ b/frontend/pages/edit/profile.tsx
@@ -10,13 +10,9 @@ import { ReactSortable } from "react-sortablejs";
 import { useRecoilState, useRecoilValue } from "recoil";
 
 import Button, { ButtonStyle } from "../../components/Button";
-import {
-  EditableCard,
-  EditField,
-  PronounChoice,
-} from "../../components/Editable";
+import { EditableCard, EditField } from "../../components/Editable";
 import Loading from "../../components/Loading";
-import { fetchAPI, Field, MeUser } from "../../lib/api-fetch";
+import { fetchAPI, Field, MeUser, WordStatus } from "../../lib/api-fetch";
 import { themeState, userState } from "../../lib/state";
 import toast from "../../lib/toast";
 
@@ -31,23 +27,11 @@ export default function Index() {
         const field: EditField = {
           id: i,
           name: f.name,
-          pronouns: {},
+          values: [],
         };
 
-        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;
+        f.entries?.forEach((entry) => {
+          field.values.push(entry);
         });
 
         return field;
@@ -67,7 +51,7 @@ export default function Index() {
 
     setFields([
       ...fields,
-      { id: lastId + 1, name: `Field #${lastId + 2}`, pronouns: {} },
+      { id: lastId + 1, name: `Field #${lastId + 2}`, values: [] },
     ]);
   };
 
@@ -176,43 +160,43 @@ export default function Index() {
                 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;
+              const idx = field.values.findIndex((val) => val.value === prev);
+              if (idx !== -1) {
+                field.values[idx].value = e.target.value;
+              }
 
               setFields([...fields]);
             }}
             onAddPronoun={(pronoun) => {
-              field.pronouns[pronoun] = PronounChoice.okay;
+              field.values.push({ value: pronoun, status: WordStatus.Okay });
               setFields([...fields]);
             }}
-            onDeletePronoun={(e, pronoun) => {
-              delete field.pronouns[pronoun];
+            onDeletePronoun={(e, index) => {
+              delete field.values[index];
               setFields([...fields]);
             }}
             onChangeName={(e) => {
               field.name = e.target.value;
               setFields([...fields]);
             }}
-            onChangeFavourite={(e, entry: string) => {
-              field.pronouns[entry] = PronounChoice.favourite;
+            onChangeFavourite={(e, index) => {
+              field.values[index].status = WordStatus.Favourite;
               setFields([...fields]);
             }}
-            onChangeOkay={(e, entry: string) => {
-              field.pronouns[entry] = PronounChoice.okay;
+            onChangeOkay={(e, index) => {
+              field.values[index].status = WordStatus.Okay;
               setFields([...fields]);
             }}
-            onChangeJokingly={(e, entry: string) => {
-              field.pronouns[entry] = PronounChoice.jokingly;
+            onChangeJokingly={(e, index) => {
+              field.values[index].status = WordStatus.Jokingly;
               setFields([...fields]);
             }}
-            onChangeFriends={(e, entry: string) => {
-              field.pronouns[entry] = PronounChoice.friendsOnly;
+            onChangeFriends={(e, index) => {
+              field.values[index].status = WordStatus.FriendsOnly;
               setFields([...fields]);
             }}
-            onChangeAvoid={(e, entry: string) => {
-              field.pronouns[entry] = PronounChoice.avoid;
+            onChangeAvoid={(e, index) => {
+              field.values[index].status = WordStatus.Avoid;
               setFields([...fields]);
             }}
             onClickDelete={(_) => {
@@ -233,8 +217,10 @@ function fieldsEqual(arr1: EditField[], arr2: EditField[]) {
   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]
+    arr1[i].values.every(
+      (val, j) =>
+        val.value === arr2[i].values[j].value &&
+        val.status === arr2[i].values[j].status
     )
   );
 }
@@ -247,32 +233,10 @@ async function updateUser(args: {
   const newFields = args.fields.map((editField) => {
     const field: Field = {
       name: editField.name,
-      favourite: [],
-      okay: [],
-      jokingly: [],
-      friends_only: [],
-      avoid: [],
+      entries: [],
     };
 
-    Object.keys(editField.pronouns).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;
-      }
-    });
+    field.entries = [...editField.values];
 
     return field;
   });