replace updateTheme and updateHighlights with updateState

components/Editor.js

@@ -98,18 +98,12 @@ class Editor extends React.Component {
 
   updateState = updates => {
     this.setState(updates, () => {
-      // eslint-disable-next-line no-unused-vars
+      !this.gist && this.props.onUpdate(this.state)
-      const { highlights, ...state } = this.state
-      !this.gist && this.props.onUpdate(state)
     })
   }
 
   updateCode = code => this.updateState({ code })
 
-  updateTheme = theme => this.updateState({ theme })
-
-  updateHighlights = highlights => this.updateState({ highlights })
-
   async getCarbonImage(
     {
       format,
@@ -290,13 +284,7 @@ class Editor extends React.Component {
     return (
       <div className="editor">
         <Toolbar>
-          <Themes
+          <Themes key={theme} update={this.updateState} theme={theme} highlights={highlights} />
-            key={theme}
-            updateTheme={this.updateTheme}
-            updateHighlights={this.updateHighlights}
-            theme={theme}
-            highlights={highlights}
-          />
           <Dropdown
             icon={languageIcon}
             selected={

components/Themes/index.js

@@ -56,6 +56,7 @@ class Themes extends React.PureComponent {
   dropdown = React.createRef()
 
   componentDidMount() {
+    const { update, theme, highlights } = this.props
     const storedThemes = getThemes(localStorage) || []
 
     this.setState(({ themes }) => {
@@ -63,10 +64,10 @@ class Themes extends React.PureComponent {
 
       const name = getCustomName(newThemes)
 
-      this.selectedTheme = newThemes.find(({ id }) => id === this.props.theme) || DEFAULT_THEME
+      this.selectedTheme = newThemes.find(({ id }) => id === theme) || DEFAULT_THEME
 
-      if (Object.keys(this.props.highlights).length === 0) {
+      if (Object.keys(highlights).length === 0) {
-        this.props.updateHighlights(this.selectedTheme.highlights)
+        update({ highlights: this.selectedTheme.highlights })
       }
 
       return {
@@ -77,18 +78,18 @@ class Themes extends React.PureComponent {
   }
 
   componentDidUpdate(prevProps) {
-    const { isVisible, theme, updateHighlights } = this.props
+    const { isVisible, theme, update } = this.props
     const { themes } = this.state
 
     if (prevProps.isVisible && !isVisible) {
       this.setState({ name: getCustomName(themes) })
-      updateHighlights(themes.find(({ id }) => id === theme).highlights)
+      update({ highlights: themes.find(({ id }) => id === theme).highlights })
     }
   }
 
   applyPreset = preset => {
     this.setState(({ themes }) => {
-      this.props.updateHighlights(themes.find(({ id }) => id === preset).highlights)
+      this.props.update({ highlights: themes.find(({ id }) => id === preset).highlights })
       return {
         preset
       }
@@ -96,15 +97,14 @@ class Themes extends React.PureComponent {
   }
 
   handleChange = ({ id }) => {
-    const { toggleVisibility, updateTheme, updateHighlights } = this.props
+    const { toggleVisibility, update } = this.props
     const { themes } = this.state
 
     if (id === 'create') {
       toggleVisibility()
       this.dropdown.current.closeMenu()
     } else {
-      updateTheme(id)
+      update({ theme: id, highlights: themes.find(theme => theme.id === id).highlights })
-      updateHighlights(themes.find(theme => theme.id === id).highlights)
     }
   }
 
@@ -116,14 +116,16 @@ class Themes extends React.PureComponent {
     }))
 
   updateHighlight = ({ rgb }) =>
-    this.props.updateHighlights({
+    this.props.update({
-      ...this.props.highlights,
+      highlights: {
-      [this.state.selected]: stringifyRGBA(rgb)
+        ...this.props.highlights,
+        [this.state.selected]: stringifyRGBA(rgb)
+      }
     })
 
   removeTheme = id => event => {
     const { themes } = this.state
-    const { theme, updateHighlights, updateTheme } = this.props
+    const { theme, update } = this.props
 
     event.stopPropagation()
 
@@ -132,15 +134,14 @@ class Themes extends React.PureComponent {
     saveThemes(localStorage, newThemes.filter(({ custom }) => custom))
 
     if (theme === id) {
-      updateTheme(DEFAULT_THEME.id)
+      update({ theme: DEFAULT_THEME.id, highlights: DEFAULT_THEME.highlights })
-      updateHighlights(DEFAULT_THEME.highlights)
     } else {
       this.setState({ themes: newThemes })
     }
   }
 
   createTheme = () => {
-    const { highlights, updateTheme } = this.props
+    const { highlights, update } = this.props
     const { themes, name } = this.state
 
     const id = `theme:${generateId()}`
@@ -156,7 +157,7 @@ class Themes extends React.PureComponent {
 
     saveThemes(localStorage, customThemes)
 
-    updateTheme(id)
+    update({ theme: id })
   }
 
   itemWrapper = props => <ThemeItem {...props} onClick={this.removeTheme} />

pages/index.js

@@ -23,10 +23,16 @@ class Index extends React.Component {
 
   onEditorUpdate = debounce(
     state => {
-      updateRouteState(this.props.router, state)
+      updateRouteState(this.props.router, omit(state, ['highlights']))
       saveSettings(
         localStorage,
-        omit(state, ['code', 'backgroundImage', 'backgroundImageSelection', 'filename'])
+        omit(state, [
+          'code',
+          'backgroundImage',
+          'backgroundImageSelection',
+          'filename',
+          'highlights'
+        ])
       )
     },
     750,