feat(app): change the switch navigation to kaioken Router and utilize the navigate router function

resolves #6

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>
+  )
 }
 

src/hooks/navigationStores.ts

@@ -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

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>

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>
   )

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)
   }