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

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

View File

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

View File

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