Add quiz behind #12
Merged
anthony.richard
merged 1 commits from Quiz_Behind into Common_Quizz 4 months ago
|
After Width: | Height: | Size: 39 KiB |
@ -0,0 +1,149 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import { View, TouchableOpacity, ViewProps } from "react-native";
|
||||
import Text from "./ui/Text";
|
||||
import {
|
||||
AntDesign,
|
||||
Entypo,
|
||||
FontAwesome6,
|
||||
Ionicons,
|
||||
MaterialCommunityIcons,
|
||||
} from "@expo/vector-icons";
|
||||
import {
|
||||
AntDesignIconNames,
|
||||
CommunityIconNames,
|
||||
EntypoIconNames,
|
||||
FontAwesome6IconNames,
|
||||
FontAwesomeIconNames,
|
||||
IonIconNames,
|
||||
} from "./Icons";
|
||||
|
||||
export type CheckBoxDirection = "row" | "col";
|
||||
|
||||
interface CheckBoxProps extends ViewProps {
|
||||
label?: string;
|
||||
onChange: () => void;
|
||||
antIcon?: AntDesignIconNames;
|
||||
entypoIcon?: EntypoIconNames;
|
||||
fontAwesomeIcon?: FontAwesomeIconNames;
|
||||
fontAwesome6Icon?: FontAwesome6IconNames;
|
||||
communityIcon?: CommunityIconNames;
|
||||
IonIcon?: IonIconNames;
|
||||
value: boolean;
|
||||
isCheckIconVisible?: boolean;
|
||||
endText?: string;
|
||||
direction?: CheckBoxDirection;
|
||||
}
|
||||
|
||||
export default forwardRef<any, CheckBoxProps>(
|
||||
(
|
||||
{
|
||||
label,
|
||||
onChange,
|
||||
antIcon,
|
||||
entypoIcon,
|
||||
fontAwesomeIcon,
|
||||
fontAwesome6Icon,
|
||||
communityIcon,
|
||||
IonIcon,
|
||||
value,
|
||||
isCheckIconVisible,
|
||||
endText,
|
||||
direction,
|
||||
className,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={onChange}
|
||||
className={
|
||||
"items-center p-4 rounded-3xl" +
|
||||
" " +
|
||||
((direction ?? "row") == "row"
|
||||
? "flex-row justify-between gap-4"
|
||||
: "justify-center gap-1") +
|
||||
" " +
|
||||
(value
|
||||
? "bg-orange-600 border-4 border-orange-300"
|
||||
: "bg-gray-300 border-4 border-gray-300") +
|
||||
" " +
|
||||
(className ?? "")
|
||||
}
|
||||
{...props}
|
||||
{...ref}
|
||||
>
|
||||
<View>
|
||||
{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}
|
||||
{fontAwesome6Icon ? (
|
||||
<FontAwesome6
|
||||
name={fontAwesome6Icon}
|
||||
size={30}
|
||||
color={value ? "white" : "black"}
|
||||
/>
|
||||
) : null}
|
||||
{IonIcon ? (
|
||||
<Ionicons
|
||||
name={IonIcon}
|
||||
size={30}
|
||||
color={value ? "white" : "black"}
|
||||
/>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
{label != null ? (
|
||||
<Text
|
||||
weight="bold"
|
||||
color={value ? "white" : "black"}
|
||||
className={(direction ?? "row") == "row" ? "flex-1" : ""}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
) : null}
|
||||
|
||||
{isCheckIconVisible ? (
|
||||
<View
|
||||
className={
|
||||
"h-5 w-5 rounded border justify-center items-center" +
|
||||
" " +
|
||||
(value ? "border-white" : "border-black")
|
||||
}
|
||||
>
|
||||
{value && <View className="h-2 w-2 bg-white" />}
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{endText != null ? (
|
||||
<Text color={value ? "white" : "black"}>{endText}</Text>
|
||||
) : null}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
);
|
||||
@ -1,68 +0,0 @@
|
||||
import React, {Component} from "react";
|
||||
import {View, Text, TouchableOpacity, Image} 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;
|
||||
@ -1,34 +0,0 @@
|
||||
import React, {Component} from "react";
|
||||
import {View, Text, TouchableOpacity, Image} from "react-native";
|
||||
import {AntDesign, FontAwesome6} from "@expo/vector-icons";
|
||||
import {AntDesignIconNames} from "./Icons";
|
||||
|
||||
interface CheckBoxProps {
|
||||
label: string;
|
||||
value: boolean;
|
||||
onChange: () => void;
|
||||
icon: AntDesignIconNames | string;
|
||||
}
|
||||
|
||||
const CheckBox: React.FC<CheckBoxProps> = ({ label, value, onChange, icon }) => {
|
||||
let AwesomIconList = ["weight-scale", "beer"];
|
||||
return (
|
||||
<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-row items-center`}>
|
||||
<View className="mr-2.5">
|
||||
{AwesomIconList.includes(icon) ? (
|
||||
<FontAwesome6 name={icon} size={30} color={value ? "white" : "black"}/>
|
||||
) : (
|
||||
<AntDesign name={icon ?? "arrowleft"} size={30} color={value ? "white" : "black"}/>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<Text className={`${value ? 'text-white' : 'text-black'} flex-1`}>{label}</Text>
|
||||
|
||||
<View className={`h-5 w-5 rounded border ${value ? 'border-white' : 'border-black'} items-center justify-center mr-2.5`}>
|
||||
{value && <View className="h-2 w-2 bg-white" />}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
export default CheckBox;
|
||||
@ -1,3 +1,26 @@
|
||||
import { AntDesign } from "@expo/vector-icons";
|
||||
import {
|
||||
AntDesign,
|
||||
Entypo,
|
||||
FontAwesome,
|
||||
Ionicons,
|
||||
MaterialCommunityIcons,
|
||||
} from "@expo/vector-icons";
|
||||
|
||||
export type AntDesignIconNames = keyof typeof AntDesign.glyphMap;
|
||||
export type AntDesignIconNames = keyof typeof AntDesign.glyphMap;
|
||||
export type EntypoIconNames = keyof typeof Entypo.glyphMap;
|
||||
export type FontAwesomeIconNames = keyof typeof FontAwesome.glyphMap;
|
||||
export type FontAwesome6IconNames =
|
||||
| "person-running"
|
||||
| "person-walking"
|
||||
| "person-hiking"
|
||||
| "skateboarding"
|
||||
| "bike"
|
||||
| "basketball"
|
||||
| "heart"
|
||||
| "yoga"
|
||||
| "setting"
|
||||
| "beer"
|
||||
| "shield-heart"
|
||||
| "weight-scale";
|
||||
export type CommunityIconNames = keyof typeof MaterialCommunityIcons.glyphMap;
|
||||
export type IonIconNames = keyof typeof Ionicons.glyphMap;
|
||||
|
||||
@ -1,78 +1,78 @@
|
||||
import React from "react";
|
||||
import React, { useImperativeHandle, useState } from "react";
|
||||
import Question, { QuestionChildProps } from "./Question";
|
||||
import Checkbox from "../CheckboxComponent";
|
||||
import {View} from "react-native";
|
||||
import {FontAwesome6} from "@expo/vector-icons";
|
||||
import Checkbox from "../CheckBox";
|
||||
import { View } from "react-native";
|
||||
import {
|
||||
CommunityIconNames,
|
||||
AntDesignIconNames,
|
||||
EntypoIconNames,
|
||||
FontAwesome6IconNames,
|
||||
} from "../Icons";
|
||||
import { ESportLevel, SportLevels } from "@/model/enums/Enums";
|
||||
|
||||
export default React.forwardRef<any, QuestionChildProps>(
|
||||
(props, ref): React.ReactElement => {
|
||||
const { ...rest } = props;
|
||||
export interface ActivityQuestionRef {
|
||||
getAnswer: () => ESportLevel;
|
||||
}
|
||||
|
||||
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 handleChangeOne = () => {
|
||||
if(!checkedOne) {
|
||||
setCheckedOne(!checkedOne);
|
||||
setCheckedTwo(false);
|
||||
setCheckedThree(false);
|
||||
setCheckedFour(false);
|
||||
setCheckedFive(false);
|
||||
}
|
||||
};
|
||||
const handleChangeTwo = () => {
|
||||
if(!checkedTwo) {
|
||||
setCheckedOne(false);
|
||||
setCheckedTwo(!checkedTwo);
|
||||
setCheckedThree(false);
|
||||
setCheckedFour(false);
|
||||
setCheckedFive(false);
|
||||
}
|
||||
};
|
||||
const handleChangeThree = () => {
|
||||
if(!checkedThree) {
|
||||
setCheckedOne(false);
|
||||
setCheckedTwo(false);
|
||||
setCheckedThree(!checkedThree);
|
||||
setCheckedFour(false);
|
||||
setCheckedFive(false);
|
||||
}
|
||||
};
|
||||
const handleChangeFour = () => {
|
||||
if(!checkedFour) {
|
||||
setCheckedOne(false);
|
||||
setCheckedTwo(false);
|
||||
setCheckedThree(false);
|
||||
setCheckedFour(!checkedFour);
|
||||
setCheckedFive(false);
|
||||
}
|
||||
};
|
||||
const handleChangeFive = () => {
|
||||
if(!checkedFive) {
|
||||
setCheckedOne(false);
|
||||
setCheckedTwo(false);
|
||||
setCheckedThree(false);
|
||||
setCheckedFour(false);
|
||||
setCheckedFive(!checkedFive);
|
||||
}
|
||||
};
|
||||
export default React.forwardRef<ActivityQuestionRef, QuestionChildProps>(
|
||||
({ ...props }, ref): React.ReactElement => {
|
||||
const [checkedItems, setCheckedItems] = useState([
|
||||
true,
|
||||
...Array(4).fill(false),
|
||||
]);
|
||||
|
||||
return (
|
||||
<Question
|
||||
question="Comment estimez-vous votre niveau d'activité ?"
|
||||
{...ref}
|
||||
{...rest}
|
||||
>
|
||||
<View>
|
||||
<Checkbox label="Athlète" value={checkedOne} onChange={handleChangeOne} icon={"smile-circle"} />
|
||||
<Checkbox label="Très sportif" value={checkedTwo} onChange={handleChangeTwo} icon={"smileo"} />
|
||||
<Checkbox label="Un peu sportif" value={checkedThree} onChange={handleChangeThree} icon={"meh"} />
|
||||
<Checkbox label="Peu sportif" value={checkedFour} onChange={handleChangeFour} icon={"frowno"} />
|
||||
<Checkbox label="Pas du tout sportif" value={checkedFive} onChange={handleChangeFive} icon={"frown"} />
|
||||
</View>
|
||||
</Question>
|
||||
);
|
||||
const handleChange = (index: number) => {
|
||||
const newCheckedState = checkedItems.map((_, i) => i === index);
|
||||
setCheckedItems(newCheckedState);
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getAnswer: () => {
|
||||
var selected = 0;
|
||||
checkedItems.forEach((item, index) => {
|
||||
if (item) {
|
||||
selected = index;
|
||||
}
|
||||
});
|
||||
return SportLevels[SportLevels.length - 1 - selected];
|
||||
},
|
||||
}));
|
||||
|
||||
interface IData {
|
||||
label: string;
|
||||
commIcon?: CommunityIconNames;
|
||||
antIcon?: AntDesignIconNames;
|
||||
entypoIcon?: EntypoIconNames;
|
||||
fontAwesomeIcon?: FontAwesome6IconNames;
|
||||
}
|
||||
|
||||
const data: IData[] = [
|
||||
{ label: "Athlète", antIcon: "smile-circle" },
|
||||
{ label: "Très sportif", antIcon: "smileo" },
|
||||
{ label: "Un peu sportif", antIcon: "meh" },
|
||||
{ label: "Peu sportif", antIcon: "frowno" },
|
||||
{ label: "Pas du tout sportif", antIcon: "frown" },
|
||||
];
|
||||
|
||||
return (
|
||||
<Question
|
||||
question="Comment estimez-vous votre niveau d'activité ?"
|
||||
{...ref}
|
||||
{...props}
|
||||
>
|
||||
<View className="gap-2">
|
||||
{data.map((item, index) => (
|
||||
<Checkbox
|
||||
key={index}
|
||||
label={item.label}
|
||||
value={checkedItems[index]}
|
||||
onChange={() => handleChange(index)}
|
||||
antIcon={item.antIcon}
|
||||
endText={(data.length - index).toString()}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</Question>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
@ -1,51 +1,55 @@
|
||||
import React from "react";
|
||||
import React, {
|
||||
forwardRef,
|
||||
ReactElement,
|
||||
useImperativeHandle,
|
||||
useState,
|
||||
} from "react";
|
||||
import Question, { QuestionChildProps } from "./Question";
|
||||
import Checkbox from "../CheckboxComponent";
|
||||
import {View} from "react-native";
|
||||
import {FontAwesome6} from "@expo/vector-icons";
|
||||
import Checkbox from "../CheckBox";
|
||||
import { View } from "react-native";
|
||||
|
||||
export default React.forwardRef<any, QuestionChildProps>(
|
||||
(props, ref): React.ReactElement => {
|
||||
const { ...rest } = props;
|
||||
export interface GenderQuestionRef {
|
||||
getAnswer: () => boolean;
|
||||
}
|
||||
|
||||
const [checkedOne, setCheckedOne] = React.useState(false);
|
||||
const [checkedTwo, setCheckedTwo] = React.useState(false);
|
||||
const [checkedThree, setCheckedThree] = React.useState(true);
|
||||
const handleChangeOne = () => {
|
||||
if(!checkedOne)
|
||||
{
|
||||
setCheckedOne(!checkedOne);
|
||||
setCheckedTwo(false);
|
||||
setCheckedThree(false);
|
||||
}
|
||||
};
|
||||
const handleChangeTwo = () => {
|
||||
if(!checkedTwo) {
|
||||
setCheckedOne(false);
|
||||
setCheckedTwo(!checkedTwo);
|
||||
setCheckedThree(false);
|
||||
}
|
||||
};
|
||||
const handleChangeThree = () => {
|
||||
if(!checkedThree) {
|
||||
setCheckedOne(false);
|
||||
setCheckedTwo(false);
|
||||
setCheckedThree(!checkedThree);
|
||||
}
|
||||
};
|
||||
export default forwardRef<GenderQuestionRef, QuestionChildProps>(
|
||||
({ ...props }, ref): ReactElement => {
|
||||
const [answer, setAnswer] = useState(true);
|
||||
|
||||
return (
|
||||
<Question
|
||||
question="Quel est votre genre physiologique ?"
|
||||
{...ref}
|
||||
{...rest}
|
||||
>
|
||||
<View>
|
||||
<Checkbox label="Homme" value={checkedOne} onChange={handleChangeOne} icon={"man"} />
|
||||
<Checkbox label="Femme" value={checkedTwo} onChange={handleChangeTwo} icon={"woman"} />
|
||||
<Checkbox label="Je ne préfère pas répondre" value={checkedThree} onChange={handleChangeThree} icon={"minuscircle"} />
|
||||
</View>
|
||||
</Question>
|
||||
);
|
||||
}
|
||||
useImperativeHandle(ref, () => ({
|
||||
getAnswer: () => answer,
|
||||
}));
|
||||
|
||||
const handleChangeOne = () => {
|
||||
setAnswer(true);
|
||||
};
|
||||
const handleChangeTwo = () => {
|
||||
setAnswer(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Question
|
||||
question="Quel est votre genre physiologique ?"
|
||||
{...ref}
|
||||
{...props}
|
||||
>
|
||||
<View className="gap-2">
|
||||
<Checkbox
|
||||
label="Homme"
|
||||
value={answer}
|
||||
onChange={handleChangeOne}
|
||||
antIcon={"man"}
|
||||
isCheckIconVisible={true}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Femme"
|
||||
value={!answer}
|
||||
onChange={handleChangeTwo}
|
||||
antIcon={"woman"}
|
||||
isCheckIconVisible={true}
|
||||
/>
|
||||
</View>
|
||||
</Question>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
@ -0,0 +1,54 @@
|
||||
import React, { useState } from "react";
|
||||
import Question, { QuestionChildProps } from "./Question";
|
||||
import { Image, View, Text } from "react-native";
|
||||
import { MultiSelect } from "react-native-element-dropdown";
|
||||
|
||||
//@ts-ignore
|
||||
import WheelChair from "@/assets/images/wheelchair.png";
|
||||
import { EHealthProblem } from "@/model/enums/Enums";
|
||||
|
||||
export default React.forwardRef<any, QuestionChildProps>(
|
||||
({ ...props }, ref) => {
|
||||
const [selected, setSelected] = useState<string[]>([]);
|
||||
|
||||
type DataItem = {
|
||||
label: string;
|
||||
value: EHealthProblem;
|
||||
};
|
||||
|
||||
const data: DataItem[] = [
|
||||
{ label: "Arthrose", value: "ARTHROSE" },
|
||||
{ label: "Migraine", value: "MIGRAINE" },
|
||||
];
|
||||
|
||||
const renderItem = (item: { label: string }) => {
|
||||
return (
|
||||
<View className="p-4">
|
||||
<Text>{item.label}</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Question
|
||||
question="Avez-vous des problèmes physiques ?"
|
||||
{...props}
|
||||
{...ref}
|
||||
>
|
||||
<Image className="self-center" source={WheelChair} alt="" />
|
||||
<View className="border-2 border-orange-500 rounded-3xl p-4">
|
||||
<MultiSelect
|
||||
data={data}
|
||||
labelField="label"
|
||||
valueField="value"
|
||||
placeholder="Selectionnez un problème physique "
|
||||
searchPlaceholder="Search..."
|
||||
value={selected}
|
||||
onChange={setSelected}
|
||||
renderItem={renderItem}
|
||||
/>
|
||||
</View>
|
||||
</Question>
|
||||
);
|
||||
}
|
||||
);
|
||||
@ -1,15 +0,0 @@
|
||||
import React from "react";
|
||||
import Question, { QuestionChildProps } from "./Question";
|
||||
|
||||
export default React.forwardRef<any, QuestionChildProps>(
|
||||
(props, ref): React.ReactElement => {
|
||||
const { ...rest } = props;
|
||||
return (
|
||||
<Question
|
||||
question="Comment estimez vous votre niveau d'activité ?"
|
||||
{...ref}
|
||||
{...rest}
|
||||
></Question>
|
||||
);
|
||||
}
|
||||
);
|
||||
@ -1,78 +1,91 @@
|
||||
import React from "react";
|
||||
import React, { useImperativeHandle, useState } from "react";
|
||||
import Question, { QuestionChildProps } from "./Question";
|
||||
import Checkbox from "../CheckboxComponent";
|
||||
import {View} from "react-native";
|
||||
import {FontAwesome6} from "@expo/vector-icons";
|
||||
import Checkbox from "../CheckBox";
|
||||
import { View } from "react-native";
|
||||
import { ESleepLevel, SleepLevels } from "@/model/enums/Enums";
|
||||
import { AntDesignIconNames } from "../Icons";
|
||||
|
||||
export default React.forwardRef<any, QuestionChildProps>(
|
||||
(props, ref): React.ReactElement => {
|
||||
const { ...rest } = props;
|
||||
export interface SleepQuestionRef {
|
||||
getAnswer: () => ESleepLevel;
|
||||
}
|
||||
|
||||
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 handleChangeOne = () => {
|
||||
if(!checkedOne) {
|
||||
setCheckedOne(!checkedOne);
|
||||
setCheckedTwo(false);
|
||||
setCheckedThree(false);
|
||||
setCheckedFour(false);
|
||||
setCheckedFive(false);
|
||||
}
|
||||
};
|
||||
const handleChangeTwo = () => {
|
||||
if(!checkedTwo) {
|
||||
setCheckedOne(false);
|
||||
setCheckedTwo(!checkedTwo);
|
||||
setCheckedThree(false);
|
||||
setCheckedFour(false);
|
||||
setCheckedFive(false);
|
||||
}
|
||||
};
|
||||
const handleChangeThree = () => {
|
||||
if(!checkedThree) {
|
||||
setCheckedOne(false);
|
||||
setCheckedTwo(false);
|
||||
setCheckedThree(!checkedThree);
|
||||
setCheckedFour(false);
|
||||
setCheckedFive(false);
|
||||
}
|
||||
};
|
||||
const handleChangeFour = () => {
|
||||
if(!checkedFour) {
|
||||
setCheckedOne(false);
|
||||
setCheckedTwo(false);
|
||||
setCheckedThree(false);
|
||||
setCheckedFour(!checkedFour);
|
||||
setCheckedFive(false);
|
||||
}
|
||||
};
|
||||
const handleChangeFive = () => {
|
||||
if(!checkedFive) {
|
||||
setCheckedOne(false);
|
||||
setCheckedTwo(false);
|
||||
setCheckedThree(false);
|
||||
setCheckedFour(false);
|
||||
setCheckedFive(!checkedFive);
|
||||
}
|
||||
};
|
||||
export default React.forwardRef<SleepQuestionRef, QuestionChildProps>(
|
||||
({ ...props }, ref): React.ReactElement => {
|
||||
const [checkedItems, setCheckedItems] = useState([
|
||||
true,
|
||||
...Array(4).fill(false),
|
||||
]);
|
||||
|
||||
return (
|
||||
<Question
|
||||
question="Quelle est la qualité de votre sommeil ?"
|
||||
{...ref}
|
||||
{...rest}
|
||||
>
|
||||
<View>
|
||||
<Checkbox label="Excellente" value={checkedOne} onChange={handleChangeOne} icon={"smile-circle"} />
|
||||
<Checkbox label="Bien" value={checkedTwo} onChange={handleChangeTwo} icon={"smileo"} />
|
||||
<Checkbox label="Mauvaise" value={checkedThree} onChange={handleChangeThree} icon={"meh"} />
|
||||
<Checkbox label="Très mauvaise" value={checkedFour} onChange={handleChangeFour} icon={"frowno"} />
|
||||
<Checkbox label="Insomniaque" value={checkedFive} onChange={handleChangeFive} icon={"frown"} />
|
||||
</View>
|
||||
</Question>
|
||||
);
|
||||
const handleChange = (index: number) => {
|
||||
const newCheckedState = checkedItems.map((_, i) => i === index);
|
||||
setCheckedItems(newCheckedState);
|
||||
};
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
getAnswer: () => {
|
||||
var selected = 0;
|
||||
checkedItems.forEach((item, index) => {
|
||||
if (item) {
|
||||
selected = index;
|
||||
}
|
||||
});
|
||||
return SleepLevels[SleepLevels.length - 1 - selected];
|
||||
},
|
||||
}));
|
||||
|
||||
interface IData {
|
||||
label: string;
|
||||
icon: AntDesignIconNames;
|
||||
endText: string;
|
||||
}
|
||||
|
||||
const data: IData[] = [
|
||||
{
|
||||
label: "Excellent",
|
||||
icon: "smile-circle",
|
||||
endText: ">8 heures",
|
||||
},
|
||||
{
|
||||
label: "Bien",
|
||||
icon: "smileo",
|
||||
endText: "7-8 heures",
|
||||
},
|
||||
{
|
||||
label: "Mauvaise",
|
||||
icon: "meh",
|
||||
endText: "6-7 heures",
|
||||
},
|
||||
{
|
||||
label: "Très mauvaise",
|
||||
icon: "frowno",
|
||||
endText: "3-4 heures",
|
||||
},
|
||||
{
|
||||
label: "Insomniaque",
|
||||
icon: "frown",
|
||||
endText: "<2 heures",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Question
|
||||
question="Quelle est la qualité de votre sommeil ?"
|
||||
{...ref}
|
||||
{...props}
|
||||
>
|
||||
<View className="gap-2">
|
||||
{data.map((item, index) => (
|
||||
<Checkbox
|
||||
key={index}
|
||||
label={item.label}
|
||||
value={checkedItems[index]}
|
||||
onChange={() => handleChange(index)}
|
||||
antIcon={item.icon}
|
||||
endText={item.endText}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</Question>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
@ -1,160 +1,86 @@
|
||||
import React from "react";
|
||||
import React, {
|
||||
forwardRef,
|
||||
ReactElement,
|
||||
useImperativeHandle,
|
||||
useState,
|
||||
} from "react";
|
||||
import Question, { QuestionChildProps } from "./Question";
|
||||
import CheckButton from "../CheckButtonComponent";
|
||||
import {View} from "react-native";
|
||||
import {FontAwesome6} from "@expo/vector-icons";
|
||||
import { View } from "react-native";
|
||||
import CheckBox from "../CheckBox";
|
||||
import {
|
||||
AntDesignIconNames,
|
||||
CommunityIconNames,
|
||||
EntypoIconNames,
|
||||
FontAwesome6IconNames,
|
||||
} from "../Icons";
|
||||
import { ESport, Sports } from "@/model/enums/Enums";
|
||||
|
||||
export default React.forwardRef<any, QuestionChildProps>(
|
||||
(props, ref): React.ReactElement => {
|
||||
const { ...rest } = props;
|
||||
export interface SportQuestionRef {
|
||||
getAnswer: () => ESport;
|
||||
}
|
||||
|
||||
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(!checkedSix) {
|
||||
setCheckedOne(false);
|
||||
setCheckedTwo(false);
|
||||
setCheckedThree(false);
|
||||
setCheckedFour(false);
|
||||
setCheckedFive(false);
|
||||
setCheckedSix(!checkedSix);
|
||||
setCheckedSeven(false);
|
||||
setCheckedEight(false);
|
||||
setCheckedNine(false);
|
||||
}
|
||||
};
|
||||
const handleChangeSeven = () => {
|
||||
if(!checkedSeven) {
|
||||
setCheckedOne(false);
|
||||
setCheckedTwo(false);
|
||||
setCheckedThree(false);
|
||||
setCheckedFour(false);
|
||||
setCheckedFive(false);
|
||||
setCheckedSix(false);
|
||||
setCheckedSeven(!checkedSeven);
|
||||
setCheckedEight(false);
|
||||
setCheckedNine(false);
|
||||
}
|
||||
};
|
||||
const handleChangeEight = () => {
|
||||
if(!checkedEight) {
|
||||
setCheckedOne(false);
|
||||
setCheckedTwo(false);
|
||||
setCheckedThree(false);
|
||||
setCheckedFour(false);
|
||||
setCheckedFive(false);
|
||||
setCheckedSix(false);
|
||||
setCheckedSeven(false);
|
||||
setCheckedEight(!checkedEight);
|
||||
setCheckedNine(false);
|
||||
}
|
||||
};
|
||||
const handleChangeNine = () => {
|
||||
if(!checkedNine) {
|
||||
setCheckedOne(false);
|
||||
setCheckedTwo(false);
|
||||
setCheckedThree(false);
|
||||
setCheckedFour(false);
|
||||
setCheckedFive(false);
|
||||
setCheckedSix(false);
|
||||
setCheckedSeven(false);
|
||||
setCheckedEight(false);
|
||||
setCheckedNine(!checkedNine);
|
||||
}
|
||||
};
|
||||
export default forwardRef<SportQuestionRef, QuestionChildProps>(
|
||||
(props, ref): ReactElement => {
|
||||
const [checkedItems, setCheckedItems] = useState([
|
||||
true,
|
||||
...Array(8).fill(false),
|
||||
]);
|
||||
|
||||
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"} />
|
||||
const handleChange = (index: number) => {
|
||||
const newCheckedState = checkedItems.map((_, i) => i === index);
|
||||
setCheckedItems(newCheckedState);
|
||||
};
|
||||
|
||||
<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"} />
|
||||
useImperativeHandle(ref, () => ({
|
||||
getAnswer: () => {
|
||||
var selected = 0;
|
||||
checkedItems.forEach((item, index) => {
|
||||
if (item) {
|
||||
selected = index;
|
||||
}
|
||||
});
|
||||
return Sports[selected];
|
||||
},
|
||||
}));
|
||||
|
||||
<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>
|
||||
);
|
||||
interface IData {
|
||||
label: string;
|
||||
commIcon?: CommunityIconNames;
|
||||
antIcon?: AntDesignIconNames;
|
||||
entypoIcon?: EntypoIconNames;
|
||||
fontAwesomeIcon?: FontAwesome6IconNames;
|
||||
}
|
||||
|
||||
const data: IData[] = [
|
||||
{ label: "Course", fontAwesomeIcon: "person-running" },
|
||||
{ label: "Marche", fontAwesomeIcon: "person-walking" },
|
||||
{ label: "Rando", fontAwesomeIcon: "person-hiking" },
|
||||
{ label: "Skate", commIcon: "skateboarding" },
|
||||
{ label: "Cyclisme", commIcon: "bike" },
|
||||
{ label: "Basket", fontAwesomeIcon: "basketball" },
|
||||
{ label: "Cardio", antIcon: "heart" },
|
||||
{ label: "Yoga", commIcon: "yoga" },
|
||||
{ label: "Autre", entypoIcon: "dots-three-horizontal" },
|
||||
];
|
||||
|
||||
return (
|
||||
<Question question="Quel sport pratiquez-vous ?" {...ref} {...props}>
|
||||
<View className="flex-row justify-center flex-wrap gap-2">
|
||||
{data.map((item, index) => (
|
||||
<CheckBox
|
||||
key={index}
|
||||
label={item.label}
|
||||
value={checkedItems[index]}
|
||||
onChange={() => handleChange(index)}
|
||||
fontAwesome6Icon={item.fontAwesomeIcon}
|
||||
communityIcon={item.commIcon}
|
||||
antIcon={item.antIcon}
|
||||
entypoIcon={item.entypoIcon}
|
||||
direction="col"
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</Question>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
@ -0,0 +1,146 @@
|
||||
import {
|
||||
EHealthProblem,
|
||||
ESleepLevel,
|
||||
ESport,
|
||||
ESportLevel,
|
||||
} from "./enums/Enums";
|
||||
|
||||
export class User {
|
||||
private _name: string;
|
||||
private _age: number;
|
||||
private _height: number;
|
||||
private _weight: number;
|
||||
private _sexe: boolean; // true = Male, false = Female
|
||||
private _logo: string;
|
||||
private _nbSessionPerWeek: number;
|
||||
private _goal: string;
|
||||
private _healthProblems: EHealthProblem[];
|
||||
private _sport: ESport;
|
||||
private _sleepLevel: ESleepLevel;
|
||||
private _sportLevel: ESportLevel;
|
||||
|
||||
constructor(
|
||||
name: string,
|
||||
age: number,
|
||||
height: number,
|
||||
weight: number,
|
||||
sexe: boolean,
|
||||
logo: string,
|
||||
nbSessionPerWeek: number,
|
||||
goal: string,
|
||||
healthProblems: EHealthProblem[],
|
||||
sport: ESport,
|
||||
sleepLevel: ESleepLevel,
|
||||
sportLevel: ESportLevel
|
||||
) {
|
||||
this._name = name;
|
||||
this._age = age;
|
||||
this._height = height;
|
||||
this._weight = weight;
|
||||
this._sexe = sexe;
|
||||
this._logo = logo;
|
||||
this._nbSessionPerWeek = nbSessionPerWeek;
|
||||
this._goal = goal;
|
||||
this._healthProblems = healthProblems;
|
||||
this._sport = sport;
|
||||
this._sleepLevel = sleepLevel;
|
||||
this._sportLevel = sportLevel;
|
||||
}
|
||||
|
||||
get name(): string {
|
||||
return this._name;
|
||||
}
|
||||
|
||||
get age(): number {
|
||||
return this._age;
|
||||
}
|
||||
|
||||
get height(): number {
|
||||
return this._height;
|
||||
}
|
||||
|
||||
get weight(): number {
|
||||
return this._weight;
|
||||
}
|
||||
|
||||
get sexe(): boolean {
|
||||
return this._sexe;
|
||||
}
|
||||
|
||||
get logo(): string {
|
||||
return this._logo;
|
||||
}
|
||||
|
||||
get nbSessionPerWeek(): number {
|
||||
return this._nbSessionPerWeek;
|
||||
}
|
||||
|
||||
get goals(): string {
|
||||
return this._goal;
|
||||
}
|
||||
|
||||
get healthProblems(): EHealthProblem[] {
|
||||
return this._healthProblems;
|
||||
}
|
||||
|
||||
get sports(): ESport {
|
||||
return this._sport;
|
||||
}
|
||||
|
||||
get sleepLevel(): ESleepLevel {
|
||||
return this._sleepLevel;
|
||||
}
|
||||
|
||||
get sportLevel(): ESportLevel {
|
||||
return this._sportLevel;
|
||||
}
|
||||
|
||||
// Setters
|
||||
set name(value: string) {
|
||||
this._name = value;
|
||||
}
|
||||
|
||||
set age(value: number) {
|
||||
this._age = value;
|
||||
}
|
||||
|
||||
set height(value: number) {
|
||||
this._height = value;
|
||||
}
|
||||
|
||||
set weight(value: number) {
|
||||
this._weight = value;
|
||||
}
|
||||
|
||||
set sexe(value: boolean) {
|
||||
this._sexe = value;
|
||||
}
|
||||
|
||||
set logo(value: string) {
|
||||
this._logo = value;
|
||||
}
|
||||
|
||||
set nbSessionPerWeek(value: number) {
|
||||
this._nbSessionPerWeek = value;
|
||||
}
|
||||
|
||||
set goals(value: string) {
|
||||
this._goal = value;
|
||||
}
|
||||
|
||||
set healthProblems(value: EHealthProblem[]) {
|
||||
this._healthProblems = value;
|
||||
}
|
||||
|
||||
set sports(value: ESport) {
|
||||
this._sport = value;
|
||||
}
|
||||
|
||||
set sleepLevel(value: ESleepLevel) {
|
||||
this._sleepLevel = value;
|
||||
}
|
||||
|
||||
set sportLevel(value: ESportLevel) {
|
||||
this._sportLevel = value;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
export const Goals = [
|
||||
"WEIGHT_LOSE",
|
||||
"IMPROVE_MUSCLE",
|
||||
"WEIGHT_GAIN",
|
||||
"IMPROVE_STAMINA",
|
||||
"KEEP_FIT",
|
||||
] as const;
|
||||
|
||||
export const SportLevels = [
|
||||
"NOT_SPORTY",
|
||||
"BEGINNER",
|
||||
"SPORTY",
|
||||
"VERY_SPORTY",
|
||||
"PERFORMER",
|
||||
] as const;
|
||||
|
||||
export const Sports = [
|
||||
"RUNNING",
|
||||
"WALKING",
|
||||
"RANDO",
|
||||
"SKATEBOARD",
|
||||
"BIKING",
|
||||
"BASKETBALL",
|
||||
"CARDIO",
|
||||
"YOGA",
|
||||
"ELSE",
|
||||
] as const;
|
||||
|
||||
export const SleepLevels = [
|
||||
"TERRIBLE",
|
||||
"VERY_BAD",
|
||||
"BAD",
|
||||
"GOOD",
|
||||
"EXCELLENT",
|
||||
] as const;
|
||||
|
||||
export type EGoal = (typeof Goals)[number];
|
||||
export type ESportLevel = (typeof SportLevels)[number];
|
||||
export type ESport = (typeof Sports)[number];
|
||||
export type ESleepLevel = (typeof SleepLevels)[number];
|
||||
|
||||
export type EHealthProblem = "ARTHROSE" | "MIGRAINE";
|
||||
Loading…
Reference in new issue