MAJOR Fix: Resolved API Request Delays;

Feat: Added a dev test account to users for expedited login;
Refactor: Improve socket connection handling and add logging for API request duration & update to ListRow key generation for improved uniqueness;
Feat: Made it so streams with no set thumbnail use their category's thumbnail;
Minor Fix: Corrections to db recommendation methods;

frontend/src/context/SocketContext.tsx

@@ -1,5 +1,5 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
-import { io, Socket } from 'socket.io-client';
+import React, { createContext, useContext, useEffect, useRef, useState } from "react";
+import { io, Socket } from "socket.io-client";
 
 interface SocketContextType {
   socket: Socket | null;
@@ -8,39 +8,92 @@ interface SocketContextType {
 
 const SocketContext = createContext<SocketContextType | undefined>(undefined);
 
-export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
   const [socket, setSocket] = useState<Socket | null>(null);
   const [isConnected, setIsConnected] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const socketRef = useRef<Socket | null>(null);
 
   useEffect(() => {
-    const newSocket = io("http://localhost:8080", {
-      path: "/socket.io/",
+    console.log("Start of useEffect");
+
+    // Check if we already have a socket instance
+    if (socketRef.current) {
+      console.log("Socket already exists, closing existing socket");
+      socketRef.current.close();
+    }
+
+    console.log("Creating new socket connection");
+    const newSocket = io('http://localhost:8080', {
+      path: '/socket.io/',
+      transports: ['websocket', 'polling'],
       withCredentials: true,
-      transports: ['websocket'],
-      upgrade: false
+      reconnectionDelay: 1000,
+      reconnectionDelayMax: 5000,
+      reconnectionAttempts: 5,
+      timeout: 5000
     });
-
-    newSocket.on('connect', () => {
-      console.log('Socket connected!');
-      setIsConnected(true);
-    });
-
-	newSocket.on('connect_error', (error) => {
-		console.error('Socket connection error:', error);
-	  });
-
-    newSocket.on('disconnect', () => {
-      console.log('Socket disconnected!');
-      setIsConnected(false);
-    });
-
+    
+    socketRef.current = newSocket;
     setSocket(newSocket);
+    
+    newSocket.on("connect", () => {
+      console.log("Socket connected!");
+      setIsConnected(true);
+      setIsLoading(false);
+    });
+
+    newSocket.on("reconnect_attempt", (attemptNumber) => {
+      console.log(`Reconnecting... Attempt ${attemptNumber}`);
+    });
+
+    newSocket.on("reconnect_error", (error) => {
+      console.error("Reconnection error:", error);
+    });
+
+    newSocket.on("reconnect", (attemptNumber) => {
+      console.log(`Reconnected after ${attemptNumber} attempts!`);
+    });
+
+    newSocket.on("reconnect_failed", () => {
+      console.error("Reconnection failed. Please refresh the page.");
+    });
+
+    newSocket.on("connect_error", (error) => {
+      console.error("Socket connection error:", error);
+      setIsLoading(false);
+      if (newSocket) newSocket.disconnect();
+      newSocket.connect();
+    });
+
+    newSocket.on("disconnect", (reason) => {
+      console.log(
+        "Socket disconnected! Reason: " + reason + " -  Attempting reconnect..."
+      );
+      setIsConnected(false);
+      newSocket.connect();
+    });
 
     return () => {
-      newSocket.close();
+      if (socketRef.current) {
+        console.log("Cleaning up socket connection...");
+        socketRef.current.disconnect();
+        socketRef.current.close();
+        socketRef.current = null;
+      }
     };
   }, []);
 
+  if (isLoading) {
+    return (
+      <div className="h-screen w-screen flex items-center justify-center">
+        <div className="text-4xl text-white">Connecting to socket...</div>
+      </div>
+    );
+  }
+
   return (
     <SocketContext.Provider value={{ socket, isConnected }}>
       {children}
@@ -51,7 +104,7 @@ export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({ childr
 export const useSocket = () => {
   const context = useContext(SocketContext);
   if (context === undefined) {
-    throw new Error('useSocket must be used within a SocketProvider');
+    throw new Error("useSocket must be used within a SocketProvider");
   }
   return context;
-};
+};

frontend/src/context/StreamsContext.tsx

@@ -48,8 +48,15 @@ export function StreamsProvider({ children }: { children: React.ReactNode }) {
           title: stream.title,
           streamer: stream.username,
           viewers: stream.num_viewers,
-          thumbnail: stream.thumbnail,
+          thumbnail:
+            stream.thumbnail ||
+            `/images/thumbnails/categories/${stream.category_name
+              .toLowerCase()
+              .replace(/ /g, "_")}.webp`,
+          category: stream.category_name,
         }));
+
+        console.log(extractedData);
         setFeaturedStreams(extractedData);
       });
 
@@ -57,15 +64,15 @@ export function StreamsProvider({ children }: { children: React.ReactNode }) {
     fetch(fetch_url[1])
       .then((response) => response.json())
       .then((data: CategoryItem[]) => {
-        const extractedData: CategoryItem[] = data.map(
-          (category: any) => ({
-            type: "category",
-            id: category.category_id,
-            title: category.category_name,
-            viewers: category.num_viewers,
-            thumbnail: `/images/thumbnails/categories/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`
-          })
-        );
+        const extractedData: CategoryItem[] = data.map((category: any) => ({
+          type: "category",
+          id: category.category_id,
+          title: category.category_name,
+          viewers: category.num_viewers,
+          thumbnail: `/images/thumbnails/categories/${category.category_name
+            .toLowerCase()
+            .replace(/ /g, "_")}.webp`,
+        }));
         console.log(extractedData);
         setFeaturedCategories(extractedData);
       });