Merge pull request #2 from dawnlabs/dev

Update settings state and separate components

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/Footer.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const Footer = (props) => (
+  <div className="footer">
+    <span>a project by <a href="https://twitter.com/dawn_labs">@dawn_labs ¬</a></span>
+    <style jsx>{`
+      div {
+        font-size: 14px;
+        margin: 32px 0;
+        color: #506874;
+      }
+      a {
+        color: #C694E8;
+        text-decoration: none;
+      }
+    `}</style>
+  </div>
+)
+
+export default Footer

components/Header.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import Logo from './svg/Logo'
+
+const Header = (props) => (
+  <div className="header">
+    <div className="header-content">
+      <Logo />
+      <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>
+    <style jsx>{`
+      .header {
+        margin: 40px 0 48px;
+        width: 648px;
+      }
+
+      .header-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      h1 {
+        max-width: 472px;
+        font-size: 20px;
+        line-height: 1.5;
+        color: #fff;
+      }
+    `}</style>
+  </div>
+)
+
+export default Header

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="Drop shadow"
-          <Toggle label="Window controls" enabled onChange={this.props.onChange.bind(null, 'windowControls')}/>
+            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,10 +4,12 @@ import { DragDropContext } from 'react-dnd'
 import Axios from 'axios'
 import domtoimage from 'dom-to-image'
 
-import Logo from '../components/svg/Logo'
+import ReadFileDropContainer from '../components/ReadFileDropContainer'
 import Meta from '../components/Meta'
 import Toolbar from '../components/Toolbar'
 import CodeImage from '../components/CodeImage'
+import Header from '../components/Header'
+import Footer from '../components/Footer'
 import api from '../lib/api'
 import { THEMES, LANGUAGES, PALETTE, DEFAULT_CODE } from '../lib/constants'
 
@@ -61,29 +63,31 @@ class Index extends React.Component {
     return (
         <div className="main">
           <Meta />
-          <div className="header">
+          <Header />
-            <div className="header-content">
+          {/* TODO this doesn't update the render */}
-              <Logo />
+          <ReadFileDropContainer
-              <h1>The easiest way to create images from source code. Start typing, or drag a file into the text area to get started.</h1>
+            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>
-          </div>
+          </ReadFileDropContainer>
-          <div id="editor">
+          <Footer />
-            <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>
-          <div className="footer">
-            <span>a project by <a href="https://twitter.com/dawn_labs">@dawn_labs ¬</a></span>
-          </div>
           <style jsx>{`
             .main {
               display: flex;
@@ -95,39 +99,10 @@ class Index extends React.Component {
               min-height: 704px;
             }
 
-            .header {
-              margin: 40px 0 48px;
-              width: 648px;
-            }
-
-            .header-content {
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-            }
-
-            .header-content h1 {
-              max-width: 472px;
-              font-size: 20px;
-              line-height: 1.5;
-              color: #fff;
-            }
-
             #editor {
               background: ${PALETTE.EDITOR_BG};
               padding: 16px;
             }
-
-            .footer {
-              font-size: 14px;
-              margin: 32px 0;
-              color: #506874;
-            }
-
-            .footer a {
-              color: #C694E8;
-              text-decoration: none;
-            }
           `}
           </style>
         </div>