From 056b57c472a24345e474f00c48bce670b71f074a Mon Sep 17 00:00:00 2001 From: "vianney.jourdy" Date: Fri, 24 Jan 2025 11:19:39 +0100 Subject: [PATCH] ajout des questions qui utilisent une checkbox --- app/(quiz)/quiz.tsx | 7 +++- components/CheckboxComponent.tsx | 4 +-- components/quiz/ActivityQuestion.tsx | 48 ++++++++++++++++++++++++++++ components/quiz/GenderQuestion.tsx | 38 ++++++++++++++++++++++ components/quiz/SleepQuestion.tsx | 48 ++++++++++++++++++++++++++++ 5 files changed, 142 insertions(+), 3 deletions(-) create mode 100644 components/quiz/ActivityQuestion.tsx create mode 100644 components/quiz/GenderQuestion.tsx create mode 100644 components/quiz/SleepQuestion.tsx diff --git a/app/(quiz)/quiz.tsx b/app/(quiz)/quiz.tsx index 278d603..7dc6f41 100644 --- a/app/(quiz)/quiz.tsx +++ b/app/(quiz)/quiz.tsx @@ -8,12 +8,17 @@ import Screen from "@/components/ui/Screen"; import Text from "@/components/ui/Text"; import React, { ForwardRefExoticComponent, RefAttributes } from "react"; import { View } from "react-native"; +import GoalQuestion from "@/components/quiz/GoalQuestion"; +import LvlQuestion from "@/components/quiz/LvlQuestion"; +import GenderQuestion from "@/components/quiz/GenderQuestion"; +import ActivityQuestion from "@/components/quiz/ActivityQuestion"; +import SleepQuestion from "@/components/quiz/SleepQuestion"; export default function Quiz() { const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0); const questions: ForwardRefExoticComponent< QuestionChildProps & RefAttributes - >[] = [WeightQuestion, HeightQuestion]; + >[] = [GoalQuestion, GenderQuestion, WeightQuestion, HeightQuestion, LvlQuestion, ActivityQuestion, SleepQuestion]; const goBack = () => { if (currentQuestionIndex >= 1) { diff --git a/components/CheckboxComponent.tsx b/components/CheckboxComponent.tsx index bd78bae..4365ba4 100644 --- a/components/CheckboxComponent.tsx +++ b/components/CheckboxComponent.tsx @@ -14,9 +14,9 @@ interface CheckBoxProps { const CheckBox: React.FC = ({ label, value, onChange, icon }) => { let AwesomIconList = ["weight-scale", "beer"]; return ( - + - {AwesomIconList.includes(icon) ? ( + {AwesomIconList.includes(icon) ? ( ) : ( diff --git a/components/quiz/ActivityQuestion.tsx b/components/quiz/ActivityQuestion.tsx new file mode 100644 index 0000000..2684426 --- /dev/null +++ b/components/quiz/ActivityQuestion.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import Question, { QuestionChildProps } from "./Question"; +import Checkbox from "../CheckboxComponent"; +import {View} from "react-native"; +import {FontAwesome6} from "@expo/vector-icons"; + +export default React.forwardRef( + (props, ref): React.ReactElement => { + const { ...rest } = props; + + const [checkedOne, setCheckedOne] = React.useState(false); + const [checkedTwo, setCheckedTwo] = React.useState(false); + const [checkedThree, setCheckedThree] = React.useState(false); + const [checkedFour, setCheckedFour] = React.useState(false); + const [checkedFive, setCheckedFive] = React.useState(false); + const handleChangeOne = () => { + setCheckedOne(!checkedOne); + }; + const handleChangeTwo = () => { + setCheckedTwo(!checkedTwo); + }; + const handleChangeThree = () => { + setCheckedThree(!checkedThree); + }; + const handleChangeFour = () => { + setCheckedFour(!checkedFour); + }; + const handleChangeFive = () => { + setCheckedFive(!checkedFive); + }; + + return ( + + + + + + + + + + ); + } +); diff --git a/components/quiz/GenderQuestion.tsx b/components/quiz/GenderQuestion.tsx new file mode 100644 index 0000000..26514db --- /dev/null +++ b/components/quiz/GenderQuestion.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import Question, { QuestionChildProps } from "./Question"; +import Checkbox from "../CheckboxComponent"; +import {View} from "react-native"; +import {FontAwesome6} from "@expo/vector-icons"; + +export default React.forwardRef( + (props, ref): React.ReactElement => { + const { ...rest } = props; + + const [checkedOne, setCheckedOne] = React.useState(false); + const [checkedTwo, setCheckedTwo] = React.useState(false); + const [checkedThree, setCheckedThree] = React.useState(false); + const handleChangeOne = () => { + setCheckedOne(!checkedOne); + }; + const handleChangeTwo = () => { + setCheckedTwo(!checkedTwo); + }; + const handleChangeThree = () => { + setCheckedThree(!checkedThree); + }; + + return ( + + + + + + + + ); + } +); diff --git a/components/quiz/SleepQuestion.tsx b/components/quiz/SleepQuestion.tsx new file mode 100644 index 0000000..3abfb73 --- /dev/null +++ b/components/quiz/SleepQuestion.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import Question, { QuestionChildProps } from "./Question"; +import Checkbox from "../CheckboxComponent"; +import {View} from "react-native"; +import {FontAwesome6} from "@expo/vector-icons"; + +export default React.forwardRef( + (props, ref): React.ReactElement => { + const { ...rest } = props; + + const [checkedOne, setCheckedOne] = React.useState(false); + const [checkedTwo, setCheckedTwo] = React.useState(false); + const [checkedThree, setCheckedThree] = React.useState(false); + const [checkedFour, setCheckedFour] = React.useState(false); + const [checkedFive, setCheckedFive] = React.useState(false); + const handleChangeOne = () => { + setCheckedOne(!checkedOne); + }; + const handleChangeTwo = () => { + setCheckedTwo(!checkedTwo); + }; + const handleChangeThree = () => { + setCheckedThree(!checkedThree); + }; + const handleChangeFour = () => { + setCheckedFour(!checkedFour); + }; + const handleChangeFive = () => { + setCheckedFive(!checkedFive); + }; + + return ( + + + + + + + + + + ); + } +);