Add sport question

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<
+  interface Question<T = any> {
-    QuestionChildProps & RefAttributes<any>
+    component: React.ForwardRefExoticComponent<T & React.RefAttributes<any>>;
-  >[] = [
+    props: T;
-    GoalQuestion,
+  }
-    GenderQuestion,
+  const questions: Question[] = [
-    WeightQuestion,
+    { component: GoalQuestion, props: {} },
-    HeightQuestion,
+    { component: GenderQuestion, props: {} },
-    LvlQuestion,
+    { component: WeightQuestion, props: {} },
-    AgeQuestion,
+    { component: HeightQuestion, props: {} },
-    BeginnerQuestion,
+    { component: AgeQuestion, props: {} },
-    ActivityQuestion,
+    { component: BeginnerQuestion, props: {} },
-    SleepQuestion
+    { component: LvlQuestion, props: {} },
+    { component: FrequencyQuestion, props: { isMale: true } },
+    { component: SportQuestion, props: {} },
+    { component: SleepQuestion, props: {} },
   ];
 
   const goBack = () => {
@@ -55,13 +58,13 @@ export default function Quiz() {
             </Text>
           </View>
         </View>
-        {questions.map((QuestionComponent, index) => (
+        {questions.map((question, index) =>
-          <React.Fragment key={index}>
+          React.createElement(question.component, {
-            {index == currentQuestionIndex && (
+            isVisible: index === currentQuestionIndex,
-              <QuestionComponent isVisible={true} />
+            key: index,
-            )}
+            ...question.props,
-          </React.Fragment>
+          })
-        ))}
+        )}
         <Button afterIcon="arrowright" onPress={goNext}>
           Suivant
         </Button>

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<CheckButtonProps> = ({
+  label,
+  value,
+  onChange,
+  antIcon,
+  entypoIcon,
+  fontAwesomeIcon,
+  communityIcon,
+}) => {
+  return (
+    <View style={{ flexBasis: "33.33%" }}>
+      <TouchableOpacity
+        onPress={onChange}
+        className={`p-5 m-1 rounded-3xl ${
+          value
+            ? "bg-orange-600 border-4 border-orange-300"
+            : "bg-gray-300 border-4 border-gray-300"
+        } items-center`}
+      >
+        {antIcon ? (
+          <AntDesign
+            name={antIcon}
+            size={30}
+            color={value ? "white" : "black"}
+          />
+        ) : null}
+        {entypoIcon ? (
+          <Entypo
+            name={entypoIcon}
+            size={30}
+            color={value ? "white" : "black"}
+          />
+        ) : null}
+        {communityIcon ? (
+          <MaterialCommunityIcons
+            name={communityIcon}
+            size={30}
+            color={value ? "white" : "black"}
+          />
+        ) : null}
+        {fontAwesomeIcon ? (
+          <FontAwesome6
+            name={fontAwesomeIcon}
+            size={30}
+            color={value ? "white" : "black"}
+          />
+        ) : null}
+
+        <Text className={`${value ? "text-white" : "text-black"}`}>
+          {label}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default CheckButton;

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;

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<any, FrequencyQuestionProps>(
+  (props, ref): React.ReactElement => {
+    const { isMale, ...rest } = props;
+    const ANSWERS = ["1", "2", "3", "4", "5"];
+    const [answer, setAnswer] = React.useState("1");
+    return (
+      <Question question="Nombre de séance(s) par semaine ?" {...ref} {...rest}>
+        <View className="items-center">
+          <Text size="2xl">
+            Je suis {isMale ? "prêt" : "prête"} à m'entraîner
+          </Text>
+          <Text size="9xl" weight="bold">
+            {answer}
+          </Text>
+          <Text size="2xl">fois par semaine !</Text>
+        </View>
+        <SegmentedControl
+          values={ANSWERS}
+          selectedIndex={ANSWERS.indexOf(answer)}
+          onValueChange={setAnswer}
+        />
+      </Question>
+    );
+  }
+);

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<any, QuestionProps>(
       </View>
     );
   }
-);
+);

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<any, QuestionChildProps>(
+  (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 (
+      <Question question="Quel sport  ?" {...ref} {...rest}>
+        <View className={`flex-wrap flex-row`}>
+          <CheckButton
+            label="Course"
+            value={checkedOne}
+            onChange={handleChangeOne}
+            fontAwesomeIcon={"person-running"}
+          />
+          <CheckButton
+            label="Marche"
+            value={checkedTwo}
+            onChange={handleChangeTwo}
+            fontAwesomeIcon={"person-walking"}
+          />
+          <CheckButton
+            label="Rando"
+            value={checkedThree}
+            onChange={handleChangeThree}
+            fontAwesomeIcon={"person-hiking"}
+          />
+
+          <CheckButton
+            label="Skate"
+            value={checkedFour}
+            onChange={handleChangeFour}
+            communityIcon={"skateboarding"}
+          />
+          <CheckButton
+            label="Cyclisme"
+            value={checkedFive}
+            onChange={handleChangeFive}
+            communityIcon={"bike"}
+          />
+          <CheckButton
+            label="Basket"
+            value={checkedSix}
+            onChange={handleChangeSix}
+            fontAwesomeIcon={"basketball"}
+          />
+
+          <CheckButton
+            label="Cardio"
+            value={checkedSeven}
+            onChange={handleChangeSeven}
+            antIcon={"heart"}
+          />
+          <CheckButton
+            label="Yoga"
+            value={checkedEight}
+            onChange={handleChangeEight}
+            communityIcon={"yoga"}
+          />
+          <CheckButton
+            label="Autre"
+            value={checkedNine}
+            onChange={handleChangeNine}
+            antIcon={"setting"}
+          />
+        </View>
+      </Question>
+    );
+  }
+);