refactor: fixed pushing data to supabase. changed inputdropdown so ch…

…oices persist. minimal styling changes

api/supabase/queries/onboarding.ts

@@ -7,45 +7,156 @@ export async function submitOnboardingData(
   role: Role,
 ): Promise<void> {
   try {
+    const { data: sessionData, error: sessionError } =
+      await supabase.auth.getSession();
+
+    if (sessionError || !sessionData?.session) {
+      console.error('Session retrieval error:', sessionError);
+      throw new Error('Failed to retrieve user session.');
+    }
+
+    const user_id = sessionData.session.user.id;
+    const email = sessionData.session.user.email;
+
+    const volunteerPayload = {
+      user_id,
+      email,
+      first_name: generalInfo.firstName,
+      last_name: generalInfo.lastName,
+      phone_number: generalInfo.phoneNumber,
+      notifications_opt_in: generalInfo.notifications,
+    };
+
     const { data: volunteerData, error: volunteerError } = await supabase
       .from('volunteers')
-      .insert([
-        {
-          first_name: generalInfo.firstName,
-          last_name: generalInfo.lastName,
-          phone_number: generalInfo.phoneNumber,
-          notifications_opt_in: generalInfo.notifications,
-        },
-      ]);
-
-    if (volunteerError)
+      .upsert([volunteerPayload], { onConflict: 'user_id' });
+
+    if (volunteerError) {
+      console.error('Error upserting volunteer data:', volunteerError);
       throw new Error(`Volunteer data error: ${volunteerError.message}`);
+    }
+
+    const preferencesPayload = {
+      user_id,
+      role: [
+        ...(role.isPerformer ? ['performer'] : []),
+        ...(role.isHost ? ['host'] : []),
+      ],
+      facility_type: preferences.facilityType,
+      locations: preferences.location,
+      audience_type: preferences.audience,
+      performer_type: preferences.performerType,
+      performance_type: preferences.performanceType,
+      genre: preferences.genre,
+      additional_info: preferences.additionalInfo,
+    };
 
     const { data: preferencesData, error: preferencesError } = await supabase
       .from('volunteer_preferences')
-      .insert([
-        {
-          role: [
-            role.isPerformer ? 'performer' : null,
-            role.isHost ? 'host' : null,
-          ].filter(Boolean),
-          facility_type: preferences.facilityType,
-          locations: preferences.location,
-          audience_type: preferences.audience,
-          performer_type: preferences.performerType,
-          performance_type: preferences.performanceType,
-          genre: preferences.genre,
-        },
-      ]);
-
-    if (preferencesError)
+      .insert([preferencesPayload]);
+
+    if (preferencesError) {
+      console.error('Error inserting preferences data:', preferencesError);
       throw new Error(`Preferences data error: ${preferencesError.message}`);
+    }
 
     console.log('Onboarding data submitted successfully:', {
       volunteerData,
       preferencesData,
     });
   } catch (error) {
-    console.error('Error submitting onboarding data:', error);
+    console.error('Error during onboarding data submission:', error);
+    throw error;
+  }
+}
+
+export async function submitGeneralInfo(
+  generalInfo: GeneralInfo,
+): Promise<void> {
+  try {
+    const { data: sessionData, error: sessionError } =
+      await supabase.auth.getSession();
+    if (sessionError || !sessionData?.session) {
+      throw new Error('Failed to retrieve user session.');
+    }
+
+    const user_id = sessionData.session.user.id;
+    const email = sessionData.session.user.email;
+
+    const generalInfoPayload = {
+      user_id,
+      email,
+      first_name: generalInfo.firstName,
+      last_name: generalInfo.lastName,
+      phone_number: generalInfo.phoneNumber,
+      notifications_opt_in: generalInfo.notifications,
+    };
+
+    const { data, error: volunteerError } = await supabase
+      .from('volunteers')
+      .upsert([generalInfoPayload], { onConflict: 'user_id' });
+
+    if (volunteerError) {
+      throw new Error(`General info data error: ${volunteerError.message}`);
+    }
+
+    console.log('Upserted general info data:', data);
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function submitPreferences(
+  preferences: Preferences,
+  role: Role,
+): Promise<void> {
+  try {
+    console.log('Starting preferences data submission...');
+
+    const { data: sessionData, error: sessionError } =
+      await supabase.auth.getSession();
+    console.log('Session data retrieved:', sessionData);
+
+    if (sessionError || !sessionData?.session) {
+      console.error('Session retrieval error:', sessionError);
+      throw new Error('Failed to retrieve user session.');
+    }
+
+    const user_id = sessionData.session.user.id;
+
+    const preferencesPayload = {
+      user_id,
+      role: [
+        ...(role.isPerformer ? ['performer'] : []),
+        ...(role.isHost ? ['host'] : []),
+      ],
+      facility_type: preferences.facilityType,
+      locations: preferences.location,
+      audience_type: preferences.audience,
+      performer_type: preferences.performerType,
+      performance_type: preferences.performanceType,
+      genre: preferences.genre,
+      additional_info: preferences.additionalInfo,
+    };
+    console.log('Preferences payload:', preferencesPayload);
+
+    const { data: preferencesData, error: preferencesError } = await supabase
+      .from('volunteer_preferences')
+      .upsert([preferencesPayload]);
+
+    if (preferencesError) {
+      console.error('Error upserting preferences data:', preferencesError);
+      throw new Error(
+        `Preferences data error (only preferences): ${preferencesError.message}`,
+      );
+    }
+    console.log('Preferences data upserted successfully:', preferencesData);
+
+    console.log('Onboarding data submitted successfully:', {
+      preferencesData,
+    });
+  } catch (error) {
+    console.error('Error during onboarding data submission:', error);
+    throw error;
   }
 }

app/onboarding/performance/page.tsx

@@ -113,20 +113,23 @@ export default function Onboarding() {
             multi
             onChange={handlePerformanceTypeChange}
             options={performanceTypeOptions}
+            value={new Set(preferences.performanceType)}
           />
           <InputDropdown
             label="Performance Genre"
             placeholder="Select genres"
             multi
             onChange={handleGenreChange}
             options={genreOptions}
+            value={new Set(preferences.genre)}
           />
           <InputDropdown
             label="Group Size"
             placeholder="Type to filter..."
             multi
             onChange={handlePerformerTypeChange}
             options={performerTypeOptions}
+            value={new Set(preferences.performerType)}
           />
         </Container>
 

app/onboarding/review/page.tsx

@@ -8,13 +8,13 @@ import { SMALL } from '@/styles/text';
 import { OnboardingContext } from '@/utils/onboardingContext';
 import {
   Background,
-  Button,
   Image,
   InlineContainer,
   Label,
   ProgressBarContainer,
   Rectangle,
   StyledLink,
+  SubmitButton,
   Title,
 } from '../styles';
 import { BackButton, Line, ReviewContainer, SmallText } from './styles';
@@ -88,11 +88,11 @@ export default function Review() {
         </ReviewContainer>
 
         <StyledLink href="/onboarding/finalize">
-          <Button onClick={submitData}>
+          <SubmitButton onClick={submitData}>
             <SMALL $fontWeight="400" $color="white">
               Everything looks good!
             </SMALL>
-          </Button>
+          </SubmitButton>
         </StyledLink>
       </InlineContainer>
     </Background>

app/onboarding/role-selection/page.tsx

@@ -47,7 +47,7 @@ export default function Onboarding() {
     });
   };
 
-  const handleContinue = () => {
+  const handleContinue = async () => {
     router.push('/onboarding/basic-information');
   };
 

app/onboarding/show-preference/page.tsx

@@ -99,20 +99,23 @@ export default function Onboarding() {
             multi
             onChange={handleFacilityChange}
             options={facilityTypeOptions}
+            value={new Set(preferences.facilityType)}
           />
           <InputDropdown
             label="Location Preferences"
             placeholder="Type to filter"
             multi
             onChange={handleLocationChange}
             options={locationOptions}
+            value={new Set(preferences.location)}
           />
           <InputDropdown
             label="Preferred Audience"
             placeholder="Type to filter"
             multi
             onChange={handleAudienceChange}
             options={audienceOptions}
+            value={new Set(preferences.audience)}
           />
         </Container>
 

app/onboarding/styles.ts

@@ -169,6 +169,30 @@ export const Button = styled.button<{ disabled?: boolean }>`
   }
 `;
 
+export const SubmitButton = styled.button<{ disabled?: boolean }>`
+  margin-top: 42px;
+  width: 100%;
+  height: 2.75rem;
+  background-color: ${({ disabled }) =>
+    disabled ? COLORS.pomegranate10 : COLORS.pomegranate};
+  border-color: ${({ disabled }) =>
+    disabled ? COLORS.pomegranate10 : COLORS.pomegranate};
+  border-style: solid;
+  border-radius: 8px;
+  display: inline-flex;
+  padding: 8px 16px;
+  justify-content: center;
+  align-items: center;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  text-decoration: none;
+  transition: all 0.3s ease;
+
+  @media (max-width: 768px) {
+    width: 85%;
+    bottom: 40px;
+  }
+`;
+
 export const ContinueText = styled.text`
   ${Sans.style}
   color: white;