added new layout

src/Main.js

@@ -8,6 +8,7 @@ import { date2s, time2s } from './helpers'
 import 'bootstrap/dist/css/bootstrap.css'
 import EmailList from './lists/components/EmailList'
 import PhoneList from './lists/components/PhoneList'
+import layout from './layout'
 
 /**
  * General Application Design
@@ -201,7 +202,7 @@ class Main extends React.Component {
 
     let placeArray = this.state.match.places
     if (placeArray.length > 1) {
-      //placeArray = placeArray.concat([FILTER_OFF])
+      // placeArray = placeArray.concat([FILTER_OFF])
     }
     const date = Object.keys(this.state.match.dates).find((key) =>
       String(this.state.match.dates[key]) === this.matchDate.value
@@ -344,7 +345,7 @@ class Main extends React.Component {
       paylist.Sheets[place] = worksheets[place]
     })
 
-    /*let payListPerPlace = []
+    /* let payListPerPlace = []
     this.state.match.filtered.forEach((match) => {
       [match.Spieler1, match.Spieler2].forEach((matchPlayer) => {
         if (matchPlayer) {
@@ -376,9 +377,19 @@ class Main extends React.Component {
     const dates = this.props.matchList.dates || {}
     const matchCategories = this.props.matchList.categories || []
     const playerCategories = this.props.playerList.categories || []
+    const AppLayout = layout.components.AppLayout
 
     return (
       <div className='container'>
+        <AppLayout
+          layout={this.props.layout}
+          layoutActions={this.props.layoutActions}
+          state={this.props}
+          components={{
+            PlayerTable: playerList.components.PlayerTable,
+            MatchTable: matchList.components.MatchTable
+          }}
+        />
         <form>
           <label htmlFor='PlayerList'>Swisstennis PlayerList.xls</label>
           <input type='file' id='PlayerList' ref={(input) => { this.playerList = input }} accept='.xls' placeholder='PlayerList File' onChange={this.handlePlayerList} />

src/index.js

@@ -18,6 +18,7 @@ import Main from './Main'
 // Import the submodules
 import playerList from './playerList'
 import matchList from './matchList'
+import layout from './layout'
 
 /**
  * Redux Section
@@ -26,14 +27,16 @@ import matchList from './matchList'
 /** The root reducer is combined from all sub-module reducers */
 const rootReducer = combineReducers({
   playerList: playerList.reducer,
-  matchList: matchList.reducer
+  matchList: matchList.reducer,
+  layout: layout.reducer
 })
 console.log('Root reducer:', rootReducer)
 
 /** The default state is combined from all sub-module states */
 const defaultState = {
   playerList: playerList.state,
-  matchList: matchList.state
+  matchList: matchList.state,
+  layout: layout.state
 }
 console.log('Default state:', defaultState)
 
@@ -52,6 +55,7 @@ const store = createStore(rootReducer, defaultState, enhancers)
 sagaMiddleware.run(function * () {
   yield playerList.saga()
   yield matchList.saga()
+  yield layout.saga()
 })
 console.log('Store:', store)
 /** react-route is not used in this project.
@@ -62,7 +66,8 @@ console.log('history:', history)
 /** Collect the action creators from all modules in actionCreators */
 const actionCreators = {
   playerList: playerList.actions,
-  matchList: matchList.actions
+  matchList: matchList.actions,
+  layout: layout.actions
 }
 
 /** Creates a function  */

src/layout/components/AppLayout.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Tabs, Tab } from 'react-bootstrap'
+
+class AppLayout extends React.Component {
+  render () {
+    console.log('AppLayout state', this.props.state)
+    const { activeTab } = this.props.layout
+    const { changeTab } = this.props.layoutActions
+    const { state } = this.props
+    const { PlayerTable, MatchTable } = this.props.components
+
+    return (
+      <div>
+        <Tabs activeKey={activeTab} onSelect={changeTab} id='layout-tabs'>
+          <Tab eventKey={1} title='PlayerList'><PlayerTable state={state.playerList} /></Tab>
+          <Tab eventKey={2} title='Calendar'><MatchTable state={state.matchList} /></Tab>
+          <Tab eventKey={3} title='Spielplan' />
+          <Tab eventKey={4} title='Zahlliste' />
+        </Tabs>
+      </div>
+    )
+  }
+}
+
+export default AppLayout

src/layout/components/index.js

@@ -0,0 +1,3 @@
+import AppLayout from './AppLayout'
+
+export default { AppLayout }

src/layout/index.js

@@ -0,0 +1,10 @@
+import { actions, reducer, state } from './state'
+import components from './components'
+
+const filters = {
+  all: players => players
+}
+
+const selectors = {}
+
+export default { actions, components, filters, selectors, reducer, state }

src/layout/state.js

@@ -0,0 +1,38 @@
+/** @module player/state */
+// import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
+
+/**
+ * state.js
+ *
+ * Collection of everything which has to do with state changes.
+ **/
+
+/** actionTypes define what actions are handeled by the reducer. */
+export const actions = {
+  changeTab: activeTab => {
+    return {
+      type: 'CHANGE_TAB',
+      activeTab
+    }
+  }
+}
+console.log('State actions', actions)
+
+/** state definition */
+export const state = {
+  activeTab: 1
+}
+console.log('State state', state)
+
+/** reducer is called by the redux dispatcher and handles all component actions */
+export function reducer (state = [], action) {
+  switch (action.type) {
+    case 'CHANGE_TAB':
+      return { ...state, activeTab: action.activeTab }
+    default:
+      return state
+  }
+}
+
+/** sagas are asynchronous workers (JS generators) to handle the state. */
+export function * saga () {}

src/matchList/components/MatchTable.js

@@ -19,13 +19,12 @@ class MatchRow extends React.Component {
 
 class MatchTable extends React.Component {
   render () {
-    console.log(this.props)
-    const matches = this.props.match.allMatches
-    const filtered = this.props.match.filteredMatches
+    console.log('Match props', this.props.state)
+    const { allMatches, filteredMatches } = this.props.state || { allMatches: [], filteredMatches: [] }
 
     return (
       <div>
-        <h2>Matches ({filtered.length}/{matches.length})</h2>
+        <h2>Matches ({filteredMatches.length}/{allMatches.length})</h2>
         <table className='table table-bordered table-striped'>
           <thead>
             <tr>
@@ -38,7 +37,7 @@ class MatchTable extends React.Component {
             </tr>
           </thead>
           <tbody>
-            {filtered.map((match, key) =>
+            {filteredMatches.map((match, key) =>
               <MatchRow key={key} match={match} />
             )}
           </tbody>

src/playerList/components/PlayerTable.js

@@ -6,10 +6,10 @@ class PlayerRow extends React.Component {
     const player = this.props.player
     return (
       <tr>
-        <td><i>{player.Konkurrenz}</i></td>
-        <td><b>{player.Name}</b></td>
+        <td>{player.Konkurrenz}</td>
+        <td>{player.Name}</td>
         <td>{player.Vorname}</td>
-        <td><b>{player.NameDP}</b></td>
+        <td>{player.NameDP}</td>
         <td>{player.VornameDP}</td>
         <td>{player.Bezahlt ? 'Ja' : 'Nein'}</td>
         <td>{player.BezahltAm ? `${date2s(player.BezahltAm)} ${time2s(player.BezahltAm)}` : 'Unbekannt'}</td>
@@ -22,19 +22,19 @@ class PlayerRow extends React.Component {
 
 class PlayerTable extends React.Component {
   render () {
-    console.log(this.props)
-    const filtered = this.props.player.filteredPlayers
+    console.log('PlayerTable state', this.props.state)
+    const { allPlayers, filteredPlayers } = this.props.state || { allPlayers: [], filteredPlayers: [] }
 
     return (
       <div>
-        <h2>Spielerliste ({filtered.length})</h2>
+        <h2>Spielerliste ({filteredPlayers.length}/{allPlayers.length})</h2>
         <table className='table table-bordered table-striped'>
           <thead>
             <tr>
-              <th><i>Konkurrenz</i></th>
-              <th><b>Name</b></th>
+              <th>Konkurrenz</th>
+              <th>Name</th>
               <th>Vorname</th>
-              <th><b>Name DP</b></th>
+              <th>Name DP</th>
               <th>Vorname DP</th>
               <th>Bezahlt</th>
               <th>Bezahlt Am</th>
@@ -43,7 +43,7 @@ class PlayerTable extends React.Component {
             </tr>
           </thead>
           <tbody>
-            {filtered.map((player, key) =>
+            {filteredPlayers.map((player, key) =>
               <PlayerRow key={key} player={player} />
             )}
           </tbody>