Added support for updating previous leaderboard submissions; UUID is generated and stored in localStorage, and then tied with the player's leaderboard entries server-side

Nathan7934 · Nathan7934 · commit 1ca48f7d3a06 · 2024-03-04T00:39:10.000-05:00
diff --git a/frontend/app/(pages)/quiz/[...query]/page.tsx b/frontend/app/(pages)/quiz/[...query]/page.tsx
@@ -4,19 +4,23 @@ import useValidateUrlToken from "@/app/hooks/security/useValidateUrlToken";
 import useAuth from "@/app/hooks/context_imports/useAuth";
 
 import { SurvivalQuizInfo, TimeAttackQuizInfo, Message, Participant, ResponseStatus, 
-    PostTimeAttackEntry, PostSurvivalEntry } from "@/app/interfaces";
+    PostTimeAttackEntry, PostSurvivalEntry, TimeAttackEntry, SurvivalEntry } from "@/app/interfaces";
 import AnimatedScoreCounter from "@/app/components/AnimatedScoreCounter";
 import Modal from "@/app/components/modals/Modal";
 import { toggleModal, isModalOpen, applyTextMarkup, renderModalResponseAlert, 
-    playSoundEffect, executeEventSequence } from "@/app/utilities/miscFunctions";
+    playSoundEffect, executeEventSequence, isTimeAttackEntry } from "@/app/utilities/miscFunctions";
 
 import useGetQuizInfo from "@/app/hooks/api_access/quizzes/useGetQuizInfo";
 import useGetRandomQuizMessage from "@/app/hooks/api_access/messages/useGetRandomQuizMessage";
 import usePostLeaderboardEntry from "@/app/hooks/api_access/leaderboards/usePostLeaderboardEntry";
 import useAdjustContentHeight from "@/app/hooks/useAdjustContentHeight";
+import useGetPastPlayerLeaderboardEntry from "@/app/hooks/api_access/leaderboards/useGetPastPlayerLeaderboardEntry";
+import usePatchLeaderboardEntry from "@/app/hooks/api_access/leaderboards/usePatchLeaderboardEntry";
 
 import AnimateHeight from "react-animate-height";
 import { Height } from "react-animate-height";
+import {v4 as uuidv4} from "uuid";
+
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState, useReducer, useRef } from "react";
@@ -56,6 +60,8 @@ export default function Quiz({ params }: { params: { query: string[] } }) {
     const getQuizInfo = useGetQuizInfo();
     const getRandomQuizMessage = useGetRandomQuizMessage();
     const postLeaderboardEntry = usePostLeaderboardEntry();
+    const getPastPlayerLeaderboardEntry = useGetPastPlayerLeaderboardEntry();
+    const patchLeaderboardEntry = usePatchLeaderboardEntry();
 
     // Security
     const { auth } = useAuth();
@@ -69,6 +75,8 @@ export default function Quiz({ params }: { params: { query: string[] } }) {
     const [nextMessage, setNextMessage] = useState<Message | null>(null);
     const [seenMessageIds, setSeenMessageIds] = useState<Array<number>>([]); // Prevent repeats
     const [playerName, setPlayerName] = useState<string>(""); // The name of the player (for submitting to the leaderboard)
+    const [playerUUID, setPlayerUUID] = useState<string | null>(null); // The UUID of the player (for updating previous leaderboard submissions)
+    const [previousLeaderboardEntry, setPreviousLeaderboardEntry] = useState<TimeAttackEntry | SurvivalEntry | null>(null); // The player's previous leaderboard entry [if any]
     const [scoreSubmitted, setScoreSubmitted] = useState<boolean>(false); // Whether the score has been submitted to the leaderboard
 
     // ----------- State (Game) -----------
@@ -82,6 +90,7 @@ export default function Quiz({ params }: { params: { query: string[] } }) {
     // ----------- State (UI) -------------
     const [staticDataLoading, setStaticDataLoading] = useState<boolean>(true);
     const [submitting, setSubmitting] = useState<boolean>(false); // Whether the score is being submitted to the leaderboard
+    const [noResubmit, setNoResubmit] = useState<boolean>(false); // Whether the user has decided not to update their previous leaderboard entry
     // The response status of the leaderboard submission
     const [responseStatus, setResponseStatus] = useState<ResponseStatus>({ message: "", success: false, doAnimate: false });
 
@@ -139,6 +148,19 @@ export default function Quiz({ params }: { params: { query: string[] } }) {
                 console.error("Error retrieving data, redirecting to root");
                 router.push("/");
             }
+
+            // See if the player has a UUID in local storage, if not, create one and store it
+            let uuid: string | null = localStorage.getItem("quizPlayerUUID");
+            if (uuid) {
+                // If there is a UUID, retrieve the player's previous leaderboard entry (if any)
+                const entry: TimeAttackEntry | SurvivalEntry | null = await getPastPlayerLeaderboardEntry(quizId, uuid, shareableToken || undefined);
+                if (entry) setPreviousLeaderboardEntry(entry);
+            } else {
+                uuid = uuidv4(); // Generate a new one
+                localStorage.setItem("quizPlayerUUID", uuid);
+            }
+            setPlayerUUID(uuid);
+
             setStaticDataLoading(false);
             
             // Begin the intro splash timing sequence
@@ -172,24 +194,43 @@ export default function Quiz({ params }: { params: { query: string[] } }) {
         }
     }
 
-    const submitLeaderboardEntry = async () => {
-        if (!quizInfo || !totalTimeTaken || playerName === "") return;
+    const submitLeaderboardEntry = async (isUpdate: boolean = false) => {
+        if (!quizInfo || !totalTimeTaken || (!isUpdate && playerName === "") || !playerUUID) {
+            console.error("Error submitting leaderboard entry: Missing required data");
+            return;
+        }
+        if (isUpdate && !previousLeaderboardEntry) {
+            console.error("Error submitting leaderboard entry: No previous entry found");
+            return;
+        }
         setSubmitting(true);
+
+        // Build the request object
         let postRequest: PostTimeAttackEntry | PostSurvivalEntry;
         if (isTimeAttack(quizInfo)) {
             postRequest = {
-                playerName: playerName,
+                playerName: (isUpdate && previousLeaderboardEntry) ? previousLeaderboardEntry.playerName : playerName,
                 score: score,
                 timeTaken: totalTimeTaken,
+                playerUUID: playerUUID
             };
         } else {
             postRequest = {
-                playerName: playerName,
+                playerName: (isUpdate && previousLeaderboardEntry) ? previousLeaderboardEntry.playerName : playerName,
                 streak: score,
                 skipsUsed: skipsUsed,
+                playerUUID: playerUUID
             };
         }
-        const error: string | null = await postLeaderboardEntry(quizId, postRequest, shareableToken || undefined);
+
+        // Make the API request
+        let error: string | null;
+        if (isUpdate && previousLeaderboardEntry) {
+            error = await patchLeaderboardEntry(quizId, previousLeaderboardEntry.id, postRequest, shareableToken || undefined);
+        } else {
+            error = await postLeaderboardEntry(quizId, postRequest, shareableToken || undefined);
+        }
+
         if (!error) {
             setResponseStatus({ message: "Entry submitted!", success: true, doAnimate: true });
             setScoreSubmitted(true);
@@ -198,14 +239,14 @@ export default function Quiz({ params }: { params: { query: string[] } }) {
             setResponseStatus({ message: error, success: false, doAnimate: true });
         }
 
-        // Display the response message for 3 seconds, then close the modal
+        // Display the response message for 1.5 seconds, then close the modal
         setTimeout(() => {
             if (isModalOpen("leaderboard-submit-modal")) {
                 toggleModal("leaderboard-submit-modal");
             }
             setSubmitting(false);
             setResponseStatus({ message: "", success: false, doAnimate: false });
-        }, 3000);
+        }, 1500);
     }
 
     // Gets a random selection of 4 or 3 (depending on type) participants to choose from, including the correct participant.
@@ -639,16 +680,42 @@ export default function Quiz({ params }: { params: { query: string[] } }) {
                     {renderModalResponseAlert(responseStatus, true)}
                 </>);
             } else if (submitting) {
-                modalContent = (
-                    <div className="mb-8 mt-1 sm:my-12">
-                        <div className="mx-auto mb-3 text-2xl text-center">
+                modalContent = (<>
+                    <div className="mt-[-12px]" />
+                    <div className="mb-6 mt-4 sm:mb-12 sm:mt-10">
+                        <div className="mx-auto mb-2 text-xl text-center">
                                 Submitting...
                         </div>
                         <div className="flex justify-center">
                             <div className="spinner-circle w-12 h-12 sm:w-14 sm:h-14" />
                         </div>
                     </div>
-                );
+                </>);
+            } else if (previousLeaderboardEntry && !noResubmit) {
+                modalContent = (<>
+                    <div className="w-full mt-3 text-center text-2xl font-semibold">
+                        Update previous entry?
+                    </div>
+                    <div className="w-full text-center text-lg mt-3 text-zinc-300 font-light">
+                        You had a {isTimeAttack(quizInfo) ? "score" : "streak"} of: 
+                        <span className="ml-2 text-white font-medium">
+                            {isTimeAttackEntry(previousLeaderboardEntry) ? previousLeaderboardEntry.score : previousLeaderboardEntry.streak}
+                        </span>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2 mt-6 mb-5 mx-7">
+                        <button className="grow btn btn-lg bg-black border border-zinc-900 text-zinc-400 font-light"
+                        onClick={() => setNoResubmit(true)}>
+                            No Thanks
+                        </button>
+                        <button className={`grow btn btn-lg bg-gradient-to-r font-semibold
+                        ${isTimeAttack(quizInfo)
+                            ? " from-blue-500 from-0% via-blue-400 to-blue-500 to-100% text-indigo-100"
+                            : " from-purple-500 from-0% via-pink-500 to-purple-500 to-100% text-purple-100"}`}
+                        onClick={() => submitLeaderboardEntry(true)}>
+                            Update
+                        </button>
+                    </div>
+                </>);
             } else {
                 modalContent = (<>
                     <div className={`w-full mt-2 text-center text-3xl font-semibold text-transparent bg-clip-text bg-gradient-to-r
@@ -730,7 +797,10 @@ export default function Quiz({ params }: { params: { query: string[] } }) {
                             ${isTimeAttack(quizInfo)
                                 ? " from-blue-500 from-0% via-blue-400 to-blue-500 to-100% text-indigo-100"
                                 : " from-purple-500 from-0% via-pink-500 to-purple-500 to-100% text-purple-100"}`}
-                            onClick={() => { toggleModal("leaderboard-submit-modal") }}>
+                            onClick={() => { 
+                                setNoResubmit(false);
+                                toggleModal("leaderboard-submit-modal");
+                            }}>
                                 Submit
                             </button>
                         }
diff --git a/frontend/app/hooks/api_access/leaderboards/useGetPastPlayerLeaderboardEntry.ts b/frontend/app/hooks/api_access/leaderboards/useGetPastPlayerLeaderboardEntry.ts
@@ -0,0 +1,38 @@
+import { EXTERNAL_API_ROOT } from "@/app/constants";
+import { TimeAttackEntry, SurvivalEntry } from "@/app/interfaces";
+
+import useAuthFetch from "../../security/useAuthFetch";
+
+export default function useGetPastPlayerLeaderboardEntry() {
+
+    const authFetch = useAuthFetch();
+
+    const getPastPlayerLeaderboardEntry = async (
+        quizId: number, 
+        playerUUID: string,
+        shareableToken?: string | undefined
+    ): Promise<TimeAttackEntry | SurvivalEntry | null> => {
+
+        const requestUrl: string = `${EXTERNAL_API_ROOT}/quizzes/${quizId}/leaderboard/${playerUUID}`;
+
+        try {
+            const response: Response = await authFetch(requestUrl, {}, shareableToken);
+            if (!response.ok) {
+                if (response.status === 404) {
+                    console.log("No previous leaderboard entry found for player.");
+                } else if (response.status >= 400 && response.status < 500) {
+                    console.error(`Client request rejected: ${response.status}`);
+                } else if (response.status >= 500) {
+                    console.error(`Server failed request: ${response.status}`);
+                }
+                return null;
+            }
+            return await response.json();
+        } catch (error) {
+            console.error(error);
+            return null;
+        }
+    }
+
+    return getPastPlayerLeaderboardEntry;
+}
diff --git a/frontend/app/hooks/api_access/leaderboards/usePatchLeaderboardEntry.ts b/frontend/app/hooks/api_access/leaderboards/usePatchLeaderboardEntry.ts
@@ -0,0 +1,47 @@
+import { EXTERNAL_API_ROOT } from "@/app/constants";
+import { PostTimeAttackEntry, PostSurvivalEntry } from "@/app/interfaces";
+
+import useAuthFetch from "../../security/useAuthFetch";
+
+export default function usePatchLeaderboardEntry() {
+
+    const authFetch = useAuthFetch();
+
+    const patchLeaderboardEntry = async (
+        quizId: number,
+        entryId: number,
+        request: PostTimeAttackEntry | PostSurvivalEntry,
+        shareableToken?: string | undefined
+    ): Promise<string | null> => {
+
+        // We determine the request type by checking for a unique property
+        const requestUrl: string = 'score' in request
+            ? `${EXTERNAL_API_ROOT}/quizzes/${quizId}/leaderboard/${entryId}/time-attack`
+            : `${EXTERNAL_API_ROOT}/quizzes/${quizId}/leaderboard/${entryId}/survival`;
+
+        try {
+            const response: Response = await authFetch(requestUrl, {
+                method: "PATCH",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(request)
+            }, shareableToken);
+            if (!response.ok) {
+                if (response.status >= 400 && response.status < 500) {
+                    console.error(`Client request rejected: ${response.status}`);
+                    return "Client request rejected";
+                } else if (response.status >= 500) {
+                    console.error(`Server failed request: ${response.status}`);
+                    return "Server failed to process request";
+                }
+            }
+            return null;
+        } catch (error) {
+            console.error(error);
+            return "Client failed to process request";
+        }
+    }
+
+    return patchLeaderboardEntry;
+}
diff --git a/frontend/app/interfaces.ts b/frontend/app/interfaces.ts
@@ -109,6 +109,7 @@ export interface QuizLeaderboardInfo {
 // Post request interfaces
 export interface PostLeaderboardEntry {
     playerName: string;
+    playerUUID: string;
 }
 
 export interface PostTimeAttackEntry extends PostLeaderboardEntry {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -13,6 +13,7 @@
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
     "@types/swiper": "^6.0.0",
+    "@types/uuid": "^9.0.8",
     "animate.css": "^4.1.1",
     "autoprefixer": "10.4.15",
     "next": "13.5.2",
@@ -24,6 +25,7 @@
     "swiper": "^11.0.6",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2",
-    "universal-cookie": "^6.1.1"
+    "universal-cookie": "^6.1.1",
+    "uuid": "^9.0.1"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -109,6 +109,7 @@ export interface QuizLeaderboardInfo {`
`109`	`109`	`// Post request interfaces`
`110`	`110`	`export interface PostLeaderboardEntry {`
`111`	`111`	`playerName: string;`
	`112`	`+ playerUUID: string;`
`112`	`113`	`}`
`113`	`114`
`114`	`115`	`export interface PostTimeAttackEntry extends PostLeaderboardEntry {`