add toasts

src/app/me/AboutMe.tsx

@@ -14,21 +14,13 @@ import {
   passwordUpdateSchema
 } from "@/schemas";
 import PrettyForm from "@/components/PrettyForm";
+import Toast from "@/components/Toast";
 
 type UpdateResponse = {
   ok: boolean;
   error?: string;
 };
 
-// TODO skip do your magic
-type InputProps = {
-  label: string;
-  name: string;
-  type: HTMLInputTypeAttribute;
-  error?: string;
-  displayImage?: string;
-} & InputHTMLAttributes<HTMLInputElement>;
-
 async function fileAsBase64(f: File) {
   const reader = new FileReader();
   reader.readAsArrayBuffer(f);
@@ -44,6 +36,9 @@ async function fileAsBase64(f: File) {
 
 export default function AboutMe({ info }: { info: UserInfo }) {
   const [globalError, setGlobalError] = React.useState<string | null>(null);
+  const [madeProfileChanges, setMadeChanges] = React.useState(false);
+  const [madePasswordChanges, setMadePasswordChanges] = React.useState(false);
+
   const initialValues: AboutMeFormValues = {
     username: info.username,
     displayName: info.displayName,
@@ -55,6 +50,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
     { displayName, email, avatar }: AboutMeFormValues,
     { setSubmitting }: FormikHelpers<AboutMeFormValues>
   ) {
+    setMadeChanges(false);
     setSubmitting(true);
     const req = await fetch("/api/update", {
       method: "POST",
@@ -78,6 +74,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
             break;
         }
       }
+      setMadeChanges(true);
     } catch {
       console.error(req);
     }
@@ -94,7 +91,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
     { password, newPassword }: PasswordUpdateFormValues,
     { setFieldError, setSubmitting }: FormikHelpers<PasswordUpdateFormValues>
   ) {
-    console.log(password, newPassword);
+    setMadePasswordChanges(false);
     setSubmitting(true);
     const req = await fetch("/api/changePassword", {
       method: "POST",
@@ -118,6 +115,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
             break;
         }
       }
+      setMadePasswordChanges(true);
     } catch {
       console.error(req);
     }
@@ -134,6 +132,7 @@ export default function AboutMe({ info }: { info: UserInfo }) {
         >
           {({ isSubmitting }) => (
             <Form className={styles.profileGrid}>
+              {madeProfileChanges ? <Toast>Saved your changes.</Toast> : null}
               <Input
                 type="text"
                 name="username"
@@ -180,7 +179,6 @@ export default function AboutMe({ info }: { info: UserInfo }) {
           )}
         </Formik>
       </PrettyForm>
-
       <hr className={styles.divider} />
       <h2 className={styles.header}>Change password</h2>
       <PrettyForm globalError={passwordError}>
@@ -190,7 +188,10 @@ export default function AboutMe({ info }: { info: UserInfo }) {
           validationSchema={passwordUpdateSchema}
         >
           {({ isSubmitting }) => (
-            <Form className={styles.profileGrid}>
+            <Form>
+              {madePasswordChanges ? (
+                <Toast>Changed your password.</Toast>
+              ) : null}
               <Input
                 type="password"
                 name="password"
@@ -225,7 +226,6 @@ export default function AboutMe({ info }: { info: UserInfo }) {
           )}
         </Formik>
       </PrettyForm>
-
       <hr className={styles.divider} />
       <input
         type="button"

src/components/Toast.module.css

@@ -0,0 +1,32 @@
+.toast {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  background-color: var(--bg-dark);
+  margin: 1rem 0;
+  border-radius: 0.25rem;
+
+  animation-name: pop-in;
+  animation-timing-function: ease-in-out;
+  animation-duration: 250ms;
+  animation-iteration-count: 1;;
+}
+
+.toast svg {
+  height: 0.9em;
+  margin-right: 0.5rem;
+}
+
+@keyframes pop-in {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

src/components/Toast.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import styles from "./Toast.module.css";
+import CheckIcon from "./icons/CheckIcon";
+
+export default function Toast({ children }: { children: React.ReactNode }) {
+  return (
+    <div className={styles.toast}>
+      <CheckIcon />
+      {children}
+    </div>
+  );
+}

src/components/icons/CheckIcon.tsx

@@ -0,0 +1,19 @@
+export default function CheckIcon() {
+  return (
+    <svg
+      viewBox="0 0 128 128"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="check" fill="currentColor" fill-rule="nonzero">
+          <path
+            d="M107.782834,4.91476009 C111.16323,-0.155833631 118.014111,-1.52600976 123.084704,1.85438606 C128.155298,5.23478187 129.525474,12.0856625 126.145078,17.1562562 L64.5253312,123.085877 C60.662855,128.879591 52.465466,129.691293 47.5417556,124.767582 L3.23188204,89.4577087 C-1.07729401,85.1485327 -1.07729401,78.1619779 3.23188204,73.8528018 C7.54105809,69.5436258 14.5276129,69.5436258 18.8367889,73.8528018 L53.6283699,99.643429 L107.782834,4.91476009 Z"
+            id="Path-4"
+          ></path>
+        </g>
+      </g>
+    </svg>
+  );
+}