refactor(Counter): update Counter component to use actionId and fetch…

… score dynamically
incubateur-ademe · Jan 16, 2025 · 36758d2 · 36758d2
1 parent 70fcfbf
commit 36758d2
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/app.territoiresentransitions.react/src/ui/referentiels/Card/ReferentielCard.tsx b/app.territoiresentransitions.react/src/ui/referentiels/Card/ReferentielCard.tsx
@@ -23,6 +23,7 @@ export const ReferentielCard = ({
   const collectiviteId = useCollectiviteId();
   const referentiel = referentielId(action.id);
 
+  // TODO: remove fake data
   const FAKE_pilotes = [
     {
       nom: 'John Doe',
@@ -67,17 +68,16 @@ export const ReferentielCard = ({
               }}
             />
             <div>
-              <Counter value={1} total={10} className="mb-3" />
+              <Counter actionId={action.id} className="mb-3" />
               <ActionProgressBar
                 action={action}
-                className=""
                 styleOptions={{ justify: 'start', fullWidth: true }}
               />
             </div>
           </>
         ) : (
           <div>
-            <Counter value={1} total={10} className="mb-3" />
+            <Counter actionId={action.id} className="mb-3" />
             <ActionProgressBar
               action={action}
               styleOptions={{ justify: 'start', fullWidth: true }}

diff --git a/app.territoiresentransitions.react/src/ui/score/Counter.tsx b/app.territoiresentransitions.react/src/ui/score/Counter.tsx
@@ -1,14 +1,20 @@
 import { Badge } from '@/ui';
 import classNames from 'classnames';
+import { useActionScore } from '../../core-logic/hooks/scoreHooks';
 
 type CounterProps = {
-  value: number;
-  total: number;
+  actionId: string;
   className?: string;
 };
 
-export const Counter = ({ value, total, className }: CounterProps) => {
-  const percentage = (value / total) * 100;
+export const Counter = ({ actionId, className }: CounterProps) => {
+  const score = useActionScore(actionId);
+
+  if (!score) return null;
+
+  const percentage = Number(
+    (score.point_fait / score.point_potentiel) * 100
+  ).toFixed(1);
 
   return (
     <div className={classNames('flex', className)}>
@@ -19,7 +25,7 @@ export const Counter = ({ value, total, className }: CounterProps) => {
         className="!rounded-r-none border-2 border-r-0"
       />
       <Badge
-        title={value && total ? `${value} / ${total} points` : 'Non renseigné'}
+        title={`${score.point_fait} / ${score.point_potentiel} points`}
         state="success"
         light
         className="!rounded-l-none border-2"

diff --git a/app.territoiresentransitions.react/src/ui/shared/actions/ExpandableAction.tsx b/app.territoiresentransitions.react/src/ui/shared/actions/ExpandableAction.tsx
@@ -67,8 +67,15 @@ export const ExpandableAction = ({
           >
             <ActionReferentielDisplayTitle action={action} isOpen={isOpen} />
             <div className="flex items-center">
-              <ActionProgressBar action={action} />
-              <Counter value={1} total={10} className="ml-28" />
+              <div className="w-48">
+                <ActionProgressBar
+                  action={action}
+                  styleOptions={{ fullWidth: true }}
+                />
+              </div>
+              <div className="w-96">
+                <Counter actionId={action.id} className="justify-end" />
+              </div>
             </div>
           </div>
         </div>