calblueprint · kevin3656 · Oct 7, 2024 · Oct 13, 2024 · Oct 13, 2024 · Oct 26, 2024
diff --git a/api/supabase/queries/profiles.ts b/api/supabase/queries/profiles.ts
@@ -1,3 +1,4 @@
+import { UUID } from 'crypto';
 import { Profile } from '@/types/schema';
 import supabase from '../createClient';
 
@@ -12,3 +13,16 @@ export async function upsertProfile(profile: Profile) {
 
   return data;
 }
+
+export async function fetchProfileById(userId: UUID) {
+  const { data, error } = await supabase
+    .from('profiles')
+    .select('*')
+    .eq('user_id', userId)
+    .single();
+
+  if (error)
+    throw new Error(`Error fetching profile id ${userId}: ${error.message}`);
+
+  return data;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import StyledComponentsRegistry from '@/lib/registry';
+import ProfileProvider from '@/utils/ProfileProvider';
 
 // font definitions
 const sans = Inter({
@@ -22,7 +23,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={sans.className}>
-        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+        <ProfileProvider>
+          <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+        </ProfileProvider>
       </body>
     </html>
   );

diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
@@ -1,37 +1,52 @@
 'use client';
 
 import React, { useState } from 'react';
-import { upsertProfile } from '@/api/supabase/queries/profiles';
-import { Profile } from '@/types/schema';
+import { UUID } from 'crypto';
+import { Profile, UserTypeEnum } from '@/types/schema';
+import { useProfile } from '@/utils/ProfileProvider';
+
+type Options<T> = {
+  label: string; // Represents the text for UI
+  value: T; // Represents the value stored in the DB
+};
 
 // Define the possible options for each question
-const states = ['Tennessee', 'Missouri'];
-const gardenTypes = ['Individual', 'Community', 'School'];
-const plotOptions = [
+const states: Options<string>[] = [
+  { label: 'Tennesee', value: 'TENNESSEE' },
+  { label: 'Missouri', value: 'MISSOUR' },
+];
+const gardenTypes: Options<UserTypeEnum>[] = [
+  { label: 'Individual', value: 'INDIV' },
+  { label: 'School', value: 'SCHOOL' },
+  { label: 'Organization', value: 'ORG' },
+];
+const plotOptions: Options<boolean>[] = [
   { label: 'yes', value: true },
   { label: 'no', value: false },
 ];
+const placeholderUserId: UUID = '0802d796-ace8-480d-851b-d16293c74a21';
+
 //Interfaces and props to avoid typ errors on Lint
 interface StateSelectionProps {
-  selectedState: string;
-  setSelectedState: React.Dispatch<React.SetStateAction<string>>;
+  selectedState?: string;
+  setSelectedState: (selected: string) => void;
 }
 
-interface GardenTypeSelectionProps {
-  selectedGardenType: string;
-  setSelectedGardenType: React.Dispatch<React.SetStateAction<string>>;
+interface UserTypeSelectionProps {
+  selectedUserType?: UserTypeEnum;
+  setSelectedUserType: (selected: UserTypeEnum) => void;
 }
 
 interface PlotSelectionProps {
-  selectedPlot: boolean | null;
-  setSelectedPlot: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedPlot?: boolean;
+  setSelectedPlot: (selected: boolean) => void;
 }
 
 // Select State
-const StateSelection: React.FC<StateSelectionProps> = ({
+const StateSelection = ({
   selectedState,
   setSelectedState,
-}) => {
+}: StateSelectionProps) => {
   return (
     <div>
       <h2>Which state do you live in?</h2>
@@ -43,45 +58,45 @@ const StateSelection: React.FC<StateSelectionProps> = ({
           Select a state
         </option>
         {states.map(state => (
-          <option key={state} value={state}>
-            {state}
+          <option key={state.label} value={String(state.value)}>
+            {state.label}
           </option>
         ))}
       </select>
     </div>
   );
 };
 
-// Step 2: Select garden type
+// Step 2: Select user type
 
-const GardenTypeSelection: React.FC<GardenTypeSelectionProps> = ({
-  selectedGardenType,
-  setSelectedGardenType,
-}) => {
+const UserTypeSelection = ({
+  selectedUserType,
+  setSelectedUserType,
+}: UserTypeSelectionProps) => {
   return (
     <div>
       <h2>What type of garden do you want to create?</h2>
       {gardenTypes.map(type => (
-        <label key={type}>
+        <label key={type.label}>
           <input
             type="radio"
             name="gardenType"
-            value={type}
-            checked={selectedGardenType === type}
-            onChange={e => setSelectedGardenType(e.target.value)}
+            value={type.value}
+            checked={selectedUserType === type.value}
+            onChange={e => setSelectedUserType(e.target.value as UserTypeEnum)}
           />
-          {type}
+          {type.label}
         </label>
       ))}
     </div>
   );
 };
 
 // Step 3: Do you have a plot?
-const PlotSelection: React.FC<PlotSelectionProps> = ({
+const PlotSelection = ({
   selectedPlot,
   setSelectedPlot,
-}) => {
+}: PlotSelectionProps) => {
   return (
     <div>
       <h2>Do you already have a plot?</h2>
@@ -91,7 +106,11 @@ const PlotSelection: React.FC<PlotSelectionProps> = ({
             type="radio"
             name="plot"
             value={String(option.value)}
-            checked={selectedPlot === option.value}
+            checked={
+              typeof selectedPlot === 'undefined'
+                ? false
+                : selectedPlot === option.value
+            }
             onChange={() => setSelectedPlot(option.value)}
           />
           {option.label}
@@ -102,11 +121,16 @@ const PlotSelection: React.FC<PlotSelectionProps> = ({
 };
 
 // Main Onboarding Component
-const OnboardingFlow = () => {
+export default function OnboardingFlow() {
+  const { setProfile, setHasPlot } = useProfile();
   const [step, setStep] = useState(1);
   const [selectedState, setSelectedState] = useState<string>('');
-  const [selectedGardenType, setSelectedGardenType] = useState<string>('');
-  const [selectedPlot, setSelectedPlot] = useState<boolean>(false);
+  const [selectedUserType, setSelectedUserType] = useState<
+    UserTypeEnum | undefined
+  >(undefined);
+  const [selectedPlot, setSelectedPlot] = useState<boolean | undefined>(
+    undefined,
+  );
 
   const handleNext = () => {
     setStep(step + 1);
@@ -115,24 +139,25 @@ const OnboardingFlow = () => {
   const handleBack = () => {
     setStep(step - 1);
   };
-
   const handleSubmit = async () => {
-    const profile: Profile = {
-      user_id: '2abd7296-374a-42d1-bb4f-b813da1615ae',
-      state: selectedState,
-      user_type: selectedGardenType,
-      has_plot: selectedPlot,
-    };
     try {
-      upsertProfile(profile);
+      const profileToUpload: Profile = {
+        user_id: placeholderUserId,
+        us_state: selectedState,
+        user_type: selectedUserType!,
+      };
+
+      await setProfile(profileToUpload);
+      await setHasPlot(selectedPlot!); // Update has_plot
     } catch (error) {
-      console.error('Error upserting profile:', error);
-      throw new Error('Error upserting profile');
-    } finally {
-      //TODO: Remove console log.
-      console.log('Submitted data: ', profile);
+      console.error('Error submitting profile:', error);
     }
-    // Handle form submission, e.g., send to a server or display a confirmation
+  };
+
+  const disableNext = () => {
+    if (step === 1) return !selectedState;
+    if (step === 2) return !selectedUserType;
+    if (step === 3) return !(typeof selectedPlot === 'undefined');
   };
 
   return (
@@ -144,9 +169,9 @@ const OnboardingFlow = () => {
         />
       )}
       {step === 2 && (
-        <GardenTypeSelection
-          selectedGardenType={selectedGardenType}
-          setSelectedGardenType={setSelectedGardenType}
+        <UserTypeSelection
+          selectedUserType={selectedUserType}
+          setSelectedUserType={setSelectedUserType}
         />
       )}
       {step === 3 && (
@@ -159,14 +184,12 @@ const OnboardingFlow = () => {
       <div>
         {step > 1 && <button onClick={handleBack}>Back</button>}
         {step < 3 && (
-          <button onClick={handleNext} disabled={!selectedState && step === 1}>
+          <button onClick={handleNext} disabled={disableNext()}>
             Next
           </button>
         )}
         {step === 3 && <button onClick={handleSubmit}>Submit</button>}
       </div>
     </div>
   );
-};
-
-export default OnboardingFlow;
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,11 +1,10 @@
-import BPLogo from '@/assets/images/bp-logo.png';
-import { Container, Image } from './page.style';
+import OnboardingFlow from './onboarding/page';
+import { Container } from './page.style';
 
 export default function Home() {
   return (
     <Container>
-      <Image src={BPLogo} alt="Blueprint Logo" />
-      <p>Open up app/page.tsx to get started!</p>
+      <OnboardingFlow />
     </Container>
   );
 }
diff --git a/hooks/useProfile.ts b/hooks/useProfile.ts
@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { Profile } from '../types/schema';
+
+const initialProfiles: Profile[] = [];
+
+export const useProfile = () => {
+  const [profiles, setProfiles] = useState<Profile[]>(initialProfiles);
+
+  const addProfile = (newProfile: Profile) => {
+    setProfiles(prev => [...prev, newProfile]);
+  };
+
+  const updateProfile = (index: number, updates: Partial<Profile>) => {
+    setProfiles(prev =>
+      prev.map((profile, i) =>
+        i === index ? { ...profile, ...updates } : profile,
+      ),
+    );
+  };
+
+  const removeProfile = (index: number) => {
+    setProfiles(prev => prev.filter((_, i) => i !== index));
+  };
+
+  return {
+    profiles,
+    addProfile,
+    updateProfile,
+    removeProfile,
+  };
+};
diff --git a/types/schema.d.ts b/types/schema.d.ts
@@ -1,14 +1,13 @@
 import type { UUID } from 'crypto';
 
 export type SeasonEnum = 'SPRING' | 'SUMMER' | 'FALL' | 'WINTER';
-
+export type UserTypeEnum = 'INDIV' | 'SCHOOL' | 'ORG';
 export type DifficultyLevelEnum = 'EASY' | 'MODERATE' | 'HARD';
 
 export interface Profile {
   user_id: UUID;
-  state: string;
-  user_type: string;
-  has_plot: boolean;
+  us_state: string;
+  user_type: UserTypeEnum;
 }
 
 export interface Plant {