save data to backend with asynchronous actions and redux-thunk

This commit is contained in:
Adam Brown 2016-12-14 13:02:27 -05:00
parent 414c1d570e
commit 0a3a37e64e
9 changed files with 19661 additions and 1749 deletions

21287
dist/browser-bundle.js vendored

File diff suppressed because one or more lines are too long

View File

@ -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",

View File

@ -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))

View File

@ -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'})
@ -11,3 +33,34 @@ 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})
})
}

View File

@ -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())
}
})

View File

@ -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>
{

View File

@ -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}
}
}

View File

@ -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'

View File

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