Merge pull request #34 from SocialGouv/Feat-consumptions

consumption
SocialGouv · May 13, 2022 · 3372920 · 3372920
2 parents d0a7c4d + 31c1628
commit 3372920
Show file tree

Hide file tree

Showing 7 changed files with 174 additions and 107 deletions.
diff --git a/src/scenes/AddDrink/AddDrinkNavigator.js b/src/scenes/AddDrink/AddDrinkNavigator.js
@@ -4,6 +4,7 @@ import BarCodeReader from './BarCodeReader';
 import ConsosList from './ConsosList';
 import DrinksQuantityExamples from './DrinksQuantityExamples';
 import NewDrinkForm from './NewDrinkForm';
+import ChoiceDrinkOrNoDrink from './ChoiceDrinkOrNoDrink';
 
 const AddDrinkStack = createStackNavigator();
 const AddDrinkNavigator = () => (
@@ -12,6 +13,7 @@ const AddDrinkNavigator = () => (
     <AddDrinkStack.Screen name="CONSO_SCAN_BAR_CODE" component={BarCodeReader} />
     <AddDrinkStack.Screen name="CONSO_NEW_DRINK" component={NewDrinkForm} />
     <AddDrinkStack.Screen name="CONSO_DRINKS_QUANTITY_EXAMPLES" component={DrinksQuantityExamples} />
+    <AddDrinkStack.Screen name="CHOICE_DRINK_OR_NO_DRINK" component={ChoiceDrinkOrNoDrink} />
   </AddDrinkStack.Navigator>
 );
 

diff --git a/src/scenes/AddDrink/ChoiceDrinkOrNoDrink.js b/src/scenes/AddDrink/ChoiceDrinkOrNoDrink.js
@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { useNavigation } from '@react-navigation/native';
+import { compose } from 'recompose';
+import { connect } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import DateOrTimeDisplay from '../../components/DateOrTimeDisplay';
+import H1 from '../../components/H1';
+import CocktailGlassTriangle from '../../components/Illustrations/CocktailGlassTriangle';
+import NoDrink from '../../components/Illustrations/NoDrink';
+import TextStyled from '../../components/TextStyled';
+import { screenHeight } from '../../styles/theme';
+import { withToast } from '../../services/toast';
+import {
+  getDrinksPerCurrentDrinksTimestamp,
+  getModalTimestamp,
+  updateDrink,
+  updateModalTimestamp,
+  setOwnDrink,
+  removeOwnDrink,
+  getOwnDrinks,
+  setNoDrink,
+} from '../ConsoFollowUp/consoDuck';
+import UnderlinedButton from '../../components/UnderlinedButton';
+import DatePicker from '../../components/DatePicker';
+import { dateWithoutTime, makeSureTimestamp } from '../../helpers/dateHelpers';
+
+const ChoiceDrinkOrNoDrink = ({ date, updateModalTimestamp }) => {
+  const navigation = useNavigation();
+
+  const [showDatePicker, setShowDatePicker] = useState(false);
+
+  return (
+    <ScreenBgStyled>
+      <SafeAreaView>
+        <UnderlinedButton content="Retour" bold onPress={() => navigation.goBack()} />
+        <TopContainer>
+          <TopTitle>
+            <H1 color="#4030a5">Mes consommations</H1>
+          </TopTitle>
+        </TopContainer>
+        <DateAndTimeContainer>
+          <DateOrTimeDisplay mode="date" date={date} onPress={() => setShowDatePicker('date')} />
+          <DateOrTimeDisplay mode="time" date={date} onPress={() => setShowDatePicker('time')} />
+        </DateAndTimeContainer>
+        <Option
+          icon={<NoDrink size={40} />}
+          value={"Je n'ai pas bu"}
+          onPress={() => {
+            setNoDrink(makeSureTimestamp(dateWithoutTime(date)));
+            navigation.goBack();
+          }}
+        />
+        <Option
+          icon={<CocktailGlassTriangle size={40} />}
+          value={"J'ai bu"}
+          onPress={() => navigation.replace('CONSOS_LIST')}
+        />
+        <DatePicker
+          visible={Boolean(showDatePicker)}
+          mode={showDatePicker}
+          initDate={date}
+          selectDate={(newDate) => {
+            if (newDate && showDatePicker === 'date') {
+              const newDateObject = new Date(newDate);
+              const oldDateObject = new Date(date);
+              newDate = new Date(
+                newDateObject.getFullYear(),
+                newDateObject.getMonth(),
+                newDateObject.getDate(),
+                oldDateObject.getHours(),
+                oldDateObject.getMinutes()
+              );
+            }
+            setShowDatePicker(false);
+            if (newDate) {
+              updateModalTimestamp(makeSureTimestamp(newDate));
+            }
+          }}
+        />
+      </SafeAreaView>
+    </ScreenBgStyled>
+  );
+};
+
+const Option = ({ icon, value, onPress }) => {
+  return (
+    <AskDrinkContainer>
+      <ButtonTouchable onPress={onPress}>
+        <Box>{icon}</Box>
+      </ButtonTouchable>
+      <TextStyled> {value}</TextStyled>
+    </AskDrinkContainer>
+  );
+};
+
+const ScreenBgStyled = styled.ScrollView`
+  background-color: #f9f9f9;
+  flex-shrink: 1;
+  flex-grow: 1;
+  flex-basis: 100%;
+`;
+
+const TopContainer = styled.View`
+  padding: 0px 30px 0px;
+`;
+
+const TopTitle = styled.View`
+  width: 95%;
+  flex-direction: row;
+  flex-shrink: 0;
+  margin-top: 10px;
+  margin-bottom: 20px;
+`;
+
+export const DateAndTimeContainer = styled.View`
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ButtonTouchable = styled.TouchableOpacity``;
+
+const Box = styled.View`
+  border: 1px solid #de285e;
+  border-radius: 5px;
+  padding: 30px;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 10px;
+`;
+
+const AskDrinkContainer = styled.View`
+  justify-content: center;
+  align-items: center;
+  margin-top: ${screenHeight * 0.1}px;
+`;
+
+const makeStateToProps = () => (state) => ({
+  drinks: getDrinksPerCurrentDrinksTimestamp(state),
+  date: getModalTimestamp(state),
+  ownDrinks: getOwnDrinks(state),
+});
+const dispatchToProps = {
+  updateDrink,
+  updateModalTimestamp,
+  setOwnDrink,
+  removeOwnDrink,
+  setNoDrink,
+};
+export default compose(connect(makeStateToProps, dispatchToProps), withToast)(ChoiceDrinkOrNoDrink);
diff --git a/src/scenes/AddDrink/ConsosList.js b/src/scenes/AddDrink/ConsosList.js
@@ -35,7 +35,6 @@ import {
   ButtonsContainerSafe,
   ButtonsContainer,
   MarginBottom,
-  SmallMarginBottom,
 } from './styles';
 import DrinkQuantitySetter from '../../components/DrinkQuantitySetter';
 import DrinksHeader from '../../components/DrinksHeader';
@@ -112,15 +111,15 @@ const ConsosList = ({
   };
 
   const onClose = useCallback(() => {
-    navigation.navigate('TABS', { screen: 'CONSO_FOLLOW_UP' });
+    navigation.goBack();
   }, [navigation]);
 
   const onCancelConsos = useCallback(() => {
-    onClose();
+    navigation.goBack();
     setLocalDrinksState([]);
     matomo.logConsoCloseAddScreen();
     return true;
-  }, [onClose]);
+  }, [navigation]);
 
   const onAddDrinkToCatalog = async ({ name, volume, degrees, drinkKey, quantity }) => {
     setNewDrink(initDrinkState);
@@ -205,7 +204,7 @@ const ConsosList = ({
               setDrinkQuantity={setDrinkQuantityRequest}
             />
           ))}
-        <>
+        {/* <>
           <SmallMarginBottom />
           <ButtonsContainer>
             <ButtonPrimary content="Scannez une boisson" onPress={() => navigation.push('CONSO_SCAN_BAR_CODE')} />
@@ -215,7 +214,7 @@ const ConsosList = ({
             bold
             onPress={() => navigation.push('CONSO_NEW_DRINK', { init: newDrink })}
           />
-        </>
+        </> */}
         <MarginBottom />
       </ModalContent>
       <ButtonsContainerSafe>

diff --git a/src/scenes/Gains/Consumptions.js b/src/scenes/Gains/Consumptions.js
diff --git a/src/scenes/Gains/GainsCalendar.js b/src/scenes/Gains/GainsCalendar.js
@@ -2,13 +2,13 @@ import dayjs from 'dayjs';
 import React, { useMemo } from 'react';
 import { Calendar, LocaleConfig } from 'react-native-calendars';
 import { connect } from 'react-redux';
-import { useRecoilValue } from 'recoil';
 import styled, { css } from 'styled-components';
-
+import { useNavigation, StackActions } from '@react-navigation/native';
 import H1 from '../../components/H1';
 import TextStyled from '../../components/TextStyled';
-import { getDailyDoses } from '../ConsoFollowUp/consoDuck';
+import { getDailyDoses, setModalTimestamp } from '../ConsoFollowUp/consoDuck';
 import { maxDrinksPerWeekSelector } from './recoil';
+import { dateWithoutTime } from '../../helpers/dateHelpers';
 
 /*
 markedDates is an object with keys such as `2022-04-30` and values such as
@@ -34,8 +34,9 @@ const drinkDay = {
   selectedColor: 'red',
 };
 
-const GainsCalendar = ({ isOnboarded, dailyDoses }) => {
+const GainsCalendar = ({ isOnboarded, dailyDoses, setModalTimestamp }) => {
   // const maxDrinksPerWeekGoal = useRecoilValue(maxDrinksPerWeekSelector);
+  const navigation = useNavigation();
   const markedDays = useMemo(() => {
     const todayFormatted = dayjs().format('YYYY-MM-DD');
     const days = { [todayFormatted]: { marked: true } };
@@ -71,6 +72,10 @@ const GainsCalendar = ({ isOnboarded, dailyDoses }) => {
           firstDay={1}
           markedDates={JSON.parse(JSON.stringify(markedDays))}
           markingType="dot"
+          onDayPress={({ dateString }) => {
+            setModalTimestamp(dateWithoutTime(dateString));
+            navigation.push('ADD_DRINK', { screen: 'CHOICE_DRINK_OR_NO_DRINK' });
+          }}
         />
       </CalendarContainer>
       <TextStyled color="#4030a5">État de ma consommation</TextStyled>
@@ -153,4 +158,8 @@ const makeStateToProps = () => (state) => ({
   // highestDailyDose: getHighestDailyDoses(state),
 });
 
-export default connect(makeStateToProps)(GainsCalendar);
+const dispatchToProps = {
+  setModalTimestamp,
+};
+
+export default connect(makeStateToProps, dispatchToProps)(GainsCalendar);
diff --git a/src/scenes/Gains/GainsNavigator.js b/src/scenes/Gains/GainsNavigator.js
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 import Background from '../../components/Background';
 import HeaderBackground from '../../components/HeaderBackground';
-import Consumptions from './Consumptions';
 import CountConsumptiom from './CountConsumption';
 import Estimation from './Estimation';
 import Goal from './Goal';
@@ -26,7 +25,6 @@ const GainsNavigator = () => {
           <GainsStack.Screen name="GAINS" component={MyGains} />
           <GainsStack.Screen name="GOAL" component={Goal} />
           <GainsStack.Screen name="HOWCOUNT" component={CountConsumptiom} />
-          <GainsStack.Screen name="CONSUMPTIONS" component={Consumptions} />
           <GainsStack.Screen name="ESTIMATION" component={Estimation} />
         </GainsStack.Navigator>
       )}

diff --git a/src/scenes/Infos/Infos.js b/src/scenes/Infos/Infos.js
@@ -20,7 +20,7 @@ const InfosStack = createStackNavigator();
 
 const Infos = () => {
   // usePopToTop();
-
+  
   return (
     <Background color="#39cec0" withSwiperContainer>
       <HeaderBackground />