diff --git a/app/(quiz)/quiz.tsx b/app/(quiz)/quiz.tsx index 7b64827..41f80ac 100644 --- a/app/(quiz)/quiz.tsx +++ b/app/(quiz)/quiz.tsx @@ -1,35 +1,38 @@ import BackButton from "@/components/BackButton"; import { toBgColor, toTextColor } from "@/components/Constants"; -import AgeQuestion from "@/components/quiz/AgeQuestion"; -import BeginnerQuestion from "@/components/quiz/BeginnerQuestion"; -import HeightQuestion from "@/components/quiz/HeightQuestion"; -import { QuestionChildProps } from "@/components/quiz/Question"; -import WeightQuestion from "@/components/quiz/WeightQuestion"; import Button from "@/components/ui/Button"; import Screen from "@/components/ui/Screen"; import Text from "@/components/ui/Text"; -import React, { ForwardRefExoticComponent, RefAttributes } from "react"; +import React from "react"; import { View } from "react-native"; +import FrequencyQuestion from "@/components/quiz/FrequencyQuestion"; 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 WeightQuestion from "@/components/quiz/WeightQuestion"; +import HeightQuestion from "@/components/quiz/HeightQuestion"; +import AgeQuestion from "@/components/quiz/AgeQuestion"; +import BeginnerQuestion from "@/components/quiz/BeginnerQuestion"; +import LvlQuestion from "@/components/quiz/LvlQuestion"; import SleepQuestion from "@/components/quiz/SleepQuestion"; +import SportQuestion from "@/components/quiz/SportQuestion"; export default function Quiz() { const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0); - const questions: ForwardRefExoticComponent< - QuestionChildProps & RefAttributes - >[] = [ - GoalQuestion, - GenderQuestion, - WeightQuestion, - HeightQuestion, - LvlQuestion, - AgeQuestion, - BeginnerQuestion, - ActivityQuestion, - SleepQuestion + interface Question { + component: React.ForwardRefExoticComponent>; + props: T; + } + const questions: Question[] = [ + { component: GoalQuestion, props: {} }, + { component: GenderQuestion, props: {} }, + { component: WeightQuestion, props: {} }, + { component: HeightQuestion, props: {} }, + { component: AgeQuestion, props: {} }, + { component: BeginnerQuestion, props: {} }, + { component: LvlQuestion, props: {} }, + { component: FrequencyQuestion, props: { isMale: true } }, + { component: SportQuestion, props: {} }, + { component: SleepQuestion, props: {} }, ]; const goBack = () => { @@ -55,13 +58,13 @@ export default function Quiz() { - {questions.map((QuestionComponent, index) => ( - - {index == currentQuestionIndex && ( - - )} - - ))} + {questions.map((question, index) => + React.createElement(question.component, { + isVisible: index === currentQuestionIndex, + key: index, + ...question.props, + }) + )} diff --git a/components/CheckButtonComponent.tsx b/components/CheckButtonComponent.tsx new file mode 100644 index 0000000..d5fed00 --- /dev/null +++ b/components/CheckButtonComponent.tsx @@ -0,0 +1,82 @@ +import React from "react"; +import { View, Text, TouchableOpacity } from "react-native"; +import { + AntDesign, + Entypo, + FontAwesome6, + MaterialCommunityIcons, +} from "@expo/vector-icons"; +import { + AntDesignIconNames, + CommunityIconNames, + EntypoIconNames, + FontAwesomeIconNames, +} from "./Icons"; + +interface CheckButtonProps { + label: string; + value: boolean; + onChange: () => void; + antIcon?: AntDesignIconNames; + entypoIcon?: EntypoIconNames; + fontAwesomeIcon?: FontAwesomeIconNames; + communityIcon?: CommunityIconNames; +} + +const CheckButton: React.FC = ({ + label, + value, + onChange, + antIcon, + entypoIcon, + fontAwesomeIcon, + communityIcon, +}) => { + return ( + + + {antIcon ? ( + + ) : null} + {entypoIcon ? ( + + ) : null} + {communityIcon ? ( + + ) : null} + {fontAwesomeIcon ? ( + + ) : null} + + + {label} + + + + ); +}; + +export default CheckButton; diff --git a/components/CheckboxComponent.tsx b/components/CheckboxComponent.tsx index 4365ba4..9103363 100644 --- a/components/CheckboxComponent.tsx +++ b/components/CheckboxComponent.tsx @@ -2,7 +2,6 @@ import React, {Component} from "react"; import {View, Text, TouchableOpacity, Image} from "react-native"; import {AntDesign, FontAwesome6} from "@expo/vector-icons"; import {AntDesignIconNames} from "./Icons"; -import PropTypes, {string} from "prop-types"; interface CheckBoxProps { label: string; diff --git a/components/quiz/FrequencyQuestion.tsx b/components/quiz/FrequencyQuestion.tsx new file mode 100644 index 0000000..3b8d5a1 --- /dev/null +++ b/components/quiz/FrequencyQuestion.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import Question, { QuestionChildProps } from "./Question"; +import Text from "../ui/Text"; +import SegmentedControl from "../ui/SegmentedControl"; +import { View } from "react-native"; + +export interface FrequencyQuestionProps extends QuestionChildProps { + isMale: boolean; +} + +export default React.forwardRef( + (props, ref): React.ReactElement => { + const { isMale, ...rest } = props; + const ANSWERS = ["1", "2", "3", "4", "5"]; + const [answer, setAnswer] = React.useState("1"); + return ( + + + + Je suis {isMale ? "prêt" : "prête"} à m'entraîner + + + {answer} + + fois par semaine ! + + + + ); + } +); diff --git a/components/quiz/Question.tsx b/components/quiz/Question.tsx index 6b1ba0b..1dea95d 100644 --- a/components/quiz/Question.tsx +++ b/components/quiz/Question.tsx @@ -3,7 +3,7 @@ import React from "react"; import { View, ViewProps } from "react-native"; export interface QuestionChildProps extends ViewProps { - isVisible: boolean; + isVisible?: boolean; } interface QuestionProps extends QuestionChildProps { @@ -26,4 +26,4 @@ export default React.forwardRef( ); } -); \ No newline at end of file +); diff --git a/components/quiz/SportQuestion.tsx b/components/quiz/SportQuestion.tsx new file mode 100644 index 0000000..69c17a1 --- /dev/null +++ b/components/quiz/SportQuestion.tsx @@ -0,0 +1,200 @@ +import React from "react"; +import Question, { QuestionChildProps } from "./Question"; +import CheckButton from "../CheckboxComponent"; +import { View } from "react-native"; + +export default React.forwardRef( + (props, ref): React.ReactElement => { + const { ...rest } = props; + + const [checkedOne, setCheckedOne] = React.useState(true); + 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 [checkedSix, setCheckedSix] = React.useState(false); + const [checkedSeven, setCheckedSeven] = React.useState(false); + const [checkedEight, setCheckedEight] = React.useState(false); + const [checkedNine, setCheckedNine] = React.useState(false); + const handleChangeOne = () => { + if (!checkedOne) { + setCheckedOne(!checkedOne); + setCheckedTwo(false); + setCheckedThree(false); + setCheckedFour(false); + setCheckedFive(false); + setCheckedSix(false); + setCheckedSeven(false); + setCheckedEight(false); + setCheckedNine(false); + } + }; + const handleChangeTwo = () => { + if (!checkedTwo) { + setCheckedOne(false); + setCheckedTwo(!checkedTwo); + setCheckedThree(false); + setCheckedFour(false); + setCheckedFive(false); + setCheckedSix(false); + setCheckedSeven(false); + setCheckedEight(false); + setCheckedNine(false); + } + }; + const handleChangeThree = () => { + if (!checkedThree) { + setCheckedOne(false); + setCheckedTwo(false); + setCheckedThree(!checkedThree); + setCheckedFour(false); + setCheckedFive(false); + setCheckedSix(false); + setCheckedSeven(false); + setCheckedEight(false); + setCheckedNine(false); + } + }; + const handleChangeFour = () => { + if (!checkedFour) { + setCheckedOne(false); + setCheckedTwo(false); + setCheckedThree(false); + setCheckedFour(!checkedFour); + setCheckedFive(false); + setCheckedSix(false); + setCheckedSeven(false); + setCheckedEight(false); + setCheckedNine(false); + } + }; + const handleChangeFive = () => { + if (!checkedFive) { + setCheckedOne(false); + setCheckedTwo(false); + setCheckedThree(false); + setCheckedFour(false); + setCheckedFive(!checkedFive); + setCheckedSix(false); + setCheckedSeven(false); + setCheckedEight(false); + setCheckedNine(false); + } + }; + const handleChangeSix = () => { + if (!checkedFive) { + setCheckedOne(false); + setCheckedTwo(false); + setCheckedThree(false); + setCheckedFour(false); + setCheckedFive(false); + setCheckedSix(!checkedSix); + setCheckedSeven(false); + setCheckedEight(false); + setCheckedNine(false); + } + }; + const handleChangeSeven = () => { + if (!checkedFive) { + setCheckedOne(false); + setCheckedTwo(false); + setCheckedThree(false); + setCheckedFour(false); + setCheckedFive(false); + setCheckedSix(false); + setCheckedSeven(!checkedSeven); + setCheckedEight(false); + setCheckedNine(false); + } + }; + const handleChangeEight = () => { + if (!checkedFive) { + setCheckedOne(false); + setCheckedTwo(false); + setCheckedThree(false); + setCheckedFour(false); + setCheckedFive(false); + setCheckedSix(false); + setCheckedSeven(false); + setCheckedEight(!checkedEight); + setCheckedNine(false); + } + }; + const handleChangeNine = () => { + if (!checkedFive) { + setCheckedOne(false); + setCheckedTwo(false); + setCheckedThree(false); + setCheckedFour(false); + setCheckedFive(false); + setCheckedSix(false); + setCheckedSeven(false); + setCheckedEight(false); + setCheckedNine(!checkedNine); + } + }; + + return ( + + + + + + + + + + + + + + + + ); + } +);