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;
-};
+};