wip: preventing routing if fields not filled

calblueprint · Oct 30, 2024 · c08a366 · c08a366
1 parent 521b800
commit c08a366
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 20 deletions.
diff --git a/app/onboarding/general/page.tsx b/app/onboarding/general/page.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable react/no-unescaped-entities */
 'use client';
 
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
+import router from 'next/dist/client/router';
 import Back from '@/public/images/back.svg';
 import { OnboardingContext } from '@/utils/onboardingContext';
 import {
@@ -14,7 +15,6 @@ import {
   InlineContainer,
   Input,
   Rectangle,
-  StyledLink,
   Title,
 } from '../styles';
 import { Checkbox, RedAsterisk, UpdateContainer, UpdateText } from './styles';
@@ -23,7 +23,6 @@ export default function Onboarding() {
   const onboardingContext = useContext(OnboardingContext);
 
   if (!onboardingContext) return null;
-
   const { generalInfo, setGeneralInfo } = onboardingContext;
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -34,6 +33,17 @@ export default function Onboarding() {
     });
   };
 
+  const handleSubmit = () => {
+    if (
+      !generalInfo.firstName ||
+      !generalInfo.lastName ||
+      !generalInfo.phoneNumber
+    ) {
+      return;
+    }
+    router.push('/onboarding/preferences');
+  };
+
   return (
     <Background>
       <InlineContainer>
@@ -85,13 +95,11 @@ export default function Onboarding() {
           </UpdateContainer>
         </Container>
 
-        <StyledLink href="/onboarding/preferences">
-          <ButtonContainer>
-            <ContinueButton>
-              <ContinueText>Continue</ContinueText>
-            </ContinueButton>
-          </ButtonContainer>
-        </StyledLink>
+        <ButtonContainer>
+          <ContinueButton onClick={handleSubmit}>
+            <ContinueText>Continue</ContinueText>
+          </ContinueButton>
+        </ButtonContainer>
       </InlineContainer>
     </Background>
   );

diff --git a/app/onboarding/review/page.tsx b/app/onboarding/review/page.tsx
@@ -1,5 +1,9 @@
+'use client';
+
+import { useContext } from 'react';
 import Link from 'next/link';
 import Back from '@/public/images/back.svg';
+import { OnboardingContext } from '@/utils/onboardingContext';
 import { Background, InlineContainer, Rectangle, StyledLink } from '../styles';
 import {
   ConfirmButton,
@@ -12,6 +16,12 @@ import {
 } from './styles';
 
 export default function Review() {
+  const onboardingContext = useContext(OnboardingContext);
+
+  if (!onboardingContext) return null;
+
+  const { preferences, generalInfo, submitOnboardingData } = onboardingContext;
+
   return (
     <Background>
       <InlineContainer>
@@ -26,29 +36,29 @@ export default function Review() {
         <ReviewContainer>
           <Title>Did we get everything?</Title>
           <text>First Name</text>
-          <SmallText>Lorem Ipsum</SmallText>
+          <SmallText>{generalInfo.firstName}</SmallText>
           <text>Last Name</text>
-          <SmallText>Lorem Ipsum</SmallText>
+          <SmallText>{generalInfo.lastName}</SmallText>
           <text>Phone Number</text>
-          <SmallText>Lorem Ipsum</SmallText>
+          <SmallText>{generalInfo.phoneNumber}</SmallText>
 
           <Line />
 
           <text>Facility Type</text>
-          <SmallText>Lorem Ipsum</SmallText>
+          <SmallText>{preferences.facilityType}</SmallText>
           <text>Preferred Location</text>
-          <SmallText>Lorem Ipsum</SmallText>
+          <SmallText>{preferences.location}</SmallText>
           <text>Audience</text>
-          <SmallText>Lorem Ipsum</SmallText>
+          <SmallText>{preferences.audience}</SmallText>
           <text>Preferred Equipment</text>
-          <SmallText>Lorem Ipsum</SmallText>
+          <SmallText>{preferences.preferredEquipment}</SmallText>
           <text>Type of Act</text>
-          <SmallText>Lorem Ipsum</SmallText>
+          <SmallText>{preferences.typeOfAct}</SmallText>
           <text>Genre</text>
-          <SmallText>Lorem Ipsum</SmallText>
+          <SmallText>{preferences.genre}</SmallText>
 
           <StyledLink href="/onboarding/yay">
-            <ConfirmButton>
+            <ConfirmButton onClick={submitOnboardingData}>
               <ConfirmText>Confirm</ConfirmText>
             </ConfirmButton>
           </StyledLink>