From 14af43024aaea93b2579ff57f3600fff563e09d7 Mon Sep 17 00:00:00 2001
From: Triston Armstrong <tarmstrong95@proton.me>
Date: Sun, 17 Mar 2024 20:26:20 -0500
Subject: [PATCH] feat(app): change the switch navigation to kaioken Router and
 utilize the navigate router function

resolves #6
---
 src/App.tsx                   | 26 ++++++++++----------------
 src/hooks/navigationStores.ts | 13 -------------
 src/pages/Add.tsx             |  7 +++----
 src/pages/Main.tsx            |  9 ++++-----
 src/pages/Player.tsx          |  5 ++---
 5 files changed, 19 insertions(+), 41 deletions(-)
 delete mode 100644 src/hooks/navigationStores.ts

diff --git a/src/App.tsx b/src/App.tsx
index 3df3201..4dc46f3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,15 +1,13 @@
-import { useEffect } from "kaioken"
+import { Route, Router, useEffect } from "kaioken"
 import Main from "./pages/Main"
-import Player from "./pages/Player"
-import Add from "./pages/Add"
-import useNavigationStore, { Navs } from "./hooks/navigationStores"
 import { useStorage } from "./hooks/storageStores"
 import { useStationsStore } from "./hooks/stationStores"
+import Add from "./pages/Add"
+import Player from "./pages/Player"
 
 export function App() {
   const { getStationsFile } = useStorage()
   const { override } = useStationsStore()
-  const { value } = useNavigationStore()
 
   useEffect(() => {
     getStationsFile()
@@ -17,16 +15,12 @@ export function App() {
       .catch()
   }, [])
 
-
-  switch (value) {
-    case Navs.MAIN:
-      return <Main />
-    case Navs.ADD:
-      return <Add />
-    case Navs.PLAYER:
-      return <Player />
-    default:
-      return <h1>404 Not Found</h1>
-  }
+  return (
+    <Router basePath="">
+      <Route path="/" element={Main} />
+      <Route path="/add" element={Add} />
+      <Route path="/player" element={Player} />
+    </Router>
+  )
 }
 
diff --git a/src/hooks/navigationStores.ts b/src/hooks/navigationStores.ts
deleted file mode 100644
index 5e7a5db..0000000
--- a/src/hooks/navigationStores.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { createStore } from "kaioken"
-
-export enum Navs {
-  MAIN,
-  ADD,
-  PLAYER,
-}
-
-const useNavigationStore = createStore(Navs.MAIN, (set) => ({
-  navigate: (value) => set(() => value),
-}))
-
-export default useNavigationStore
diff --git a/src/pages/Add.tsx b/src/pages/Add.tsx
index df7c4a0..fb8497a 100644
--- a/src/pages/Add.tsx
+++ b/src/pages/Add.tsx
@@ -1,8 +1,7 @@
 import { writeTextFile } from "@tauri-apps/api/fs"
-import { useModel } from "kaioken"
+import { navigate, useModel } from "kaioken"
 import { Station, useStationsStore } from "../hooks/stationStores"
 import { useStorageStore } from "../hooks/storageStores"
-import useNavigationStore, { Navs } from "../hooks/navigationStores"
 
 export default function Add() {
   const { value } = useStorageStore()
@@ -20,12 +19,12 @@ export default function Add() {
     const store = useStationsStore.methods.add(data)
     const valid = store && value
     valid && void writeTextFile(value, JSON.stringify(store))
-    useNavigationStore.setState(Navs.MAIN)
+    navigate('/')
   }
 
   return (
     <div >
-      <button onclick={() => useNavigationStore.setState(Navs.MAIN)} className="ml-2 px-2 py-1 hover:bg-gray-300 rounded-full">
+      <button onclick={() => navigate('/')} className="ml-2 px-2 py-1 hover:bg-gray-300 rounded-full">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
           <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
         </svg>
diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx
index 5843912..611014d 100644
--- a/src/pages/Main.tsx
+++ b/src/pages/Main.tsx
@@ -1,22 +1,21 @@
-import useNavigationStore, { Navs } from "../hooks/navigationStores"
+import { navigate } from "kaioken"
 import { Station, useSelectStationStore } from "../hooks/stationStores"
 import { useStationsStore } from "../hooks/stationStores"
 
 export default function Main() {
   const { make } = useSelectStationStore()
-  const { navigate } = useNavigationStore()
   const stations = useStationsStore.getState()
 
   function _handleStationClick(station: Station) {
     make(station)
-    navigate(Navs.PLAYER)
+    navigate('/player')
   }
 
   if (!stations?.length) {
     return (
       <div className="p-4 flex flex-col align-between h-full gap-2">
         <h2 className="text-black text-opacity-50 font-bold text-center">No Stations Added</h2>
-        <button className="bg-white rounded-xl p-2" onclick={() => navigate(Navs.ADD)}>+</button>
+        <button className="bg-white rounded-xl p-2" onclick={() => navigate('/add')}>+</button>
       </div>
     )
   }
@@ -42,7 +41,7 @@ export default function Main() {
             </div>
           </button>
         ))}
-        <button className="bg-white rounded-xl p-2" onclick={() => navigate(Navs.ADD)}>+</button>
+        <button className="bg-white rounded-xl p-2" onclick={() => navigate('/add')}>+</button>
       </div>
     </div>
   )
diff --git a/src/pages/Player.tsx b/src/pages/Player.tsx
index 6f0ac8b..9f0dfd7 100644
--- a/src/pages/Player.tsx
+++ b/src/pages/Player.tsx
@@ -1,12 +1,11 @@
-import useNavigationStore, { Navs } from "../hooks/navigationStores"
+import { navigate } from "kaioken"
 import { useSelectStationStore } from "../hooks/stationStores"
 
 export default function Player() {
   const { value: selectedStation, make } = useSelectStationStore()
-  const { navigate } = useNavigationStore()
 
   function _handlePlayerBackClick() {
-    navigate(Navs.MAIN)
+    navigate('/')
     make(null)
   }
 
-- 
2.43.0