From 0dea07757cbe3f9dd5530cd7ef32692c32c6603b Mon Sep 17 00:00:00 2001 From: mamadoudicko Date: Tue, 5 Dec 2023 15:29:06 +0100 Subject: [PATCH] feat: update step icon if done --- .../components/Stepper/Stepper.tsx | 20 +--------- .../components/Stepper/components/Step.tsx | 39 +++++++++++++++++++ .../hooks/useBrainCreationSteps.ts | 14 +++---- .../components/AddBrainSteps/types.ts | 2 +- 4 files changed, 48 insertions(+), 27 deletions(-) create mode 100644 frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/Stepper/components/Step.tsx diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/Stepper/Stepper.tsx b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/Stepper/Stepper.tsx index 18946857ce0c..2d54aede87cf 100644 --- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/Stepper/Stepper.tsx +++ b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/Stepper/Stepper.tsx @@ -2,6 +2,7 @@ import { Fragment } from "react"; import { cn } from "@/lib/utils"; +import { Step } from "./components/Step"; import { useBrainCreationSteps } from "../../hooks/useBrainCreationSteps"; export const Stepper = (): JSX.Element => { @@ -11,24 +12,7 @@ export const Stepper = (): JSX.Element => {
{steps.map((step, index) => ( -
-
-
- {index + 1} -
- - {step.label} - -
-
+ {index < steps.length - 1 && ( // Add horizontal line for all but the last step
{ + const { currentStep, currentStepIndex } = useBrainCreationSteps(); + const isStepDone = index < currentStepIndex; + const stepContent = isStepDone ? : index + 1; + + return ( +
+
+
+ {stepContent} +
+ + {step.label} + +
+
+ ); +}; diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/hooks/useBrainCreationSteps.ts b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/hooks/useBrainCreationSteps.ts index 601e41f992ee..b0b962683848 100644 --- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/hooks/useBrainCreationSteps.ts +++ b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/hooks/useBrainCreationSteps.ts @@ -3,13 +3,13 @@ import { useTranslation } from "react-i18next"; import { CreateBrainProps } from "@/lib/components/AddBrainModal/types"; -import { StepperStep } from "../types"; +import { Step } from "../types"; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types export const useBrainCreationSteps = () => { const { t } = useTranslation("brain"); - const steps: StepperStep[] = [ + const steps: Step[] = [ { label: t("brain_type"), value: "BRAIN_TYPE", @@ -25,11 +25,11 @@ export const useBrainCreationSteps = () => { ]; const { watch, setValue } = useFormContext(); const currentStep = watch("brainCreationStep"); + const currentStepIndex = steps.findIndex( + (step) => step.value === currentStep + ); const goToNextStep = () => { - const currentStepIndex = steps.findIndex( - (step) => step.value === currentStep - ); if (currentStepIndex === -1 || currentStepIndex === steps.length - 1) { return; } @@ -39,9 +39,6 @@ export const useBrainCreationSteps = () => { }; const goToPreviousStep = () => { - const currentStepIndex = steps.findIndex( - (step) => step.value === currentStep - ); if (currentStepIndex === -1 || currentStepIndex === 0) { return; } @@ -55,5 +52,6 @@ export const useBrainCreationSteps = () => { steps, goToNextStep, goToPreviousStep, + currentStepIndex, }; }; diff --git a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/types.ts b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/types.ts index 9e72cc69457d..90b5d2992a16 100644 --- a/frontend/lib/components/AddBrainModal/components/AddBrainSteps/types.ts +++ b/frontend/lib/components/AddBrainModal/components/AddBrainSteps/types.ts @@ -1,6 +1,6 @@ import { BrainCreationStep } from "../../types"; -export type StepperStep = { +export type Step = { label: string; value: BrainCreationStep; };