From dff5013edda62deacc4acf899a4202db3fd14a48 Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Sun, 14 Apr 2019 15:03:54 -0700
Subject: [PATCH] move editor container into its own component

---
 components/Editor.js          | 24 +++---------------------
 components/EditorContainer.js | 25 +++++++++++++++++++++++++
 pages/index.js                |  8 ++++++--
 3 files changed, 34 insertions(+), 23 deletions(-)
 create mode 100644 components/EditorContainer.js

diff --git a/components/Editor.js b/components/Editor.js
index 7320f22..2a0341d 100644
--- a/components/Editor.js
+++ b/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
diff --git a/components/EditorContainer.js b/components/EditorContainer.js
new file mode 100644
index 0000000..6df5085
--- /dev/null
+++ b/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
diff --git a/pages/index.js b/pages/index.js
index 62c42b7..b04d5a5 100644
--- a/pages/index.js
+++ b/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>
     )
   }