feat(backend): switch to toasts for client-side API feedback, flesh out edit profile page

frontend/pages/edit/profile.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import { useRecoilState, useRecoilValue } from "recoil";
+import { useRecoilState } from "recoil";
 import Loading from "../../components/Loading";
 import fetchAPI from "../../lib/fetch";
 import { userState } from "../../lib/state";
@@ -16,9 +16,10 @@ import {
 
 import Button, { ButtonStyle } from "../../components/Button";
 import { Plus, Save, Trash } from "react-bootstrap-icons";
+import toast from "../../lib/toast";
 
 export default function Index() {
-  const user = useRecoilValue(userState);
+  const [user, setUser] = useRecoilState(userState);
   const router = useRouter();
   const [state, setState] = useState(cloneDeep(user));
 
@@ -82,20 +83,21 @@ export default function Index() {
         {isEdited && (
           <Button
             style={ButtonStyle.success}
-            onClick={() =>
-              updateUser({
+            onClick={async () => {
+              const user = await updateUser({
                 displayName: state!.display_name,
                 bio: state!.bio,
                 fields,
-              })
-            }
+              });
+
+              if (user) setUser(user);
+            }}
           >
             <Save aria-hidden className="inline" /> Save changes
           </Button>
         )}
       </h1>
 
-      <div>{`fieldsUpdated: ${fieldsUpdated}`}</div>
       <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">
@@ -146,6 +148,10 @@ export default function Index() {
               field.pronouns[pronoun] = PronounChoice.okay;
               setFields([...fields]);
             }}
+            onDeletePronoun={(e, pronoun) => {
+              delete field.pronouns[pronoun];
+              setFields([...fields]);
+            }}
             onChangeName={(e) => {
               field.name = e.target.value;
               setFields([...fields]);
@@ -232,9 +238,17 @@ async function updateUser(args: {
     return field;
   });
 
-  return await fetchAPI<MeUser>("/users/@me", "PATCH", {
-    display_name: args.displayName ?? null,
-    bio: args.bio ?? null,
-    fields: newFields,
-  });
+  try {
+    const user = await fetchAPI<MeUser>("/users/@me", "PATCH", {
+      display_name: args.displayName ?? null,
+      bio: args.bio ?? null,
+      fields: newFields,
+    });
+
+    toast({ text: "Successfully updated your profile!" });
+
+    return user;
+  } catch (e: any) {
+    toast({ text: `${e.message ?? e}`, background: "error" });
+  }
 }

frontend/pages/login/discord.tsx

@@ -3,12 +3,13 @@ import { useRouter } from "next/router";
 import { useRecoilState } from "recoil";
 import fetchAPI from "../../lib/fetch";
 import { userState } from "../../lib/state";
-import { MeUser, SignupResponse } from "../../lib/types";
+import { APIError, MeUser, SignupResponse } from "../../lib/types";
 import TextInput from "../../components/TextInput";
 import Loading from "../../components/Loading";
 import Button, { ButtonStyle } from "../../components/Button";
 import Notice from "../../components/Notice";
 import BlueLink from "../../components/BlueLink";
+import toast from "../../lib/toast";
 
 interface CallbackResponse {
   has_account: boolean;
@@ -126,21 +127,15 @@ export default function Discord() {
       setUser(resp.user);
       localStorage.setItem("pronouns-token", resp.token);
 
+      toast({ text: "Created account!", background: "success" });
       router.push("/");
-    } catch (e) {
-      setState({ ...state, error: e });
+    } catch (e: any) {
+      toast({ text: `${e.message ?? e}`, background: "error" });
     }
   };
 
   return (
     <div>
-      {state.error && (
-        <Notice style={ButtonStyle.danger} header="Create account error">
-          <p>{state.error.message ?? state.error}</p>
-          <p>Try again?</p>
-        </Notice>
-      )}
-
       <div className="border-slate-200 dark:border-slate-700 border rounded max-w-xl">
         <div className="border-b border-slate-200 dark:border-slate-700 p-2">
           <h1 className="font-bold text-xl">Get started</h1>