Add STAGING state

dawnlabs · Feb 24, 2017 · 4e6681a · 4e6681a
1 parent c855467
commit 4e6681a
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 53 deletions.
diff --git a/src/components/Converter.jsx b/src/components/Converter.jsx
@@ -14,9 +14,10 @@ import { uniqueFiles } from '../helpers/util'
 
 const drop = (props, monitor, component) => {
   const { files } = monitor.getItem()
+  const filesUnique = uniqueFiles(component.state.files, files)
   component.setState({
-    status: 'IDLE',
-    files: uniqueFiles(component.state.files, files)
+    status: Object.keys(filesUnique).length ? 'STAGING' : 'IDLE',
+    files: filesUnique
   })
 
   if (component.state.shifted) {
@@ -62,21 +63,16 @@ class Sanitizer extends Component {
 
   getMessage() {
     switch (this.state.status) {
-      case 'IDLE': {
-        if (!Object.keys(this.state.files).length) {
-          return (
-            <div>
-              <h1>
-                { this.isHover() ? 'Drop' : 'Drag & drop' }
-              </h1>
-              <p className="detail">
-                {`your files here to ${this.state.shifted ? 'convert' : 'add them'}`}
-              </p>
-            </div>
-          )
-        }
-        return null
-      }
+      case 'IDLE': return (
+        <div>
+          <h1>
+            { this.isHover() ? 'Drop' : 'Drag & drop' }
+          </h1>
+          <p className="detail">
+            {`your files here to ${this.state.shifted ? 'convert' : 'add them'}`}
+          </p>
+        </div>
+      )
       case 'CONVERTING': return (
         <div>
           <h1>
@@ -110,42 +106,39 @@ class Sanitizer extends Component {
       case 'FAILED': return <Failed />
       case 'DONE': return <Done />
       case 'CONVERTING': return <Converting />
-      default:
-        if (Object.keys(this.state.files).length) {
-          return (
-            <div className="file__list">
-              <input type="text" value="Alchemy-1.txt">
-                <div className="switch">
-                  <div className="merge">
-                    <Merge />
-                    <div>Merge</div>
-                  </div>
-                  <div className="convert">
-                    <Convert />
-                    <div>Convert</div>
-                  </div>
-                </div>
-                <div className="dropdown">
-                  <select name="file-type">
-                    <option value="gif">GIF</option>
-                    <option value="pdf">PDF</option>
-                  </select>
-                </div>
-                <div className="file-list">
-                  <div className="file-list__item">
-
-                  </div>
-                </div>
-                {
-                  Object.keys(this.state.files).map(key =>
-                    <p className="file__list-item" key={key}>{this.state.files[key].name}</p>
-                  )
-                }
-              <button className="button__convert" onClick={() => { this.convert() }}>CONVERT</button>
+      case 'STAGING': return (
+        <div className="staging">
+          <input type="text" value="Alchemy-1.txt" />
+          <div className="switch">
+            <div className="merge">
+              <Merge />
+              <div>Merge</div>
+            </div>
+            <div className="convert">
+              <Convert />
+              <div>Convert</div>
             </div>
-          )
-        }
-        return <Idle />
+          </div>
+          <div className="dropdown">
+            <select name="file-type">
+              <option value="gif">GIF</option>
+              <option value="pdf">PDF</option>
+            </select>
+          </div>
+          <div className="file-list">
+            {
+              Object.keys(this.state.files).map(key =>
+                <div className="file-list__item" key={key}>
+                  <div>{this.state.files[key].name}</div>
+                  <button className="close-btn" />
+                </div>
+              )
+            }
+          </div>
+          <button className="button__convert" onClick={() => { this.convert() }}>CONVERT</button>
+        </div>
+      )
+      default: return <Idle />
     }
   }
 

diff --git a/styles/index.scss b/styles/index.scss
@@ -87,7 +87,7 @@ p {
   animation: file3 0.25s forwards;
 }
 
-.file__list {
+.staging {
   z-index: 999;
   display: flex;
   flex-direction: column;