Move next js project to archive (#207)

archive/next-js-web-app/src/components/Account/DeleteAccount.tsx

@@ -0,0 +1,96 @@
+import UserContext from '@/contexts/UserContext';
+import { AccountPageState, AccountPageAction } from '@/reducers/accountPageReducer';
+
+import { Switch } from '@headlessui/react';
+import { useRouter } from 'next/router';
+import { Dispatch, FunctionComponent, useContext, useRef } from 'react';
+import { toast } from 'react-hot-toast';
+
+interface DeleteAccountProps {
+  pageState: AccountPageState;
+  dispatch: Dispatch<AccountPageAction>;
+}
+const DeleteAccount: FunctionComponent<DeleteAccountProps> = ({
+  dispatch,
+  pageState,
+}) => {
+  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">
+      <div className="card-body">
+        <div className="flex w-full items-center justify-between space-x-5">
+          <div className="">
+            <h1 className="text-lg font-bold">Delete Your Account</h1>
+            <p>Want to leave? Delete your account here.</p>
+          </div>
+          <div>
+            <Switch
+              className="toggle"
+              id="edit-toggle"
+              checked={pageState.deleteAccountOpen}
+              onClick={() => {
+                dispatch({ type: 'TOGGLE_DELETE_ACCOUNT_VISIBILITY' });
+              }}
+            />
+          </div>
+        </div>
+        {pageState.deleteAccountOpen && (
+          <>
+            <div className="mt-3">
+              <button
+                className="btn btn-primary w-full"
+                onClick={() => deleteRef.current!.showModal()}
+              >
+                Delete my account
+              </button>
+              <dialog id="delete-modal" className="modal" ref={deleteRef}>
+                <div className="modal-box text-center">
+                  <h3 className="text-lg font-bold">{`You're about to delete your account.`}</h3>
+                  <p className="">This action is permanent and cannot be reversed.</p>
+                  <div className="modal-action flex-col space-x-0 space-y-3">
+                    <button
+                      className="btn btn-error btn-sm w-full"
+                      onClick={onDeleteSubmit}
+                    >
+                      Okay, delete my account
+                    </button>
+                    <button
+                      className="btn btn-success btn-sm w-full"
+                      onClick={() => deleteRef.current!.close()}
+                    >
+                      Go back
+                    </button>
+                  </div>
+                </div>
+              </dialog>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DeleteAccount;