[WIP] Implement Redux

.babelrc

@@ -1,7 +1,7 @@
 {
-  "presets": ["react", "es2015", "stage-0"],
+  "presets": ["es2015", "stage-0", "react"],
   "plugins": [
-    'transform-runtime'
+    "transform-runtime"
   ],
   "env": {
     "development": {

.eslintignore

@@ -1,4 +1,5 @@
-app/scripts/include/*.js
 node_modules
 versions
-dist
+dist
+app/scripts/pages/*.js
+app/scripts/views/*.js

app/scripts/actions/config.js

@@ -0,0 +1,31 @@
+import {action, createRequestTypes} from './utils'
+
+export const CONFIG = {
+  INITIALIZE_CONFIG: 'INITIALIZE_CONFIG',
+  SAVING_CONFIG: 'SAVING_CONFIG',
+  SAVE_CONFIG: 'SAVE_CONFIG',
+  SAVED_CONFIG: 'SAVED_CONFIG',
+  SAVE_CONFIG_CLICK: 'SAVE_CONFIG_CLICK',
+  SAVE_CONFIG_DRAFT: 'SAVE_CONFIG_DRAFT',
+  SAVE_CONFIG_FAILURE: 'SAVE_CONFIG_FAILURE',
+  RESET_CONFIG_DRAFT: 'RESET_CONFIG_DRAFT',
+  LOAD: createRequestTypes('CONFIG_LOAD')
+}
+
+export const config = {
+  initializeConfig: (config) => action(CONFIG.INITIALIZE_CONFIG, {config}),
+  save: (config) => action(CONFIG.SAVE_CONFIG, {config}),
+  markSaved: (saved) => action(CONFIG.SAVED_CONFIG, {saved}),
+  saveClick: (config) => action(CONFIG.SAVE_CONFIG_CLICK),
+  saveDraft: (draft) => action(CONFIG.SAVE_CONFIG_DRAFT, {draft}),
+  saving: (saving) => action(CONFIG.SAVING_CONFIG, {saving}),
+  resetDraft: (resetConfig) => action(CONFIG.RESET_CONFIG_DRAFT),
+
+  failure: (error) => action(CONFIG.SAVE_CONFIG_FAILURE, {error}),
+
+  load: {
+    request: () => action(CONFIG.LOAD.REQUEST),
+    success: (response) => action(CONFIG.LOAD.SUCCESS, {response}),
+    failure: (error) => action(CONFIG.LOAD.FAILURE, {error})
+  }
+}

app/scripts/actions/errors.js

@@ -0,0 +1,5 @@
+import {action} from './utils'
+
+export const RESET_ERROR_MESSAGE = 'RESET_ERROR_MESSAGE'
+
+export const resetErrorMessage = () => action(RESET_ERROR_MESSAGE)

app/scripts/actions/files.js

@@ -0,0 +1,61 @@
+import {createRequestTypes, action} from './utils'
+
+export const FILES_LIST = createRequestTypes('FILES_LIST')
+export const FILES_MKDIR = createRequestTypes('FILES_MKDIR')
+export const FILES_RMDIR = createRequestTypes('FILES_RMDIR')
+export const FILES_CREATE_FILES = createRequestTypes('FILES_CREATE_FILES')
+
+export const FILES = {
+  CANCEL: 'FILES_CANCEL',
+  SET_ROOT: 'FILES_SET_ROOT',
+  CREATE_TMP_DIR: 'FILES_CREATE_TMP_DIR',
+  RM_TMP_DIR: 'FILES_RM_TMP_DIR',
+  SET_TMP_DIR_NAME: 'FILES_SET_TMP_DIR_NAME',
+  CREATE_DIR: 'FILES_CREATE_DIR',
+  REMOVE_DIR: 'FILES_REMOVE_DIR',
+  SELECT_FILE: 'SELECT_FILE',
+  DESELECT_FILE: 'DESELECT_FILE',
+  DESELECT_ALL_FILE: 'DESELECT_ALL_FILE',
+  CREATE_FILES: 'CREATE_FILES'
+}
+
+export const filesList = {
+  request: () => action(FILES_LIST.REQUEST),
+  success: (response) => action(FILES_LIST.SUCCESS, {response}),
+  failure: (error) => action(FILES_LIST.FAILURE, {error})
+}
+
+export const filesMkdir = {
+  request: () => action(FILES_MKDIR.REQUEST),
+  success: () => action(FILES_MKDIR.SUCCESS),
+  failure: (error) => action(FILES_MKDIR.FAILURE, {error})
+}
+
+export const filesRmDir = {
+  request: () => action(FILES_RMDIR.REQUEST),
+  success: () => action(FILES_RMDIR.SUCCESS),
+  failure: (error) => action(FILES_RMDIR.FAILURE, {error})
+}
+
+export const createFiles = {
+  request: () => action(FILES_CREATE_FILES.REQUEST),
+  success: () => action(FILES_CREATE_FILES.SUCCESS),
+  failure: (error) => action(FILES_CREATE_FILES.FAILURE, {error})
+}
+
+export const files = {
+  cancel: () => action(FILES.CANCEL)
+}
+
+export const filesSetRoot = (root) => action(FILES.SET_ROOT, {root})
+export const filesCreateTmpDir = (root) => action(FILES.CREATE_TMP_DIR, {root})
+export const filesRmTmpDir = () => action(FILES.RM_TMP_DIR)
+export const filesSetTmpDirName = (name) => action(FILES.SET_TMP_DIR_NAME, {name})
+export const filesCreateDir = () => action(FILES.CREATE_DIR)
+export const filesRemoveDir = () => action(FILES.REMOVE_DIR)
+
+export const filesSelect = (file) => action(FILES.SELECT_FILE, {file})
+export const filesDeselect = (file) => action(FILES.DESELECT_FILE, {file})
+export const filesDeselectAll = () => action(FILES.DESELECT_ALL_FILE)
+
+export const filesCreateFiles = (root, files) => action(FILES.CREATE_FILES, {root, files})

app/scripts/actions/home.js

@@ -0,0 +1,9 @@
+import {action, createRequestTypes} from './utils'
+
+export const ID = createRequestTypes('ID')
+
+export const id = {
+  request: () => action(ID.REQUEST),
+  success: (response) => action(ID.SUCCESS, {response}),
+  failure: (error) => action(ID.FAILURE, {error})
+}

app/scripts/actions/index.js

@@ -0,0 +1,32 @@
+// Broken because of https://phabricator.babeljs.io/T2877
+// export * from './pages'
+// export * from './errors'
+
+// export * from './home'
+// export * from './peers'
+// export * from './files'
+// export * from './preview'
+// export * from './logs'
+
+// Workaround
+
+import * as pages from './pages'
+import * as errors from './errors'
+import * as router from './router'
+
+import * as home from './home'
+import * as peers from './peers'
+import * as files from './files'
+import * as preview from './preview'
+import * as logs from './logs'
+import * as config from './config'
+
+export {pages}
+export {errors}
+export {router}
+export {home}
+export {peers}
+export {files}
+export {preview}
+export {logs}
+export {config}

app/scripts/actions/logs.js

@@ -0,0 +1,15 @@
+import {action} from './utils'
+
+export const LOGS = {
+  RECEIVE: 'LOGS_RECEIVE',
+  CANCEL: 'LOGS_CANCEL',
+  TOGGLE_TAIL: 'TOGGLE_TAIL',
+  SELECT_SYSTEM: 'SELECT_SYSTEM'
+}
+
+export const logs = {
+  receive: (response) => action(LOGS.RECEIVE, {response}),
+  cancel: () => action(LOGS.CANCEL),
+  toggleTail: () => action(LOGS.TOGGLE_TAIL),
+  selectSystem: (system) => action(LOGS.SELECT_SYSTEM, {system})
+}

app/scripts/actions/pages.js

@@ -0,0 +1,8 @@
+import {createPage} from './utils'
+
+export const {HOME, home} = createPage('home')
+export const {FILES, files} = createPage('files')
+export const {PREVIEW, preview} = createPage('preview')
+export const {LOGS, logs} = createPage('logs')
+export const {PEERS, peers} = createPage('peers')
+export const {CONFIG, config} = createPage('config')

app/scripts/actions/peers.js

@@ -0,0 +1,31 @@
+import {createRequestTypes, action} from './utils'
+
+export const PEERS = {
+  CANCEL: 'PEERS_CANCEL'
+}
+
+export const PEER_IDS = createRequestTypes('PEER_IDS')
+export const PEER_DETAILS = createRequestTypes('PEER_DETAILS')
+export const PEER_LOCATIONS = createRequestTypes('PEER_LOCATIONS')
+
+export const peers = {
+  cancel: () => action(PEERS.CANCEL)
+}
+
+export const peerIds = {
+  request: () => action(PEER_IDS.REQUEST),
+  success: (response) => action(PEER_IDS.SUCCESS, {response}),
+  failure: (error) => action(PEER_IDS.FAILURE, {error})
+}
+
+export const peerDetails = {
+  request: () => action(PEER_DETAILS.REQUEST),
+  success: (response) => action(PEER_DETAILS.SUCCESS, {response}),
+  failure: (error) => action(PEER_DETAILS.FAILURE, {error})
+}
+
+export const peerLocations = {
+  request: () => action(PEER_LOCATIONS.REQUEST),
+  success: (response) => action(PEER_LOCATIONS.SUCCESS, {response}),
+  failure: (error) => action(PEER_LOCATIONS.FAILURE, {error})
+}

app/scripts/actions/preview.js

@@ -0,0 +1,26 @@
+import {createRequestTypes, action} from './utils'
+
+export const requests = {
+  PREVIEW_STAT: createRequestTypes('PREVIEW_STAT'),
+  PREVIEW_READ: createRequestTypes('PREVIEW_READ'),
+  stat: {
+    request: () => action(requests.PREVIEW_STAT.REQUEST),
+    success: (response) => action(requests.PREVIEW_STAT.SUCCESS, {response}),
+    failure: (error) => action(requests.PREVIEW_STAT.FAILURE, {error})
+  },
+  read: {
+    request: () => action(requests.PREVIEW_READ.REQUEST),
+    success: (response) => action(requests.PREVIEW_READ.SUCCESS, {response}),
+    failure: (error) => action(requests.PREVIEW_READ.FAILURE, {error})
+  }
+}
+
+export const PREVIEW = {
+  STAT: 'PREVIEW.STAT',
+  READ: 'PREVIEW.READ',
+  CLEAR: 'PREVIEW.CLEAR'
+}
+
+export const stat = (name) => action(PREVIEW.STAT, {name})
+export const read = (name) => action(PREVIEW.READ, {name})
+export const clear = () => action(PREVIEW.CLEAR)

app/scripts/actions/router.js

@@ -0,0 +1,3 @@
+import {push, replace, go, goBack, goForward} from 'react-router-redux'
+
+export {push, replace, go, goBack, goForward}

app/scripts/actions/utils.js

@@ -0,0 +1,39 @@
+const REQUEST = 'REQUEST'
+const SUCCESS = 'SUCCESS'
+const FAILURE = 'FAILURE'
+
+export function createRequestTypes (base) {
+  const res = {}
+  const types = [REQUEST, SUCCESS, FAILURE]
+  types.forEach((type) => {
+    res[type] = `${base}_${type}`
+  })
+
+  return res
+}
+
+export function action (type, payload = {}) {
+  return {type, ...payload}
+}
+
+function createPageConstants (name) {
+  return {
+    LOAD: `LOAD_${name.toUpperCase()}_PAGE`,
+    LEAVE: `LEAVE_${name.toUpperCase()}_PAGE`
+  }
+}
+
+function createPageActions (name, consts) {
+  return {
+    load: () => action(consts.LOAD),
+    leave: () => action(consts.LEAVE)
+  }
+}
+
+export function createPage (name) {
+  const consts = createPageConstants(name)
+  return {
+    [name.toUpperCase()]: consts,
+    [name]: createPageActions(name, consts)
+  }
+}

app/scripts/components/config-buttons.js

@@ -0,0 +1,46 @@
+import React, {Component} from 'react'
+import i18n from '../utils/i18n.js'
+import classNames from 'classnames'
+
+export
+default class ConfigButtons extends Component {
+  static displayName = 'ConfigButtons'
+
+  static propTypes = {
+    // Dispatch
+    resetDraft: React.PropTypes.func.isRequired,
+    saveClick: React.PropTypes.func.isRequired,
+    // State
+    saving: React.PropTypes.bool.isRequired,
+    saved: React.PropTypes.bool.isRequired
+  }
+
+  render () {
+    const buttonClass = classNames(
+      'btn',
+      'btn-success',
+      'pull-right', {
+        disabled: this.props.saving || this.props.saved
+      }
+    )
+
+    const iconClass = classNames('fa', {
+      'fa-check': this.props.saved,
+      'fa-save': !this.props.saved
+    })
+
+    return (
+      <div className='controls'>
+        <button className={buttonClass} onClick={this.props.saveClick}>
+          <i className={iconClass} />&nbsp;
+          {this.props.saving ? i18n.t('Saving...') : this.props.saved ? i18n.t('Saved') : i18n.t('Save')}
+        </button>
+        <button className='btn btn-primary pull-right' onClick={this.props.resetDraft}>
+          <i className='fa fa-recycle' />&nbsp;
+          {i18n.t('Reset')}
+        </button>
+        <div className='clear' />
+      </div>
+    )
+  }
+}

app/scripts/components/config-text.js

@@ -0,0 +1,38 @@
+import React, {Component} from 'react'
+import TextArea from 'react-textarea-autosize'
+
+export
+default class ConfigText extends Component {
+  static displayName = 'ConfigText';
+
+  static propTypes = {
+    // Dispatch
+    saveDraft: React.PropTypes.func.isRequired,
+    markSaved: React.PropTypes.func.isRequired,
+    // State
+    draft: React.PropTypes.string.isRequired,
+    saved: React.PropTypes.bool.isRequired
+  };
+
+  handleChange = (event) => {
+    const body = event.target.value
+    this.props.saveDraft(body)
+
+    if (this.props.saved) {
+      this.props.markSaved(false)
+    }
+  }
+
+  render () {
+    return (
+      <div className='textarea-panel panel panel-default padded'>
+        <TextArea
+          className='panel-inner'
+          spellCheck='false'
+          onChange={this.handleChange}
+          value={this.props.draft}
+        />
+      </div>
+    )
+  }
+}