Extract themeEngine

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,
-  themeList,
-  assertTheme
+  useThemeEngine
 } 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] =
-    useState(DEFAULT_THEME)
-
-  const setTheme = theme =>
-    setCurrentTheme(assertTheme(theme))
+  const themeEngine = useThemeEngine()
 
   return (
     <Router hook={useHashLocation}>
-      <div className={['app', currentTheme].join(' ')}>
+      <div className={['app', themeEngine.currentTheme].join(' ')}>
         <Switch>
           <Route path='/'>
             <HomeView {...{
-              setTheme,
-              themeList,
-              currentTheme
+              themeEngine
             }} />
           </Route>
           <Route path='/play/:theme/:encodedUrl'>
             {params => <PlayerView {...{
-              setTheme,
+              setTheme: themeEngine.setTheme,
               ...params
             }} />}
           </Route>