From 7dac7ae15c8d9a1df86e680d3a28e8a5ae33b748 Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Sun, 9 Jul 2017 15:21:37 -0700
Subject: [PATCH] Add dnd container (doesn't render?). Make top level settings
 single source of truth

---
 components/CodeImage.js |  5 -----
 components/Settings.js  | 10 ++++++++--
 components/Toolbar.js   |  2 +-
 pages/index.js          | 37 +++++++++++++++++++++++--------------
 4 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/components/CodeImage.js b/components/CodeImage.js
index c5cbfbf..db1fd71 100644
--- a/components/CodeImage.js
+++ b/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',
diff --git a/components/Settings.js b/components/Settings.js
index 02d8be2..849aca3 100644
--- a/components/Settings.js
+++ b/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>
diff --git a/components/Toolbar.js b/components/Toolbar.js
index 0ab1085..aff3c46 100644
--- a/components/Toolbar.js
+++ b/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" />
diff --git a/pages/index.js b/pages/index.js
index 80791cc..7bc32b3 100644
--- a/pages/index.js
+++ b/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,20 +68,28 @@ 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>
-          <div id="editor">
-            <Toolbar
-              save={this.save}
-              upload={this.upload}
-              onBGChange={color => this.setState({ background: color })}
-              onThemeChange={theme => this.setState({ theme: theme.id })}
-              onLanguageChange={language => this.setState({ language })}
-              onSettingsChange={(key, value) => this.setState({ [key]: value })}
-              bg={this.state.background}
-            />
-            <CodeImage config={this.state}>
-              {this.droppedContent || this.props.content || DEFAULT_CODE}
-            </CodeImage>
-          </div>
+          <ReadFileDropContainer
+            onDrop={(droppedContent) => {
+              console.log(droppedContent)
+              this.setState({ droppedContent })
+            }}
+          >
+            <div id="editor">
+              <Toolbar
+                save={this.save}
+                upload={this.upload}
+                onBGChange={color => this.setState({ background: color })}
+                onThemeChange={theme => this.setState({ theme: theme.id })}
+                onLanguageChange={language => this.setState({ language })}
+                onSettingsChange={(key, value) => this.setState({ [key]: value })}
+                bg={this.state.background}
+                enabled={this.state}
+              />
+              <CodeImage config={this.state}>
+                {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>