extracted progress value and put it into stepper-store

Author: ES-Legacy

app/code-area/page.tsx

@@ -9,7 +9,7 @@ import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
 import { cn } from "@/lib/utils";
 import useCodeAreaStore from "@/data-store/code-area-store";
-import useStepperStore from "@/data-store/stepper-store";
+import { useStepperStore } from "@/data-store/stepper-store";
 import validateUser from "@/lib/validate-user";
 
 type MosaicKey = "EDITOR" | "PREVIEW";

components/core/editor.tsx

@@ -9,7 +9,7 @@ import useCodeAreaStore from "@/data-store/code-area-store";
 import { Button } from "../ui/button";
 import StaticPrompt from "./target-image";
 import LandingPageChallengeCode from "../landing/test-challenges/challenge-code";
-import useStepperStore from "@/data-store/stepper-store";
+import { useStepperStore } from "@/data-store/stepper-store";
 
 const Editor = () => {
     const { code, setCode } = useSessionStore();

components/ui/useCode/Email-FormField.tsx

@@ -6,7 +6,7 @@ import {
     FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import useStepperStore from "@/data-store/stepper-store";
+import { useStepperStore } from "@/data-store/stepper-store";
 
 export function EmailFormField(form: any) {
     const { email } = useStepperStore();

components/ui/useCode/StepOne.tsx

@@ -3,7 +3,10 @@ import * as z from "zod";
 import { useForm } from "react-hook-form";
 import { Button } from "@/components/ui/button";
 import { Form } from "@/components/ui/form";
-import useStepperStore from "@/data-store/stepper-store";
+import {
+    useStepperStore,
+    progressIncrements,
+} from "@/data-store/stepper-store";
 import { EmailFormField } from "./Email-FormField";
 import { TOSFormField } from "./TOS-FormField";
 import { FormSubmitting } from "./Submitting";
@@ -12,8 +15,6 @@ export function StepOne() {
     const { progress, setProgress, step, setStep, email, setEmail, setCheck } =
         useStepperStore();
 
-    const PROGRESS_INCREMENT: number = 33;
-
     const formStepOneSchema = z.object({
         email: z
             .string()
@@ -42,7 +43,7 @@ export function StepOne() {
             setCheck(values.accept);
 
             if (step === 1) {
-                setProgress(progress + PROGRESS_INCREMENT);
+                setProgress(progress + progressIncrements);
                 setStep(step + 1);
             }
         }

components/ui/useCode/StepTwo.tsx

@@ -3,7 +3,10 @@ import * as z from "zod";
 import { useForm } from "react-hook-form";
 import { Button } from "@/components/ui/button";
 import { Form } from "@/components/ui/form";
-import useStepperStore from "@/data-store/stepper-store";
+import {
+    progressIncrements,
+    useStepperStore,
+} from "@/data-store/stepper-store";
 import { FormSubmitting } from "./Submitting";
 import useSessionStore from "@/data-store/session-store";
 import LandingPageCode from "@/components/landing/test-challenges/placeholder-code";
@@ -20,8 +23,6 @@ const formStepTwoSchema = z.object({
 });
 
 export function StepTwo() {
-    const PROGRESS_INCREMENT: number = 33;
-
     const { progress, setProgress, step, setStep, setChallenge } =
         useStepperStore();
     const { setCode } = useSessionStore();
@@ -39,14 +40,14 @@ export function StepTwo() {
             console.log(selection);
             setCode(LandingPageCode());
             setChallenge(selection);
-            setProgress(progress + PROGRESS_INCREMENT);
+            setProgress(progress + progressIncrements);
 
             router.push("/code-area");
         }
     }
 
     async function onBack() {
-        setProgress(progress - PROGRESS_INCREMENT);
+        setProgress(progress - progressIncrements);
         setStep(step - 1);
     }
 

components/ui/useCode/Stepper-Form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import useStepperStore from "@/data-store/stepper-store";
+import { useStepperStore } from "@/data-store/stepper-store";
 
 import { StepOne } from "./StepOne";
 import { StepTwo } from "./StepTwo";

components/ui/useCode/StepperCard.tsx

@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/card";
 
 import { Progress } from "@/components/ui/progress";
-import useStepperStore from "@/data-store/stepper-store";
+import { useStepperStore } from "@/data-store/stepper-store";
 import { StepperForm } from "./Stepper-Form";
 
 export function StepperCard() {

components/ui/useCode/TOS-FormField.tsx

@@ -7,14 +7,16 @@ import {
     FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import useStepperStore from "@/data-store/stepper-store";
+import {
+    progressIncrements,
+    useStepperStore,
+} from "@/data-store/stepper-store";
 import Link from "next/link";
 
 let checked: boolean = false;
 
 export function TOSFormField(form: any) {
     const { check, setCheck, progress, setProgress } = useStepperStore();
-    const PROGRESS_INCREMENT: number = 33;
 
     return (
         <FormField
@@ -29,12 +31,13 @@ export function TOSFormField(form: any) {
                                 checked={field.value}
                                 onChange={field.onChange}
                                 onClick={() => {
+                                    console.log(progressIncrements);
                                     checked = !checked;
                                     setCheck(checked);
                                     setProgress(
                                         checked
-                                            ? progress + PROGRESS_INCREMENT
-                                            : progress - PROGRESS_INCREMENT
+                                            ? progress + progressIncrements
+                                            : progress - progressIncrements
                                     );
                                 }}
                                 className='peer mr-[10px] mt-[5px] h-4 w-[20px] cursor-pointer'

data-store/stepper-store.ts

@@ -26,4 +26,8 @@ const useStepperStore = create<StepperStore>((set) => ({
     setChallenge: (newChallenge) => set({ challenge: newChallenge }),
 }));
 
-export default useStepperStore;
+const progessSteps: number = 3;
+const maxProgress: number = 100 - (100 % progessSteps);
+const progressIncrements: number = maxProgress / progessSteps;
+
+export { useStepperStore, progessSteps, maxProgress, progressIncrements };

lib/validate-user.ts

@@ -1,6 +1,8 @@
 /* validationType is a variable created to trigger which conditional is returned to validate authorization to a section of the website.
     Currently, it doesn't do anything, however it allows for more scalability if there are multiple different validations neccecary to authorize a user. */
 
+import { maxProgress } from "@/data-store/stepper-store";
+
 export default function validateUser(
     validationType: string,
     email?: string,
@@ -14,7 +16,7 @@ export default function validateUser(
         return (
             email === "" ||
             check === false ||
-            progress !== (99 || 100) ||
+            progress !== maxProgress ||
             challenge === ""
         );
     } else {