started converting playerlist.

src/layout/components/AppLayout.js

@@ -12,7 +12,7 @@ class AppLayout extends React.Component {
       <div>
         <Tabs activeKey={activeTab} onSelect={changeTab} id='layout-tabs'>
           <Tab eventKey={0} title='Setup'>
-            <StartPage state={state.setupPage} actions={state.setupPageActions} />
+            <StartPage { ...state } />
           </Tab>
           <Tab eventKey={1} title='PlayerList' disabled>
             <PlayerList state={state.playerList} actions={state.playerListActions} />

src/playerList/components/PlayerForm.js

@@ -1,12 +1,14 @@
 import React from 'react'
-import { Panel, FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap'
+import { FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap'
+import { fileSize, date2s, time2s } from '../../helpers'
 
-function FieldGroup ({ id, label, help, ...props }) {
+function FieldGroup ({ id, label, help, file, ...props }) {
   return (
     <FormGroup controlId={id}>
       <ControlLabel>{label}</ControlLabel>
       <FormControl {...props} />
       {help && <HelpBlock>{help}</HelpBlock>}
+      {file && <div>{fileSize(file.size)} {date2s(file.lastModified)} {time2s(file.lastModified)}</div>}
     </FormGroup>
   )
 }
@@ -17,28 +19,37 @@ class PlayerForm extends React.Component {
     this.handleFileUpload = this.handleFileUpload.bind(this)
   }
 
-  handleFileUpload () {
-    const file = this.playerListFile
+  handleFileUpload (event) {
+    event.preventDefault()
     const { fileUploadStart } = this.props.actions
+    const { alertAdd } = this.props.alerts
+    const { files } = this.playerListFile
+    if (files.length === 0) {
+      alertAdd({ type: 'info', text: 'Datei entfernt' })
+      return
+    }
+    if (files.length > 1) {
+      alertAdd({ type: 'warning', text: 'Mehrere Dateien gesendet. Nur die erste wird verarbeitet.' })
+    }
+    const file = files[0]
     fileUploadStart(file)
   }
 
   render () {
-    const { fileUpload } = this.props.state
+    const { fileUpload, file } = this.props.state
 
     return (
       <div>
-        {fileUpload === 'failure'
-        ? (<Panel header='Fehler'>Fehler beim laden.</Panel>)
-        : ''}
         <form>
           <FieldGroup
             id='playerListFile'
-            type='file'
             label='PlayerList.xls File'
             help='Die Datei wird von der Swisstennis Turniersoftware generiert.'
-            ref={input => { this.playerListFile = input }}
+            type='file'
+            file={file}
+            inputRef={input => { this.playerListFile = input }} 
             onChange={this.handleFileUpload}
+            disabled={(fileUpload === 'started')}
           />
         </form>
       </div>

src/playerList/components/index.js

@@ -3,4 +3,5 @@ import PlayerForm from './PlayerForm'
 import PlayerTable from './PlayerTable'
 import PlayerFilter from './PlayerFilter'
 
-export default { PlayerList, PlayerForm, PlayerTable, PlayerFilter }
+export { PlayerList, PlayerForm, PlayerTable, PlayerFilter }
+export default { PlayerList, PlayerForm, PlayerTable, PlayerFilter }

src/playerList/state.js

@@ -16,10 +16,10 @@ export const actions = {
       players
     }
   },
-  fileUploadStart: event => {
+  fileUploadStart: file => {
     return {
       type: 'PLAYER_FILE_UPLOAD_START',
-      event
+      file
     }
   },
   fileUploadSuccess: () => {
@@ -40,7 +40,8 @@ export const state = {
   allPlayers: [],
   filteredPlayers: [],
   filters: {},
-  fileUpload: 'idle'
+  fileUpload: 'idle',
+  file: null
 }
 console.log('State state', state)
 
@@ -50,7 +51,7 @@ export function reducer (state = [], action) {
     case 'SET_PLAYERS':
       return { ...state, allPlayers: action.players }
     case 'PLAYER_FILE_UPLOAD_START':
-      return { ...state, fileUpload: 'started' }
+      return { ...state, fileUpload: 'started', file: action.file }
     case 'PLAYER_FILE_UPLOAD_SUCCESS':
       return { ...state, fileUpload: 'finished' }
     case 'PLAYER_FILE_UPLOAD_FAILURE':
@@ -61,10 +62,9 @@ export function reducer (state = [], action) {
 }
 
 function * uploadFile (action) {
-  console.log('PlayerList uploadFile')
   try {
-    console.log(action.event)
-    generatePlayerList(action)
+    console.log('PlayerList uploadFile', action.file)
+    generatePlayerList(action.file)
     yield put(actions.fileUploadSuccess())
   } catch (e) {
     yield put(actions.fileUploadFailure())

src/startPage/components/StartPage.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import FileImport from './FileImport'
+import { PlayerForm } from '../../playerList/components'
 
 class StartPage extends React.Component {
   render () {
@@ -7,7 +7,7 @@ class StartPage extends React.Component {
       <div>
         <h1>SZTM Planungshelfer</h1>
         <p>Willkommen beim SZTM Planungshelfer</p>
-        <FileImport />
+        <PlayerForm state={this.props.playerList} actions={this.props.playerListActions} alerts={this.props.alertsActions} />
       </div>
     )
   }

yarn.lock

@@ -1740,18 +1740,12 @@ debug@2.6.7:
   dependencies:
     ms "2.0.0"
 
-debug@2.6.8, debug@^2.6.0, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8:
+debug@2.6.8, debug@^2.1.1, debug@^2.2.0, debug@^2.6.0, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
   dependencies:
     ms "2.0.0"
 
-debug@^2.1.1, debug@^2.2.0:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.3.3.tgz#40c453e67e6e13c901ddec317af8986cda9eff8c"
-  dependencies:
-    ms "0.7.2"
-
 decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -4013,10 +4007,6 @@ ms@0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
 
-ms@0.7.2:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
-
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"