ManageShift.js

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
    }

    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() {
        const worklist = this.props.todayList && this.props.todayList.length ? (
            this.props.todayList && this.props.todayList.map(w => {
                const startWork = w.startShift === '' ? (
                    <button onClick={this.handleCreatEvent} id="startShift" type="button" className="btn btn-success btn-sm btn-special">Start Work</button>
                ) : (
                    <button disabled type="button" className="btn btn-success btn-sm btn-special">Start Work</button>
                )

                const startBreak = w.startShift !== '' && w.startBreak === '' ? (
                    <button onClick={this.handleUpdateEvent} id="startBreak" type="button" className="btn btn-success btn-sm btn-special">Start Lunch Break</button>
                ) : (
                    <button disabled type="button" className="btn btn-success btn-sm btn-special">Start Lunch Break</button>
                )

                const endBreak = w.startShift !== '' && w.startBreak !== '' && w.endBreak === '' ? (
                    <button onClick={this.handleUpdateEvent} id="endBreak" type="button" className="btn btn-success btn-sm btn-special">Lunch Break Finish</button>
                ) : (
                    <button disabled type="button" className="btn btn-success btn-sm btn-special">Lunch Break Finish</button>
                )

                const endWork = w.startShift !== '' && w.startBreak !== '' && w.endBreak !== '' && w.endShift === '' ? (
                    <button onClick={this.handleUpdateEvent} id="endShift" type="button" className="btn btn-success btn-sm btn-special">Close Work</button>
                ) : (
                    <button disabled type="button" className="btn btn-success btn-sm btn-special">Close Work</button>
                )

                return(
                    <div className="row" key={ w.id }>
                        <div className="col-3 text-center">{ startWork }</div>
                        <div className="col-3 text-center">{ startBreak }</div>
                        <div className="col-3 text-center">{ endBreak }</div>
                        <div className="col-3 text-center">{ endWork }</div>
                    </div>
                )
            })
        ):(       
            <div className="row">
                <div className="col-3 text-center"><button onClick={this.handleCreatEvent} id="startShift" 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>
        )

        return (
            <div className="container"> { worklist }</div>
        )
    }
}
const mapStateToProps = (dispatc) => {
    return {
        createWork: (work) => dispatc(createWork(work)),
        updateWork: (work) => dispatc(updateWork(work))
    }
}

export default connect(null, mapStateToProps)(ManageShift);