he4et/elseifplayer
1
0
Fork 0
mirror of https://github.com/He4eT/elseifplayer.git synced 2026-05-04 17:07:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

Bootstrap app

Browse source
This commit is contained in:
He4eT 2021-02-19 00:53:39 +05:00
commit 5f5d23f4de
3 changed files with 66 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

7
index.html
View file

@ -2,10 +2,13 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<title>IFPlayer</title>
</head>
<body>
<div id="root"></div>
<script src="./src/index.js"></script>
</body>
</html>

40
src/index.js Normal file
View file

@ -0,0 +1,40 @@
import { h, render } from 'preact'
import {
Redirect, Switch, Route, Link, Router
} from 'wouter-preact'
import { useHashLocation } from '/src/utils/utils.routing'
function App () {
return (
<Router hook={useHashLocation}>
<div className='App'>
<nav>
<Link href='/'>Root</Link>
<Link href='/#/about'>About</Link>
<Link href='/#/info'>Redirect</Link>
<Link href='/#/404'>404</Link>
</nav>
<main>
<Switch>
<Route path='/'>
Root
</Route>
<Route path='/about'>
About
</Route>
<Route path='/info'>
<Redirect to='/about' />
</Route>
<Route path='/:anything*'>
404
</Route>
</Switch>
</main>
</div>
</Router>
)
}
render(<App />, document.getElementById('root'))

21
src/utils/utils.routing.js Normal file
View file

@ -0,0 +1,21 @@
import {
useState, useEffect, useCallback
} from 'preact/hooks'
export const useHashLocation = () => {
const currentLoc = () =>
window.location.hash.replace('#', '') || '/'
const [loc, setLoc] = useState(currentLoc())
useEffect(() => {
const handler = () => setLoc(currentLoc())
window.addEventListener('hashchange', handler)
return () => window.removeEventListener('hashchange', handler)
}, [])
const navigate = useCallback(to =>
(window.location.hash = to.replace('#/', '')), [])
return [loc, navigate]
}