Modify place the up work button by employees

app/components/Member/index.js

@@ -9,6 +9,10 @@ class Member extends Component {
     return { __html: rawMarkup }
   }
 
+  handleUpWork(e) {
+    this.props.actions.up_work(this.props.id)
+  }
+
   render() {
     return (
       <div className={style.member}>
@@ -21,6 +25,7 @@ class Member extends Component {
         <span className="memberCheckoutTime">
           {this.props.checkout_time}
         </span>
+        <input type="button" value={`${this.props.at_work ? '退勤' : '出勤'}`} onClick={this.handleUpWork.bind(this)} />
       </div>
     )
   }

app/components/MemberList/index.js

@@ -8,6 +8,9 @@ class MemberList extends Component {
         <Member name={member.name}
           checkin_time={member.checkin_time}
           checkout_time={member.checkout_time}
+          at_work={member.at_work}
+          actions={this.props.actions}
+          id={member.id}
           key={member.id}>
         </Member>
       )

app/components/RecorderForm/index.js

@@ -25,10 +25,6 @@ class RecorderForm extends Component {
     this.setState({author: '', text: ''})
   }
 
-  handleUpWork(e) {
-    this.props.actions.up_work()
-  }
-
   render() {
     return (
       <form className="recorderForm" onSubmit={this.handleSubmit.bind(this)}>
@@ -45,7 +41,6 @@ class RecorderForm extends Component {
           onChange={this.handleTextChange.bind(this)}
         />
         <input type="submit" value="Post" />
-        <input type="button" value={`${this.props.data.at_work ? '退勤' : '出勤'}`} onClick={this.handleUpWork.bind(this)} />
       </form>
     )
   }

app/components/TimeRecorder/index.js

@@ -34,7 +34,7 @@ class TimeRecorder extends Component {
       <div className={style.normal}>
         <h1>Time Recorder</h1>
         {this.timeFormat()}
-        <MemberList data={this.props.data} />
+        <MemberList data={this.props.data} actions={this.props.actions} />
         <RecorderForm
           onRecorderSubmit={this.handleRecorderSubmit.bind(this)}
           actions={this.props.actions}

app/reducers/index.js

@@ -2,10 +2,9 @@ import { handleActions } from 'redux-actions'
 
 const initialState = {
   members: [
-    {id: 1, name: "高垣 楓", checkin_time: "2016/06/25 09:00", checkout_time: "2016/06/25 15:00"},
-    {id: 2, name: "速水 奏", checkin_time: "2016/06/25 09:20", checkout_time: "2016/06/25 17:00"}
-  ],
-  at_work: false
+    {id: 1, name: "高垣 楓", checkin_time: "2016/06/25 09:00", checkout_time: "2016/06/25 15:00", at_work: false},
+    {id: 2, name: "速水 奏", checkin_time: "2016/06/25 09:20", checkout_time: "2016/06/25 17:00", at_work: false}
+  ]
 }
 
 const reducerMap = {
@@ -16,9 +15,16 @@ const reducerMap = {
     return state.concat([action.payload])
   },
   up_work(state, action) {
+    let target_member = state.members.find((element, index, array) => {return element.id === action.payload})
+    let today = new Date()
+    let now   = `${today.getFullYear()}/${('0' + (today.getMonth() + 1)).slice(-2)}/${('0' + today.getDate()).slice(-2)} ${('0' + today.getHours()).slice(-2)}:${('0' + today.getMinutes()).slice(-2)}`
+    target_member.checkin_time  = (!target_member.at_work ? now : target_member.checkin_time)
+    target_member.checkout_time = (!target_member.at_work ? ""  : now)
+    target_member.at_work       = !target_member.at_work
+
     return {
       ...state,
-      at_work: !state.at_work
+      members: state.members.map((element) => {return (element.id === target_member.id ? target_member : element)})
     }
   }
 }