feat: stepper to navigate response collection (#45)

Author: swouf

src/interfaces/interactionProcess.ts

@@ -29,12 +29,12 @@ export type Phase = {
 
 export const InputPhase: Phase = {
   phase: IdeationPhases.Input,
-  label: t('SUBMIT_NEW_IDEA_STEP_TITLE'),
+  label: t('RESPONSE_COLLECTION.STEPPER.INPUT_STEP_LABEL'),
 };
 
 export const ChoosePhase: Phase = {
   phase: IdeationPhases.Choose,
-  label: t('READ_IDEAS_STEP_TITLE'),
+  label: t('RESPONSE_COLLECTION.STEPPER.CHOOSE_STEP_LABEL'),
 };
 
 export enum ResponseVisibilityMode {

src/langs/en.json

@@ -8,8 +8,6 @@
     "BUILD_ON_THIS_IDEA": "Build on this idea",
     "IDEA_TOO_LONG_ALERT": "Your idea is too long. Please, try to be more concise.",
     "IDEA_SUBMITTED_SUCCESS": "Your idea was successfully submitted.",
-    "SUBMIT_NEW_IDEA_STEP_TITLE": "Submit a new idea",
-    "READ_IDEAS_STEP_TITLE": "Find inspiration",
     "EDIT": "Edit",
     "DELETE": "Delete",
     "COMING_SOON": "Coming soon!",
@@ -61,6 +59,12 @@
         }
       }
     },
+    "RESPONSE_COLLECTION": {
+      "STEPPER": {
+        "INPUT_STEP_LABEL": "Submit your response",
+        "CHOOSE_STEP_LABEL": "Read the responses of other participants"
+      }
+    },
     "SAVE": "Save",
     "CHOOSE_RESPONSE_HEADER_TEXT": "Read these responses that have been proposed by other participants. Choose one to build upon or propose a new response.",
     "NO_IDEAS_TO_SHOW_TEXT": "The other participants have not submitted enough ideas yet. Once they have, these ideas will appear here.",

src/modules/responseCollection/PhaseStepper.tsx

@@ -1,4 +1,4 @@
-import { StepLabel } from '@mui/material';
+import { StepButton } from '@mui/material';
 import Step from '@mui/material/Step';
 import Stepper from '@mui/material/Stepper';
 
@@ -14,14 +14,14 @@ const PhasesStepper = (props: {
   const { activeStep, steps, selectStep } = props;
   const sortedSteps = steps.sort((a, b) => a.phase - b.phase);
   return (
-    <Stepper activeStep={activeStep}>
+    <Stepper nonLinear activeStep={activeStep}>
       {sortedSteps.map((step) => (
         <Step key={step.label}>
-          <StepLabel>{step.label}</StepLabel>
-          {/* TODO: Add interactivity to the stepper.
+          {/* <StepLabel>{step.label}</StepLabel> */}
+          {/* TODO: Add interactivity to the stepper. */}
           <StepButton onClick={() => selectStep && selectStep(step.phase)}>
             {step.label}
-          </StepButton> */}
+          </StepButton>
         </Step>
       ))}
     </Stepper>

src/modules/responseCollection/ResponseCollection.tsx

@@ -53,6 +53,12 @@ const ResponseCollection: FC = () => {
     setOpenSnackbar(false);
   };
 
+  useEffect(() => {
+    if (phase === IdeationPhases.Choose) {
+      setChosenIdea(undefined);
+    }
+  }, [phase]);
+
   useEffect(() => {
     if (isSuccess) {
       const currentIdeaSet = myResponsesSets.find(
@@ -113,13 +119,11 @@ const ResponseCollection: FC = () => {
           height="100%"
           spacing={4}
         >
-          {ideas && ideas.length > 1 && (
-            <PhasesStepper
-              activeStep={phase}
-              steps={[InputPhase, ChoosePhase]}
-              // selectStep={(newPhase: number) => setPhase(newPhase)}
-            />
-          )}
+          <PhasesStepper
+            activeStep={phase}
+            steps={[InputPhase, ChoosePhase]}
+            selectStep={(newPhase: number) => setPhase(newPhase)}
+          />
           <Instructions />
           {renderPhaseOfIdeation()}
           <MyResponses />