REFACTOR: HomePage and ResultsPage for improved data handling

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { AuthContext } from "./context/AuthContext";
-import { StreamsProvider } from "./context/StreamsContext";
+import { ContentProvider } from "./context/ContentContext";
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import HomePage from "./pages/HomePage";
 import StreamerRoute from "./components/Stream/StreamerRoute";
@@ -8,8 +8,8 @@ import NotFoundPage from "./pages/NotFoundPage";
 import UserPage from "./pages/UserPage";
 import ResetPasswordPage from "./pages/ResetPasswordPage";
 import CategoryPage from "./pages/CategoryPage";
-import CategoriesPage from "./pages/CategoriesPage";
-import FoundPage from "./pages/FoundPage";
+import CategoriesPage from "./pages/AllCategoriesPage";
+import ResultsPage from "./pages/ResultsPage";
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -32,7 +32,7 @@ function App() {
     <AuthContext.Provider
       value={{ isLoggedIn, username, setIsLoggedIn, setUsername }}
     >
-      <StreamsProvider>
+      <ContentProvider>
         <BrowserRouter>
           <Routes>
             <Route
@@ -44,15 +44,21 @@ function App() {
 
             <Route path="/:streamerName" element={<StreamerRoute />} />
             <Route path="/user/:username" element={<UserPage />} />
-            <Route path="/reset_password/:token" element={<ResetPasswordPage />}></Route>
-            <Route path="/category/:category_name" element={<CategoryPage />}></Route>
+            <Route
+              path="/reset_password/:token"
+              element={<ResetPasswordPage />}
+            ></Route>
+            <Route
+              path="/category/:category_name"
+              element={<CategoryPage />}
+            ></Route>
             <Route path="/category" element={<CategoriesPage />}></Route>
-            <Route path="/results" element={<FoundPage />}></Route>
+            <Route path="/results" element={<ResultsPage />}></Route>
             <Route path="/404" element={<NotFoundPage />} />
             <Route path="*" element={<Navigate to="/404" replace />} />
             </Routes>
         </BrowserRouter>
-      </StreamsProvider>
+      </ContentProvider>
     </AuthContext.Provider>
   );
 }

frontend/src/components/Auth/OAuth.tsx

@@ -1,5 +1,3 @@
-import { useEffect } from "react";
-
 export default function GoogleLogin() {
   const handleLoginClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
@@ -15,7 +13,8 @@ export default function GoogleLogin() {
           //w-full basis-[90%] (% size of original container)
           className="flex w-full max-w-[19em] basis-[90%] flex-grow flex-shrink items-center justify-start bg-white text-gray-600 
         font-semibold py-[0.15em] pl-[0.3em] pr-[0.6em] rounded shadow-md flex-grow flex-shrink
-        hover:bg-gray-100 active:bg-gray-200 sm:max-w-[18em] mx-[1em]">
+        hover:bg-gray-100 active:bg-gray-200 sm:max-w-[18em] mx-[1em]"
+        >
           <img
             src="../../../images/icons/google-icon.png"
             alt="Google logo"

frontend/src/context/ContentContext.tsx

@@ -0,0 +1,135 @@
+import { createContext, useContext, useState, useEffect } from "react";
+import { useAuth } from "./AuthContext";
+
+// Base interfaces
+interface Item {
+  id: number;
+  title: string;
+  viewers: number;
+  thumbnail?: string;
+}
+
+interface StreamItem extends Item {
+  type: "stream";
+  streamer: string;
+  streamCategory: string;
+}
+
+interface CategoryItem extends Item {
+  type: "category";
+}
+
+interface UserItem extends Item {
+  type: "user";
+  username: string;
+  isLive: boolean;
+}
+
+// Context type
+interface ContentContextType {
+  streams: StreamItem[];
+  categories: CategoryItem[];
+  users: UserItem[];
+  setStreams: (streams: StreamItem[]) => void;
+  setCategories: (categories: CategoryItem[]) => void;
+  setUsers: (users: UserItem[]) => void;
+}
+
+const ContentContext = createContext<ContentContextType | undefined>(undefined);
+
+export function ContentProvider({ children }: { children: React.ReactNode }) {
+  const [streams, setStreams] = useState<StreamItem[]>([]);
+  const [categories, setCategories] = useState<CategoryItem[]>([]);
+  const [users, setUsers] = useState<UserItem[]>([]);
+  const { isLoggedIn } = useAuth();
+
+  useEffect(() => {
+    // Fetch streams
+    const streamsUrl = isLoggedIn 
+      ? "/api/streams/recommended" 
+      : "/api/streams/popular/4";
+
+    fetch(streamsUrl)
+      .then((response) => response.json())
+      .then((data: any[]) => {
+        const processedStreams: StreamItem[] = data.map(stream => ({
+          type: "stream",
+          id: stream.user_id,
+          title: stream.title,
+          streamer: stream.username,
+          streamCategory: stream.category_name,
+          viewers: stream.num_viewers,
+          thumbnail: stream.thumbnail ||
+            `/images/thumbnails/categories/${stream.category_name.toLowerCase().replace(/ /g, "_")}.webp`
+        }));
+        setStreams(processedStreams);
+      });
+
+    // Fetch categories
+    const categoriesUrl = isLoggedIn 
+      ? "/api/categories/recommended" 
+      : "/api/categories/popular/4";
+
+    fetch(categoriesUrl)
+      .then((response) => response.json())
+      .then((data: any[]) => {
+        const processedCategories: CategoryItem[] = data.map(category => ({
+          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`,
+        }));
+        setCategories(processedCategories);
+      });
+  }, [isLoggedIn]);
+
+  return (
+    <ContentContext.Provider
+      value={{
+        streams,
+        categories,
+        users,
+        setStreams,
+        setCategories,
+        setUsers,
+      }}
+    >
+      {children}
+    </ContentContext.Provider>
+  );
+}
+
+// Custom hooks for specific content types
+export function useStreams() {
+  const context = useContext(ContentContext);
+  if (!context) {
+    throw new Error("useStreams must be used within a ContentProvider");
+  }
+  return { streams: context.streams, setStreams: context.setStreams };
+}
+
+export function useCategories() {
+  const context = useContext(ContentContext);
+  if (!context) {
+    throw new Error("useCategories must be used within a ContentProvider");
+  }
+  return { categories: context.categories, setCategories: context.setCategories };
+}
+
+export function useUsers() {
+  const context = useContext(ContentContext);
+  if (!context) {
+    throw new Error("useUsers must be used within a ContentProvider");
+  }
+  return { users: context.users, setUsers: context.setUsers };
+}
+
+// General hook for all content
+export function useContent() {
+  const context = useContext(ContentContext);
+  if (!context) {
+    throw new Error("useContent must be used within a ContentProvider");
+  }
+  return context;
+}

frontend/src/context/StreamsContext.tsx

@@ -1,101 +0,0 @@
-import { createContext, useContext, useState, useEffect } from "react";
-import { useAuth } from "./AuthContext";
-
-interface Item {
-  id: number;
-  title: string;
-  viewers: number;
-  thumbnail?: string;
-}
-
-interface StreamItem extends Item {
-  type: "stream";
-  streamer: string;
-  streamCategory: string;
-}
-
-interface CategoryItem extends Item {
-  type: "category";
-}
-
-interface StreamsContextType {
-  featuredStreams: StreamItem[];
-  featuredCategories: CategoryItem[];
-  setFeaturedStreams: (streams: StreamItem[]) => void;
-  setFeaturedCategories: (categories: CategoryItem[]) => void;
-}
-
-const StreamsContext = createContext<StreamsContextType | undefined>(undefined);
-
-export function StreamsProvider({ children }: { children: React.ReactNode }) {
-  const [featuredStreams, setFeaturedStreams] = useState<StreamItem[]>([]);
-  const [featuredCategories, setFeaturedCategories] = useState<CategoryItem[]>(
-    [],
-  );
-  const { isLoggedIn } = useAuth();
-
-  const fetch_url = isLoggedIn
-    ? ["/api/streams/recommended", "/api/categories/recommended"]
-    : ["/api/streams/popular/4", "/api/categories/popular/4"];
-
-  useEffect(() => {
-    // Streams
-    fetch(fetch_url[0])
-      .then((response) => response.json())
-      .then((data: StreamItem[]) => {
-        const extractedData: StreamItem[] = data.map((stream: any) => ({
-          type: "stream",
-          id: stream.user_id,
-          title: stream.title,
-          streamer: stream.username,
-          streamCategory: stream.category_name,
-          viewers: stream.num_viewers,
-          thumbnail:
-            stream.thumbnail ||
-            `/images/thumbnails/categories/${stream.category_name
-              .toLowerCase()
-              .replace(/ /g, "_")}.webp`
-        }));
-
-        setFeaturedStreams(extractedData);
-      });
-
-    // Categories
-    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`,
-        }));
-        console.log(extractedData);
-        setFeaturedCategories(extractedData);
-      });
-  }, []);
-
-  return (
-    <StreamsContext.Provider
-      value={{
-        featuredStreams,
-        featuredCategories,
-        setFeaturedStreams,
-        setFeaturedCategories,
-      }}
-    >
-      {children}
-    </StreamsContext.Provider>
-  );
-}
-
-export function useStreams() {
-  const context = useContext(StreamsContext);
-  if (context === undefined) {
-    throw new Error("useStreams must be used within a StreamsProvider");
-  }
-  return context;
-}

frontend/src/context/ThemeContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect, ReactNode } from "react";
+import { createContext, useContext, useState, useEffect, ReactNode } from "react";
 
 //  Defines the Theme (Colour Theme) that would be shared/used
 interface ThemeContextType {

frontend/src/pages/FoundPage.tsx

@@ -1,60 +0,0 @@
-import React from 'react'
-import  { useLocation, useNavigate } from "react-router-dom";
-
-const FoundPage: React.FC = ({}) => {
-    const location = useLocation();
-    const navigate = useNavigate();
-    const { searchResults, query } = location.state || { searchResults: null, query: "" };
-    if (!searchResults) {
-        return (
-          <div className="p-4">
-            <h2 className="text-xl font-bold">No results found for "{query}"</h2>
-            <button onClick={() => navigate(-1)} className="mt-4 px-4 py-2 bg-purple-500 text-white rounded">
-              Go Back
-            </button>
-          </div>
-        );
-      }
-    
-      return (
-        <div className="p-4">
-          <h2 className="text-xl font-bold mb-4">Search Results for "{query}"</h2>
-          
-          <div>
-            <h3 className="text-lg font-semibold">Categories</h3>
-            <ul>
-              {searchResults.categories.map((category: any, index: number) => (
-                <li key={index} className="border p-2 rounded my-2">{category.category_name}</li>
-              ))}
-            </ul>
-          </div>
-    
-          <div>
-            <h3 className="text-lg font-semibold">Users</h3>
-            <ul>
-              {searchResults.users.map((user: any, index: number) => (
-                <li key={index} className="border p-2 rounded my-2">{user.username} {user.is_live ? "🔴" : ""}</li>
-              ))}
-            </ul>
-          </div>
-    
-          <div>
-            <h3 className="text-lg font-semibold">Streams</h3>
-            <ul>
-              {searchResults.streams.map((stream: any, index: number) => (
-                <li key={index} className="border p-2 rounded my-2">
-                  {stream.title} - {stream.num_viewers} viewers
-                </li>
-              ))}
-            </ul>
-          </div>
-    
-          <button onClick={() => navigate(-1)} className="mt-4 px-4 py-2 bg-purple-500 text-white rounded">
-            Go Back
-          </button>
-        </div>
-      );
-    };
-
-
-export default FoundPage

frontend/src/pages/HomePage.tsx

@@ -2,14 +2,15 @@ import React from "react";
 import Navbar from "../components/Layout/Navbar";
 import ListRow from "../components/Layout/ListRow";
 import { useNavigate } from "react-router-dom";
-import { useStreams } from "../context/StreamsContext";
+import { useStreams, useCategories } from "../context/ContentContext";
 
 interface HomePageProps {
   variant?: "default" | "personalised";
 }
 
 const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
-  const { featuredStreams, featuredCategories } = useStreams();
+  const { streams } = useStreams();
+  const { categories } = useCategories();
   const navigate = useNavigate();
 
   const handleStreamClick = (streamerName: string) => {
@@ -32,14 +33,14 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
       <ListRow
         type="stream"
         title={
-          "Live Now" + (variant === "personalised" ? " - Recommended" : "")
+          "Streams - Live Now" + (variant === "personalised" ? " - Recommended" : "")
         }
         description={
           variant === "personalised"
             ? "We think you might like these streams - Streamers recommended for you"
             : "Streamers that are currently live"
         }
-        items={featuredStreams}
+        items={streams}
         onClick={handleStreamClick}
         extraClasses="bg-red-950/60"
       />
@@ -57,10 +58,9 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
             ? "Current streams from your followed categories"
             : "Categories that have been 'popping off' lately"
         }
-        items={featuredCategories}
+        items={categories}
         onClick={handleCategoryClick}
         extraClasses="bg-green-950/60"
-
       />
     </div>
   );

frontend/src/pages/ResultsPage.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+const ResultsPage: React.FC = ({}) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { searchResults, query } = location.state || {
+    searchResults: null,
+    query: "",
+  };
+  if (!searchResults) {
+    return (
+      <div className="p-4">
+        <h2 className="text-xl font-bold">No results found for "{query}"</h2>
+        <button
+          onClick={() => navigate(-1)}
+          className="mt-4 px-4 py-2 bg-purple-500 text-white rounded"
+        >
+          Go Back
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4">
+      <h2 className="text-xl font-bold mb-4">Search Results for "{query}"</h2>
+
+      <div>
+        <h3 className="text-lg font-semibold">Categories</h3>
+        <ul>
+          {searchResults.categories.map((category: any, index: number) => (
+            <li key={index} className="border p-2 rounded my-2">
+              {category.category_name}
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold">Users</h3>
+        <ul>
+          {searchResults.users.map((user: any, index: number) => (
+            <li key={index} className="border p-2 rounded my-2">
+              {user.username} {user.is_live ? "🔴" : ""}
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold">Streams</h3>
+        <ul>
+          {searchResults.streams.map((stream: any, index: number) => (
+            <li key={index} className="border p-2 rounded my-2">
+              {stream.title} - {stream.num_viewers} viewers
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <button
+        onClick={() => navigate(-1)}
+        className="mt-4 px-4 py-2 bg-purple-500 text-white rounded"
+      >
+        Go Back
+      </button>
+    </div>
+  );
+};
+
+export default ResultsPage;