move editor container into its own component

components/Editor.js

@@ -26,11 +26,10 @@ import {
   DEFAULT_SETTINGS,
   DEFAULT_LANGUAGE,
   DEFAULT_PRESET_ID,
-  DEFAULT_THEME,
-  THEMES
+  DEFAULT_THEME
 } from '../lib/constants'
 import { serializeState, getRouteState } from '../lib/routing'
-import { getThemes, saveThemes, getSettings, unescapeHtml, formatCode, omit } from '../lib/util'
+import { getSettings, unescapeHtml, formatCode, omit } from '../lib/util'
 import LanguageIcon from './svg/Language'
 
 const languageIcon = <LanguageIcon />
@@ -391,21 +390,4 @@ Editor.defaultProps = {
   onReset: () => {}
 }
 
-function EditorContainer(props) {
-  const [themes, updateThemes] = React.useState(THEMES)
-
-  React.useEffect(() => {
-    const storedThemes = getThemes(localStorage) || []
-    if (storedThemes) {
-      updateThemes(currentThemes => [...storedThemes, ...currentThemes])
-    }
-  }, [])
-
-  React.useEffect(() => {
-    saveThemes(localStorage, themes.filter(({ custom }) => custom))
-  }, [themes])
-
-  return <Editor {...props} themes={themes} updateThemes={updateThemes} />
-}
-
-export default EditorContainer
+export default Editor

components/EditorContainer.js

@@ -0,0 +1,25 @@
+// Theirs
+import React from 'react'
+
+import Editor from './Editor'
+import { THEMES } from '../lib/constants'
+import { getThemes, saveThemes } from '../lib/util'
+
+function EditorContainer(props) {
+  const [themes, updateThemes] = React.useState(THEMES)
+
+  React.useEffect(() => {
+    const storedThemes = getThemes(localStorage) || []
+    if (storedThemes) {
+      updateThemes(currentThemes => [...storedThemes, ...currentThemes])
+    }
+  }, [])
+
+  React.useEffect(() => {
+    saveThemes(localStorage, themes.filter(({ custom }) => custom))
+  }, [themes])
+
+  return <Editor {...props} themes={themes} updateThemes={updateThemes} />
+}
+
+export default EditorContainer

pages/index.js

@@ -5,7 +5,7 @@ import { register, unregister } from 'next-offline/runtime'
 import debounce from 'lodash.debounce'
 
 // Ours
-import Editor from '../components/Editor'
+import EditorContainer from '../components/EditorContainer'
 import Page from '../components/Page'
 import { MetaLinks } from '../components/Meta'
 import { updateRouteState } from '../lib/routing'
@@ -37,7 +37,11 @@ class Index extends React.Component {
     return (
       <Page enableHeroText={true}>
         <MetaLinks />
-        <Editor router={this.props.router} onUpdate={this.onEditorUpdate} onReset={onReset} />
+        <EditorContainer
+          router={this.props.router}
+          onUpdate={this.onEditorUpdate}
+          onReset={onReset}
+        />
       </Page>
     )
   }