Implement Unstyled One-page Onboarding Flow + Update Profiles Table

[ccatherinetan]

Context

We want to implement the functionality of the onboarding flow, including adding the user's profile to the profiles table at the end of onboarding. Later, we'll also create/update the ProfileContext, from which other pages in the app can access profile fields that were filled during onboarding!

After this sprint, a user should be able to answer the 3 onboarding questions and have their answers stored on supabase. (The other onboarding questions might be pushed to MVP.)

1. Which state do you live in? (Tennessee, Missouri)
2. What type of garden are you starting? (School, Community, Individual)
3. Do you have a plot to plant in? (Yes, No)

Since the auth context is not done yet, we can just hardcode a user_id for the purpose of pushing profile data to supabase.

Task Overview

• you can copy the branch name for this issue and branch off your PR from last week to access your previous onboarding code!
• Write a supabase query upsertProfile (route: api/supabase/queries/profiles.ts). See documentation on upsert or IJP's profile query example.
• Refactor existing onboarding flow so that all 3 q's will be on the same page (route app/onboarding/page.tsx). Since all 3 questions will be on the same page for now, we mitigate the need for an OnboardingContext.
  • See below for what chatgpt suggested for a single-route, multi-question onboarding page.
  • The main modification we'd make is to add a 4th screen for confirmation/review. Once the user clicks "Submit", we'd push their onboarding data to supabase.
• the onboarding flow can be unstyled for now, but we'll prob be going with the radio buttons. i've also listed the wording of the questionss above (Missouri not Minnesota, unlike the designs), but plz contact Catherine and/or Kyrene if you have questions about styling.

import React, { useState } from 'react';

// Define the possible options for each question
const states = ["Tennessee", "Missouri"];
const gardenTypes = ["Individual", "Community", "School"];
const plotOptions = ["Yes", "No"];

// Step 1: Select state
const StateSelection = ({ selectedState, setSelectedState }: any) => {
  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 = ({ selectedGardenType, setSelectedGardenType }: any) => {
  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 = ({ selectedPlot, setSelectedPlot }: any) => {
  return (
    <div>
      <h2>Do you already have a plot?</h2>
      {plotOptions.map((option) => (
        <label key={option}>
          <input
            type="radio"
            name="plot"
            value={option}
            checked={selectedPlot === option}
            onChange={(e) => setSelectedPlot(e.target.value)}
          />
          {option}
        </label>
      ))}
    </div>
  );
};

// Main Onboarding Component
const OnboardingFlow = () => {
  const [step, setStep] = useState(1);
  const [selectedState, setSelectedState] = useState("");
  const [selectedGardenType, setSelectedGardenType] = useState("");
  const [selectedPlot, setSelectedPlot] = useState("");

  const handleNext = () => {
    setStep(step + 1);
  };

  const handleBack = () => {
    setStep(step - 1);
  };

  const handleSubmit = () => {
    const data = {
      state: selectedState,
      gardenType: selectedGardenType,
      plot: selectedPlot,
    };
    console.log("Submitted data: ", data);
    // 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} disabled={!selectedPlot}>Submit</button>}
      </div>
    </div>
  );
};

export default OnboardingFlow;