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

resolves #6
This commit is contained in:
Triston Armstrong 2024-03-17 20:26:20 -05:00
parent caffaee95e
commit 14af43024a
5 changed files with 19 additions and 41 deletions

View File

@ -1,15 +1,13 @@
import { useEffect } from "kaioken" import { Route, Router, useEffect } from "kaioken"
import Main from "./pages/Main" 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 { useStorage } from "./hooks/storageStores"
import { useStationsStore } from "./hooks/stationStores" import { useStationsStore } from "./hooks/stationStores"
import Add from "./pages/Add"
import Player from "./pages/Player"
export function App() { export function App() {
const { getStationsFile } = useStorage() const { getStationsFile } = useStorage()
const { override } = useStationsStore() const { override } = useStationsStore()
const { value } = useNavigationStore()
useEffect(() => { useEffect(() => {
getStationsFile() getStationsFile()
@ -17,16 +15,12 @@ export function App() {
.catch() .catch()
}, []) }, [])
return (
switch (value) { <Router basePath="">
case Navs.MAIN: <Route path="/" element={Main} />
return <Main /> <Route path="/add" element={Add} />
case Navs.ADD: <Route path="/player" element={Player} />
return <Add /> </Router>
case Navs.PLAYER: )
return <Player />
default:
return <h1>404 Not Found</h1>
}
} }

View File

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

View File

@ -1,8 +1,7 @@
import { writeTextFile } from "@tauri-apps/api/fs" import { writeTextFile } from "@tauri-apps/api/fs"
import { useModel } from "kaioken" import { navigate, useModel } from "kaioken"
import { Station, useStationsStore } from "../hooks/stationStores" import { Station, useStationsStore } from "../hooks/stationStores"
import { useStorageStore } from "../hooks/storageStores" import { useStorageStore } from "../hooks/storageStores"
import useNavigationStore, { Navs } from "../hooks/navigationStores"
export default function Add() { export default function Add() {
const { value } = useStorageStore() const { value } = useStorageStore()
@ -20,12 +19,12 @@ export default function Add() {
const store = useStationsStore.methods.add(data) const store = useStationsStore.methods.add(data)
const valid = store && value const valid = store && value
valid && void writeTextFile(value, JSON.stringify(store)) valid && void writeTextFile(value, JSON.stringify(store))
useNavigationStore.setState(Navs.MAIN) navigate('/')
} }
return ( return (
<div > <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"> <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" /> <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
</svg> </svg>

View File

@ -1,22 +1,21 @@
import useNavigationStore, { Navs } from "../hooks/navigationStores" import { navigate } from "kaioken"
import { Station, useSelectStationStore } from "../hooks/stationStores" import { Station, useSelectStationStore } from "../hooks/stationStores"
import { useStationsStore } from "../hooks/stationStores" import { useStationsStore } from "../hooks/stationStores"
export default function Main() { export default function Main() {
const { make } = useSelectStationStore() const { make } = useSelectStationStore()
const { navigate } = useNavigationStore()
const stations = useStationsStore.getState() const stations = useStationsStore.getState()
function _handleStationClick(station: Station) { function _handleStationClick(station: Station) {
make(station) make(station)
navigate(Navs.PLAYER) navigate('/player')
} }
if (!stations?.length) { if (!stations?.length) {
return ( return (
<div className="p-4 flex flex-col align-between h-full gap-2"> <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> <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> </div>
) )
} }
@ -42,7 +41,7 @@ export default function Main() {
</div> </div>
</button> </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>
</div> </div>
) )

View File

@ -1,12 +1,11 @@
import useNavigationStore, { Navs } from "../hooks/navigationStores" import { navigate } from "kaioken"
import { useSelectStationStore } from "../hooks/stationStores" import { useSelectStationStore } from "../hooks/stationStores"
export default function Player() { export default function Player() {
const { value: selectedStation, make } = useSelectStationStore() const { value: selectedStation, make } = useSelectStationStore()
const { navigate } = useNavigationStore()
function _handlePlayerBackClick() { function _handlePlayerBackClick() {
navigate(Navs.MAIN) navigate('/')
make(null) make(null)
} }