refactor: playing quiz with SSE

components/PlayingQuiz/EndQuiz/EndQuizListPlayer.tsx

 import React from "react";
 import { FlatList, View, Text, StyleSheet, Image } from "react-native";
 import {User} from "../../../models/User";
+import {UserEndQuiz} from "../../../models/UserEndQuiz";
 
 interface Props {
-    users: User[];
+    users: UserEndQuiz[];
     maxScore: number;
 }
 
 export default function EndQuizListPlayer({ users, maxScore }: Props) {
-    const renderUser = ({ item, index }: { item: User; index: number }) => (
+    const renderUser = ({ item, index }: { item: UserEndQuiz; index: number }) => (
         <View style={[styles.userContainer, index === 0 && styles.firstPlace]}>
             <Image
                 source={require("../../../assets/ProfilBaseImage.png")} // Replace with actual profile picture if available

components/PlayingQuiz/EndQuiz/UserScore.tsx

 import { View, Text, StyleSheet, Image } from "react-native";
 import {User} from "../../../models/User";
+import {UserEndQuiz} from "../../../models/UserEndQuiz";
 
 interface Props {
-    user: User;
+    user: UserEndQuiz;
     score: number;
     maxScore: number;
     isFirst: boolean;

models/CustomEventType.ts

-export type CustomEventType = "userJoined" | "nextQuestion" | "generateRun" | "gameStarted" | "answerRevealed"
+export type CustomEventType = "userJoined" | "nextQuestion" | "generateRun" | "gameStarted" | "answerRevealed" | "gameEnded";

models/UserEndQuiz.ts

+export interface UserEndQuiz{
+    id: number,
+    username: string,
+    score: number
+}
\ No newline at end of file

screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiMode.tsx

@@ -14,6 +14,8 @@ import EventSource from "react-native-sse";
 import {CustomEventType} from "../../../../models/CustomEventType";
 import {AnswerSSEResponse} from "../../../../models/Response/AnswerSSEResponse";
 import {useMultiService} from "../../../../services/MultiService";
+import {UserEndQuiz} from "../../../../models/UserEndQuiz";
+import {shuffleAnswersOfQuiz} from "../../../../helper/QuizHelper";
 
 
 type RoutePropsType = {
@@ -53,9 +55,18 @@ export default function PlayingQuizMultiMode({route, navigation}:Props) {
             console.log("nextQuestion event data:");
             if (!event.data) return;
             const question: Question = JSON.parse(event.data);
-            setActualQuestion(question);
+
+            setActualQuestion(shuffleAnswersOfQuiz(question));
             setQuizState(QuizState.ANSWERING);
         });
+
+        es.addEventListener("gameEnded", (event) => {
+            console.log("gameEnded event data:");
+            if (!event.data) return;
+            const users: UserEndQuiz[] = JSON.parse(event.data);
+            console.log("users:", users);
+            navigation.navigate("EndQuizMulti", { users: users });
+        });
     }
     const fetchRuns = async () => {
         console.log("run to get info :", runId);

screens/Multiplayer/MultiplayerChild.tsx

@@ -63,7 +63,6 @@ export default function MultiplayerChild({navigation}: Props) {
                 <View style={styles.buttonContainer}>
                     <MenuButton text={"COMMUNITY"} handleButtonPressed={handleButtonCommunityPressed}/>
                     <MenuButton text={"PLAY AN ONLINE QUIZ"} handleButtonPressed={handleOnlineQuizPressed}/>
-                    <MenuButton text={"ONGOING QUIZZES"} handleButtonPressed={handleButtonOngoingQuizzesPressed}/>
                 </View>
             </>
             )}

screens/PlayingQuiz/EndQuizMulti/EndQuizMulti.tsx

@@ -2,12 +2,12 @@ import {NavigationProp, RouteProp} from "@react-navigation/native";
 import { View, StyleSheet, Image, Text } from "react-native";
 import TemplateMenu from "../../../templates/TemplateMenu";
 import {Quiz} from "../../../models/Quiz";
-import EndQuizChild from "../EndQuiz/EndQuizChild";
 import EndQuizMultiChild from "./EndQuizMultiChild";
+import {UserEndQuiz} from "../../../models/UserEndQuiz";
 
 type RoutePropsType = {
     EndQuizChild: {
-        quiz: Quiz;
+        users: UserEndQuiz[];
     };
 };
 interface Props {
@@ -16,12 +16,12 @@ interface Props {
 }
 
 export default function EndQuizMulti({route,navigation}: Props) {
-    const { quiz } = route.params;
+    const { users } = route.params;
     return (
         <View style={styles.containerGlobal}>
             <TemplateMenu navigation={navigation} headerNavigation={false} buttonGoBack={false}>
                 <View>
-                    <EndQuizMultiChild navigation={navigation} quiz={quiz}/>
+                    <EndQuizMultiChild navigation={navigation} users={users} />
                 </View>
             </TemplateMenu>
         </View>

screens/PlayingQuiz/EndQuizMulti/EndQuizMultiChild.tsx

@@ -6,15 +6,16 @@ import {useQuizService} from "../../../services/QuizService";
 import HttpError from "../../../services/HttpError";
 import UserScore from "../../../components/PlayingQuiz/EndQuiz/UserScore";
 import EndQuizListPlayer from "../../../components/PlayingQuiz/EndQuiz/EndQuizListPlayer";
+import {UserEndQuiz} from "../../../models/UserEndQuiz";
 
 
 
 interface Props {
     navigation: NavigationProp<any>;
-    quiz: Quiz;
+    users: UserEndQuiz[]
 }
 
-export default function EndQuizMultiChild({ navigation, quiz }: Props) {
+export default function EndQuizMultiChild({ navigation, users }: Props) {
 
     const userTest = {id: 1, email: "user1@email.com", username: "user1", stats: undefined};
 
@@ -33,11 +34,11 @@ export default function EndQuizMultiChild({ navigation, quiz }: Props) {
                     style={styles.stars}
                 />
                 <View style={styles.usersContainer}>
-                    <UserScore user={userTest} score={10} maxScore={quiz.questionCount} isFirst={false}/>
-                    <UserScore user={userTest} score={10} maxScore={quiz.questionCount} isFirst={true}/>
-                    <UserScore user={userTest} score={10} maxScore={quiz.questionCount} isFirst={false}/>
+                    { users[1] && (<UserScore user={users[1]} score={10} maxScore={10} isFirst={false}/>)}
+                    <UserScore user={users[0]} score={10} maxScore={10} isFirst={true}/>
+                    { users[2] &&(<UserScore user={users[2]} score={10} maxScore={10} isFirst={false}/>)}
                 </View>
-                <EndQuizListPlayer users={[userTest, userTest]} maxScore={quiz.questionCount}/>
+                <EndQuizListPlayer users={users} maxScore={10}/>
 
                 {/*<DefaultButton text="RESTART" handleButtonPressed={handleRestartPress} buttonStyle={styles.whiteButton} buttonText={styles.whiteButtonText}></DefaultButton>*/}
                 <DefaultButton text="BACK TO MENU" handleButtonPressed={handleBackToMenu} buttonStyle={styles.blueButton} buttonText={styles.blueButtonText}></DefaultButton>