Extract themeEngine

src/components/ThemeSelector.js

@@ -1,15 +1,16 @@
 import { h } from 'preact'
 
-export default function ({ themeList, currentTheme, setTheme }) {
+export default function ({ themeEngine }) {
-  const options = themeList.map(theme => (
+  const options = themeEngine.themes.map(theme => (
     <option value={theme}>
       {theme}
     </option>))
 
   return (
     <select
-      value={currentTheme}
+      value={themeEngine.currentTheme}
-      onChange={({ target }) => setTheme(target.value)}>
+      onChange={({ target }) =>
+        themeEngine.setTheme(target.value)}>
       {options}
     </select>)
 }

src/components/player/UrlPlayer.js

@@ -9,7 +9,6 @@ const INITIAL_STATUS = {
 }
 
 export default function ({url}) {
-  console.log(123, url)
   const [status, setStatus] = useState(INITIAL_STATUS)
 
   const [vm, setVM] = useState(null)

src/index.js

@@ -1,12 +1,9 @@
 import { h, render } from 'preact'
-import { useState } from 'preact/hooks'
 import { Route, Router, Switch } from 'wouter-preact'
 
 import { useHashLocation } from '~/src/utils/utils.routing'
 import {
-  DEFAULT_THEME,
+  useThemeEngine
-  themeList,
-  assertTheme
 } from '~/src/themes/themes'
 
 import HomeView from '~/src/views/HomeView'
@@ -15,26 +12,20 @@ import PlayerView from '~/src/views/PlayerView'
 import '~/src/style/base.css'
 
 function App () {
-  const [currentTheme, setCurrentTheme] =
+  const themeEngine = useThemeEngine()
-    useState(DEFAULT_THEME)
-
-  const setTheme = theme =>
-    setCurrentTheme(assertTheme(theme))
 
   return (
     <Router hook={useHashLocation}>
-      <div className={['app', currentTheme].join(' ')}>
+      <div className={['app', themeEngine.currentTheme].join(' ')}>
         <Switch>
           <Route path='/'>
             <HomeView {...{
-              setTheme,
+              themeEngine
-              themeList,
-              currentTheme
             }} />
           </Route>
           <Route path='/play/:theme/:encodedUrl'>
             {params => <PlayerView {...{
-              setTheme,
+              setTheme: themeEngine.setTheme,
               ...params
             }} />}
           </Route>

src/themes/themes.js

@@ -1,6 +1,8 @@
+import { useState, useCallback } from 'preact/hooks'
+
 import '~/src/style/themes.css'
 
-export const themeList = [
+const themes = [
   'default',
   'default-dark',
   'nord',
@@ -9,9 +11,20 @@ export const themeList = [
   '_raw'
 ]
 
-export const DEFAULT_THEME = themeList[0]
+const DEFAULT_THEME = themes[0]
 
-export const assertTheme = theme =>
+const assertTheme = theme =>
-  themeList.includes(theme)
+  themes.includes(theme)
     ? theme
     : DEFAULT_THEME
+
+export const useThemeEngine = (defaultTheme = DEFAULT_THEME) => {
+  const [currentTheme, setCurrentTheme] =
+    useState(DEFAULT_THEME)
+
+    const setTheme = useCallback(theme => {
+      setCurrentTheme(assertTheme(theme))
+    }, [currentTheme]);
+
+  return { currentTheme, setTheme, themes };
+}

src/views/HomeView.js

@@ -14,7 +14,7 @@ const playButton = (name, url, theme) => (
     Play "{name}"
   </Link>)
 
-export default function ({ themeList, currentTheme, setTheme }) {
+export default function ({ themeEngine }) {
   const [targetName, setTargetName] = useState(null)
   const [targetUrl, setTargetUrl] = useState(null)
 
@@ -28,9 +28,7 @@ export default function ({ themeList, currentTheme, setTheme }) {
       <ul>
         <li>
           <ThemeSelector {...{
-            currentTheme,
+            themeEngine
-            themeList,
-            setTheme
           }} />
         </li>
         <li>
@@ -47,7 +45,7 @@ export default function ({ themeList, currentTheme, setTheme }) {
         </li>
       </ul>
       { targetUrl
-        ? playButton(targetName, targetUrl, currentTheme)
+        ? playButton(targetName, targetUrl, themeEngine.currentTheme)
         : null }
     </main>)
 }