From 373ccf4b635b84f66cade2e51710abf1347253b1 Mon Sep 17 00:00:00 2001 From: Sam Date: Mon, 21 Nov 2022 03:20:15 +0100 Subject: [PATCH] feat(backend): switch to toasts for client-side API feedback, flesh out edit profile page --- frontend/components/Editable.tsx | 4 ++++ frontend/lib/toast.ts | 29 ++++++++++++++++++++++++ frontend/package.json | 5 +++-- frontend/pages/edit/profile.tsx | 38 ++++++++++++++++++++++---------- frontend/pages/login/discord.tsx | 15 +++++-------- frontend/yarn.lock | 15 ++++++++----- 6 files changed, 77 insertions(+), 29 deletions(-) create mode 100644 frontend/lib/toast.ts diff --git a/frontend/components/Editable.tsx b/frontend/components/Editable.tsx index 2de0434..d38c79c 100644 --- a/frontend/components/Editable.tsx +++ b/frontend/components/Editable.tsx @@ -32,6 +32,7 @@ type EditableCardProps = { onChangeName: React.ChangeEventHandler; onChangePronoun: React.ChangeEventHandler; onAddPronoun(pronoun: string): void; + onDeletePronoun(e: React.MouseEvent, entry: string): void; onChangeFavourite( e: React.MouseEvent, entry: string @@ -125,6 +126,7 @@ export function EditableCard(props: EditableCardProps) { )} -
{`fieldsUpdated: ${fieldsUpdated}`}

Fields
@@ -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("/users/@me", "PATCH", { - display_name: args.displayName ?? null, - bio: args.bio ?? null, - fields: newFields, - }); + try { + const user = await fetchAPI("/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" }); + } } diff --git a/frontend/pages/login/discord.tsx b/frontend/pages/login/discord.tsx index 51e0822..b3a7a36 100644 --- a/frontend/pages/login/discord.tsx +++ b/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 (
- {state.error && ( - -

{state.error.message ?? state.error}

-

Try again?

- - )} -

Get started

diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 14189bb..fe45035 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -398,6 +398,11 @@ resolved "https://registry.yarnpkg.com/@types/sortablejs/-/sortablejs-1.13.0.tgz#870223438f8f2cd81157b128a4c0261adbcaa946" integrity sha512-C3064MH72iEfeGCYEGCt7FCxXoAXaMPG0QPnstcxvPmbl54erpISu06d++FY37Smja64iWy5L8wOyHHBghWbJQ== +"@types/toastify-js@^1.11.1": + version "1.11.1" + resolved "https://registry.yarnpkg.com/@types/toastify-js/-/toastify-js-1.11.1.tgz#48f96596e087025c7f7821668599fd74dcdd8549" + integrity sha512-Ef03kGFWseAQYIQwN83WbhRxD+DOd+X6p22j9olA/TnvE0crDMc3fyoctKSpXgEDVWq5l3p98otIdpNX1pOYMA== + "@types/unist@*", "@types/unist@^2.0.0": version "2.0.6" resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d" @@ -2650,11 +2655,6 @@ react-sortablejs@^6.1.4: classnames "2.3.1" tiny-invariant "1.2.0" -react-toast@^1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/react-toast/-/react-toast-1.0.3.tgz#cbe2cd946c5762736642dd2981a7e5d666c5448e" - integrity sha512-gL3+O5hlLaoBmd36oXWKrjFeUyLCMQ04AIh48LrnUvdeg2vhJQ0E803TgVemgJvYUXKlutMVn9+/QS2DDnk26Q== - react@18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" @@ -3078,6 +3078,11 @@ to-regex-range@^5.0.1: dependencies: is-number "^7.0.0" +toastify-js@^1.12.0: + version "1.12.0" + resolved "https://registry.yarnpkg.com/toastify-js/-/toastify-js-1.12.0.tgz#cc1c4f5c7e7380e854e20bedceb51980ea29f64d" + integrity sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ== + tr46@~0.0.3: version "0.0.3" resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"