problems with redux middleware.

src/alerts/index.js

@@ -5,4 +5,15 @@ const filters = {}
 
 const selectors = {}
 
-export default { actions, components, filters, selectors, reducer, state, saga }
+const middleware = store => next => action => {
+  console.log('Alert middleware', store, next, action)
+  const { alert } = action
+  if (alert) {
+    // delete action.alert
+  }
+  const result = next(action)
+  actions.alertAdd(alert)
+  return result
+}
+
+export default { actions, components, filters, selectors, reducer, state, saga, middleware }

src/alerts/state.js

@@ -10,12 +10,14 @@
 /** actionTypes define what actions are handeled by the reducer. */
 export const actions = {
   alertAdd: alert => {
+    console.log('adding alert', alert)
     return {
       type: 'ALERT_ADD',
       alert
     }
   },
   alertDismiss: alertId => {
+    console.log('dismissing alert', alertId)
     return {
       type: 'ALERT_DISMISS',
       alertId

src/index.js

@@ -60,6 +60,7 @@ const sagaMiddleware = createSagaMiddleware()
 
 /** The enhancer allows to use Redux development tools in Chrome */
 const enhancers = compose(
+  applyMiddleware(alerts.middleware),
   applyMiddleware(sagaMiddleware),
   window.devToolsExtension ? window.devToolsExtension() : f => f
 )

src/layout/components/AppLayout.js

@@ -12,16 +12,16 @@ class AppLayout extends React.Component {
       <div>
         <Tabs activeKey={activeTab} onSelect={changeTab} id='layout-tabs'>
           <Tab eventKey={0} title='Setup'>
-            <StartPage { ...state } />
+            <StartPage {...state} />
           </Tab>
-          <Tab eventKey={1} title='PlayerList' disabled>
+          <Tab eventKey={1} title='PlayerList' >
             <PlayerList state={state.playerList} actions={state.playerListActions} />
           </Tab>
-          <Tab eventKey={2} title='Calendar' disabled>
+          <Tab eventKey={2} title='Calendar' >
             <MatchTable state={state.matchList} actions={state.matchListActions} />
           </Tab>
-          <Tab eventKey={3} title='Spielplan' disabled />
-          <Tab eventKey={4} title='Zahlliste' disabled />
+          <Tab eventKey={3} title='Spielplan' />
+          <Tab eventKey={4} title='Zahlliste' />
         </Tabs>
       </div>
     )

src/layout/state.js

@@ -10,9 +10,11 @@
 /** actionTypes define what actions are handeled by the reducer. */
 export const actions = {
   changeTab: activeTab => {
+    console.log('change tab')
     return {
       type: 'CHANGE_TAB',
       activeTab
+      // alert: {type: 'info', text: 'changed tab.'}
     }
   }
 }

src/playerList/state.js

@@ -1,5 +1,5 @@
 /** @module player/state */
-import { put, takeEvery } from 'redux-saga/effects'
+import { call, put, takeEvery } from 'redux-saga/effects'
 import { generatePlayerList } from './functions'
 
 /**
@@ -22,14 +22,16 @@ export const actions = {
       file
     }
   },
-  fileUploadSuccess: () => {
+  fileUploadSuccess: allPlayers => {
     return {
-      type: 'PLAYER_FILE_UPLOAD_SUCCESS'
+      type: 'PLAYER_FILE_UPLOAD_SUCCESS',
+      allPlayers
     }
   },
-  fileUploadFailure: () => {
+  fileUploadFailure: error => {
     return {
-      type: 'PLAYER_FILE_UPLOAD_FAILURE'
+      type: 'PLAYER_FILE_UPLOAD_FAILURE',
+      alert: { type: 'warning', text: error.toString() }
     }
   }
 }
@@ -53,7 +55,7 @@ export function reducer (state = [], action) {
     case 'PLAYER_FILE_UPLOAD_START':
       return { ...state, fileUpload: 'started', file: action.file }
     case 'PLAYER_FILE_UPLOAD_SUCCESS':
-      return { ...state, fileUpload: 'finished' }
+      return { ...state, fileUpload: 'finished', allPlayers: action.allPlayers }
     case 'PLAYER_FILE_UPLOAD_FAILURE':
       return { ...state, fileUpload: 'failure' }
     default:
@@ -64,10 +66,12 @@ export function reducer (state = [], action) {
 function * uploadFile (action) {
   try {
     console.log('PlayerList uploadFile', action.file)
-    generatePlayerList(action.file)
-    yield put(actions.fileUploadSuccess())
-  } catch (e) {
-    yield put(actions.fileUploadFailure())
+    const allPlayers = yield call(generatePlayerList, action.file)
+    console.log('PlayerList success!', actions.fileUploadSuccess(allPlayers))
+    yield put(actions.fileUploadSuccess(allPlayers))
+  } catch (error) {
+    console.log('PlayerList failure!', actions.fileUploadFailure(error))
+    yield put(actions.fileUploadFailure(error))
   }
 }