Add dnd container (doesn't render?). Make top level settings single source of truth

components/CodeImage.js

@@ -5,11 +5,6 @@ import CodeMirror from 'react-codemirror'
 import WindowControls from '../components/svg/Controls'
 import Spinner from 'react-spinner'
 
-// hack to only call modes on browser
-if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
-  require('../lib/constants')
-}
-
 const DEFAULT_SETTINGS = {
   paddingVertical: '50px',
   paddingHorizontal: '50px',

components/Settings.js

@@ -31,8 +31,14 @@ class Settings extends React.Component {
         </div>
         <div className="settings-settings">
           <ThemeSelect onChange={this.props.onChange} />
-          <Toggle label="Drop shadow" onChange={this.props.onChange.bind(null, 'dropShadow')}/>
-          <Toggle label="Window controls" enabled onChange={this.props.onChange.bind(null, 'windowControls')}/>
+          <Toggle label="Drop shadow"
+            enabled={this.props.enabled.dropShadow}
+            onChange={this.props.onChange.bind(null, 'dropShadow')}
+          />
+          <Toggle label="Window controls"
+            enabled={this.props.enabled.windowControls}
+            onChange={this.props.onChange.bind(null, 'windowControls')}
+          />
           <Slider label="Padding (vertical)" initialValue={16} onChange={this.props.onChange.bind(null, 'paddingVertical')}/>
           <Slider label="Padding (horizontal)" initialValue={32} onChange={this.props.onChange.bind(null, 'paddingHorizontal')}/>
         </div>

components/Toolbar.js

@@ -14,7 +14,7 @@ const Toolbar = (props) => (
       onChange={props.onBGChange}
       bg={props.bg}
     />
-    <Settings onChange={props.onSettingsChange} />
+    <Settings onChange={props.onSettingsChange} enabled={props.enabled} />
     <div className="buttons">
       <CopyButton />
       <Button onClick={props.save} title="Save Image" bg="#C3E98D" />

pages/index.js

@@ -4,6 +4,7 @@ import { DragDropContext } from 'react-dnd'
 import Axios from 'axios'
 import domtoimage from 'dom-to-image'
 
+import ReadFileDropContainer from '../components/ReadFileDropContainer'
 import Logo from '../components/svg/Logo'
 import Meta from '../components/Meta'
 import Toolbar from '../components/Toolbar'
@@ -67,6 +68,12 @@ class Index extends React.Component {
               <h1>The easiest way to create images from source code. Start typing, or drag a file into the text area to get started.</h1>
             </div>
           </div>
+          <ReadFileDropContainer
+            onDrop={(droppedContent) => {
+              console.log(droppedContent)
+              this.setState({ droppedContent })
+            }}
+          >
             <div id="editor">
               <Toolbar
                 save={this.save}
@@ -76,11 +83,13 @@ class Index extends React.Component {
                 onLanguageChange={language => this.setState({ language })}
                 onSettingsChange={(key, value) => this.setState({ [key]: value })}
                 bg={this.state.background}
+                enabled={this.state}
               />
               <CodeImage config={this.state}>
-              {this.droppedContent || this.props.content || DEFAULT_CODE}
+                {this.state.droppedContent || this.props.content || DEFAULT_CODE}
               </CodeImage>
             </div>
+          </ReadFileDropContainer>
           <div className="footer">
             <span>a project by <a href="https://twitter.com/dawn_labs">@dawn_labs ¬</a></span>
           </div>