行動データ, contact form, default articleに英語文追加, Intro fix

lib/components/modal/Preference/ContactTab.js

@@ -0,0 +1,123 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { getClientKey } from 'boost/activityRecord'
+import linkState from 'boost/linkState'
+import _ from 'lodash'
+import { request, WEB_URL } from 'boost/api'
+
+const FORM_MODE = 'FORM_MODE'
+const DONE_MODE = 'DONE_MODE'
+
+export default class ContactTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      title: '',
+      content: '',
+      email: '',
+      mode: FORM_MODE,
+      alert: null
+    }
+  }
+
+  componentDidMount () {
+    let titleInput = ReactDOM.findDOMNode(this.refs.title)
+    if (titleInput != null) titleInput.focus()
+  }
+
+  handleBackButtonClick (e) {
+    this.setState({
+      mode: FORM_MODE
+    })
+  }
+
+  handleSendButtonClick (e) {
+    let input = _.pick(this.state, ['title', 'content', 'email'])
+    input.clientKey = getClientKey()
+
+    this.setState({
+      alert: {
+        type: 'info',
+        message: 'Sending...'
+      }
+    }, () => {
+      request.post(WEB_URL + 'apis/inquiry')
+        .send(input)
+        .then(res => {
+          console.log('sent')
+          this.setState({
+            title: '',
+            content: '',
+            mode: DONE_MODE,
+            alert: null
+          })
+        })
+        .catch(err => {
+          if (err.code === 'ECONNREFUSED') {
+            this.setState({
+              alert: {
+                type: 'error',
+                message: 'Can\'t connect to API server.'
+              }
+            })
+          } else {
+            console.error(err)
+            this.setState({
+              alert: {
+                type: 'error',
+                message: err.message
+              }
+            })
+          }
+        })
+    })
+  }
+
+  render () {
+    switch (this.state.mode) {
+      case DONE_MODE:
+        return (
+          <div className='ContactTab content done'>
+            <div className='message'>
+              <i className='checkIcon fa fa-check-circle'/><br/>
+              Your message has been sent successfully!!
+            </div>
+            <div className='control'>
+              <button onClick={e => this.handleBackButtonClick(e)}>Back to Contact form</button>
+            </div>
+          </div>
+        )
+      case FORM_MODE:
+      default:
+        let alertElement = this.state.alert != null
+          ? (
+            <div className={'alert ' + this.state.alert.type}>{this.state.alert.message}</div>
+          )
+          : null
+        return (
+          <div className='ContactTab content form'>
+            <div className='title'>Contact form</div>
+            <div className='description'>
+              Your feedback is highly appreciated and will help us to improve our app. :D
+            </div>
+            <div className='iptGroup'>
+              <input ref='title' valueLink={this.linkState('title')} placeholder='Title' type='text'/>
+            </div>
+            <div className='iptGroup'>
+              <textarea valueLink={this.linkState('content')} placeholder='Content'/>
+            </div>
+            <div className='iptGroup'>
+              <input valueLink={this.linkState('email')} placeholder='E-mail (Optional)' type='email'/>
+            </div>
+            <div className='formControl'>
+              <button onClick={e => this.handleSendButtonClick(e)} className='primary'>Send</button>
+              {alertElement}
+            </div>
+          </div>
+        )
+    }
+  }
+}
+
+ContactTab.prototype.linkState = linkState

lib/components/modal/Preferences.js

@@ -5,11 +5,13 @@ import store from 'boost/store'
 import AppSettingTab from './Preference/AppSettingTab'
 import HelpTab from './Preference/HelpTab'
 import FolderSettingTab from './Preference/FolderSettingTab'
+import ContactTab from './Preference/ContactTab'
 import { closeModal } from 'boost/modal'
 
 const APP = 'APP'
 const HELP = 'HELP'
 const FOLDER = 'FOLDER'
+const CONTACT = 'CONTACT'
 
 class Preferences extends React.Component {
   constructor (props) {
@@ -35,7 +37,8 @@ class Preferences extends React.Component {
 
     let tabs = [
       {target: APP, label: 'Preferences'},
-      {target: FOLDER, label: 'Manage folder'}
+      {target: FOLDER, label: 'Manage folder'},
+      {target: CONTACT, label: 'Contact form'}
     ]
 
     let navButtons = tabs.map(tab => (
@@ -71,6 +74,10 @@ class Preferences extends React.Component {
             folders={folders}
           />
         )
+      case CONTACT:
+        return (
+          <ContactTab/>
+        )
       case APP:
       default:
         return (<AppSettingTab/>)
@@ -239,7 +246,6 @@ Preferences.prototype.linkState = linkState
 
 function remap (state) {
   let { folders, status } = state
-  console.log(state)
 
   return {
     folders,

lib/components/modal/Tutorial.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PropTypes } from 'react'
 import MarkdownPreview from 'boost/components/MarkdownPreview'
 import CodeEditor from 'boost/components/CodeEditor'
 
@@ -88,8 +88,11 @@ export default class Tutorial extends React.Component {
         return (<div className='slide slide3'>
           <div className='title'>Easy to access with Finder</div>
           <div className='content'>
-            Finder is a small popup window.<br/>
-            With finder, You can search your articles faster.<br/>
+            With Finder, You can search your articles faster.<br/>
+            You can open Finder by pressing Control + shift + tab<br/>
+            To put the content of an article in the clipboard, press Enter.<br/>
+            So you can paste it with Cmd(⌘) + V
+
             <img width='480' src='../../resources/finder.png'/>
           </div>
         </div>)
@@ -105,3 +108,7 @@ export default class Tutorial extends React.Component {
     }
   }
 }
+
+Tutorial.propTypes = {
+  close: PropTypes.func
+}