FIX: Navigation from ListItems;

REFACTOR: Format all files;

frontend/src/context/BrightnessContext.tsx

@@ -5,9 +5,13 @@ interface BrightnessContextType {
   setBrightness: (value: number) => void;
 }
 
-const BrightnessContext = createContext<BrightnessContextType | undefined>(undefined);
+const BrightnessContext = createContext<BrightnessContextType | undefined>(
+  undefined
+);
 
-export const Brightness: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const Brightness: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
   const [brightness, setBrightness] = useState<number>(100);
 
   useEffect(() => {

frontend/src/context/ContentContext.tsx

@@ -45,40 +45,45 @@ export function ContentProvider({ children }: { children: React.ReactNode }) {
 
   useEffect(() => {
     // Fetch streams
-    const streamsUrl = isLoggedIn 
-      ? "/api/streams/recommended" 
+    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 => ({
+        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/category_thumbnails/${stream.category_name.toLowerCase().replace(/ /g, "_")}.webp`
+          thumbnail:
+            stream.thumbnail ||
+            `/images/category_thumbnails/${stream.category_name
+              .toLowerCase()
+              .replace(/ /g, "_")}.webp`,
         }));
         setStreams(processedStreams);
       });
 
     // Fetch categories
-    const categoriesUrl = isLoggedIn 
-      ? "/api/categories/recommended" 
+    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 => ({
+        const processedCategories: CategoryItem[] = data.map((category) => ({
           type: "category",
           id: category.category_id,
           title: category.category_name,
           viewers: category.num_viewers,
-          thumbnail: `/images/category_thumbnails/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`,
+          thumbnail: `/images/category_thumbnails/${category.category_name
+            .toLowerCase()
+            .replace(/ /g, "_")}.webp`,
         }));
         setCategories(processedCategories);
       });
@@ -114,7 +119,10 @@ export function useCategories() {
   if (!context) {
     throw new Error("useCategories must be used within a ContentProvider");
   }
-  return { categories: context.categories, setCategories: context.setCategories };
+  return {
+    categories: context.categories,
+    setCategories: context.setCategories,
+  };
 }
 
 export function useUsers() {

frontend/src/context/SidebarContext.tsx

@@ -23,4 +23,4 @@ export function useSidebar() {
     throw new Error("useSidebar must be used within a SidebarProvider");
   }
   return context;
-}
+}

frontend/src/context/ThemeContext.tsx

@@ -1,9 +1,15 @@
-import { 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 {
-    theme: string;
-    setTheme: (theme: string) => void;
+  theme: string;
+  setTheme: (theme: string) => void;
 }
 
 //  Store theme and provide access to setTheme function
@@ -11,44 +17,45 @@ interface ThemeContextType {
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
 export const ThemeProvider = ({ children }: { children: ReactNode }) => {
-    // Set default theme to dark
+  // Set default theme to dark
 
-    const [theme, setTheme] = useState<string>(() => {
-        // If exist on user cache, use that instead
-        return localStorage.getItem("user-theme") || "dark";
-    });
+  const [theme, setTheme] = useState<string>(() => {
+    // If exist on user cache, use that instead
+    return localStorage.getItem("user-theme") || "dark";
+  });
 
-    useEffect(() => {
-        // Store current theme set by user
-        localStorage.setItem("user-theme", theme);
+  useEffect(() => {
+    // Store current theme set by user
+    localStorage.setItem("user-theme", theme);
 
-        // Update the theme
-        document.body.setAttribute("data-theme", theme);
-    }, [theme]);
+    // Update the theme
+    document.body.setAttribute("data-theme", theme);
+  }, [theme]);
 
-    return (
-        // Sets the selected theme to child component
-        <ThemeContext.Provider value={{ theme, setTheme }}>
-            {children}
-        </ThemeContext.Provider>
-    );
+  return (
+    // Sets the selected theme to child component
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
 };
 
 //  Custom Hook which allows any component to access theme & setTheme with "useTheme()"
 export const useTheme = () => {
-    const context = useContext(ThemeContext);   //Retrieves current value of context
-    if (!context) {
-        throw new Error("useTheme must be used within a ThemeProvider");    //If called outside of ThemeContext.tsx, errorHandle
-    }
-    return context;
+  const context = useContext(ThemeContext); //Retrieves current value of context
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider"); //If called outside of ThemeContext.tsx, errorHandle
+  }
+  return context;
 };
 
-
-{/** 
+{
+  /** 
     
     createContext: Allow components to share data without directly passing props through multiple levels
     useContext: Allows a component to access the current value of a context ("Hook")
     useState: Manages state of a component ("Hook")
     ReactNode: Allows to take in HTML / React / Arrays of Component
     
-    */}
+    */
+}