Update: update confirm user, user account page

src/pages/account/index.tsx

@@ -21,7 +21,7 @@ const AccountPage: NextPage = () => {
           content="Your account page. Here you can view your account information, change your settings, and view your posts."
         />
       </Head>
-      <div className="flex h-full flex-col items-center bg-base-300">
+      <div className="flex flex-col items-center">
         <div className="m-12 flex w-11/12 flex-col items-center justify-center space-y-3 lg:w-7/12">
           <div className="flex flex-col items-center space-y-3">
             <div className="avatar">
@@ -34,24 +34,19 @@ const AccountPage: NextPage = () => {
             </div>
           </div>
 
-          <div className="w-full">
+          <div className="h-full w-full">
             <Tab.Group>
               <Tab.List className="tabs tabs-boxed items-center justify-center rounded-2xl">
-                <Tab className="tab tab-md w-1/3 uppercase ui-selected:tab-active">
-                  Account Info
+                <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
+                  Account Info and Security
                 </Tab>
-                <Tab className="tab tab-md w-1/3 uppercase ui-selected:tab-active">
-                  Security
-                </Tab>
-                <Tab className="tab tab-md w-1/3 uppercase ui-selected:tab-active">
+                <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
                   Your Posts
                 </Tab>
               </Tab.List>
               <Tab.Panels>
-                <Tab.Panel>
+                <Tab.Panel className="h-full space-y-5">
                   <AccountInfo />
-                </Tab.Panel>
-                <Tab.Panel>
                   <Security />
                 </Tab.Panel>
                 <Tab.Panel>Your posts!</Tab.Panel>

src/pages/users/confirm.tsx

@@ -1,125 +1,73 @@
-import UserContext from '@/contexts/UserContext';
+import useConfirmUser from '@/hooks/auth/useConfirmUser';
 import createErrorToast from '@/util/createErrorToast';
-import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
 import Head from 'next/head';
-import { useRouter } from 'next/router';
-import { FC, useContext, useState } from 'react';
+
+import { FC, useState } from 'react';
 import { toast } from 'react-hot-toast';
-import useSWR from 'swr';
-
-const useSendConfirmUserRequest = () => {
-  const router = useRouter();
-  const token = router.query.token as string | undefined;
-
-  const { data, error } = useSWR(`/api/users/confirm?token=${token}`, async (url) => {
-    if (!token) {
-      throw new Error('Token must be provided.');
-    }
-
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error(response.statusText);
-    }
-    const json = await response.json();
-
-    const parsed = APIResponseValidationSchema.safeParse(json);
-
-    if (!parsed.success) {
-      throw new Error('API response validation failed.');
-    }
-    return parsed.data;
-  });
-
-  return { data, error: error as unknown };
-};
 
 const ConfirmUserPage: FC = () => {
-  const router = useRouter();
-  const { error, data } = useSendConfirmUserRequest();
-  const { user } = useContext(UserContext);
+  const { needsToLogin, tokenInvalid } = useConfirmUser();
 
-  const needsToLogin =
-    error instanceof Error && error.message === 'Unauthorized' && !user;
-  const tokenExpired = error instanceof Error && error.message === 'Unauthorized' && user;
   const [confirmationResent, setConfirmationResent] = useState(false);
+  const onClick = async () => {
+    const resentConfirmationLoadingToast = toast.loading(
+      'Resending your confirmation email.',
+    );
+    try {
+      const response = await fetch('/api/users/resend-confirmation', {
+        method: 'POST',
+      });
+      if (!response.ok) {
+        throw new Error('Something went wrong.');
+      }
 
-  if (user?.accountIsVerified) {
-    router.push('/users/current');
-    return null;
-  }
+      toast.remove(resentConfirmationLoadingToast);
+      toast.success('Sent a new confirmation email.');
 
-  if (data) {
-    router.push('/users/current');
-    return null;
-  }
+      setConfirmationResent(true);
+    } catch (err) {
+      createErrorToast(err);
+    }
+  };
 
-  if (needsToLogin) {
-    return (
-      <>
-        <Head>
-          <title>Confirm User | The Biergarten App</title>
-        </Head>
-        <div className="flex h-full flex-col items-center justify-center">
+  return (
+    <>
+      <Head>
+        <title>Confirm User | The Biergarten App</title>
+      </Head>
+      <div className="flex h-full flex-col items-center justify-center space-y-4">
+        {needsToLogin && (
           <p className="text-center text-xl font-bold">
             Please login to confirm your account.
           </p>
-        </div>
-      </>
-    );
-  }
-  if (tokenExpired) {
-    const onClick = async () => {
-      const loadingToast = toast.loading('Resending your confirmation email.');
-      try {
-        const response = await fetch('/api/users/resend-confirmation', {
-          method: 'POST',
-        });
-        if (!response.ok) {
-          throw new Error('Something went wrong.');
-        }
+        )}
 
-        toast.remove(loadingToast);
-        toast.success('Sent a new confirmation email.');
+        {!needsToLogin && tokenInvalid && !confirmationResent && (
+          <>
+            <p className="text-center text-2xl font-bold">
+              Your confirmation token is invalid or is expired.
+            </p>
+            <button
+              className="btn-outline btn-sm btn normal-case"
+              onClick={onClick}
+              type="button"
+            >
+              Click here to request a new token.
+            </button>
+          </>
+        )}
 
-        setConfirmationResent(true);
-      } catch (err) {
-        createErrorToast(err);
-      }
-    };
-
-    return (
-      <>
-        <Head>
-          <title>Confirm User | The Biergarten App</title>
-        </Head>
-        <div className="flex h-full flex-col items-center justify-center space-y-4">
-          {!confirmationResent ? (
-            <>
-              <p className="text-center text-2xl font-bold">
-                Your confirmation token is expired.
-              </p>
-              <button
-                className="btn-outline btn-sm btn normal-case"
-                onClick={onClick}
-                type="button"
-              >
-                Click here to request a new token.
-              </button>
-            </>
-          ) : (
-            <>
-              <p className="text-center text-2xl font-bold">
-                Resent your confirmation link.
-              </p>
-              <p className="font-xl text-center">Please check your email.</p>
-            </>
-          )}
-        </div>
-      </>
-    );
-  }
-
-  return null;
+        {!needsToLogin && tokenInvalid && confirmationResent && (
+          <>
+            <p className="text-center text-2xl font-bold">
+              Resent your confirmation link.
+            </p>
+            <p className="font-xl text-center">Please check your email.</p>
+          </>
+        )}
+      </div>
+    </>
+  );
 };
 
 export default ConfirmUserPage;

src/pages/users/current.tsx

@@ -20,7 +20,7 @@ const ProtectedPage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>Hello, {user?.firstName}! | The Biergarten App</title>
+        <title>Hello! | The Biergarten App</title>
       </Head>
       <div className="flex h-full flex-col items-center justify-center space-y-3 bg-primary text-center">
         {isLoading && <Spinner size={isDesktop ? 'xl' : 'md'} />}