FEAT: Added Celery Beat

FEAT: Added preferences Celery task to automatically record what categories users watched

frontend/src/App.tsx

@@ -13,12 +13,14 @@ import ResultsPage from "./pages/ResultsPage";
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [user_id, setUserID] = useState<number | null>(null);
   const [username, setUsername] = useState<string | null>(null);
 
   useEffect(() => {
     fetch("/api/user/login_status")
       .then((response) => response.json())
       .then((data) => {
+        setUserID(data.user_id);
         setIsLoggedIn(data.status);
         setUsername(data.username);
       })
@@ -30,7 +32,7 @@ function App() {
 
   return (
     <AuthContext.Provider
-      value={{ isLoggedIn, username, setIsLoggedIn, setUsername }}
+      value={{ isLoggedIn, username, user_id, setIsLoggedIn, setUsername }}
     >
       <ContentProvider>
         <BrowserRouter>

frontend/src/components/Video/ChatPanel.tsx

@@ -24,7 +24,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
   onViewerCountChange,
   onInputFocus,
 }) => {
-  const { isLoggedIn, username } = useAuth();
+  const { isLoggedIn, username, user_id} = useAuth();
   const { showAuthModal, setShowAuthModal } = useAuthModal();
   const { socket, isConnected } = useSocket();
   const [messages, setMessages] = useState<ChatMessage[]>([]);
@@ -37,13 +37,17 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
     if (socket && isConnected) {
       // Add username check
       socket.emit("join", {
+        user_id: user_id ? user_id : null,
         username: username ? username : "Guest",
         stream_id: streamId,
       });
 
       // Handle beforeunload event
       const handleBeforeUnload = () => {
-        socket.emit("leave", { stream_id: streamId });
+        socket.emit("leave", {         
+          user_id: user_id ? user_id : null,
+          username: username ? username : "Guest",
+          stream_id: streamId, });
         socket.disconnect();
       };
 
@@ -83,7 +87,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
         socket.disconnect();
       };
     }
-  }, [socket, isConnected, username, streamId]);
+  }, [socket, isConnected, user_id, username, streamId]);
 
   // Auto-scroll to bottom when new messages arrive
   useEffect(() => {

frontend/src/context/AuthContext.tsx

@@ -3,12 +3,14 @@ import { createContext, useContext } from "react";
 interface AuthContextType {
   isLoggedIn: boolean;
   username: string | null;
+  user_id: number | null;
   setIsLoggedIn: (value: boolean) => void;
   setUsername: (value: string | null) => void;
+  setUserId: (value: number | null) => void;
 }
 
 export const AuthContext = createContext<AuthContextType | undefined>(
-  undefined,
+  undefined
 );
 
 export function useAuth() {