REFACTOR: Implement full page reloads for state-critical navigation

frontend/src/components/Auth/PasswordResetForm.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import Input from "../Input/Input";
 import Button from "../Input/Button";
-import { useAuth } from "../../context/AuthContext";
 
 interface ResetPasswordData {
   newPassword: string;
@@ -14,7 +13,7 @@ interface ResetPasswordErrors {
 }
 
 interface SubmitProps {
-  onSubmit: () => void;
+  onSubmit: (success: boolean) => void;
   token: string;
 }
 
@@ -56,7 +55,6 @@ const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    onSubmit();
 
     if (validateResetForm()) {
       try {
@@ -74,6 +72,7 @@ const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
 
         if (!response.ok) {
           const data = await response.json();
+          onSubmit(false);
           throw new Error(
             data.error || "An error has occurred while resetting"
           );

frontend/src/components/Layout/Logo.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
 
 interface LogoProps {
   variant?: "home" | "default";
@@ -8,24 +7,25 @@ interface LogoProps {
 const Logo: React.FC<LogoProps> = ({ variant = "default" }) => {
   const gradient = "text-transparent group-hover:mx-1 transition-all";
   return (
-    <Link to="/" className="cursor-pointer">
-      <div
-        id="logo"
-        className={`group py-3 text-center font-bold hover:scale-110 transition-all ${variant === "home" ? "text-[12vh]" : "text-[4vh]"}`}
-      >
-        <h6 className="text-sm bg-gradient-to-br from-blue-400 via-green-500 to-indigo-500 font-black text-transparent bg-clip-text">
-          Go on, have a...
-        </h6>
-        <div className="flex w-fit min-w-[30vw] bg-logo bg-clip-text animate-moving_text_colour bg-[length:300%_300%] justify-center leading-none transition-all">
-          <span className={gradient}>G</span>
-          <span className={gradient}>A</span>
-          <span className={gradient}>N</span>
-          <span className={gradient}>D</span>
-          <span className={gradient}>E</span>
-          <span className={gradient}>R</span>
-        </div>
+    <div
+      id="logo"
+      className={`group py-3 cursor-pointer text-center font-bold hover:scale-110 transition-all ${
+        variant === "home" ? "text-[12vh]" : "text-[4vh]"
+      }`}
+      onClick={() => {window.location.href = "/";}}
+    >
+      <h6 className="text-sm bg-gradient-to-br from-blue-400 via-green-500 to-indigo-500 font-black text-transparent bg-clip-text">
+        Go on, have a...
+      </h6>
+      <div className="flex w-fit min-w-[30vw] bg-logo bg-clip-text animate-moving_text_colour bg-[length:300%_300%] justify-center leading-none transition-all">
+        <span className={gradient}>G</span>
+        <span className={gradient}>A</span>
+        <span className={gradient}>N</span>
+        <span className={gradient}>D</span>
+        <span className={gradient}>E</span>
+        <span className={gradient}>R</span>
       </div>
-    </Link>
+    </div>
   );
 };
 

frontend/src/components/Navigation/Navbar.tsx

@@ -16,7 +16,6 @@ import { useAuth } from "../../context/AuthContext";
 import QuickSettings from "../Settings/QuickSettings";
 import { useSidebar } from "../../context/SidebarContext";
 import { useQuickSettings } from "../../context/QuickSettingsContext";
-import { useNavigate } from "react-router-dom";
 
 interface NavbarProps {
   variant?: "home" | "default";
@@ -27,7 +26,6 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
   const { showAuthModal, setShowAuthModal } = useAuthModal();
   const { showSideBar, setShowSideBar } = useSidebar();
   const { showQuickSettings, setShowQuickSettings } = useQuickSettings();
-  const navigate = useNavigate();
 
   const handleLogout = () => {
     console.log("Logging out...");
@@ -152,7 +150,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
           extraClasses={`${
             variant === "home" ? "absolute top-[2vh] right-[10vw]" : ""
           } flex flex-row items-center`}
-          onClick={() => navigate("/go-live")}
+          onClick={() => window.location.href = "/go-live"}
         >
           <LiveIcon className="h-15 w-15 mr-2" />
           Go Live

frontend/src/components/Stream/ChatPanel.tsx

@@ -5,7 +5,6 @@ import AuthModal from "../Auth/AuthModal";
 import { useAuthModal } from "../../hooks/useAuthModal";
 import { useAuth } from "../../context/AuthContext";
 import { useSocket } from "../../context/SocketContext";
-import { useNavigate } from "react-router-dom";
 
 interface ChatMessage {
   chatter_username: string;
@@ -28,7 +27,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [inputMessage, setInputMessage] = useState("");
   const chatContainerRef = useRef<HTMLDivElement>(null);
-  const navigate = useNavigate();
 
   // Join chat room when component mounts
   useEffect(() => {
@@ -147,7 +145,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
               onClick={() =>
                 msg.chatter_username === username
                   ? null
-                  : navigate(`/user/${msg.chatter_username}`)
+                  : window.location.href = `/user/${msg.chatter_username}`
               }
             >
               <img
@@ -170,7 +168,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
                   onClick={() =>
                     msg.chatter_username === username
                       ? null
-                      : navigate(`/user/${msg.chatter_username}`)
+                      : window.location.href = `/user/${msg.chatter_username}`
                   }
                 >
                   {msg.chatter_username}