Fix component state issues

components/Carbon.js

@@ -6,10 +6,13 @@ import Spinner from 'react-spinner'
 import toHash from 'tohash'
 import WindowControls from '../components/WindowControls'
 import CodeMirror from '../lib/react-codemirror'
-import { COLORS, DEFAULT_LANGUAGE, LANGUAGES } from '../lib/constants'
+import {
-
+  COLORS,
-const LANGUAGE_MODE_HASH = toHash(LANGUAGES, 'mode')
+  DEFAULT_LANGUAGE,
-const LANGUAGE_NAME_HASH = toHash(LANGUAGES, 'short')
+  LANGUAGES,
+  LANGUAGE_MODE_HASH,
+  LANGUAGE_NAME_HASH
+} from '../lib/constants'
 
 const DEFAULT_SETTINGS = {
   paddingVertical: '50px',

components/Dropdown.js

@@ -6,19 +6,17 @@ import { COLORS } from '../lib/constants'
 
 class Dropdown extends React.Component {
   constructor(props) {
-    super()
+    super(props)
     this.state = {
-      isVisible: false,
+      isVisible: false
-      selected: props.selected || props.list[0]
     }
     this.select = this.select.bind(this)
     this.toggle = this.toggle.bind(this)
   }
 
   select(item) {
-    if (this.state.selected !== item) {
+    if (this.props.selected !== item) {
       this.props.onChange(item)
-      this.setState({ selected: item })
     }
   }
 
@@ -34,7 +32,7 @@ class Dropdown extends React.Component {
     return this.props.list.map((item, i) => (
       <div className="dropdown-list-item" key={i} onClick={this.select.bind(null, item)}>
         <span>{item.name}</span>
-        {this.state.selected === item ? <Checkmark /> : null}
+        {this.props.selected === item ? <Checkmark /> : null}
         <style jsx>{`
           .dropdown-list-item {
             display: flex;
@@ -73,7 +71,7 @@ class Dropdown extends React.Component {
         onClick={this.toggle}
       >
         <div className={`dropdown-display ${this.state.isVisible ? 'is-visible' : ''}`}>
-          <span>{this.state.selected.name}</span>
+          <span>{this.props.selected.name}</span>
           <div className="arrow-down">
             <ArrowDown />
           </div>

components/Meta.js

@@ -1,5 +1,5 @@
 import Head from 'next/head'
-import { THEMES_ARRAY, COLORS } from '../lib/constants'
+import { THEMES, COLORS } from '../lib/constants'
 import Reset from './style/Reset'
 import Typography from './style/Typography'
 
@@ -31,7 +31,7 @@ export default () => (
         rel="stylesheet"
         href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.css"
       />
-      {THEMES_ARRAY.map((theme, i) => (
+      {THEMES.map((theme, i) => (
         <link
           key={i}
           rel="stylesheet"

components/Settings.js

@@ -35,7 +35,10 @@ class Settings extends React.Component {
         </div>
         <div className="settings-settings">
           <WindowPointer fromLeft="15px" />
-          <ThemeSelect onChange={this.props.onChange.bind(null, 'windowTheme')} />
+          <ThemeSelect
+            selected={this.props.enabled.windowTheme || 'none'}
+            onChange={this.props.onChange.bind(null, 'windowTheme')}
+          />
           <Toggle
             label="Drop shadow"
             enabled={this.props.enabled.dropShadow}
@@ -58,12 +61,12 @@ class Settings extends React.Component {
           />
           <Slider
             label="Padding (vertical)"
-            initialValue={16}
+            value={this.props.enabled.paddingVertical || 16}
             onChange={this.props.onChange.bind(null, 'paddingVertical')}
           />
           <Slider
             label="Padding (horizontal)"
-            initialValue={32}
+            value={this.props.enabled.paddingHorizontal || 32}
             onChange={this.props.onChange.bind(null, 'paddingHorizontal')}
           />
         </div>

components/Slider.js

@@ -3,14 +3,11 @@ import React from 'react'
 export default class extends React.Component {
   constructor(props) {
     super()
-    this.state = { value: props.initialValue || 0 }
     this.handleChange = this.handleChange.bind(this)
   }
 
   handleChange(e) {
-    this.setState({ value: e.target.value }, () => {
+    this.props.onChange(`${e.target.value}px`)
-      this.props.onChange(`${this.state.value}px`)
-    })
   }
 
   render() {
@@ -22,7 +19,7 @@ export default class extends React.Component {
         <span className="label">{this.props.label}</span>
         <input
           type="range"
-          defaultValue={this.state.value}
+          defaultValue={this.props.value}
           onChange={this.handleChange}
           min={minValue}
           max={maxValue}
@@ -30,7 +27,10 @@ export default class extends React.Component {
         <div
           className="slider-bg"
           style={{
-            transform: `translate3d(${this.state.value * 1.0 / maxValue * 100}%, 0px, 0px)`
+            transform: `translate3d(${parseInt(this.props.value) *
+              1.0 /
+              maxValue *
+              100}%, 0px, 0px)`
           }}
         />
         <style jsx>{`

components/ThemeSelect.js

@@ -8,14 +8,12 @@ export const WINDOW_THEMES = Object.keys(WINDOW_THEMES_MAP)
 export default class extends React.Component {
   constructor(props) {
     super()
-    this.state = { selected: props.selected || WINDOW_THEMES[0] }
     this.select = this.select.bind(this)
   }
 
   select(theme) {
-    if (this.state.selected !== theme) {
+    if (this.props.selected !== theme) {
       this.props.onChange(theme)
-      this.setState({ selected: theme })
     }
   }
 
@@ -24,7 +22,7 @@ export default class extends React.Component {
       const Img = WINDOW_THEMES_MAP[theme]
       return (
         <div
-          className={`theme ${this.state.selected === theme ? 'selected' : ''}`}
+          className={`theme ${this.props.selected === theme ? 'selected' : ''}`}
           key={i}
           onClick={this.select.bind(null, theme)}
         >

components/Toggle.js

@@ -4,21 +4,18 @@ import Checkmark from './svg/Checkmark'
 export default class extends React.Component {
   constructor(props) {
     super()
-    this.state = { isEnabled: props.enabled || false }
     this.toggle = this.toggle.bind(this)
   }
 
   toggle() {
-    this.setState({ isEnabled: !this.state.isEnabled }, () => {
+    this.props.onChange(!this.props.enabled)
-      this.props.onChange(this.state.isEnabled)
-    })
   }
 
   render() {
     return (
       <div className="toggle" onClick={this.toggle}>
         <span className="label">{this.props.label}</span>
-        {this.state.isEnabled ? <Checkmark /> : null}
+        {this.props.enabled ? <Checkmark /> : null}
         <style jsx>{`
           .toggle {
             display: flex;

lib/constants.js

@@ -1,6 +1,6 @@
 import toHash from 'tohash'
 
-export const THEMES_ARRAY = [
+export const THEMES = [
   {
     id: '3024-night',
     name: '3024 Night'
@@ -75,7 +75,7 @@ export const THEMES_ARRAY = [
   }
 ]
 
-export const THEMES = toHash(THEMES_ARRAY)
+export const THEMES_HASH = toHash(THEMES)
 
 export const LANGUAGES = [
   {
@@ -331,6 +331,10 @@ export const LANGUAGES = [
   }
 ]
 
+export const LANGUAGE_MIME_HASH = toHash(LANGUAGES, 'mime')
+export const LANGUAGE_MODE_HASH = toHash(LANGUAGES, 'mode')
+export const LANGUAGE_NAME_HASH = toHash(LANGUAGES, 'short')
+
 export const DEFAULT_LANGUAGE = 'auto'
 
 export const COLORS = {

pages/editor.js

@@ -16,9 +16,11 @@ import Overlay from '../components/Overlay'
 import Carbon from '../components/Carbon'
 import api from '../lib/api'
 import {
-  THEMES_ARRAY,
   THEMES,
+  THEMES_HASH,
   LANGUAGES,
+  LANGUAGE_MIME_HASH,
+  LANGUAGE_MODE_HASH,
   DEFAULT_LANGUAGE,
   COLORS,
   DEFAULT_CODE
@@ -44,7 +46,7 @@ class Editor extends React.Component {
     super(props)
     this.state = {
       background: 'rgba(171, 184, 195, 1)',
-      theme: THEMES.seti.id,
+      theme: THEMES_HASH.seti.id,
       language: DEFAULT_LANGUAGE,
       dropShadow: true,
       windowControls: true,
@@ -122,11 +124,14 @@ class Editor extends React.Component {
         <div id="editor">
           <Toolbar>
             <Dropdown
-              selected={THEMES[this.state.theme]}
+              selected={THEMES_HASH[this.state.theme]}
-              list={THEMES_ARRAY}
+              list={THEMES}
               onChange={theme => this.setState({ theme: theme.id })}
             />
             <Dropdown
+              selected={
+                LANGUAGE_MIME_HASH[this.state.language] || LANGUAGE_MODE_HASH[this.state.language]
+              }
               list={LANGUAGES}
               onChange={language => this.setState({ language: language.mime || language.mode })}
             />