Merge branch 'Common_Quizz' of https://codefirst.iut.uca.fr/git/Optifit/Mobile into Common_Quizz

app/(quiz)/quiz.tsx

@@ -1,37 +1,36 @@
 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: {} },
-    SportQuestion
+    { component: FrequencyQuestion, props: { isMale: true } },
+    { component: SleepQuestion, props: {} },
   ];
 
   const goBack = () => {
@@ -57,13 +56,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

@@ -13,7 +13,7 @@ interface CheckButtonProps {
 const CheckButton: React.FC<CheckButtonProps> = ({ label, value, onChange, icon }) => {
     let AwesomIconList = ["weight-scale", "beer"];
     return (
-        <TouchableOpacity onPress={onChange} className={`p-5 m-5 rounded-3xl ${value ? 'bg-orange-600 border-4 border-orange-300' : 'bg-gray-300 border-4 border-gray-300'} flex-row items-center`}>
+        <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'} flex-basis-1/3 items-center`}>
             <View className="mr-2.5">
                 {AwesomIconList.includes(icon) ? (
                     <FontAwesome6 name={icon} size={30} color={value ? "white" : "black"}/>

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

@@ -1,6 +1,6 @@
 import React from "react";
 import Question, { QuestionChildProps } from "./Question";
-import CheckButton from "../CheckboxComponent";
+import CheckButton from "../CheckButtonComponent";
 import {View} from "react-native";
 import {FontAwesome6} from "@expo/vector-icons";
 
@@ -83,7 +83,7 @@ export default React.forwardRef<any, QuestionChildProps>(
             }
         };
         const handleChangeSix = () => {
-            if(!checkedFive) {
+            if(!checkedSix) {
                 setCheckedOne(false);
                 setCheckedTwo(false);
                 setCheckedThree(false);
@@ -96,7 +96,7 @@ export default React.forwardRef<any, QuestionChildProps>(
             }
         };
         const handleChangeSeven = () => {
-            if(!checkedFive) {
+            if(!checkedSeven) {
                 setCheckedOne(false);
                 setCheckedTwo(false);
                 setCheckedThree(false);
@@ -109,7 +109,7 @@ export default React.forwardRef<any, QuestionChildProps>(
             }
         };
         const handleChangeEight = () => {
-            if(!checkedFive) {
+            if(!checkedEight) {
                 setCheckedOne(false);
                 setCheckedTwo(false);
                 setCheckedThree(false);
@@ -122,7 +122,7 @@ export default React.forwardRef<any, QuestionChildProps>(
             }
         };
         const handleChangeNine = () => {
-            if(!checkedFive) {
+            if(!checkedNine) {
                 setCheckedOne(false);
                 setCheckedTwo(false);
                 setCheckedThree(false);
@@ -141,13 +141,15 @@ export default React.forwardRef<any, QuestionChildProps>(
                 {...ref}
                 {...rest}
             >
-                <View>
+                <View className={`flex-wrap max-h-fit`}>
                     <CheckButton label="Course" value={checkedOne} onChange={handleChangeOne} icon={"smile-circle"} />
                     <CheckButton label="Marche" value={checkedTwo} onChange={handleChangeTwo} icon={"smileo"} />
                     <CheckButton label="Rando" value={checkedThree} onChange={handleChangeThree} icon={"meh"} />
+
                     <CheckButton label="Skate" value={checkedFour} onChange={handleChangeFour} icon={"frowno"} />
                     <CheckButton label="Cyclisme" value={checkedFive} onChange={handleChangeFive} icon={"frown"} />
                     <CheckButton label="Basket" value={checkedSix} onChange={handleChangeSix} icon={"frown"} />
+
                     <CheckButton label="Cardio" value={checkedSeven} onChange={handleChangeSeven} icon={"frown"} />
                     <CheckButton label="Yoga" value={checkedEight} onChange={handleChangeEight} icon={"frown"} />
                     <CheckButton label="Autre" value={checkedNine} onChange={handleChangeNine} icon={"frown"} />