merge Feature/90 loading state on community

Merge branch 'feature/90-loading-state-on-community' into 'develop'

components/lists/QuizList.tsx

 import React from "react";
-import { FlatList, View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { FlatList, View, Text, StyleSheet, TouchableOpacity, ActivityIndicator } from "react-native";
 import QuizModel from "../../models/QuizModel";
-import {NavigationProp} from "@react-navigation/native";
+import { NavigationProp } from "@react-navigation/native";
 
-const quizzes: QuizModel[] = [
-    {
-        code: "QUIZ123",
-        category: "General Knowledge",
-        questions: [],
-        nbQuestions: 3,
-        nbActualQuestion: 1,
-        score: 0,
-    },
-    {
-        code: "QUIZ456",
-        category: "Science",
-        questions: [],
-        nbQuestions: 5,
-        nbActualQuestion: 1,
-        score: 0,
-    },
-    {
-        code: "QUIZ789",
-        category: "Entertainment",
-        questions: [],
-        nbQuestions: 10,
-        nbActualQuestion: 1,
-        score: 0,
-    },
-];
+interface Props {
+    navigation: NavigationProp<any>;
+    quizList: QuizModel[] | null | undefined;
+    isLoadingData: boolean;
+}
 
 /**
- * QuizList : Un composant affichant une liste de quiz avec leur titre, nombre de questions et catégorie.
+ * QuizList : Un composant affichant une liste de quiz avec leur titre, nombre de questions, et catégorie.
  *
  * @component
  *
+ * @param navigation - Propriété de navigation utilisée pour naviguer vers l'écran "InformationsOfQuiz".
+ * @param quizList - Liste des quiz à afficher. Peut être null ou undefined.
+ * @param isLoadingData - Boolean indiquant si les données sont en cours de chargement.
+ *
  * @example
- * // Exemple d'utilisation :
- * <QuizList />
+ * <QuizList
+ *     navigation={navigation}
+ *     quizList={quizzes}
+ *     isLoadingData={isLoading}
+ * />
  *
  * @description
- * - Ce composant utilise un `FlatList` pour afficher les quiz.
- * - Chaque élément de la liste contient :
- *    - Le code du quiz comme titre.
- *    - Le nombre total de questions.
- *    - La catégorie du quiz, en majuscules.
- * - Les quiz sont définis dans une liste statique en haut du fichier pour cet exemple.
+ * - Ce composant gère trois états :
+ *   1. Chargement : Affiche un spinner si `isLoadingData` est true.
+ *   2. Liste des quiz : Affiche une liste interactive des quiz si `quizList` contient des éléments.
+ *   3. Liste vide : Affiche un message si `quizList` est vide.
  *
- * @returns Un composant React contenant une liste interactive de quiz.
+ * - Chaque quiz affiche :
+ *   - Son code en tant que titre.
+ *   - Son nombre total de questions.
+ *   - Sa catégorie, affichée en majuscules.
+ *
+ * @returns Un composant React contenant une liste interactive de quiz ou des messages en fonction de l'état.
  */
-interface Props{
-    navigation: NavigationProp<any>;
-    quizList: QuizModel[] | null | undefined
-}
-export default function QuizList({navigation,quizList}: Props) {
+
+export default function QuizList({ navigation, quizList, isLoadingData }: Props) {
     const onQuizPressed = (quiz: QuizModel) => {
-        navigation.navigate('InformationsOfQuiz', {quiz: quiz});
+        navigation.navigate("InformationsOfQuiz", { quiz: quiz });
     };
+
     const renderQuizItem = ({ item }: { item: QuizModel }) => (
         <TouchableOpacity style={styles.quizItem} onPress={() => onQuizPressed(item)}>
             <Text style={styles.quizTitle}>{item.code}</Text>
@@ -68,7 +55,12 @@ export default function QuizList({navigation,quizList}: Props) {
 
     return (
         <View style={styles.container}>
-            {quizList && quizList.length > 0 ? (
+            {isLoadingData ? (
+                <View style={styles.loadingContainer}>
+                    <ActivityIndicator size="large" color="#2b73fe" />
+                    <Text style={styles.loadingText}>Loading quizzes...</Text>
+                </View>
+            ) : quizList && quizList.length > 0 ? (
                 <FlatList
                     data={quizList}
                     renderItem={renderQuizItem}
@@ -77,7 +69,7 @@ export default function QuizList({navigation,quizList}: Props) {
                     contentContainerStyle={styles.listContent}
                 />
             ) : (
-                <Text style={styles.emptyMessage}>No quizzes available.</Text> // Message si la liste est vide
+                <Text style={styles.emptyMessage}>No quizzes available.</Text>
             )}
         </View>
     );
@@ -132,4 +124,15 @@ const styles = StyleSheet.create({
         textAlign: "center",
         marginTop: 20,
     },
+    loadingContainer: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    loadingText: {
+        fontSize: 16,
+        color: "#555",
+        marginTop: 10,
+        textAlign: "center",
+    },
 });

screens/Community/Community.tsx

@@ -17,19 +17,20 @@ export default function Community({navigation}: Props) {
     const [quizList, setQuizList] = useState<QuizModel[] | null>()
 
     useEffect(  () => {
-
+        setLoading(true)
         getAllQuizzes().then((quizzes: QuizModel[] | HttpError) => {
             if (quizzes instanceof HttpError) {
                 console.log("Error while fetching quizzes:", quizzes);
             } else {
                 setQuizList(quizzes);
             }
+            setLoading(false)
         })
 
     }, [])
 
 
     return (
-        <TemplateQuizList title={"Community"} setTextInInput={setInput} quizList={quizList} navigation={navigation} buttonGoBack={false}/>
+        <TemplateQuizList title={"Community"} setTextInInput={setInput} quizList={quizList} navigation={navigation} buttonGoBack={false} isLoadingData={loading}/>
     );
 }
\ No newline at end of file

screens/MyQuizzes/MyQuizzes.tsx

@@ -38,6 +38,6 @@ export default function MyQuizzes({navigation}: Props) {
 
 
     return (
-        <TemplateQuizList title={"My quizzes"} setTextInInput={setInput} quizList={quizList} navigation={navigation} buttonGoBack={true}/>
+        <TemplateQuizList title={"My quizzes"} setTextInInput={setInput} quizList={quizList} navigation={navigation} buttonGoBack={true} isLoadingData={false}/>
     );
 }
\ No newline at end of file

templates/TemplateQuizList.tsx

@@ -12,6 +12,7 @@ interface Props {
     setTextInInput: (text: string) => void
     quizList: QuizModel[] | null | undefined
     buttonGoBack: boolean
+    isLoadingData: boolean
 }
 
 /**
@@ -24,14 +25,14 @@ interface Props {
  * @param quizList - La liste des quiz à afficher
  * @param buttonGoBack - boolean qui dit si le bouton de retour doit être affiché
  */
-export default function TemplateQuizList({navigation, title, setTextInInput, quizList, buttonGoBack}: Props) {
+export default function TemplateQuizList({navigation, title, setTextInInput, quizList, buttonGoBack, isLoadingData}: Props) {
     return (
         <TemplateMenu navigation={navigation} headerNavigation={true} buttonGoBack={buttonGoBack}>
             <View style={styles.globalContainer}>
                 <Text style={styles.title}>{title}</Text>
                 <View style={styles.contentContainer}>
                     {/*<InputPlayQuiz setText={setTextInInput} noTitle={true} />*/}
-                    <QuizList quizList={quizList} navigation={navigation}/>
+                    <QuizList quizList={quizList} navigation={navigation} isLoadingData={isLoadingData}/>
                 </View>
             </View>
         </TemplateMenu>