REFACTOR: Implement full page reloads for state-critical navigation

frontend/src/pages/CategoryPage.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import ListRow from "../components/Layout/ListRow";
-import { useNavigate } from "react-router-dom";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
 
 interface StreamData {
@@ -18,7 +17,6 @@ const CategoryPage: React.FC = () => {
   const { category_name } = useParams<{ category_name: string }>();
   const [streams, setStreams] = useState<StreamData[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-  const navigate = useNavigate();
 
   useEffect(() => {
     const fetchCategoryStreams = async () => {
@@ -54,7 +52,7 @@ const CategoryPage: React.FC = () => {
   }, [category_name]);
 
   const handleStreamClick = (streamerName: string) => {
-    navigate(`/${streamerName}`);
+    window.location.href = `/${streamerName}`;
   };
 
   if (isLoading) {

frontend/src/pages/HomePage.tsx

@@ -15,11 +15,11 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
   const navigate = useNavigate();
 
   const handleStreamClick = (streamerName: string) => {
-    navigate(`/${streamerName}`);
+    window.location.href = `/${streamerName}`;
   };
 
   const handleCategoryClick = (categoryName: string) => {
-    navigate(`category/${categoryName}`);
+    navigate(`/category/${categoryName}`);
   };
 
   return (

frontend/src/pages/NotFoundPage.tsx

@@ -1,11 +1,9 @@
 import React, { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
 import Button from "../components/Input/Button";
 // @ts-ignore
 import ChromeDinoGame from "react-chrome-dino";
 
 const NotFoundPage: React.FC = () => {
-  const navigate = useNavigate();
   const [stars, setStars] = useState<{ x: number; y: number }[]>([]);
   const starSize = 20;
 
@@ -59,7 +57,7 @@ const NotFoundPage: React.FC = () => {
           <h1 className="text-6xl font-bold mb-4">404</h1>
           <p className="text-2xl mb-8">Page Not Found</p>
           <ChromeDinoGame />
-          <Button extraClasses="z-[100]" onClick={() => navigate("/")}>
+          <Button extraClasses="z-[100]" onClick={() => window.location.href = "/"}>
             Go Home
           </Button>
         </div>

frontend/src/pages/ResetPasswordPage.tsx

@@ -1,16 +1,18 @@
 import React from "react";
 import PasswordResetForm from "../components/Auth/PasswordResetForm";
-import { useParams, useNavigate } from "react-router-dom";
+import { useParams } from "react-router-dom";
 
 const ResetPasswordPage: React.FC = () => {
     const { token } = useParams<{ token: string }>();
-    const navigate = useNavigate();
 
     const handlePasswordReset = (success: boolean) => {
         if (success) {
             alert("Password reset successful!");
-            navigate("/");
-        } 
+            window.location.href = "/";
+        }
+        else {
+            alert("Password reset failed.");
+        }
     };
 
     if (!token) {

frontend/src/pages/ResultsPage.tsx

@@ -48,7 +48,7 @@ const ResultsPage: React.FC = ({}) => {
             <li
               key={index}
               className="border p-2 rounded my-2 cursor-pointer"
-              onClick={() => navigate(`/user/${user.username}`)}
+              onClick={() => window.location.href = `/user/${user.username}`}
             >
               {user.is_live ? "🔴" : ""} {user.username}
             </li>
@@ -63,7 +63,7 @@ const ResultsPage: React.FC = ({}) => {
             <li
               key={index}
               className="border p-2 rounded my-2 cursor-pointer"
-              onClick={() => navigate(`/${stream.username}`)}
+              onClick={() => window.location.href = `/${stream.username}`}
             >
               {stream.title} - {stream.username} - {stream.num_viewers} viewers
             </li>