Refactor navigation handling to use Next.js router in NavBar and Home components

Author: clicktodev

app/components/NavBar.tsx

@@ -2,6 +2,7 @@ import { Row, Col, Container, Stack } from "react-bootstrap";
 import Button from "@/components/Button";
 import { useEffect, useState } from "react";
 import { getUseCustomTitlebar } from "@/app/util";
+import { useRouter } from "next/navigation";
 
 export default function NavBar({
   title,
@@ -11,6 +12,7 @@ export default function NavBar({
   buttons?: React.ReactNode;
 }) {
   const [topOffset, setTopOffset] = useState<string>("0");
+  const router = useRouter();
 
   useEffect(() => {
     const fetch = async () => {
@@ -23,16 +25,20 @@ export default function NavBar({
   }, []);
 
   return (
-    <Container fluid className="px-0 pb-0 m-0 nav-bar" style={{
-      paddingTop: topOffset,
-    }}>
+    <Container
+      fluid
+      className="px-0 pb-0 m-0 nav-bar"
+      style={{
+        paddingTop: topOffset,
+      }}
+    >
       <Row className="m-0 w-100">
         <Col className="p-0">
           <Button
             text="Back"
             icon="angle-double-left"
             iconLeft
-            onClick={() => window.history.back()}
+            onClick={() => router.back()}
             tooltip="Back"
             variant="primary"
           />

app/page.tsx

@@ -39,14 +39,21 @@ import LogoImages from "@/components/LogoImages";
 import SelectVersionModal from "@/components/SelectVersionModal";
 import Toasts from "@/components/Toasts";
 import { listen } from "@tauri-apps/api/event";
-import { getDebugMode, getTheme, getUseCustomTitlebar, sleep } from "@/app/util";
+import {
+  getDebugMode,
+  getTheme,
+  getUseCustomTitlebar,
+  sleep,
+} from "@/app/util";
 import ForgotPasswordModal from "./components/ForgotPasswordModal";
+import { useRouter } from "next/navigation";
 
 const DEFAULT_TAGLINE =
   "Welcome to OpenFusion.\nSelect a server from the list below to get started.";
 
 export default function Home() {
   const loadedRef = useRef(false);
+  const router = useRouter();
 
   const [appName, setAppName] = useState("");
   const [launcherVersion, setLauncherVersion] = useState("--");
@@ -62,7 +69,9 @@ export default function Home() {
   const [versions, setVersions] = useState<VersionEntry[]>([]);
 
   const [selectedIdx, setSelectedIdx] = useState<number>(-1);
-  const [currentSession, setCurrentSession] = useState<LoginSession | undefined>(undefined);
+  const [currentSession, setCurrentSession] = useState<
+    LoginSession | undefined
+  >(undefined);
 
   const [alerts, setAlerts] = useState<Alert[]>([]);
   const [loadingTasks, setLoadingTasks] = useState<LoadingTask[]>([]);
@@ -156,8 +165,9 @@ export default function Home() {
 
   const checkForUpdate = async () => {
     try {
-      const updateInfo: UpdateInfo | undefined =
-        await invoke("check_for_update");
+      const updateInfo: UpdateInfo | undefined = await invoke(
+        "check_for_update"
+      );
       if (updateInfo) {
         setUpdateAvailable(updateInfo);
         alertInfo("Update available: " + updateInfo.version, updateInfo.url);
@@ -213,7 +223,7 @@ export default function Home() {
 
   const setVersionForServer = async (
     serverUuid: string,
-    versionUuid: string,
+    versionUuid: string
   ) => {
     const server = servers.find((s) => s.uuid == serverUuid);
     if (!server) {
@@ -267,7 +277,7 @@ export default function Home() {
   const connectToServer = async (
     serverUuid: string,
     versionUuid: string,
-    sessionToken?: string,
+    sessionToken?: string
   ) => {
     try {
       startLoading("launch");
@@ -301,7 +311,7 @@ export default function Home() {
     serverUuid: string,
     username: string,
     password: string,
-    email: string,
+    email: string
   ) => {
     startLoading("do_register");
     try {
@@ -328,7 +338,7 @@ export default function Home() {
     serverUuid: string,
     username: string,
     password: string,
-    remember: boolean,
+    remember: boolean
   ) => {
     startLoading("do_login");
     try {
@@ -436,7 +446,7 @@ export default function Home() {
   const updateServer = async (
     details: NewServerDetails,
     uuid: string,
-    showSucc?: boolean,
+    showSucc?: boolean
   ) => {
     try {
       const entry: ServerEntry = { ...details, uuid };
@@ -488,7 +498,10 @@ export default function Home() {
 
   const sendOneTimePassword = async (email: string) => {
     try {
-      await invoke("send_otp", { email, serverUuid: getSelectedServer()!.uuid });
+      await invoke("send_otp", {
+        email,
+        serverUuid: getSelectedServer()!.uuid,
+      });
       setShowForgotPasswordModal(false);
       alertSuccess("One-time password sent");
     } catch (e: unknown) {
@@ -541,9 +554,12 @@ export default function Home() {
         servers={servers}
         selectedServer={getSelectedServer()}
       />
-      <Container id="serverselector-container" style={{
-        paddingTop: topOffset,
-      }}>
+      <Container
+        id="serverselector-container"
+        style={{
+          paddingTop: topOffset,
+        }}
+      >
         <Row id="of-logoheader" className="text-center pt-3">
           <Col>
             <LogoImages
@@ -630,7 +646,7 @@ export default function Home() {
       </div>
       <div id="config-button-div">
         <Button
-          onClick={() => (window.location.href = "/settings")}
+          onClick={() => router.push("/settings")}
           variant="primary"
           icon="cog"
           tooltip="Settings"