Add indicator for auto save

Fix #13

Author: xcv58

src/css/style.css

@@ -1,5 +1,5 @@
 html, body {
-  min-width: 570px;
+  min-width: 800px;
   min-height: 600px;
   height: 100%;
 }

src/js/components/AutoSave.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+import { inject, observer } from 'mobx-react'
+
+@inject('AppStore')
+@observer
+export default class NewTabLink extends Component {
+  render () {
+    const { saved, autoSaveHandle } = this.props.AppStore
+    const text = (autoSaveHandle && 'Saving...') || (saved && 'Draft saved')
+    return (
+      <div className='pure-u-1-6 include__body'>
+        <span>
+          {text}
+        </span>
+      </div>
+    )
+  }
+}

src/js/components/Include.js

@@ -16,32 +16,30 @@ export default class Include extends Component {
   render () {
     const { include, includes, extraOpen, toggleExtraOpen, extraValue } = this.props.IncludeStore
     return (
-      <div className='pure-g'>
-        <div className='pure-u-7-8 include'>
-          <div className='include__body'>
-            You can inject <a href='#' onClick={toggleExtraOpen}>your own external scripts</a> or
-            <label htmlFor='include'> predefined one:</label>
-            <select
-              name='include'
-              value={include}
-              onChange={this.onSelect}
-            >
-              <option value=''> ---- nothing ---- </option>
-              {
-                includes.map(({ name, path }) => (
-                  <option key={name} value={path}>
-                    {name}
-                  </option>
-                ))
-              }
-            </select>
-          </div>
-          <div className={`include__popbox ${extraOpen ? '' : 'is-hidden'}`}>
-            <div className='include__popbox__body'>
-              <textarea name='extra-scripts' value={extraValue} onChange={this.onUpdateExtra} />
-            </div>
-            <div className='include__popbox__screenmask' onClick={toggleExtraOpen} />
+      <div className='pure-u-5-6 include'>
+        <div className='include__body'>
+          You can inject <a href='#' onClick={toggleExtraOpen}>your own external scripts</a> or
+          <label htmlFor='include'> predefined one:</label>
+          <select
+            name='include'
+            value={include}
+            onChange={this.onSelect}
+          >
+            <option value=''> ---- nothing ---- </option>
+            {
+              includes.map(({ name, path }) => (
+                <option key={name} value={path}>
+                  {name}
+                </option>
+              ))
+            }
+          </select>
+        </div>
+        <div className={`include__popbox ${extraOpen ? '' : 'is-hidden'}`}>
+          <div className='include__popbox__body'>
+            <textarea name='extra-scripts' value={extraValue} onChange={this.onUpdateExtra} />
           </div>
+          <div className='include__popbox__screenmask' onClick={toggleExtraOpen} />
         </div>
       </div>
     )

src/js/components/Page.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import AutoSave from 'components/AutoSave'
 import Editor from 'components/Editor'
 import Include from 'components/Include'
 import queryString from 'query-string'
@@ -80,7 +81,10 @@ export default class Page extends Component {
               </label>
             </div>
           </div>
-          <Include />
+          <div className='pure-g'>
+            <AutoSave />
+            <Include />
+          </div>
           <div className='pure-g'>
             <div className='pure-u-1'>
               <Editor />

src/js/stores/AppStore.js

@@ -10,7 +10,8 @@ export default class AppStore {
     this.store = store
   }
 
-  autoSaveHandle = null
+  @observable autoSaveHandle = null
+  @observable saved = false
 
   @observable hosts = []
 
@@ -121,23 +122,24 @@ export default class AppStore {
 
   @action
   saveDraft = () => {
+    this.draft = this.customjs
     window.localStorage.setItem(
       this.domainKey,
-      JSON.stringify({ draft: this.customjs })
+      JSON.stringify({ draft: this.draft })
     )
+    this.saved = true
+    this.autoSaveHandle = null
   }
 
   @action
   removeDraft = () => {
     this.draft = null
+    this.saved = false
     window.localStorage.removeItem(this.domainKey)
   }
 
   @action
   onChangeSource = (value) => {
-    if (this.draft) {
-      this.draft = null
-    }
     this.source = value
     if (!this.enable) {
       this.enable = true
@@ -196,7 +198,6 @@ export default class AppStore {
   autoSave = () => {
     if (this.autoSaveHandle) {
       clearTimeout(this.autoSaveHandle)
-      this.autoSaveHandle = null
     }
     this.autoSaveHandle = setTimeout(this.saveDraft, 500)
   }