fix: deleted redundant state and useEffect,

kalkulacka-one · Dec 2, 2024 · b8bed18 · b8bed18
1 parent a10b5d8
commit b8bed18
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 25 deletions.
diff --git a/apps/design-system/stories/stepProgressFancy.stories.tsx b/apps/design-system/stories/stepProgressFancy.stories.tsx
@@ -19,6 +19,23 @@ const steps = {
     { answerId: "6", status: true }, //
     { answerId: "7", status: false },
     { answerId: "8", status: undefined }, // step with no sratus (e.g. not visited yet)
+    { answerId: "9", status: true }, // positive step (e.g. answerInFavour)
+    { answerId: "10", status: null },
+    { answerId: "11", status: null }, // neutral step (e.g. visited / skipped, answerNeutral)
+    { answerId: "12", status: false }, // negative step (e.g. answerAgainst)
+    { answerId: "13", status: true },
+    { answerId: "14", status: true }, //
+    { answerId: "15", status: false },
+    { answerId: "16", status: undefined }, // step with no sratus (e.g. not visited yet)
+    { answerId: "17", status: undefined }, // step with no sratus (e.g. not visited yet)
+    { answerId: "18", status: true }, // positive step (e.g. answerInFavour)
+    { answerId: "19", status: null },
+    { answerId: "20", status: null }, // neutral step (e.g. visited / skipped, answerNeutral)
+    { answerId: "21", status: false }, // negative step (e.g. answerAgainst)
+    { answerId: "22", status: true },
+    { answerId: "23", status: true }, //
+    { answerId: "24", status: false },
+    { answerId: "25", status: undefined }, // step with no sratus (e.g. not visited yet)
   ],
   totalQuestion: 4,
   currentQuestion: 8,

diff --git a/apps/web/app/[lang]/bottom-bar/page.tsx b/apps/web/app/[lang]/bottom-bar/page.tsx
@@ -14,23 +14,23 @@ const steps = {
     { answerId: "6", status: true }, //
     { answerId: "7", status: false },
     { answerId: "8", status: undefined }, // step with no sratus (e.g. not visited yet)
-    { answerId: "1", status: true }, // positive step (e.g. answerInFavour)
-    { answerId: "2", status: null },
-    { answerId: "3", status: null }, // neutral step (e.g. visited / skipped, answerNeutral)
-    { answerId: "4", status: false }, // negative step (e.g. answerAgainst)
-    { answerId: "5", status: null },
-    { answerId: "6", status: null }, //
-    { answerId: "7", status: null },
-    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
-    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
-    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
-    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
-    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
-    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
-    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
-    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
-    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
-    { answerId: "8", status: null }, // step with no sratus (e.g. not visited yet)
+    { answerId: "9", status: true }, // positive step (e.g. answerInFavour)
+    { answerId: "10", status: null },
+    { answerId: "11", status: null }, // neutral step (e.g. visited / skipped, answerNeutral)
+    { answerId: "12", status: false }, // negative step (e.g. answerAgainst)
+    { answerId: "13", status: true },
+    { answerId: "14", status: true }, //
+    { answerId: "15", status: false },
+    { answerId: "16", status: undefined }, // step with no sratus (e.g. not visited yet)
+    { answerId: "17", status: undefined }, // step with no sratus (e.g. not visited yet)
+    { answerId: "18", status: true }, // positive step (e.g. answerInFavour)
+    { answerId: "19", status: null },
+    { answerId: "20", status: null }, // neutral step (e.g. visited / skipped, answerNeutral)
+    { answerId: "21", status: false }, // negative step (e.g. answerAgainst)
+    { answerId: "22", status: true },
+    { answerId: "23", status: true }, //
+    { answerId: "24", status: false },
+    { answerId: "25", status: undefined }, // step with no sratus (e.g. not visited yet)
   ],
   totalQuestion: 4,
   currentQuestion: 8,

diff --git a/packages/design-system/src/ui/progress/stepProgressFancy.tsx b/packages/design-system/src/ui/progress/stepProgressFancy.tsx
@@ -1,4 +1,3 @@
-import React, { useEffect } from "react";
 import { cva, VariantProps } from "class-variance-authority";
 
 type Props = {
@@ -33,12 +32,6 @@ const stepProgressVariants = cva("", {
 const StepProgressFancy = ({ steps }: Props): JSX.Element => {
   const answerCount = steps.answers.length;
 
-  const [stepCount, setStepCount] = React.useState(answerCount);
-
-  useEffect(() => {
-    setStepCount(stepCount);
-  }, [answerCount]);
-
   const answersData = steps.answers;
 
   const { currentQuestion } = steps;
@@ -47,7 +40,9 @@ const StepProgressFancy = ({ steps }: Props): JSX.Element => {
       {answersData.map((answer, index) => {
         return (
           <div
-            style={{ width: `calc(100vw / ${stepCount})` }}
+            // ID as key ok?
+            key={answer.answerId}
+            style={{ width: `calc(100vw / ${answerCount})` }}
             className={`${stepProgressVariants({
               status:
                 answer.status === true