diff --git a/src/components/FileSelector/LocalFileSelector.jsx b/src/components/FileSelector/LocalFileSelector.jsx index 1cdd8e9..1f73e7f 100644 --- a/src/components/FileSelector/LocalFileSelector.jsx +++ b/src/components/FileSelector/LocalFileSelector.jsx @@ -1,11 +1,11 @@ import { h } from 'preact' -export default function ({ setTargetName, setTargetUrl }) { +export default function ({ theme, setLocation, buildLink }) { const fileInputHandler = ({ target }) => { const file = target.files[0] - setTargetName(file.name) - setTargetUrl(`${URL.createObjectURL(file)}#${file.name}`) - target.value = null + const url = `${URL.createObjectURL(file)}#${file.name}` + + setLocation(buildLink({ url, theme })) } return ( diff --git a/src/components/FileSelector/TargetURLSelector.jsx b/src/components/FileSelector/TargetURLSelector.jsx index c64a824..6b42b4b 100644 --- a/src/components/FileSelector/TargetURLSelector.jsx +++ b/src/components/FileSelector/TargetURLSelector.jsx @@ -1,23 +1,21 @@ import { h } from 'preact' -export default function ({ setTargetName, setTargetUrl }) { +export default function ({ theme, setLocation, buildLink }) { const urlRE = /^(http|https):\/\/[^ "]+$/ - const emit = url => { - setTargetName(url) - setTargetUrl(url) - } + const onKeyPress = ({ keyCode, target }) => { + if (keyCode !== 13) return - const urlInputHandler = ({ target }) => { const url = target.value - emit(urlRE.test(url) - ? url - : null) + + if (urlRE.test(url)) { + setLocation(buildLink({ url, theme })) + } } return ( ) + onKeyPress={onKeyPress} />) } diff --git a/src/utils/utils.routing.js b/src/utils/utils.routing.js index 93aa875..0de9464 100644 --- a/src/utils/utils.routing.js +++ b/src/utils/utils.routing.js @@ -20,7 +20,7 @@ export const useHashLocation = () => { return [loc, navigate] } -export const buildPlayLinkHref = (url, theme) => +export const buildPlayLinkHref = ({ url, theme }) => `/#/play/${theme}/${encodeURIComponent(url)}` export const extractView = location => { diff --git a/src/views/HomeView.jsx b/src/views/HomeView.jsx index eff123b..ac543de 100644 --- a/src/views/HomeView.jsx +++ b/src/views/HomeView.jsx @@ -1,8 +1,10 @@ import { h } from 'preact' -import { useState } from 'preact/hooks' import { Link } from 'wouter-preact' -import { buildPlayLinkHref } from '~/src/utils/utils.routing' +import { + useHashLocation, + buildPlayLinkHref +} from '~/src/utils/utils.routing' import LocalFileSelector from '~/src/components/FileSelector/LocalFileSelector' @@ -13,14 +15,8 @@ import ThemeSelector from import '~/src/style/views/HomeView.css' -const playButton = (name, url, theme) => ( - - Play "{name}" - ) - export default function ({ themeEngine }) { - const [targetName, setTargetName] = useState(null) - const [targetUrl, setTargetUrl] = useState(null) + const setLocation = useHashLocation()[1] return (
@@ -103,8 +99,9 @@ export default function ({ themeEngine }) {

@@ -113,15 +110,13 @@ export default function ({ themeEngine }) {

- { targetUrl - ? playButton(targetName, targetUrl, themeEngine.currentTheme) - : null }
) }