UPDATE/REFACTOR: Replace ContentContext with useContent hook;

REFACTOR: Add content type files;

frontend/src/pages/CategoryPage.tsx

@@ -6,12 +6,12 @@ import { fetchContentOnScroll } from "../hooks/fetchContentOnScroll";
 import Button from "../components/Input/Button";
 import { useAuth } from "../context/AuthContext";
 import { useCategoryFollow } from "../hooks/useCategoryFollow";
-import { ListItemProps as StreamData } from "../components/Layout/ListItem";
 import LoadingScreen from "../components/Layout/LoadingScreen";
+import { StreamType } from "../types/StreamType";
 
 const CategoryPage: React.FC = () => {
   const { categoryName } = useParams<{ categoryName: string }>();
-  const [streams, setStreams] = useState<StreamData[]>([]);
+  const [streams, setStreams] = useState<StreamType[]>([]);
   const listRowRef = useRef<any>(null);
   const isLoading = useRef(false);
   const [streamOffset, setStreamOffset] = useState(0);
@@ -50,7 +50,7 @@ const CategoryPage: React.FC = () => {
 
       setStreamOffset((prev) => prev + data.length);
 
-      const processedStreams: StreamData[] = data.map((stream: any) => ({
+      const processedStreams: StreamType[] = data.map((stream: any) => ({
         type: "stream",
         id: stream.user_id,
         title: stream.title,

frontend/src/pages/Following.tsx

@@ -4,6 +4,7 @@ import { useSidebar } from "../context/SidebarContext";
 import { ToggleButton } from "../components/Input/Button";
 import { Sidebar as SidebarIcon } from "lucide-react";
 import { useNavigate } from "react-router-dom"; // Import useNavigate
+import { CategoryType } from "../types/CategoryType";
 
 // Define TypeScript interfaces
 interface Streamer {

frontend/src/pages/HomePage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ListRow from "../components/Layout/ListRow";
 import { useNavigate } from "react-router-dom";
-import { useStreams, useCategories } from "../context/ContentContext";
+import { useStreams, useCategories } from "../hooks/useContent";
 import Button from "../components/Input/Button";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import LoadingScreen from "../components/Layout/LoadingScreen";
@@ -12,8 +12,8 @@ interface HomePageProps {
 }
 
 const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
-  const { streams } = useStreams();
-  const { categories } = useCategories();
+  const { streams, isLoading: isLoadingStreams } = useStreams();
+  const { categories, isLoading: isLoadingCategories } = useCategories();
   const navigate = useNavigate();
 
   const handleStreamClick = (streamerName: string) => {
@@ -24,9 +24,9 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
     navigate(`/category/${categoryName}`);
   };
 
-  if (!categories || categories.length === 0) {
-    console.log("No categories found yet");
-    return <LoadingScreen>Loading Categories...</LoadingScreen>;
+  if (isLoadingStreams || isLoadingCategories) {
+    console.log("No content found yet");
+    return <LoadingScreen>Loading Content...</LoadingScreen>;
   }
 
   return (
@@ -79,7 +79,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
           Show More
         </Button>
       </ListRow>
-      <Footer/>
+      <Footer />
     </DynamicPageContent>
   );
 };