feat(questionnaire): ajout du contexte de la journée

SocialGouv · Jan 20, 2022 · 793f5a3 · 793f5a3
1 parent d10dfcf
commit 793f5a3
Show file tree

Hide file tree

Showing 4 changed files with 188 additions and 10 deletions.
diff --git a/src/scenes/survey/InputQuestion.js b/src/scenes/survey/InputQuestion.js
@@ -0,0 +1,127 @@
+import React, {useEffect, useState} from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  TextInput,
+  Platform,
+} from 'react-native';
+import Text from '../../components/MyText';
+import {colors} from '../../utils/colors';
+import Icon from '../../components/Icon';
+
+const Question = ({
+  question,
+  explanation,
+  isLast,
+  onChangeUserComment,
+  userComment,
+}) => {
+  const [showExplanation, setShowExplanation] = useState(false);
+  const toggleShowExplanation = async () => {
+    setShowExplanation((prev) => !prev);
+  };
+  const [text, setText] = useState('');
+  useEffect(() => {
+    setText(userComment || '');
+  }, [userComment]);
+
+  return (
+    <View style={styles.questionContainer}>
+      <TouchableOpacity onPress={toggleShowExplanation}>
+        <View style={styles.questionHeaderContainer}>
+          <View style={styles.questionHeader}>
+            {explanation ? (
+              <Icon
+                icon="InfoSvg"
+                width={25}
+                height={25}
+                color={colors.LIGHT_BLUE}
+                styleContainer={{width: 25, height: 25}}
+              />
+            ) : (
+              <View />
+            )}
+            <Text style={styles.questionTitle}>{question.label}</Text>
+            {/* we put a view here because we'll add a item here later */}
+            <View />
+          </View>
+          {explanation && showExplanation ? (
+            <View style={styles.questionInfo}>
+              <Text>{explanation}</Text>
+            </View>
+          ) : null}
+        </View>
+      </TouchableOpacity>
+      <View style={[styles.answerContainer, !isLast && styles.leftFileAriane]}>
+        <TextInput
+          multiline={true}
+          numberOfLines={Platform.OS === 'ios' ? null : 3}
+          minHeight={Platform.OS === 'ios' ? 30 * 3 : null}
+          onChangeText={(v) => {
+            setText(v);
+            onChangeUserComment({key: question.id, userComment: v});
+          }}
+          value={text}
+          placeholder="Ajouter une précision sur ce critère"
+          style={styles.textArea}
+          textAlignVertical={'top'}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  textArea: {
+    backgroundColor: '#F4FCFD',
+    borderRadius: 10,
+    marginBottom: 10,
+    padding: 10,
+    marginHorizontal: 15,
+  },
+  questionContainer: {
+    display: 'flex',
+  },
+  questionHeaderContainer: {
+    backgroundColor: '#F4FCFD',
+    borderColor: '#DEF4F5',
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 10,
+  },
+  questionHeader: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  questionInfo: {
+    marginTop: 15,
+  },
+  questionTitle: {
+    textAlign: 'center',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  answerContainer: {
+    paddingTop: 10,
+    paddingBottom: 15,
+    marginLeft: 18, // padding of the header question container + half of the dot size => 10 + 8 = 18
+    display: 'flex',
+    justifyContent: 'space-around',
+  },
+  leftFileAriane: {
+    borderLeftColor: '#DEF4F5',
+    borderLeftWidth: 2,
+  },
+  backButton: {
+    fontWeight: '700',
+    textDecorationLine: 'underline',
+    color: colors.BLUE,
+    paddingTop: 15,
+    paddingBottom: 30,
+  },
+});
+
+export default Question;
diff --git a/src/scenes/survey/Question.js b/src/scenes/survey/Question.js
@@ -96,9 +96,9 @@ const Question = ({
           multiline={true}
           numberOfLines={Platform.OS === 'ios' ? null : 1}
           minHeight={Platform.OS === 'ios' ? 30 * 1 : null}
-          onChangeText={(userComment) => {
-            setText(userComment);
-            onChangeUserComment({key: question.id, userComment});
+          onChangeText={(v) => {
+            setText(v);
+            onChangeUserComment({key: question.id, userComment: v});
           }}
           value={text}
           placeholder="Ajouter une précision sur ce critère"

diff --git a/src/scenes/survey/daySurvey.js b/src/scenes/survey/daySurvey.js
@@ -15,6 +15,7 @@ import BackButton from '../../components/BackButton';
 import Button from '../../components/Button';
 import {getScoreWithState} from '../../utils';
 import Question from './Question';
+import InputQuestion from './InputQuestion';
 import QuestionYesNo from './QuestionYesNo';
 import logEvents from '../../services/logEvents';
 import {DiaryDataContext} from '../../context/diaryData';
@@ -30,6 +31,10 @@ const DaySurvey = ({navigation, route}) => {
     id: 'TOXIC',
     label: 'Ai-je consommé des substances aujourd’hui ?',
   };
+  const questionContext = {
+    id: 'CONTEXT',
+    label: 'Je précise le contexte de ma journée',
+  };
 
   useEffect(() => {
     (async () => {
@@ -69,7 +74,20 @@ const DaySurvey = ({navigation, route}) => {
           route?.params?.currentSurvey?.answers[questionToxic?.id]?.userComment,
       });
     }
-  }, [route?.params?.currentSurvey?.answers, questions, questionToxic.id]);
+    if ((route?.params?.currentSurvey?.answers || {})[questionContext.id]) {
+      handleChangeUserComment({
+        key: questionContext.id,
+        userComment:
+          route?.params?.currentSurvey?.answers[questionContext?.id]
+            ?.userComment,
+      });
+    }
+  }, [
+    route?.params?.currentSurvey?.answers,
+    questions,
+    questionToxic.id,
+    questionContext?.id,
+  ]);
 
   const toggleAnswer = async ({key, value}) => {
     setAnswers((prev) => {
@@ -98,8 +116,16 @@ const DaySurvey = ({navigation, route}) => {
     setDiaryData(currentSurvey);
     logEvents.logFeelingAdd();
     logEvents.logFeelingAddComment(
-      Object.keys(answers).filter((key) => answers[key].userComment)?.length,
+      Object.keys(answers).filter(
+        (key) =>
+          ![questionToxic.id, questionContext.id].includes(key) &&
+          answers[key].userComment,
+      )?.length,
     );
+    logEvents.logFeelingAddContext(
+      answers[questionContext.id]?.userComment ? 1 : 0,
+    );
+    logEvents.logFeelingResponseToxic(answers[questionToxic.id]?.value ? 1 : 0);
 
     if (route.params?.redirect) {
       alertNoDataYesterday({
@@ -157,6 +183,14 @@ const DaySurvey = ({navigation, route}) => {
             userComment={answers[q.id]?.userComment}
           />
         ))}
+        <InputQuestion
+          question={questionContext}
+          onPress={toggleAnswer}
+          selected={answers[questionContext.id]?.value}
+          explanation={questionContext.explanation}
+          onChangeUserComment={handleChangeUserComment}
+          userComment={answers[questionContext.id]?.userComment}
+        />
         <QuestionYesNo
           question={questionToxic}
           onPress={toggleAnswer}
@@ -167,10 +201,6 @@ const DaySurvey = ({navigation, route}) => {
           userComment={answers[questionToxic.id]?.userComment}
         />
         <View style={styles.divider} />
-        <Text style={styles.subtitle}>
-          Je pense à remplir &quot;Mon&nbsp;Journal&quot; pour préciser des
-          élements de ma journée
-        </Text>
         <View style={styles.buttonWrapper}>
           <Button
             onPress={() => {
@@ -180,6 +210,10 @@ const DaySurvey = ({navigation, route}) => {
             disabled={!allQuestionHasAnAnswer()}
           />
         </View>
+        <Text style={styles.subtitle}>
+          Je pense à remplir &quot;Mon&nbsp;Journal&quot; pour préciser des
+          élements de ma journée
+        </Text>
       </ScrollView>
     </SafeAreaView>
   );
@@ -306,7 +340,6 @@ const styles = StyleSheet.create({
     flex: 1,
     color: '#000',
     fontSize: 15,
-    marginTop: 15,
     fontWeight: 'normal',
     textAlign: 'center',
   },

diff --git a/src/services/logEvents.js b/src/services/logEvents.js
@@ -141,6 +141,22 @@ const logFeelingAddComment = async (value) => {
     value,
   });
 };
+const logFeelingAddContext = async (value) => {
+  await logEvent({
+    category: FEELING,
+    action: 'FEELING_ADD_CONTEXT',
+    name: 'context',
+    value,
+  });
+};
+const logFeelingResponseToxic = async (value) => {
+  await logEvent({
+    category: FEELING,
+    action: 'FEELING_RESPONSE_TOXIC',
+    name: 'toxic',
+    value,
+  });
+};
 
 const logFeelingEditButtonClick = async () => {
   await logEvent({
@@ -457,4 +473,6 @@ export default {
   logInputDrugSurvey,
   logFeelingEditButtonClick,
   logFeelingAddComment,
+  logFeelingAddContext,
+  logFeelingResponseToxic,
 };