Get updated state in componentdidmount ?

comp.jsx

/**
 * Created by piyush on 23/6/17.
 */
import React from 'react';
import Select from '../../common/ui/select.js'

export default class Close_Task_Modal extends React.Component{
    constructor(props){
        super(props);
        this.state= {
            nextTasks:[],
            selectedTeamList:[],
            people:[],
            selectedTaskId:null,
            activeTaskId:"",
            setTeam:null,
            shouldReRender:true
        }
        this.onChangeTeam = this.onChangeTeam.bind(this);
        // this.refreshSlots = this.refreshSlots.bind(this);
        // this.storeData = this.storeData.bind(this);
        // this.hanSelectTeam = this.hanSelectTeam.bind(this);
    }

    // componentWillUnmount(){
    //     alert("asa")
    // }

    componentDidUpdate(){
        $("select").material_select();
        console.log("PEOPLE", this.state.newTasks)
    }

    shouldComponentUpdate(){
        // if(!this.state.shouldReRender){
        //     return false
        // }
        return true;
    }

    componentDidMount(){

        $('.datepicker').pickadate({
            selectMonths: true, // Creates a dropdown to control month
            format:"dd/mm/yyyy",
            selectYears: 20 // Creates a dropdown of 15 years to control year
        });

        let that=this;
        let teams = this.state.selectedTeamList;
        let selectedTaskId="";

        teams.map(function (team, index) {
            if (that.state.setTeam == team.id) {
                people = team.attributes.people;
            }
        })

        // let temp = '#task_vertical_timeslot .task_unit:not(#task_vertical_timeslot .task_unit.lock,#task_vertical_timeslot .task_unit.unavailable'
        let temp = that.state.activeTaskId;
        console.log("temp", temp)
        $('body').on('click',`#task_vertical_timeslot${that.state.activeTaskId} .task_unit:not(#task_vertical_timeslot${that.state.activeTaskId} .task_unit.lock,#task_vertical_timeslot${that.state.activeTaskId} .task_unit.unavailable)`,function() {

           alert();
            var _this = $(this);
            var slots = [];
            if (_this.hasClass('active')) {
                _this.removeClass('active');
                return false;
            }
            if (!_this.siblings('.active').length > 0) {
                $(`#task_vertical_timeslot${that.state.activeTaskId} .task_unit`).removeClass('active');
            }
            _this.addClass('active');
            $(`#task_vertical_timeslot${that.state.activeTaskId} .task_unit.active`).each(function (i, v) {
                var obj = {};
                obj['end'] = saveObject($(this).attr('date'), parseInt($(this).attr('time')) + 1);
                obj['start'] = saveObject($(this).attr('date'), $(this).attr('time'));
                slots.push(obj);
                console.log("SLOTS", slots)
            });

            let newTasks = that.state.newTasks;
            newTasks.map((task)=>{
                if(task.rule_id== that.state.activeTaskId){
                    task.slots = slots
                }
            })

            that.setState({
                newTasks:newTasks,
                shouldReRender:false
            })
        });

        function saveObject(date,time)
        {
            var newdt = parseDate(date);
            newdt.setHours(time,0,0);
            //("MOMENT TIME: ",moment(newdt).format())
            return moment(newdt).format();
        }
        function parseDate(str) {
            var mdy = str.split('/');
            return new Date(mdy[2], mdy[1]-1, mdy[0]);
        }

        $(`#task_start_date${that.state.activeTaskId}`).on('change',function(){
            that.re_refreshSlots(that.state.updated_assign_select_team)
        });

        $(`#task_end_date${that.state.activeTaskId}`).on('change',function(){
            that.re_refreshSlots(that.state.updated_assign_select_team)
        });


//
//             let d = new Date();
//         $('#task_start_date'+that.state.activeTaskId,'#task_end_date'+ that.state.activeTaskId).val(`${d.getDate()}/${d.getMonth()+1}/${d.getFullYear()}`);
// console.log($('#task_start_date'+that.state.activeTaskId,'#task_end_date'+ that.state.activeTaskId));
        // console.log("TO DATE IS",that.state.activeTaskId, $('#task_start_date'+ that.state.activeTaskId).val())


        $('body').on('click','.taskList.active input[type=checkbox]',function(){
            $("select").material_select();
        });

        $('#leftTasks .taskList .tasks').on('click',function(){
            if($(this).parent().find('input[type=checkbox]').is(":checked"))
            {
                // Also check if autoExecute attribute is true
                $('#setTeam,#setPeople,#task_start_date,#task_end_date').removeAttr('disabled',false);
            }
            else
            {
                $('#setTeam,#setPeople,#task_start_date,#task_end_date').attr('disabled',false);
            }
            var _this   =   $(this).parent();

            _this.siblings().removeClass('active');
            _this.addClass('active');

            selectedTaskId = _this.attr('name');
            that.setState({
                activeTaskId:selectedTaskId,
                shouldReRender:true
            })

            $("select").material_select();

        });

        $('body').on('click','.slotbar',function () {
            var id = $(this).attr('name');
            $('input[name='+id+']').css({"border-color": "blue",
                "border-width":"1px",
                "border-style":"solid"});

            let newTasks = that.state.newTasks;
            newTasks.map((task)=>{
                if(task.rule_id== that.state.activeTaskId){
                    task.assigned_user = id
                }
            })

            that.setState({
                newTasks:newTasks,
                shouldReRender:false
            })
        });


        $("select").material_select();

    }



    componentWillMount() {
        let ActiveTask = this.props.activeTask.task.data.attributes;
        let Teams = this.props.teams.teams.data;
        let workflows = this.props.workflows;
        // let templateId = ActiveTask.template.id;

        let ruleId = ActiveTask.prev_ruleId;
        let next_RuleIds = [];
        let taskList = [];
        let teamList = []
        let workflow = [];
        let nextTask={};


        if (workflows.workflows.data.length > 0) {
            workflow = workflows.workflows.data.find((wf) => wf.id == ActiveTask.workflowId)

            if (!!workflow) {

                let nxtTemplates = [];
                let allLinks = $.map(workflow.attributes.draw_data.links, link => [link])

                console.log("workflow", workflow)

                allLinks.map((link) => {
                    if (link.fromOperator == ruleId) {
                        nxtTemplates.push(link.toOperator)
                    }
                })
                console.log("allLinks", allLinks)


                let next_Rules = [];
                workflow.attributes.rules.map((rule) => {
                    for (let i = 0; i < nxtTemplates.length; i++) {
                        if (rule.rule_id == nxtTemplates[i]) {
                            next_Rules.push(rule)
                        }
                    }
                })
                console.log("NEXT RULES", next_Rules)

                let tasks = []
                next_Rules.map((nxt_rule, index) => {
                    let len = Teams.length;
                    for (let i = 0; i < len; i++) {
                        if (!!nxt_rule.assignment.team_id) {
                            nxt_rule.assignment.team_id.map((_teamId)=>{
                                if (Teams[i].id === _teamId)
                                    teamList.push(Teams[i])
                            })
                        }
                    }

                    tasks.push({
                        "rule_id": nxt_rule.rule_id,
                        "assignment_method": nxt_rule.assignment.method,
                        "assigned_user": "1006",
                        "assigned_team": nxt_rule.assignment.team_id,
                        "slots": []
                    })
                })

                console.log("teamList", teamList)

                let newTasks = JSON.parse(JSON.stringify((tasks)));

                nextTask= next_Rules
                this.setState({
                    nextTasks:nextTask,
                    selectedTeamList:teamList,
                    tasks:tasks,
                    newTasks:newTasks
                })
            }
        }
    }


    re_refreshSlots(selectedTeam){
        let that = this;
        let people = [];
        var _days = "";

        if(!!$(`#task_start_date${that.state.activeTaskId}`).val() && !!$(`#task_end_date${that.state.activeTaskId}`).val())
            _days = daydiff(parseDate($(`#task_start_date${that.state.activeTaskId}`).val()), parseDate($(`#task_end_date${that.state.activeTaskId}`).val()));

        var _final = "";
        // let _this = that;
        console.log("selectedTeam", that.state.selectedTeamList)
        let teams = that.state.selectedTeamList;

        teams.map(function (team, index) {
            if (selectedTeam == team.id) {
                people = team.attributes.people;
            }
        })

        if (people.length != 0) {
            if(_days > -1 && _days != NaN)
            {
                people.map(function (p, i) {
                    // console.log("$('#task_start_date' + i).val();", $('#task_start_date' + i).val();
                    var _html   = "";
                    var _tym    = "";
                    var _html1  = '<div class="slotbar grey-bg pt-md pb-md np" name="'+p.id+'" key="'+p.id+'" ><div class="row valign-wrapper nm p"><div class="col s12 m12 np"><span class="black-text assign_user_name">' + p.name + '</span></div></div>';
                    for(let i = 0; i <= _days; i++)
                    {
                        var dt = $(`#task_start_date${that.state.activeTaskId}` + i).val();
                        if(i != 0)
                        {
                            dt = parseDate(dt);
                            dt.setDate(dt.getDate() +i);
                            dt = dt.getDate()+"/"+(dt.getMonth()+1)+"/"+dt.getFullYear();
                        }

                        _html = _html + '<br /><label class="date">'+dt+'</label><div style="min-height:30px;" class="mt-md mb-md"><div class="task_progress available1"><span class="labtext">3 Hrs</span></div><div class="task_progress lock"><span class="labtext">2 Hrs</span></div><div class="task_progress unavailable1"><span class="labtext">1 Hr</span></div></div><div class="fw time_slot">';
                        for(let j = 9; j <= 19; j++)
                        {
                            _tym = j;
                            if(j>12)
                            {
                                _tym = j-12;
                            }

                            _html = _html + '<div class="task_unit" date="'+dt+'" time="'+j+'">'+_tym+':00</div>';
                        }
                        _html = _html + '</div>';
                    }

                    _final = _final + _html1 + _html + '</div>'
                })
            }else{
                alert("Please select a valid date range");
                _final = "";
            }
            $(`#task_vertical_timeslot${that.state.activeTaskId}`).html(_final);

            // that.setState({
            //     updated_assigned_people: chosenMember,
            //     people:people
            // })
        }

        function parseDate(str) {
            var mdy = str.split('/');
            return new Date(mdy[2], mdy[1]-1, mdy[0]);
        }
        function daydiff(first, second) {
            return Math.round((second-first)/(1000*60*60*24));
        }
    }





    closeTask(e){

        e.preventDefault();
        console.log("Hey Done !!", this.state.newTasks);
        // this.props.closeTask("Task Closed")
    }



    onChangeTeam(e,ruleId){
        console.log("ruleId", ruleId)
        let _this=this;
        if(e.target.value!=="0"){
            let tasks = _this.state.newTasks;
            tasks.map((task)=>{
                if(task.rule_id== _this.state.activeTaskId){
                    task.assigned_team = e.target.value;
                    _this.setState({
                            newTasks:tasks,
                            setTeam:e.target.value,
                            shouldReRender:false
                    },
                    console.log("TASKS", _this.state.newTasks));
                }
            })
            _this.re_refreshSlots(e.target.value);
        }else{
            alert("Please select a team")

        }

    }

    render(){

        let Teams = this.props.teams.teams.data;

        let nextTasks = this.state.nextTasks,
            teamList= this.state.selectedTeam,
            taskList=[], teamDrpDwn=[];


        nextTasks.map((nxt_rule, i) => {
                    taskList.push(
                        <div key={nxt_rule.rule_id+i} class="taskList" name={nxt_rule.rule_id}>
                            <div class="inline-block">
                                <input type="checkbox" class="filled-in" disabled={nxt_rule.summary.auto_execute} id={'task'+nxt_rule.rule_id}/>
                                <label for={'task'+nxt_rule.rule_id}></label>
                            </div>
                            <div class="inline-block tasks">
                                <div class="taskName">{nxt_rule.summary.name.value}</div>
                                <div class="taskDesc label_sm truncate">
                                    {nxt_rule.summary.description.value}
                                </div>
                            </div>
                        </div>
                    )
                })



        let peopleDrpDwn=[];


        if(!!this.state.people){
            this.state.people.map((people)=>{
                peopleDrpDwn.push(
                    <option value={people.name} id={people.id}>{people.name}</option>
                )
            })
        }


        return(
            <div>
                <div class="row p-lg mb fh">
                    <div class="col m6 fh auto_overflow" id="leftTasks">
                        {taskList}
                    </div>
                    <div class="col m6 fh auto_overflow">
                        <div class="fh">
                            <div id="rightSection" class="assign_file subtask_file fh">
                                {(
                                    ()=>{
                                        return this.state.tasks.map((task,i)=>{
                                            let autoAssign = task.assignment_method== "manual" ? false : true;
                                            let teams = {data:[]}
                                            task.assigned_team.map((_team) => {
                                                Teams.map((team)=>{
                                                    if(team.id==_team){
                                                        teams.data.push(team)
                                                    }
                                                })
                                            })

                                            let d = new Date();
                                            let startDate, endDate;
                                            startDate = `${d.getDate()}/${d.getMonth()+1}/${d.getFullYear()}`;
                                            endDate = `${d.getDate()}/${d.getMonth()+1}/${d.getFullYear()}`;

                                            return (
                                                    <div key={i} id={task.rule_id+i} style={{display: this.state.activeTaskId==task.rule_id ? 'inline' : 'none'}} >
                                                        <div class="row np">
                                                            <div id={'selectedTeamName'+i}>task name</div>
                                                            <div class="col m12 l12 xl12 s12 np">
                                                                <div class="input-field">
                                                                    <Select id={'setTeam'+i} data={teams.data} style={{marginTop:"25px", marginBottom:"10px"}} div_id="input-field" label="Select Team" onFieldChange={(e)=>this.onChangeTeam(e,task.rule_id)}/>
                                                                </div>
                                                            </div>
                                                            <div class="col m2 l2 xl2 s12 np hide-on-small-only"></div>
                                                        </div>
                                                        <div class="row np">
                                                            <div class="col s12 m6 l6 xl6 npl">
                                                                <label for={'task_start_date'+ task.rule_id} class="pull-left">Start Date</label>
                                                                <input type="date" class="datepicker nm truncate" ref={input => this.task_start_date=input} id={'task_start_date'+ task.rule_id} name="task_start_date" value={startDate} disabled={autoAssign}/>
                                                                {/*value={startDate}*/}
                                                            </div>
                                                            <div class="col s12 m6 l6 xl6 npl">
                                                                <label for={'task_end_date'+ task.rule_id} class="pull-left">End Date</label>
                                                                <input type="date" class="datepicker nm truncate" ref={input => this.task_end_date=input} id={'task_end_date'+ task.rule_id} name="task_end_date" value={endDate} disabled={autoAssign}/>
                                                            </div>
                                                        </div>
                                                        <div class="row np">
                                                            <div class="col s4 m4 l4 xl4 text-left">
                                                                <div class="available inline-block">
                                                                    <div class="legend"></div>
                                                                    <label>Available</label>
                                                                </div>
                                                            </div>
                                                            <div class="col s3 m3 l3 xl3 text-left">
                                                                <div class="busy inline-block">
                                                                    <div class="legend"></div>
                                                                    <label>Busy</label>
                                                                </div>
                                                            </div>
                                                            <div class="col s5 m5 l5 xl5 text-left">
                                                                <div class="unavailable">
                                                                    <div class="legend"></div>
                                                                    <label>Unvailable</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row np auto_overflow">
                                                            <div class="col s12 m12 l12 xl12 npl npr text-left" id={'task_vertical_timeslot'+task.rule_id} style={{width:"500px"}}>
                                                            </div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                    }
                                )()}

                                <div class="row">
                                    <div class="col m12">
                                        <a href="#" class="btn" onClick={(e)=>this.closeTask(e)}>Finish</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}