From 2b7378bfec085197bdce9b79caed8157bfd59cb7 Mon Sep 17 00:00:00 2001
From: kevin3656 <kevinsolorio@berkeley.edu>
Date: Sun, 13 Oct 2024 15:37:33 -0700
Subject: [PATCH] added page on onboarding, profile.ts for supabase queries

---
 api/supabase/queries/profiles.ts |  13 +++
 app/onboarding/page.tsx          | 179 +++++++++++++++++++++++++++++++
 types/schema.d.ts                |   2 +
 3 files changed, 194 insertions(+)
 create mode 100644 api/supabase/queries/profiles.ts

diff --git a/api/supabase/queries/profiles.ts b/api/supabase/queries/profiles.ts
new file mode 100644
index 0000000..628bf66
--- /dev/null
+++ b/api/supabase/queries/profiles.ts
@@ -0,0 +1,13 @@
+import { Profile } from '@/types/schema';
+import supabase from '../createClient';
+
+export async function upsertProfile(profile: Profile) {
+  const { data, error } = await supabase
+    .from('profiles')
+    .upsert(profile)
+    .select();
+
+  if (error) throw new Error(`Error upserting profile data: ${error.message}`);
+
+  return data[0];
+}
diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
index e69de29..2a93dd0 100644
--- a/app/onboarding/page.tsx
+++ b/app/onboarding/page.tsx
@@ -0,0 +1,179 @@
+'use client';
+
+import React, { useState } from 'react';
+import { upsertProfile } from '@/api/supabase/queries/profiles';
+import { Profile } from '@/types/schema';
+
+type UUID = `${string}-${string}-${string}-${string}-${string}`;
+const generateUUID = (): UUID => {
+  return crypto.randomUUID() as UUID;
+};
+const id = generateUUID();
+
+// Define the possible options for each question
+const states = ['Tennessee', 'Missouri'];
+const gardenTypes = ['Individual', 'Community', 'School'];
+const plotOptions = [
+  { label: 'yes', value: true },
+  { label: 'no', value: false },
+];
+//Interfaces and props to avoid typ errors on Lint
+interface StateSelectionProps {
+  selectedState: string;
+  setSelectedState: React.Dispatch<React.SetStateAction<string>>;
+}
+
+interface GardenTypeSelectionProps {
+  selectedGardenType: string;
+  setSelectedGardenType: React.Dispatch<React.SetStateAction<string>>;
+}
+
+interface PlotSelectionProps {
+  selectedPlot: boolean | null;
+  setSelectedPlot: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+// Select State
+const StateSelection: React.FC<StateSelectionProps> = ({
+  selectedState,
+  setSelectedState,
+}) => {
+  return (
+    <div>
+      <h2>Which state do you live in?</h2>
+      <select
+        value={selectedState}
+        onChange={e => setSelectedState(e.target.value)}
+      >
+        <option value="" disabled>
+          Select a state
+        </option>
+        {states.map(state => (
+          <option key={state} value={state}>
+            {state}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+// Step 2: Select garden type
+
+const GardenTypeSelection: React.FC<GardenTypeSelectionProps> = ({
+  selectedGardenType,
+  setSelectedGardenType,
+}) => {
+  return (
+    <div>
+      <h2>What type of garden do you want to create?</h2>
+      {gardenTypes.map(type => (
+        <label key={type}>
+          <input
+            type="radio"
+            name="gardenType"
+            value={type}
+            checked={selectedGardenType === type}
+            onChange={e => setSelectedGardenType(e.target.value)}
+          />
+          {type}
+        </label>
+      ))}
+    </div>
+  );
+};
+
+// Step 3: Do you have a plot?
+const PlotSelection: React.FC<PlotSelectionProps> = ({
+  selectedPlot,
+  setSelectedPlot,
+}) => {
+  return (
+    <div>
+      <h2>Do you already have a plot?</h2>
+      {plotOptions.map(option => (
+        <label key={option.label}>
+          <input
+            type="radio"
+            name="plot"
+            value={String(option.value)}
+            checked={selectedPlot === option.value}
+            onChange={() => setSelectedPlot(option.value)}
+          />
+          {option.label}
+        </label>
+      ))}
+    </div>
+  );
+};
+
+// Main Onboarding Component
+const OnboardingFlow = () => {
+  const [step, setStep] = useState(1);
+  const [selectedState, setSelectedState] = useState<string>('');
+  const [selectedGardenType, setSelectedGardenType] = useState<string>('');
+  const [selectedPlot, setSelectedPlot] = useState<boolean>(false);
+
+  const handleNext = () => {
+    setStep(step + 1);
+  };
+
+  const handleBack = () => {
+    setStep(step - 1);
+  };
+
+  const handleSubmit = async () => {
+    const profile: Profile = {
+      user_id: id,
+      state: selectedState,
+      email: '',
+      phone_num: '',
+      user_type: selectedGardenType,
+      has_plot: selectedPlot,
+    };
+    try {
+      const updatedProfile = await upsertProfile(profile);
+      console.log('Profile successfully upserted:', updatedProfile);
+    } catch (err) {
+      console.error('Error upserting profile:', err);
+    } finally {
+    }
+    console.log('Submitted data: ', profile);
+    // Handle form submission, e.g., send to a server or display a confirmation
+  };
+
+  return (
+    <div>
+      {step === 1 && (
+        <StateSelection
+          selectedState={selectedState}
+          setSelectedState={setSelectedState}
+        />
+      )}
+      {step === 2 && (
+        <GardenTypeSelection
+          selectedGardenType={selectedGardenType}
+          setSelectedGardenType={setSelectedGardenType}
+        />
+      )}
+      {step === 3 && (
+        <PlotSelection
+          selectedPlot={selectedPlot}
+          setSelectedPlot={setSelectedPlot}
+        />
+      )}
+
+      <div>
+        {step > 1 && <button onClick={handleBack}>Back</button>}
+        {step < 3 && (
+          <button onClick={handleNext} disabled={!selectedState && step === 1}>
+            Next
+          </button>
+        )}
+        {step === 3 && <button onClick={handleSubmit}>Submit</button>}
+      </div>
+    </div>
+  );
+};
+
+export default OnboardingFlow;
diff --git a/types/schema.d.ts b/types/schema.d.ts
index 81bfeb5..6b7e3f5 100644
--- a/types/schema.d.ts
+++ b/types/schema.d.ts
@@ -3,10 +3,12 @@ import type { UUID } from 'crypto';
 export type Season = 'SPRING' | 'SUMMER' | 'FALL' | 'WINTER';
 
 export interface Profile {
+  user_id: UUID;
   state: string;
   email: string;
   phone_num: string;
   user_type: string;
+  has_plot: boolean;
 }
 
 export interface Plant {