update: add delete user api route, AuthProvider extracted from App.tsx

src/components/Account/DeleteAccount.tsx

@@ -1,7 +1,10 @@
+import UserContext from '@/contexts/UserContext';
 import { AccountPageState, AccountPageAction } from '@/reducers/accountPageReducer';
+
 import { Switch } from '@headlessui/react';
 import { useRouter } from 'next/router';
-import { Dispatch, FunctionComponent, useRef } from 'react';
+import { Dispatch, FunctionComponent, useContext, useRef } from 'react';
+import { toast } from 'react-hot-toast';
 
 interface DeleteAccountProps {
   pageState: AccountPageState;
@@ -13,6 +16,26 @@ const DeleteAccount: FunctionComponent<DeleteAccountProps> = ({
 }) => {
   const deleteRef = useRef<null | HTMLDialogElement>(null);
   const router = useRouter();
+  const { user, mutate } = useContext(UserContext);
+
+  const onDeleteSubmit = async () => {
+    deleteRef.current!.close();
+    const loadingToast = toast.loading(
+      'Deleting your account. We are sad to see you go. 😭',
+    );
+    const request = await fetch(`/api/users/${user?.id}`, {
+      method: 'DELETE',
+    });
+
+    if (!request.ok) {
+      throw new Error('Could not delete that user.');
+    }
+
+    toast.remove(loadingToast);
+    toast.success('Deleted your account. Goodbye. 😓');
+    await mutate!();
+    router.push('/');
+  };
 
   return (
     <div className="card w-full space-y-4">
@@ -49,10 +72,7 @@ const DeleteAccount: FunctionComponent<DeleteAccountProps> = ({
                   <div className="modal-action flex-col space-x-0 space-y-3">
                     <button
                       className="btn-error btn-sm btn w-full"
-                      onClick={async () => {
-                        deleteRef.current!.close();
-                        await router.replace('/api/users/logout');
-                      }}
+                      onClick={onDeleteSubmit}
                     >
                       Okay, delete my account
                     </button>

src/components/Account/Security.tsx

@@ -72,14 +72,14 @@ const Security: FunctionComponent<SecurityProps> = ({ dispatch, pageState }) =>
               formValidationSchema={register('password')}
             />
             <FormInfo>
-              <FormLabel htmlFor="password">Confirm Password</FormLabel>
+              <FormLabel htmlFor="confirm-password">Confirm Password</FormLabel>
               <FormError>{formState.errors.confirmPassword?.message}</FormError>
             </FormInfo>
             <FormTextInput
               type="password"
               disabled={!pageState.securityOpen || formState.isSubmitting}
               error={!!formState.errors.confirmPassword}
-              id="password"
+              id="confirm-password"
               formValidationSchema={register('confirmPassword')}
             />
 

src/components/ui/CustomToast.tsx

@@ -27,7 +27,7 @@ const CustomToast: FC<{ children: ReactNode }> = ({ children }) => {
           const alertType = toastToClassName(t.type);
           return (
             <div
-              className={`alert ${alertType} flex w-11/12 items-center justify-between shadow-lg animate-in fade-in duration-200 lg:w-4/12`}
+              className={`alert ${alertType} flex w-full items-center justify-between shadow-lg animate-in fade-in duration-200 lg:w-3/12`}
             >
               <p className="w-full">{resolveValue(t.message, t)}</p>
               {t.type !== 'loading' && (