feat(dpp): add epds survey on app (#162)

* feat(dpp) ajout du questionnaire côté app

* feat(dpp) fix lors du clic sur une réponse

* feat(dpp) gestion de l'affichage des boutons suivants

* feat(dpp) affichage du résultat

* feat(dpp) :  retours de PR

* Update front/constants/Labels.ts

Co-authored-by: Benjamin Morali <benjaminmorali4@hotmail.fr>

* feat(dpp) use EpdsQuestion component

* feat(dpp) use EpdsFooter component

* feat(dpp) Clean EpdsSurveyScreen styles

Co-authored-by: Benjamin Morali <benjaminmorali4@hotmail.fr>

front/components/epdsSurvey/EpdsFooter.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { Dimensions, StyleSheet } from "react-native";
+import { useRef } from "react";
+import Colors from "../../constants/Colors";
+import BackButton from "../BackButton";
+import { View } from "../Themed";
+import Icomoon, { IcomoonIcons } from "../Icomoon";
+import Labels from "../../constants/Labels";
+import Button from "../form/Button";
+import SwiperFlatListRefProps from "react-native-swiper-flatlist";
+
+interface Props {
+  swiperCurrentIndex: number;
+  swiperRef: React.RefObject<SwiperFlatListRefProps>;
+  showValidateButton: boolean | undefined;
+  questionIsAnswered: boolean | undefined;
+  setDisplayResult: (value: boolean) => void;
+}
+
+const EpdsFooter: React.FC<Props> = ({
+  swiperCurrentIndex,
+  swiperRef,
+  showValidateButton,
+  questionIsAnswered,
+  setDisplayResult
+}) => {
+  return (
+    <View style={[styles.footer, styles.justifyContentCenter]}>
+      <View style={[styles.buttonsContainer, styles.justifyContentCenter]}>
+        <View style={[styles.buttonContainer]}>
+          {swiperCurrentIndex > 0 && (
+            <BackButton
+              action={() => {
+                swiperRef.current?.scrollToIndex({
+                  index: swiperCurrentIndex - 1
+                });
+              }}
+            />
+          )}
+        </View>
+        <View style={[styles.buttonContainer]}>
+          {showValidateButton ? (
+            <View style={styles.justifyContentCenter}>
+              <Button
+                title={Labels.buttons.validate}
+                rounded={true}
+                disabled={false}
+                action={() => setDisplayResult(true)}
+              />
+            </View>
+          ) : (
+            questionIsAnswered && (
+              <Button
+                title={Labels.buttons.next}
+                rounded={false}
+                disabled={false}
+                icon={
+                  <Icomoon
+                    name={IcomoonIcons.suivant}
+                    size={14}
+                    color={Colors.primaryBlue}
+                  />
+                }
+                action={() => {
+                  swiperRef.current?.scrollToIndex({
+                    index: swiperCurrentIndex + 1
+                  });
+                }}
+              />
+            )
+          )}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const width = Dimensions.get("window").width;
+const styles = StyleSheet.create({
+  footer: {
+    flex: 1,
+    paddingVertical: 10
+  },
+  justifyContentCenter: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  buttonContainer: {
+    flex: 1
+  },
+  buttonsContainer: {
+    flexDirection: "row"
+  },
+});
+
+export default EpdsFooter;

front/components/epdsSurvey/EpdsQuestion.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { Dimensions, StyleSheet } from "react-native";
+import Colors from "../../constants/Colors";
+import { Answer, QuestionAndAnswers } from "../../screens/EpdsSurveyScreen";
+import Checkbox from "../form/Checkbox";
+import { CommonText } from "../StyledText";
+import { View } from "../Themed";
+
+interface Props {
+  questionAndAnswers: QuestionAndAnswers;
+  questionIndex: number;
+  updatePressedAnswer: (answer: Answer) => void;
+}
+
+const EpdsQuestion: React.FC<Props> = ({
+  questionAndAnswers,
+  questionIndex,
+  updatePressedAnswer
+}) => {
+  return (
+    <View
+      style={[styles.swipeView, styles.justifyContentCenter]}
+      key={questionIndex}
+    >
+      <View style={styles.swipeViewMargin}>
+        <CommonText style={[styles.title, styles.textAlignCenter]}>
+          {questionAndAnswers.question}
+        </CommonText>
+        {questionAndAnswers.answers.map((answer, answerIndex) => {
+          return (
+            <Checkbox
+              key={answerIndex}
+              title={answer.label}
+              checked={answer.isChecked}
+              onPress={() => {
+                updatePressedAnswer(answer);
+              }}
+            />
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const width = Dimensions.get("window").width;
+const styles = StyleSheet.create({
+  justifyContentCenter: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  swipeView: {
+    width
+  },
+  swipeViewMargin: {
+    margin: "10%"
+  },
+  textAlignCenter: {
+    textAlign: "center"
+  },
+  title: {
+    color: Colors.primaryBlueDark,
+    fontSize: 15,
+    fontWeight: "bold",
+    paddingBottom: 15,
+    paddingHorizontal: 15
+  }
+});
+
+export default EpdsQuestion;

front/constants/Labels.ts

@@ -74,4 +74,32 @@ export default {
       "Choisissez dans le parcours ci-dessous l’étape qui vous concerne ou vous intéresse. A chaque étape correspond des informations, recommandations et outils spécifiques pour mieux vous guider et vous accompagner.",
     title: "Choisissez l'étape que vous souhaitez approfondir",
   },
+  epdsSurvey: {
+    title: "Autodépistage dépression post-partum",
+    description: "Vous venez d'avoir un bébé et nous aimerions savoir comment vous vous sentez.",
+    instruction: "Veuillez cocher la réponse qui vous semble décrire le mieux comment vous vous êtes sentie au cours des 7 derniers jours et pas seulement aujourd'hui.",
+    questionsAnswers: [
+      {
+        question:"J’ai pu rire et prendre les choses du bon côté",
+        answer1: "Aussi souvent que d’habitude",
+        answer2: "Pas tout-à-fait autant",
+        answer3: "Vraiment beaucoup moins souvent ces jours-ci",
+        answer4: "Absolument pas",
+      },
+      {
+        question:"Je me suis sentie confiante et joyeuse, en pensant à l’avenir",
+        answer1: "Autant que d’habitude",
+        answer2: "Plutôt moins que d’habitude",
+        answer3: "Vraiment moins que d’habitude",
+        answer4: "Pratiquement pas",
+      },
+      {
+        question:"Je me suis reprochée, sans raisons, d’être responsable quand les choses allaient mal",
+        answer1: "Oui, la plupart du temps",
+        answer2: "Oui, parfois",
+        answer3: "Pas très souvent",
+        answer4: "Non, jamais",
+      },
+    ],
+  },
 };

front/navigation/BottomTabNavigator.tsx

@@ -7,6 +7,7 @@ import Icomoon, { IcomoonIcons } from "../components/Icomoon";
 import Colors from "../constants/Colors";
 import Labels from "../constants/Labels";
 import ArticleDetail from "../screens/ArticleDetail";
+import EpdsSurveyScreen from "../screens/EpdsSurveyScreen";
 import ListArticles from "../screens/ListArticles";
 import TabAroundMeScreen from "../screens/TabAroundMeScreen";
 import TabCalendarScreen from "../screens/TabCalendarScreen";
@@ -111,6 +112,7 @@ const TabHomeNavigator: FC = () => (
     />
     <TabHomeStack.Screen name="listArticles" component={ListArticles} />
     <TabHomeStack.Screen name="article" component={ArticleDetail} />
+    <TabHomeStack.Screen name="epdsSurvey" component={EpdsSurveyScreen} />
   </TabHomeStack.Navigator>
 );