feat(completions): display completions

Clm-Roig · Mar 17, 2022 · b439cc0 · b439cc0
1 parent ae23094
commit b439cc0
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 22 deletions.
diff --git a/src/components/TrackerCard/TrackerCard.spec.tsx b/src/components/TrackerCard/TrackerCard.spec.tsx
@@ -8,23 +8,34 @@ import { v4 } from 'uuid';
 const tracker1 = {
   id: v4(),
   beginDate: subDays(new Date(), 3).toString(),
-  defaultQuantity: 15,
   duration: 13,
-  name: 'Faire des pompes',
+  name: 'Musculation',
   remainingDays: 10,
+  requiredCompletions: [
+    {
+      quantity: 10,
+      unit: 'push-ups'
+    },
+    {
+      quantity: 15,
+      unit: 'squats'
+    }
+  ],
   status: TrackerStatus.active,
-  unit: 'pompes',
   entries: []
 };
 const setup = () => render(<TrackerCard tracker={tracker1} />);
 
 describe('<TrackerCard />', () => {
   it('shows tracker informations', () => {
     setup();
-    const { beginDate, name, defaultQuantity, remainingDays, unit } = tracker1;
+    const { beginDate, name, remainingDays, requiredCompletions } = tracker1;
     expect(screen.getByText(name)).toBeInTheDocument();
     expect(screen.getByText('Reste ' + remainingDays + ' jours')).toBeInTheDocument();
     expect(screen.getByText('Commencé le ' + formatDate(new Date(beginDate)))).toBeInTheDocument();
-    expect(screen.getByText(defaultQuantity + ' ' + unit)).toBeInTheDocument();
+    for (const completion of requiredCompletions) {
+      const { quantity, unit } = completion;
+      expect(screen.getByText(quantity + ' ' + unit)).toBeInTheDocument();
+    }
   });
 });
diff --git a/src/components/TrackerCard/TrackerCard.tsx b/src/components/TrackerCard/TrackerCard.tsx
@@ -11,11 +11,13 @@ interface Props {
   cardProps?: CardProps;
 }
 const TrackerCard: FC<Props> = ({ tracker, cardProps }) => {
-  const { beginDate, defaultQuantity, name, remainingDays, unit } = tracker;
+  const { beginDate, name, remainingDays, requiredCompletions } = tracker;
   return (
     <Card {...cardProps}>
       <TrackerCardHeader beginDate={beginDate} name={name} remainingDays={remainingDays} />
-      {defaultQuantity && <TrackerCardContent defaultQuantity={defaultQuantity} unit={unit} />}
+      {requiredCompletions.length > 0 && (
+        <TrackerCardContent requiredCompletions={requiredCompletions} />
+      )}
       <TrackerCardActions />
     </Card>
   );

diff --git a/src/components/TrackerCard/TrackerCardContent.tsx b/src/components/TrackerCard/TrackerCardContent.tsx
@@ -1,20 +1,26 @@
 import { FC } from 'react';
-import { CardContent, CardContentProps, Chip } from '@mui/material';
+import { CardContent, CardContentProps, Chip, Box } from '@mui/material';
+import Completion from '../../models/Completion';
 
 interface Props {
   cardContentProps?: CardContentProps;
-  defaultQuantity: number;
-  unit?: string;
+  requiredCompletions: Completion[];
 }
 
-const TrackerCardContent: FC<Props> = ({ cardContentProps, defaultQuantity, unit }) => {
-  let stringToDisplay = defaultQuantity.toString();
-  if (unit) {
-    stringToDisplay += ' ' + unit;
-  }
+const TrackerCardContent: FC<Props> = ({ cardContentProps, requiredCompletions }) => {
   return (
     <CardContent {...cardContentProps}>
-      <Chip clickable={true} color="primary" sx={{ fontSize: 16 }} label={stringToDisplay} />
+      <Box display="flex" gap={0.5} flexWrap={'wrap'}>
+        {requiredCompletions.map((c, idx) => (
+          <Chip
+            key={c.quantity.toString() + idx}
+            clickable={true}
+            color="primary"
+            label={c.unit ? c.quantity.toString() + ' ' + c.unit : c.quantity.toString()}
+            sx={{ fontSize: 16 }}
+          />
+        ))}
+      </Box>
     </CardContent>
   );
 };

diff --git a/src/store/trackers/trackers.selectors.spec.ts b/src/store/trackers/trackers.selectors.spec.ts
@@ -23,19 +23,31 @@ describe('trackers selector', () => {
             beginDate: new Date().toString(),
             entries: [],
             name: 'Do',
-            quantity: 10,
-            status: TrackerStatus.active,
-            unit: 'push-ups'
+            requiredCompletions: [
+              {
+                quantity: 10,
+                unit: 'push-ups'
+              },
+              {
+                quantity: 15,
+                unit: 'squats'
+              },
+            ],
+            status: TrackerStatus.active
           },
           {
             id: v4(),
             beginDate: new Date().toString(),
             duration: 10,
             entries: [],
             name: 'Eat',
-            quantity: 6,
-            status: TrackerStatus.active,
-            unit: 'vegetables or fruits'
+            requiredCompletions: [
+              {
+                quantity: 6,
+                unit: 'vegetables or fruits'
+              }
+            ],
+            status: TrackerStatus.active
           }
         ]
       }