feat(profile): 🎸 Affiche la date de naissance (#60)

* refactor: 💡 Ajoute le kit UI Reac Native Elements Ajoute le kit UI Reac Native Elements ✅ Closes: #56 * refactor: 💡 PR Ajoute le kit UI Reac Native Elements ✅ Closes: #57 * feat: 🎸 Affiche la date de naissance Affiche le champ et le label en fonction du choix effectué (radioButton) ✅ Closes: #10 * fix: 🐛 Ajoute des marges sur les boutons (margin + padding) * refactor: 💡 PR Affiche la date de naissance ✅ Closes: #60 Co-authored-by: Benjamin Guedj <benjaminguedj@hotmail.fr>
SocialGouv · Mar 18, 2021 · 3f097da · 3f097da
1 parent 3c26627
commit 3f097da
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 16 deletions.
diff --git a/front/components/form/Button.tsx b/front/components/form/Button.tsx
@@ -32,6 +32,8 @@ const styles = StyleSheet.create({
     marginRight: 30,
     marginTop: 10,
     padding: 15,
+    paddingLeft: 30,
+    paddingRight: 30,
   },
   clearButtonTitle: {
     color: Colors.tertiaryColor,
@@ -43,6 +45,10 @@ const styles = StyleSheet.create({
   roundedButton: {
     backgroundColor: Colors.tertiaryColor,
     borderRadius: 40,
+    marginLeft: 30,
+    marginRight: 30,
+    paddingLeft: 30,
+    paddingRight: 30,
   },
   roundedButtonTitle: {
     color: "white",

diff --git a/front/screens/Profile.tsx b/front/screens/Profile.tsx
@@ -1,5 +1,5 @@
 import type { StackNavigationProp } from "@react-navigation/stack";
-import { filter } from "lodash";
+import { filter, find } from "lodash";
 import type { FC } from "react";
 import * as React from "react";
 import { ScrollView, StyleSheet, Text } from "react-native";
@@ -20,7 +20,6 @@ export const Profile: FC<Props> = ({ navigation }) => {
   const appName = "1000 JOURS APP'";
   const image = <ProfileImage />;
   const title = "Votre profil";
-  const childBirthdayLabel = "Date de naissance de votre enfant";
 
   const defaultUserContext: UserContext = {
     childBirthday: null,
@@ -35,9 +34,7 @@ export const Profile: FC<Props> = ({ navigation }) => {
   };
 
   const hasCheckedSituation = () => {
-    return filter(userSituations, ["isChecked", true]).length > 0
-      ? true
-      : false;
+    return filter(userSituations, ["isChecked", true]).length > 0;
   };
 
   const [userSituations, setUserSituations] = React.useState<UserSituation[]>(
@@ -52,8 +49,8 @@ export const Profile: FC<Props> = ({ navigation }) => {
   ] = React.useState<boolean>(hasCheckedSituation());
 
   const updateUserSituations = (userSituation: UserSituation) => {
-    setUserSituations((previousUserSituations) => {
-      return previousUserSituations.map((item) => {
+    setUserSituations(() => {
+      return defaultUserContext.situations.map((item) => {
         if (item.id === userSituation.id) {
           return { ...item, isChecked: !userSituation.isChecked };
         } else {
@@ -71,6 +68,31 @@ export const Profile: FC<Props> = ({ navigation }) => {
     setHasCheckedSituation(hasCheckedSituation());
   }, [userSituations]);
 
+  const getCheckedUserSituationsWhereChildBirthdayIsNeeded = () => {
+    const userSituationsIdsWhereChildBirthdayIsNeeded = [3, 4, 5];
+    return filter(userSituations, (userSituation) => {
+      return (
+        userSituation.isChecked &&
+        userSituationsIdsWhereChildBirthdayIsNeeded.includes(userSituation.id)
+      );
+    });
+  };
+  const childBirthdayIsNeeded = () => {
+    const results = getCheckedUserSituationsWhereChildBirthdayIsNeeded();
+    return results.length > 0;
+  };
+  const getChildBirthdayLabel = () => {
+    const results = getCheckedUserSituationsWhereChildBirthdayIsNeeded();
+    if (find(results, ["id", 3])) {
+      return "Naissance prévue de votre enfant";
+    } else if (find(results, ["id", 4])) {
+      return "Date de naissance de votre enfant";
+    } else if (find(results, ["id", 5])) {
+      return "Date de naissance de votre enfant le plus jeune";
+    }
+    return "Date de naissance de votre enfant";
+  };
+
   return (
     <View style={[styles.mainContainer]}>
       <View style={[styles.header, styles.justifyContentCenter]}>
@@ -94,9 +116,9 @@ export const Profile: FC<Props> = ({ navigation }) => {
             );
           })}
         </View>
-        <View>
+        <View style={[childBirthdayIsNeeded() ? null : styles.hide]}>
           <Text style={[styles.colorPrimary, styles.textAlignCenter]}>
-            {childBirthdayLabel}
+            {getChildBirthdayLabel()}
           </Text>
           <View style={[styles.datepickerContainer]}>
             <Datepicker
@@ -108,7 +130,7 @@ export const Profile: FC<Props> = ({ navigation }) => {
           </View>
         </View>
         <View style={[styles.footer, styles.justifyContentCenter]}>
-          <View style={[styles.buttonContainer]}>
+          <View>
             <Button
               title="Passer"
               rounded={false}
@@ -118,7 +140,7 @@ export const Profile: FC<Props> = ({ navigation }) => {
               }}
             />
           </View>
-          <View style={[styles.buttonContainer]}>
+          <View>
             <Button
               title="Valider"
               rounded={true}
@@ -143,11 +165,6 @@ const styles = StyleSheet.create({
   body: {
     flex: 1,
   },
-  buttonContainer: {
-    flex: 1,
-    marginLeft: 5,
-    marginRight: 5,
-  },
   checkbox: {
     height: 40,
   },
@@ -170,6 +187,9 @@ const styles = StyleSheet.create({
     height: 44,
     margin: 15,
   },
+  hide: {
+    display: "none",
+  },
   justifyContentCenter: {
     alignItems: "center",
     justifyContent: "center",