From 9f5e3a7bcbf6c57feb046495029c10a607c96fee Mon Sep 17 00:00:00 2001
From: Celine Choi <celinejwchoiii@gmail.com>
Date: Mon, 30 Dec 2024 02:47:54 -0800
Subject: [PATCH] fix: redirection fixes and separate inserting user flow

---
 api/supabase/queries/auth.ts     | 63 ++++++++++++++++++--------------
 app/(auth)/verification/page.tsx | 55 +++++++++++++++++++++++-----
 2 files changed, 81 insertions(+), 37 deletions(-)

diff --git a/api/supabase/queries/auth.ts b/api/supabase/queries/auth.ts
index c4683f3..ba351f6 100644
--- a/api/supabase/queries/auth.ts
+++ b/api/supabase/queries/auth.ts
@@ -6,41 +6,18 @@ export async function handleSignUp(
 ): Promise<{ success: boolean; message: string }> {
   try {
     await ensureLoggedOutForNewUser(email);
-    const { data, error } = await supabase.auth.signUp({
+    const { error } = await supabase.auth.signUp({
       email,
       password,
+      options: {
+        emailRedirectTo: 'http://localhost:3000/verification',
+      },
     });
 
     if (error) {
       return { success: false, message: `Sign-up failed: ${error.message}` };
     }
 
-    const user = data.user;
-    if (!user) {
-      return {
-        success: false,
-        message: 'Sign-up failed: User was not created.',
-      };
-    }
-
-    const { error: insertError } = await supabase.from('volunteers').insert([
-      {
-        user_id: user.id,
-        email,
-        first_name: '',
-        last_name: '',
-        phone_number: '',
-        notifications_opt_in: true, // default value
-      },
-    ]);
-
-    if (insertError) {
-      return {
-        success: false,
-        message: `Error storing user data: ${insertError.message}`,
-      };
-    }
-
     localStorage.setItem('tempEmail', email);
 
     return { success: true, message: 'Sign-up successful!' };
@@ -55,6 +32,38 @@ export async function handleSignUp(
   }
 }
 
+export const insertVolunteer = async (user: { id: string; email: string }) => {
+  if (!user) {
+    return {
+      success: false,
+      message: 'User data is missing. Cannot insert into volunteers table.',
+    };
+  }
+
+  const { error: insertError } = await supabase.from('volunteers').insert([
+    {
+      user_id: user.id,
+      email: user.email,
+      first_name: '',
+      last_name: '',
+      phone_number: '',
+      notifications_opt_in: true,
+    },
+  ]);
+
+  if (insertError) {
+    return {
+      success: false,
+      message: `Error storing user data: ${insertError.message}`,
+    };
+  }
+
+  return {
+    success: true,
+    message: 'User successfully added to volunteers table.',
+  };
+};
+
 export async function handleSignIn(
   email: string,
   password: string,
diff --git a/app/(auth)/verification/page.tsx b/app/(auth)/verification/page.tsx
index 4793ea5..f59d35e 100644
--- a/app/(auth)/verification/page.tsx
+++ b/app/(auth)/verification/page.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import {
   getTempEmail,
+  insertVolunteer,
   resendVerificationEmail,
 } from '@/api/supabase/queries/auth';
 import Bud from '@/public/images/bud.svg';
@@ -28,23 +29,59 @@ import {
 } from './verification-styles';
 
 export default function Verification() {
-  const router = useRouter(); // Initialize useRouter
+  const router = useRouter();
+  const { session } = useSession();
   const [tempEmail, setTempEmail] = useState<string | null>(null);
   const [resendStatus, setResendStatus] = useState<string>('');
   const [isError, setIsError] = useState<boolean>(false);
-  const { session } = useSession();
-
-  useEffect(() => {
-    if (session) {
-      router.push('/success');
-    }
-  }, [session, router]);
+  const [isEmailConfirmed, setIsEmailConfirmed] = useState<boolean>(false);
 
   useEffect(() => {
     const email = getTempEmail();
     setTempEmail(email);
   }, []);
 
+  // Using session to check if the email is confirmed
+  useEffect(() => {
+    if (session?.user) {
+      const isVerified = session.user.email_confirmed_at !== null;
+      setIsEmailConfirmed(isVerified);
+    }
+  }, [session]);
+
+  useEffect(() => {
+    if (isEmailConfirmed && session?.user) {
+      const addUserToVolunteers = async () => {
+        const email = session.user.email;
+
+        if (!email) {
+          setIsError(true);
+          setResendStatus('Email is undefined. Please try again.');
+          return;
+        }
+
+        try {
+          const result = await insertVolunteer({
+            id: session.user.id,
+            email,
+          });
+          if (result.success) {
+            router.push('/success');
+          } else {
+            setIsError(true);
+            setResendStatus(result.message);
+          }
+        } catch (error) {
+          console.error('Error adding user to volunteers:', error);
+          setIsError(true);
+          setResendStatus('An error occurred while processing your request.');
+        }
+      };
+
+      addUserToVolunteers();
+    }
+  }, [isEmailConfirmed, session, router]);
+
   const handleResendLink = async () => {
     if (tempEmail) {
       const message = await resendVerificationEmail(tempEmail);
@@ -60,8 +97,6 @@ export default function Verification() {
     localStorage.removeItem('tempEmail');
   };
 
-  // TODO: Restyle error message on lines 95-100 (the message containing link back to sign-up)
-
   return (
     <Background>
       <Image src={Bud} alt="Bud" />