#322 (#350)

feat: return user input to Add Emission screen when user press confirm on Periodicity screen
NMF-earth · Nov 27, 2021 · e04beaf · e04beaf
1 parent d4db9d9
commit e04beaf
Show file tree

Hide file tree

Showing 12 changed files with 216 additions and 85 deletions.
diff --git a/app/components/TextButton/TextButton.styles.ts b/app/components/TextButton/TextButton.styles.ts
@@ -2,10 +2,14 @@ import { StyleSheet } from "react-native";
 
 export default StyleSheet.create({
   container: {
+    flex: 1,
     flexDirection: "row",
     alignItems: "center",
     alignContent: "center",
   },
+  textContainer: {
+    flex: 1,
+  },
   text: {
     marginHorizontal: 8,
   },

diff --git a/app/components/TextButton/TextButton.tsx b/app/components/TextButton/TextButton.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { TouchableOpacity } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 
 import { Colors } from "style";
@@ -18,11 +18,17 @@ const iconSize = 20;
 const TextButton: React.FC<Props> = ({ onPress, iconLeft, text }) => {
   return (
     <TouchableOpacity style={styles.container} onPress={onPress}>
-      <Ionicons color={Colors.blue50} name={iconLeft} size={iconSize} />
-      <Text.Primary darkGray style={styles.text}>
-        {text}
-      </Text.Primary>
-      <Ionicons name="create" size={iconSize} color={Colors.green50} />
+      <View style={{ width: iconSize + 10 }}>
+        <Ionicons color={Colors.blue50} name={iconLeft} size={iconSize} />
+      </View>
+      <View style={styles.textContainer}>
+        <Text.Primary darkGray style={styles.text}>
+          {text}
+        </Text.Primary>
+      </View>
+      <View style={{ width: iconSize + 10 }}>
+        <Ionicons name="create" size={iconSize} color={Colors.green50} />
+      </View>
     </TouchableOpacity>
   );
 };

diff --git a/app/components/TextButton/__tests__/__snapshots__/TextButton.test.tsx.snap b/app/components/TextButton/__tests__/__snapshots__/TextButton.test.tsx.snap
@@ -7,30 +7,55 @@ exports[`TextButton renders correctly with camera icon 1`] = `
     Object {
       "alignContent": "center",
       "alignItems": "center",
+      "flex": 1,
       "flexDirection": "row",
     }
   }
 >
-  <Ionicons
-    color="#3957D0"
-    name="camera"
-    size={20}
-  />
-  <Text.Primary
-    darkGray={true}
+  <View
     style={
       Object {
-        "marginHorizontal": 8,
+        "width": 30,
       }
     }
   >
-    some text
-  </Text.Primary>
-  <Ionicons
-    color="#4BB377"
-    name="create"
-    size={20}
-  />
+    <Ionicons
+      color="#3957D0"
+      name="camera"
+      size={20}
+    />
+  </View>
+  <View
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <Text.Primary
+      darkGray={true}
+      style={
+        Object {
+          "marginHorizontal": 8,
+        }
+      }
+    >
+      some text
+    </Text.Primary>
+  </View>
+  <View
+    style={
+      Object {
+        "width": 30,
+      }
+    }
+  >
+    <Ionicons
+      color="#4BB377"
+      name="create"
+      size={20}
+    />
+  </View>
 </TouchableOpacity>
 `;
 
@@ -41,29 +66,54 @@ exports[`TextButton renders correctly with repeat icon 1`] = `
     Object {
       "alignContent": "center",
       "alignItems": "center",
+      "flex": 1,
       "flexDirection": "row",
     }
   }
 >
-  <Ionicons
-    color="#3957D0"
-    name="repeat"
-    size={20}
-  />
-  <Text.Primary
-    darkGray={true}
+  <View
+    style={
+      Object {
+        "width": 30,
+      }
+    }
+  >
+    <Ionicons
+      color="#3957D0"
+      name="repeat"
+      size={20}
+    />
+  </View>
+  <View
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <Text.Primary
+      darkGray={true}
+      style={
+        Object {
+          "marginHorizontal": 8,
+        }
+      }
+    >
+      some text
+    </Text.Primary>
+  </View>
+  <View
     style={
       Object {
-        "marginHorizontal": 8,
+        "width": 30,
       }
     }
   >
-    some text
-  </Text.Primary>
-  <Ionicons
-    color="#4BB377"
-    name="create"
-    size={20}
-  />
+    <Ionicons
+      color="#4BB377"
+      name="create"
+      size={20}
+    />
+  </View>
 </TouchableOpacity>
 `;
diff --git a/app/screens/AddEmission/AddEmissionScreen.tsx b/app/screens/AddEmission/AddEmissionScreen.tsx
@@ -7,12 +7,12 @@ import DateTimePickerModal from "react-native-modal-datetime-picker";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { useRoute } from "@react-navigation/core";
 import { useNavigation } from "@react-navigation/native";
-import { pathOr } from "ramda";
+import { pathOr, join } from "ramda";
 
 import { navigate } from "navigation";
 import { Text, TextInput, TextButton, OpenFoodFacts } from "components";
 import { userPreferences } from "ducks";
-import { EmissionType, EmissionPayload, EmissionModelType } from "interfaces";
+import { EmissionType, EmissionPayload, EmissionModelType, PeriodicityType } from "interfaces";
 import {
   calculation,
   t,
@@ -37,6 +37,7 @@ import {
   Meal,
   ProductScanned,
 } from "./components";
+import { WEEK_DAYS_LIST } from "../Periodicity/PeriodicityModalScreen";
 
 /* multiply or divide by 1000 to have kilograms or meters */
 const DEFAULT_SLIDER_VALUE_FOOD = 200 / 1000;
@@ -54,6 +55,9 @@ const getName = pathOr("", ["params", "name"]);
 const getNutriscoreGrade = pathOr("", ["params", "nutriscoreGrade"]);
 const getNovaGroup = pathOr(-1, ["params", "novaGroup"]);
 const getEcoScore = pathOr("", ["params", "ecoScore"]);
+const getPeriodType = pathOr(PeriodicityType.monthly, ["params", "periodType"]);
+const getPeriodWeekDays = pathOr([], ["params", "periodWeekDays"]);
+const getPeriodTimes = pathOr(0, ["params", "periodTimes"]);
 
 const AddEmissionScreen = ({ locale = "", language = "" }: LocalizationContextProps) => {
   const route = useRoute();
@@ -95,6 +99,35 @@ const AddEmissionScreen = ({ locale = "", language = "" }: LocalizationContextPr
   const novaGroup: number = getNovaGroup(route);
   const ecoScore: string = getEcoScore(route);
 
+  const periodType: PeriodicityType = getPeriodType(route);
+  const periodWeekDays: Array<number> = getPeriodWeekDays(route);
+  const periodTimes: number = getPeriodTimes(route);
+
+  let periodicityText = t("ADD_EMISSION_SCREEN_NON_RECURRING");
+  if (periodTimes) {
+    if (periodTimes > 1) {
+      periodicityText = periodTimes + " " + t("ADD_EMISSION_SCREEN_TIMES");
+    } else {
+      periodicityText = periodTimes + " " + t("ADD_EMISSION_SCREEN_TIME");
+    }
+
+    periodicityText = periodicityText + " - ";
+
+    if (periodType == PeriodicityType.monthly) {
+      periodicityText = periodicityText + t("ADD_EMISSION_SCREEN_MONTHLY");
+    } else {
+      periodicityText = periodicityText + t("ADD_EMISSION_SCREEN_WEEKLY");
+    }
+
+    if (periodWeekDays.length) {
+      periodicityText = periodicityText + " - ";
+      const daysToDisplay = WEEK_DAYS_LIST.filter((item) =>
+        periodWeekDays.includes(item.dayIndex)
+      ).map((item) => t(item.nameKey));
+      periodicityText = periodicityText + join(", ", daysToDisplay);
+    }
+  }
+
   const handleConfirm = useCallback(
     (date: Date) => {
       hideDatePicker();
@@ -335,25 +368,33 @@ const AddEmissionScreen = ({ locale = "", language = "" }: LocalizationContextPr
         onCancel={hideDatePicker}
       />
 
-      <View style={styles.textContainer}>
-        <Text.H3>{t("ADD_EMISSION_SCREEN_DATE")}</Text.H3>
-        <View style={styles.textButtonContainer}>
-          <TextButton
-            onPress={showDatePicker}
-            iconLeft={"calendar"}
-            text={creationDate.locale(getLocaleForMoment(language)).format("dddd Do MMMM YYYY")}
-          />
+      {!periodTimes ? (
+        <View style={styles.textContainer}>
+          <Text.H3>{t("ADD_EMISSION_SCREEN_DATE")}</Text.H3>
+          <View style={styles.textButtonContainer}>
+            <TextButton
+              onPress={showDatePicker}
+              iconLeft={"calendar"}
+              text={creationDate.locale(getLocaleForMoment(language)).format("dddd Do MMMM YYYY")}
+            />
+          </View>
         </View>
-      </View>
+      ) : null}
 
       {__DEV__ && (
         <View style={styles.textContainer}>
           <Text.H3>{t("ADD_EMISSION_SCREEN_PERIODICITY")}</Text.H3>
           <View style={styles.textButtonContainer}>
             <TextButton
-              onPress={() => navigator.openPeriodicityModal()}
+              onPress={() =>
+                navigator.openPeriodicityModal({
+                  periodType,
+                  periodWeekDays,
+                  periodTimes,
+                })
+              }
               iconLeft={"repeat"}
-              text={t("ADD_EMISSION_SCREEN_NON_RECURRING")}
+              text={periodicityText}
             />
           </View>
         </View>

diff --git a/app/screens/AddEmission/translations/en.json b/app/screens/AddEmission/translations/en.json
@@ -18,5 +18,9 @@
   "ADD_EMISSION_SCREEN_MEALS": "meal(s)",
   "ADD_EMISSION_SCREEN_PERIODICITY": "Periodicity",
   "ADD_EMISSION_SCREEN_NON_RECURRING": "Non-recurring",
-  "ADD_EMISSION_SCREEN_NAME": "Name"
+  "ADD_EMISSION_SCREEN_NAME": "Name",
+  "ADD_EMISSION_SCREEN_TIMES": "times",
+  "ADD_EMISSION_SCREEN_TIME": "time",
+  "ADD_EMISSION_SCREEN_WEEKLY": "weekly",
+  "ADD_EMISSION_SCREEN_MONTHLY": "monthly"
 }
diff --git a/app/screens/AddEmission/translations/index.ts b/app/screens/AddEmission/translations/index.ts
@@ -31,6 +31,10 @@ interface TranslationKeys {
   ADD_EMISSION_SCREEN_PERIODICITY: string;
   ADD_EMISSION_SCREEN_NON_RECURRING: string;
   ADD_EMISSION_SCREEN_NAME: string;
+  ADD_EMISSION_SCREEN_TIMES: string;
+  ADD_EMISSION_SCREEN_TIME: string;
+  ADD_EMISSION_SCREEN_WEEKLY: string;
+  ADD_EMISSION_SCREEN_MONTHLY: string;
 }
 
 export { en, fr, de, sv, es, pt, da, ru, pl, zh, ms, TranslationKeys };