Shift Management fixed and updated.

employeemanagement/src/components/dashboard/Dashboard.js

@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 import { firestoreConnect } from 'react-redux-firebase';
 import { compose } from 'redux';
+import moment from 'moment';
 
 class Dashboard extends Component {
     render() {
@@ -16,11 +17,17 @@ class Dashboard extends Component {
             })
           ) : null
 
+        const todayList = list && list.length ? (
+            list.filter(l => {
+              return l.Date === moment().format('MM/DD/YYYY')
+            })
+        ) : null
+
         if( !auth.uid ) return <Redirect to='/signin' />
         return (
             <div id="content">
                 <Navbar profile = { profile } />
-                <ManageShift />
+                <ManageShift uid={ auth.uid } todayList={ todayList } />
                 <ShiftReport workList={ list } schedule={ schedule } />
             </div>
         )

employeemanagement/src/components/layout/ManageShift.js

-import React, { Component } from 'react'
+import React, { Component } from 'react';
+import moment from 'moment';
+import { connect } from 'react-redux';
+import { createWork, updateWork } from '../../store/actions/shiftAction';
 
 class ManageShift extends Component {
+
+    state = {
+        date: null,
+        empId: this.props.uid,
+        startShift: '',
+        startBreak: '',
+        endBreak: '',
+        endShift: '',
+        stateSet: false
+    }
+    componentDidMount() {
+        //console.log(this.props.todayList)
+    }
+    UNSAFE_componentWillReceiveProps() {
+        if (this.props.todayList && !this.state.stateSet) {
+            this.setState(this.props.todayList[0], () => {
+                this.setState({stateSet:true})
+                //console.log(this.state)
+            })
+        }
+    }
+
+    handleCreatEvent = (e) => {
+        const r = window.confirm("Do you really want to " + e.target.id + "?"); if (r == true) {
+            this.setState({
+                [e.target.id]: moment().format('MM/DD/YYYY HH:mm:ss')
+            }, () => {
+                this.props.createWork(this.state);
+            })
+        }
+    }
+
+    handleUpdateEvent = (e) => {
+        const r = window.confirm("Do you really want to " + e.target.id + "?"); if (r == true) {
+            this.setState({
+                [e.target.id]: moment().format('MM/DD/YYYY HH:mm:ss'),
+            }, () => {
+                this.props.updateWork(this.state);
+            })
+        }
+    }
     render() {
         return (
-            <div className="container"> 
-                <div className="row">
-                    <div className="col-3 text-center"><button onClick={this.handleCreatEvent} id="startWorkTime" type="button" className="btn btn-success btn-sm btn-special">Start Work</button></div>
-                    <div className="col-3 text-center"><button disabled type="button" className="btn btn-success btn-sm btn-special">Start Lunch Break</button></div>
-                    <div className="col-3 text-center"><button disabled type="button" className="btn btn-success btn-sm btn-special">Lunch Break Finish</button></div>
-                    <div className="col-3 text-center"><button disabled type="button" className="btn btn-success btn-sm btn-special">Close Work</button></div>
+            <div className="row">
+                <div className="col-3 text-center">
+                    <button
+                        onClick={this.handleCreatEvent}
+                        disabled={this.state.startShift + "" != ""}
+                        id="startShift"
+                        type="button"
+                        className="btn btn-success btn-sm btn-special">
+                        Start Work
+                    </button>
+                </div>
+                <div className="col-3 text-center">
+                    <button
+                        type="button"
+                        className="btn btn-success btn-sm btn-special"
+                        disabled={this.state.startShift + "" == "" || this.state.startBreak + "" != ""}
+                        onClick={this.handleUpdateEvent}
+                        id="startBreak">
+                        Start Lunch Break
+                    </button>
+                </div>
+                <div className="col-3 text-center">
+                    <button
+                        disabled={this.state.startShift + "" == "" || this.state.startBreak + "" == "" || this.state.endBreak + "" != ""}
+                        type="button"
+                        className="btn btn-success btn-sm btn-special"
+                        onClick={this.handleUpdateEvent}
+                        id="endBreak">
+                        Lunch Break Finish 
+                        {this.state.endBreak == ""}
+                    </button>
+                </div>
+                <div className="col-3 text-center">
+                    <button
+                        disabled={this.state.startShift + "" == "" || this.state.startBreak + "" == "" || this.state.endBreak + "" == "" || this.state.endShift + "" != ""}
+                        type="button"
+                        onClick={this.handleUpdateEvent}
+                        className="btn btn-success btn-sm btn-special"
+                        id="endShift">
+                        Close Work  
+                        {this.state.endShift == ""}
+                    </button>
                 </div>
             </div>
-        )
+        );
+    }
+}
+const mapStateToProps = (dispatc) => {
+    return {
+        createWork: (work) => dispatc(createWork(work)),
+        updateWork: (work) => dispatc(updateWork(work))
     }
 }
 
-export default ManageShift
+export default connect(null, mapStateToProps)(ManageShift);

employeemanagement/src/store/actions/shiftAction.js

+import moment from 'moment';
+
+export const createWork = (shift) => {
+    return (dispatch, getState, { getFirebase, getFirestore }) => {
+        const firestore = getFirestore();
+        const authuId = getState().firebase.auth.uid;
+
+        firestore.collection('Shifts').add({
+            ...shift,
+            empId: authuId,
+            date: moment().format('MM/DD/YYYY')
+        }).then(() => {
+            dispatch({ type: 'ADD_SHIFT', shift })
+        }).catch((err) => {
+            dispatch({ type: 'ADD_SHIFT_ERROR', err });
+        })
+    }
+}
+export const updateWork = (shift) => {
+    return (dispatch, getState, { getFirebase, getFirestore }) => {
+        const firestore = getFirestore();
+
+        firestore.collection("Shifts")
+            .where("empId", "==", shift.empId)
+            .get()
+            .then(function (querySnapshot) {
+                querySnapshot.forEach(function (doc) {
+                    let data = doc.data();
+                    if (new Date(data.date).toLocaleDateString() == new Date().toLocaleDateString()) {
+                        shift.date = data.date;
+                        firestore.collection('Shifts').doc(doc.id).update(shift)
+                            .then(() => {
+                                dispatch({ type: 'UPDATE_SHIFT', shift })
+                            }).catch((err) => {
+                                dispatch({ type: 'UPDATE_SHIFT_ERROR', err });
+                        })
+                    }
+                })
+            })
+    }
+}
\ No newline at end of file

employeemanagement/src/store/reducers/shiftReducer.js

 const initState = {}
 
 const shiftReducer = (state = initState, action) => {
-    return state
+    switch (action.type) {
+        case 'ADD_SHIFT':
+            console.log('New shift added', action.shift);
+            return state;
+        case 'ADD_SHIFT_ERROR':
+            console.log('New shift error', action.shift);
+            return state;
+        case 'UPDATE_SHIFT':
+            console.log('update shift', action.shift);
+            return state;
+        case 'UPDATE_SHIFT_ERROR':
+            console.log('update shift error', action.shift);
+            return state;
+        default:
+            return state;
+    }
 }
 export default shiftReducer
\ No newline at end of file