diff --git a/src/scenes/survey/InputQuestion.js b/src/scenes/survey/InputQuestion.js new file mode 100644 index 00000000..cb55e1e3 --- /dev/null +++ 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 ( + + + + + {explanation ? ( + + ) : ( + + )} + {question.label} + {/* we put a view here because we'll add a item here later */} + + + {explanation && showExplanation ? ( + + {explanation} + + ) : null} + + + + { + setText(v); + onChangeUserComment({key: question.id, userComment: v}); + }} + value={text} + placeholder="Ajouter une précision sur ce critère" + style={styles.textArea} + textAlignVertical={'top'} + /> + + + ); +}; + +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 index b29e7de5..f16e634a 100644 --- 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 index 6819e34f..e29189be 100644 --- 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} /> ))} + { userComment={answers[questionToxic.id]?.userComment} /> - - Je pense à remplir "Mon Journal" pour préciser des - élements de ma journée -