Merge pull request #27 from SocialGouv/Estimation

feat: Estimation
SocialGouv · May 11, 2022 · ca4f21e · ca4f21e
2 parents 0220712 + 4ea483d
commit ca4f21e
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 15 deletions.
diff --git a/src/components/DrinksCategory.js b/src/components/DrinksCategory.js
@@ -8,8 +8,9 @@ export const getDrinksKeysFromCategory = (categoryKey, catalog) =>
   catalog.filter((drink) => drink.categoryKey === categoryKey).map(({ drinkKey }) => drinkKey);
 
 export const getDrinkQuantityFromDrinks = (drinks, drinkKey) => {
+  if (drinks === undefined) drinks = "Cocktails et spiritueux";
   const drink = drinks.find((d) => d.drinkKey === drinkKey);
-  if (drink) return drink.quantity;
+  if (drink !== undefined) return drink.quantity;
   return 0;
 };
 

diff --git a/src/hooks/useStateWithAsyncStorage.js b/src/hooks/useStateWithAsyncStorage.js
@@ -1,11 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { useFocusEffect } from '@react-navigation/native';
+import { useFocusEffect, useIsFocused } from '@react-navigation/native';
 
 const useStateWithAsyncStorage = (key, initValue, debug_resetOnInit = false) => {
   const [value, setValue] = useState(initValue);
 
   const valueType = useMemo(() => typeof initValue, [initValue]);
+  const isFocused = useIsFocused()
 
   const getInitItemValue = async () => {
     if (debug_resetOnInit) return AsyncStorage.removeItem(key);
@@ -26,12 +27,8 @@ const useStateWithAsyncStorage = (key, initValue, debug_resetOnInit = false) =>
   };
 
   useEffect(() => {
-    getInitItemValue();
-  }, []);
-
-  useFocusEffect(() => {
-    getInitItemValue();
-  });
+    if (isFocused) getInitItemValue();
+  }, [isFocused]);
 
   return [value, setValueInAsyncStorage];
 };

diff --git a/src/scenes/ConsoFollowUp/ConsoFollowUp.js b/src/scenes/ConsoFollowUp/ConsoFollowUp.js
@@ -58,7 +58,7 @@ const ConsoFollowUp = ({ showWelcomeMessage, setModalTimestamp }) => {
                   <DrinksCategory
                     drinksCatalog={drinksCatalog}
                     asPreview
-                    key={index}
+                    key={category}
                     category={category}
                     index={index}
                     drinks={fakeDrinks}

diff --git a/src/scenes/ConsoFollowUp/drinksCatalog.js b/src/scenes/ConsoFollowUp/drinksCatalog.js
@@ -236,7 +236,7 @@ export const drinksCatalog = [
     categoryKey: HARD_BIG,
     drinkKey: HARD_FLASQUE,
     displayFeed: (q) => (q > 1 ? 'flasques' : 'flasque'),
-    displayDrinkModal: 'Flasque',
+    displayDrinkModal: 'flasque',
     displayFormDrink: 'Flasque de spiritueux',
     volume: '30 cl',
     doses: 22,

diff --git a/src/scenes/Gains/Estimation.js b/src/scenes/Gains/Estimation.js
@@ -7,14 +7,17 @@ import TextStyled from '../../components/TextStyled';
 import useStateWithAsyncStorage from '../../hooks/useStateWithAsyncStorage';
 import ButtonPrimary from '../../components/ButtonPrimary';
 import { screenHeight } from '../../styles/theme';
+import EstimationConsosList from "./EstimationConsosList";
 
 const Estimation = () => {
 
   const navigation = useNavigation();
 
   const [drinkgoal] = useStateWithAsyncStorage("@GainQuantityDrinkByWeek", 0);
 
-  const Complete = () => {
+
+  const complete = () => {
+
     navigation.navigate("GAINS");
   }
 
@@ -40,8 +43,9 @@ const Estimation = () => {
           </DescriptionText>
         </TopDescription>
       </TopContainer>
+      <EstimationConsosList />
       <CTAButtonContainer>
-        <ButtonPrimary content="Continuer" onPress={Complete} />
+        <ButtonPrimary content="Je finalise" onPress={complete} />
       </CTAButtonContainer>
     </ScreenBgStyled>
   )

diff --git a/src/scenes/Gains/EstimationConsosList.js b/src/scenes/Gains/EstimationConsosList.js
@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import DrinksCategory from '../../components/DrinksCategory';
+import {
+    drinksCatalog,
+} from '../ConsoFollowUp/drinksCatalog';
+import {
+    Container,
+    ModalContent,
+    MarginBottom,
+} from '../AddDrink/styles';
+import useStateWithAsyncStorage from '../../hooks/useStateWithAsyncStorage';
+
+const EstimationConsosList = () => {
+    const [estimationDrinksPerWeek, setEstimationDrinksPerWeek] = useStateWithAsyncStorage("@GainEstimationDrinksPerWeek", []);
+    const scrollRef = React.useRef(null);
+
+    const setDrinkQuantityRequest = (drinkKey, quantity) => {
+        const oldDrink = estimationDrinksPerWeek.find((drink) => drink.drinkKey === drinkKey);
+
+        if (oldDrink) {
+            setEstimationDrinksPerWeek([
+                ...estimationDrinksPerWeek.filter((drink) => drink.drinkKey !== drinkKey),
+                {
+                    ...estimationDrinksPerWeek.find((drink) => drink.drinkKey === drinkKey),
+                    quantity,
+                },
+            ]);
+        } else {
+            setEstimationDrinksPerWeek([
+                ...estimationDrinksPerWeek,
+                {
+                    drinkKey,
+                    quantity,
+                    id: uuidv4(),
+                },
+            ]);
+        }
+    };
+
+    return (
+        <Container>
+            <ModalContent ref={scrollRef} disableHorizontal>
+                {drinksCatalog
+                    .map(({ categoryKey }) => categoryKey)
+                    .filter((categoryKey, index, categories) => categories.indexOf(categoryKey) === index)
+                    .map((category, index) => (
+                        <DrinksCategory
+                            key={category}
+                            drinksCatalog={drinksCatalog}
+                            category={category}
+                            index={index}
+                            drinks={estimationDrinksPerWeek}
+                            setDrinkQuantity={setDrinkQuantityRequest}
+                        />
+                    ))}
+                <MarginBottom />
+            </ModalContent>
+        </Container>
+    );
+};
+
+
+export default EstimationConsosList;
diff --git a/src/scenes/Gains/MyGoal.js b/src/scenes/Gains/MyGoal.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { useNavigation } from '@react-navigation/native';
 
@@ -8,6 +8,8 @@ import TextStyled from '../../components/TextStyled';
 import Done from '../../components/Illustrations/Done';
 import Economy from '../../components/Illustrations/Economy';
 import CocktailGlass from '../../components/Illustrations/CocktailGlassTriangle';
+import useStateWithAsyncStorage from '../../hooks/useStateWithAsyncStorage';
+import { drinksCatalog } from '../ConsoFollowUp/drinksCatalog';
 
 const MyGoal = ({ drinkByWeek, dayNoDrink }) => {
 
@@ -21,6 +23,20 @@ const MyGoal = ({ drinkByWeek, dayNoDrink }) => {
         navigation.navigate("ESTIMATION");
     }
 
+    const [estimationDrinksPerWeek] = useStateWithAsyncStorage("@GainEstimationDrinksPerWeek", []);
+
+    const price = useMemo(() => {
+        return estimationDrinksPerWeek.reduce((sum, drink) =>
+            sum + drink.quantity * drinksCatalog.find(drinkCatalog => drinkCatalog.drinkKey === drink.drinkKey).price
+            , 0)
+    }, [estimationDrinksPerWeek])
+
+    const numberOfDrink = useMemo(() => {
+        return estimationDrinksPerWeek.reduce((sum, drink) =>
+            sum + drink.quantity
+            , 0)
+    }, [estimationDrinksPerWeek])
+
     return (
         <MyGoalContainer>
             <Title>
@@ -45,8 +61,8 @@ const MyGoal = ({ drinkByWeek, dayNoDrink }) => {
             </Title>
             <MyGoalSubContainer>
                 <MyGoalSubContainerInside>
-                    <PartMyGoalSubContainer icon={<Economy size={20} />} value={`  ${dayNoDrink} €`} />
-                    <PartMyGoalSubContainer icon={<CocktailGlass size={20} />} value={`  ${drinkByWeek} ${drinkByWeek > 1 ? "verres" : "verre"} `} />
+                    <PartMyGoalSubContainer icon={<Economy size={20} />} value={`  ${price} €`} />
+                    <PartMyGoalSubContainer icon={<CocktailGlass size={20} />} value={`  ${numberOfDrink} ${numberOfDrink > 1 ? "verres" : "verre"} `} />
                 </MyGoalSubContainerInside>
             </MyGoalSubContainer>
             <ModifyContainer>