save data to backend with asynchronous actions and redux-thunk

package.json

@@ -8,7 +8,7 @@
     "build": "npm run copy-css && webpack --colors",
     "start": "npm run copy-css && webpack --progress --colors --watch",
     "serve": "node src/server/babel.index.js",
-    "webpack-stats": "webpack --profile --json > stats.json",
+    "webpack-stats": "webpack --json > stats.json",
     "test": "mocha --watch --compilers js:babel-register"
   },
   "author": "",
@@ -29,6 +29,9 @@
     "react-router": "^1.0.0",
     "redux": "^3.5.1",
     "redux-router": "^1.0.0-beta5",
+    "redux-thunk": "^2.1.0",
+    "request": "^2.79.0",
+    "request-promise-native": "^1.0.3",
     "reselect": "^2.5.1",
     "semantic-ui-css": "^2.2.4",
     "semantic-ui-react": "^0.61.6",

src/client/index.js

@@ -8,6 +8,8 @@ import {Provider} from 'react-redux'
 import  createBrowserHistory  from 'history/lib/createBrowserHistory'
 import  {Router, Route, IndexRoute, Redirect } from 'react-router'
 
+import thunk from 'redux-thunk'
+
 import * as localStore from '../common/localStore'
 import * as reducers from '../common/reducers'
 import routes from '../common/routes'
@@ -22,16 +24,23 @@ import * as Actions from '../common/actions'
 
 const initialState = window.__INITIAL_STATE__
 
+
+//create the list of middlewares
+let middlewares = [thunk]
+
 //create the redux store
 //initial state is retrieved from localStore
 const store = Redux.createStore(
   Redux.combineReducers(reducers), 
   initialState,
-  window.devToolsExtension ? window.devToolsExtension() : undefined
+  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
+    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(Redux.applyMiddleware(...middlewares)):
+    Redux.applyMiddleware(...middlewares)
 )
 
+console.log(store)
+
 const localInput = localStore.get('dubdiff')
-console.log(localInput)
 if (localInput.input) {
   //dispatch localStore data to store
   store.dispatch(Actions.updateOriginalInput(localInput.input.original))

src/common/actions.js

@@ -1,7 +1,29 @@
+import requestPromise from 'request-promise-native'
+import uuid from 'uuid/v4'
+
+export const updateOriginalInput = (text) => 
+  (dispatch, getState) => {
+    dispatch({ type: 'UPDATE_ORIGINAL_INPUT', data:text})
+    if (getState().input.original.length>0)
+      dispatch({type: 'SAVE_STATUS_DIRTY'})
+    else 
+      dispatch({type: 'SAVE_STATUS_EMPTY'})
+  }
+export const updateFinalInput = (text) => 
+  (dispatch, getState) => {
+    dispatch({ type: 'UPDATE_FINAL_INPUT', data:text})
+    if (getState().input.final.length>0)
+      dispatch({type: 'SAVE_STATUS_DIRTY'})
+    else 
+      dispatch({type: 'SAVE_STATUS_EMPTY'})
+  }
+
+export const clearInput = () =>
+  (dispatch) => {
+    dispatch({ type: 'CLEAR_INPUT'})
+    dispatch({ type: 'SAVE_STATUS_EMPTY'})
+  }
 
-export const updateOriginalInput = (text) => ({ type: 'UPDATE_ORIGINAL_INPUT', data:text})
-export const updateFinalInput = (text) => ({ type: 'UPDATE_FINAL_INPUT', data:text})
-export const clearInput = () => ({ type: 'CLEAR_INPUT'})
 export const updateOriginalCompare = (text) => ({ type: 'UPDATE_ORIGINAL_COMPARE', data:text})
 export const updateFinalCompare = (text) => ({ type: 'UPDATE_FINAL_COMPARE', data:text})
 export const clearCompare = () => ({ type: 'CLEAR_COMPARE'})
@@ -10,4 +32,35 @@ export const setMarkdownFormat = () => ({ type: 'SET_MARKDOWN_FORMAT'})
 export const showOriginal = () => ({ type: 'SHOW_ORIGINAL'})
 export const showFinal = () => ({ type: 'SHOW_FINAL'})
 export const showDifference = () => ({ type: 'SHOW_DIFFERENCE'})
- 
+
+export const save = () =>
+  (dispatch, getState) => {
+
+    console.log("!!! SAVING")
+
+    //generate an id
+    const id = uuid()
+    dispatch( {type: 'SAVE_STATUS_ASSIGN_ID', id})
+
+    //set waiting state
+    dispatch( {type: 'SAVE_STATUS_WAITING'})
+
+    const reqOptions = {
+      method: 'POST',
+      uri: `${location.origin}/api/compare/${id}`,
+      body: {
+        a: getState().input.original,
+        b: getState().input.final
+      },
+      json: true
+    }
+
+    //dispatch post request
+    requestPromise(reqOptions)
+      .then(returnBodyJson => {
+        dispatch( {type: 'SAVE_STATUS_SAVED'})
+      })
+      .catch(error => {
+        dispatch( {type: 'SAVE_STATUS_FAILED', error})
+      })
+  }

src/common/components/MainControls.js

@@ -18,9 +18,9 @@ const mapDispatchToProps = dispatch => ({
   onSetPlaintextFormat: (format) => dispatch(Actions.setPlaintextFormat()),
   onSetMarkdownFormat: (format) => dispatch(Actions.setMarkdownFormat()), 
   onCompare: (safeInput) => {
+    dispatch(Actions.save())
     dispatch(Actions.updateOriginalCompare(safeInput.original))
     dispatch(Actions.updateFinalCompare(safeInput.final))
-    dispatch(Actions.clearInput())
   }
 })
 

src/common/components/ShowMarkdown.js

@@ -5,8 +5,6 @@ import markdownCompiler  from 'markdown-to-jsx'
 import {diffToString, diffToHtml} from '../util/dubdiff'
 
 const ShowMarkdown = (props) => {
-  if (props.diff)
-    console.log(diffToString(props.diff))
 
   return <div>
       {

src/common/reducers.js

@@ -1,4 +1,4 @@
-
+import {Format, Show} from './constants'
 
 
 export function input (state, action ) {
@@ -28,12 +28,6 @@ export function compare (state, action ) {
 }
 
 
-export const Format = {
-  PLAINTEXT: 'PLAINTEXT',
-  MARKDOWN: 'MARKDOWN'
-}
-
-
 export function format (state, action) {
   switch (action.type) {
     case 'SET_PLAINTEXT_FORMAT':
@@ -45,11 +39,6 @@ export function format (state, action) {
   }
 } 
 
-export const Show = {
-  ORIGINAL:'ORIGINAL',
-  FINAL:'FINAL',
-  DIFFERENCE:'DIFFERENCE'
-}
 
 export function show (state, action) {
   switch (action.type) {
@@ -63,3 +52,23 @@ export function show (state, action) {
       return state || Show.DIFFERENCE
   }
 }
+
+
+export function saveStatus (state, action) {
+  switch (action.type) {
+    case 'SAVE_STATUS_DIRTY':
+      return {dirty:true, id:null}
+    case 'SAVE_STATUS_EMPTY':
+      return {dirty:false, id:null}
+    case 'SAVE_STATUS_SAVED':
+      return Object.assign({}, state, {waiting: false, dirty:false, failed: false, error:null})
+    case 'SAVE_STATUS_FAILED' :
+      return Object.assign({}, state, {waiting: false, failed: true, error: action.error})
+    case 'SAVE_STATUS_WAITING' :
+      return Object.assign({}, state, {waiting: true, failed: false, error: null })
+    case 'SAVE_STATUS_ASSIGN_ID':
+      return Object.assign({}, state, {id: action.id})
+    default:
+      return state || {empty: true, dirty:false, id:null}
+  }
+}

src/common/selectors.js

@@ -5,7 +5,7 @@ import { createSelector } from 'reselect'
 import React from 'react'
 
 
-import {Format, Show} from './reducers'
+import {Format, Show} from './constants'
 
 import * as Dubdiff from './util/dubdiff'
 

webpack.config.js

@@ -20,4 +20,9 @@ module.exports = {
       { test: /\.json$/, loader: "json-loader" },
     ]
   },
+  node: {
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty'
+  }
 };