refactor: the progression bar is now a position bar

tournesol-app · Nov 7, 2024 · 1a6da34 · 1a6da34
1 parent de20c6f
commit 1a6da34
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 24 deletions.
diff --git a/frontend/src/features/comparisons/ComparisonInput.tsx b/frontend/src/features/comparisons/ComparisonInput.tsx
@@ -1,24 +1,25 @@
-import React from 'react';
+import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
   Alert,
   Box,
   LinearProgress,
   Paper,
-  Typography,
   useMediaQuery,
 } from '@mui/material';
 
 import { useCurrentPoll } from 'src/hooks';
+import { useOrderedCriteria } from 'src/hooks/useOrderedCriteria';
 import { ComparisonRequest } from 'src/services/openapi';
 import ComparisonSliders from 'src/features/comparisons/ComparisonSliders';
+import { TutorialContext } from 'src/features/comparisonSeries/TutorialContext';
+import { getCriterionScoreMax } from 'src/utils/criteria';
 
 import CriteriaButtons from './inputs/CriteriaButtons';
 import { BUTTON_SCORE_MAX } from './inputs/CriterionButtons';
 import { SLIDER_SCORE_MAX } from './CriteriaSlider';
 import CriteriaButtonsScoreReview from './inputs/CriteriaButtonsScoreReview';
-import { getCriterionScoreMax } from 'src/utils/criteria';
 
 interface ComparisonInputProps {
   uidA: string;
@@ -28,6 +29,38 @@ interface ComparisonInputProps {
   isComparisonPublic: boolean;
 }
 
+interface PositionBarProps {
+  position: number;
+  initialComparison: ComparisonRequest | null;
+}
+
+const PositionBar = ({ position, initialComparison }: PositionBarProps) => {
+  const tutorial = useContext(TutorialContext);
+  const { options, criterias } = useCurrentPoll();
+  const displayedCriteria = useOrderedCriteria();
+
+  const criterion = displayedCriteria[position];
+  const criterionScore = initialComparison?.criteria_scores.find(
+    (crit) => crit.criteria === criterion.name
+  );
+
+  const progressHidden =
+    tutorial.isActive ||
+    (criterion.name === options?.mainCriterionName &&
+      criterionScore == undefined);
+
+  if (progressHidden) {
+    return <></>;
+  }
+
+  return (
+    <LinearProgress
+      variant="determinate"
+      value={(position / criterias.length) * 100}
+    />
+  );
+};
+
 /**
  * A component displaying different comparison inputs depending to the user's
  * device.
@@ -40,9 +73,12 @@ const ComparisonInput = ({
   isComparisonPublic,
 }: ComparisonInputProps) => {
   const { t } = useTranslation();
-  const { options, criterias } = useCurrentPoll();
+  const { options } = useCurrentPoll();
   const pointerFine = useMediaQuery('(pointer:fine)', { noSsr: true });
 
+  // Position of the displayed criterion in the list of criteria.
+  const [position, setPosition] = useState(0);
+
   const mainScoreMax = getCriterionScoreMax(
     initialComparison?.criteria_scores,
     options?.mainCriterionName
@@ -52,9 +88,9 @@ const ComparisonInput = ({
   const slidersUsed = mainScoreMax == SLIDER_SCORE_MAX;
   const fallBackToButtons = !buttonsUsed && !slidersUsed && !pointerFine;
 
-  const progress = initialComparison?.criteria_scores.length
-    ? (initialComparison?.criteria_scores.length / criterias.length) * 100
-    : 0;
+  const changePosition = (newPos: number) => {
+    setPosition(newPos);
+  };
 
   return (
     <>
@@ -70,25 +106,13 @@ const ComparisonInput = ({
               uidA={uidA || ''}
               uidB={uidB || ''}
               onSubmit={onSubmit}
+              onPositionChanged={changePosition}
+              initialComparison={initialComparison}
+            />
+            <PositionBar
+              position={position}
               initialComparison={initialComparison}
             />
-            <Box
-              display="flex"
-              flexDirection="row"
-              alignItems="center"
-              columnGap={2}
-            >
-              <Box width="100%">
-                <LinearProgress
-                  color="success"
-                  variant="determinate"
-                  value={progress}
-                />
-              </Box>
-              <Typography color="text.secondary">
-                <strong>{progress}%</strong>
-              </Typography>
-            </Box>
             <CriteriaButtonsScoreReview initialComparison={initialComparison} />
           </Box>
         </>

diff --git a/frontend/src/features/comparisons/inputs/CriteriaButtons.tsx b/frontend/src/features/comparisons/inputs/CriteriaButtons.tsx
@@ -23,6 +23,8 @@ interface CriteriaButtonsProps {
   uidB: string;
   initialComparison: ComparisonRequest | null;
   onSubmit: (c: ComparisonRequest, partialUpdate?: boolean) => Promise<void>;
+  // Called when a new criterion is displayed.
+  onPositionChanged: (pos: number) => void;
 }
 
 const removeCriteria = (
@@ -43,6 +45,7 @@ const CriteriaButtons = ({
   uidB,
   initialComparison,
   onSubmit,
+  onPositionChanged,
 }: CriteriaButtonsProps) => {
   const { t } = useTranslation();
   const containerRef = useRef<HTMLElement>(null);
@@ -95,6 +98,7 @@ const CriteriaButtons = ({
 
     if (submittedScore === undefined) {
       setSlideIn(true);
+      onPositionChanged(nextCritPosition);
       return;
     }
 
@@ -113,6 +117,7 @@ const CriteriaButtons = ({
 
     try {
       await onSubmit(comparisonRequest, true);
+      onPositionChanged(nextCritPosition);
     } catch {
       setCritPosition(critPosition);
     } finally {