AGTicketCountTable.js

import React, { Component } from 'react';
import Box from 'grommet/components/Box';
import Table from 'grommet/components/Table';
import TableHeader from 'grommet/components/TableHeader';
import TableRow from 'grommet/components/TableRow';
import Heading from 'grommet/components/Heading';
import Spinning from 'grommet/components/icons/Spinning';



class AGTicketCountTable extends React.Component{
	constructor (props) {
		super(props);
		this.state =
		{
			TableData: [],
			Reducedarray: [],
			Dates: [],
			loading: true
    };

	this.AGTableData = this.AGTableData.bind(this);
	this.sortByKey = this.sortByKey.bind(this);


	}

	sortByKey(array, key) {
    return array.sort(function(a, b) {
        var x = a[key]; var y = b[key];
        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    });
  }

	componentDidMount() {

		$.ajax({
		xhrFields: {
			withCredentials: true
			},
			type:"GET",
			url: this.props.getURL,
			dataType: 'json',
			success: function(data) {
				console.log("AGTicketCountTable:" + data);

				var date_lookup = {};
				var new_date = [];

				let grouped = data.reduce((a, v) => {
					if (!(v.Incident_Current_Assignment_Group in a)) a[v.Incident_Current_Assignment_Group] = {
					Incident_Current_Assignment_Group: v.Incident_Current_Assignment_Group,
					data: []
					};

					var dt = v.Created_Date;
					if (!(dt in date_lookup)) {
						date_lookup[dt] = 1;
						new_date.push(dt);
					}

					a[v.Incident_Current_Assignment_Group].data.push({date:dt,Ticket_count:v.Ticket_Count});
					return a;

				}, {});

				let tableDataReduced;
				tableDataReduced = this.state.Reducedarray = Object.keys(grouped).map(key => {
					return grouped[key];
				});

			  tableDataReduced.forEach(function(arrayItem)
				{
					console.log("tableDataReduced: " + JSON.stringify(arrayItem.data));
					this.sortByKey(arrayItem.data, date)
				});

				new_date.sort();
				new_date.splice(0,0, 'Asset Name');
				console.log("NEW DATES AG: " + new_date);

				this.setState({Dates: new_date, ReducedArray: tableDataReduced, loading: false});
				console.log("ReducedArray" + JSON.stringify(this.state.ReducedArray));

				}.bind(this),
				error: function(xhr, status, err) {
					console.error('#GET Error', status, err.toString());
				}.bind(this),
				timeout: 15000
			});



	}


	componentWillReceiveProps ({ }) {

		$.ajax({
		xhrFields: {
			withCredentials: true
			},
			type:"GET",
			url: this.props.getURL,
			dataType: 'json',
			success: function(data) {
				console.log("AGTicketCountTable:" + data);

				var date_lookup = {};
				var new_date = [];

				let grouped = data.reduce((a, v) => {
					if (!(v.Incident_Current_Assignment_Group in a)) a[v.Incident_Current_Assignment_Group] = {
					Incident_Current_Assignment_Group: v.Incident_Current_Assignment_Group,
					data: []
					};

					var dt = v.Created_Date;
					if (!(dt in date_lookup)) {
						date_lookup[dt] = 1;
						new_date.push(dt);
					}

					a[v.Incident_Current_Assignment_Group].data.push({date:dt,Ticket_count:v.Ticket_Count});
					return a;

				}, {});

				let tableDataReduced;
				tableDataReduced = this.state.Reducedarray = Object.keys(grouped).map(key => {
					return grouped[key];
				});

				tableDataReduced.forEach(function(arrayItem)
				{
					console.log("tableDataReduced: " + JSON.stringify(arrayItem.data));
					this.sortByKey(arrayItem.data, date)
				});

				new_date.sort();
				new_date.splice(0,0, 'Asset Name');
				console.log("NEW DATES AG: " + new_date);

				this.setState({Dates: new_date, ReducedArray: tableDataReduced, loading: false});

				console.log("ReducedArray" + JSON.stringify(this.state.ReducedArray));

				}.bind(this),
				error: function(xhr, status, err) {
					console.error('#GET Error', status, err.toString());
				}.bind(this),
				timeout: 15000
			});



	}

	AGTableData(){

    let rowObj = this.state.Reducedarray;

		return rowObj.map((row, i)=>{
			return (
			 <TableRow key={i}>
				<td>{row.Incident_Current_Assignment_Group}</td>
				<td>{row.data[0].Ticket_count}</td>
				<td>{row.data[1].Ticket_count}</td>
				<td>{row.data[2].Ticket_count}</td>
				<td>{row.data[3].Ticket_count}</td>
				<td>{row.data[4].Ticket_count}</td>
				<td>{row.data[5].Ticket_count}</td>
				<td>{row.data[6].Ticket_count}</td>
				<td>{row.data[7].Ticket_count}</td>
				<td>{row.data[8].Ticket_count}</td>
 				<td>{row.data[9].Ticket_count}</td>
 			 </TableRow>
			)

		});
		}




  render(){
		if (this.state.loading) {
			return <Spinning />;
		} else {
       if (this.state.Dates.length === 0) {
         return (<h3 style={{color:'red'}}>No Data To Be Displayed</h3>);
       } else {
         return(
     			<Table style={{color:'white', backgroundColor:'#262626'}} selectable={true}>
     			  <TableHeader labels={this.state.Dates} style={{backgroundColor:"yellow", color:"black", fontSize:"20px"}}/>
     				<tbody>{this.AGTableData()}</tbody>
     			</Table>
         );
       }
     }
  }
}

AGTicketCountTable.propTypes = {
  getURL: React.PropTypes.string.isRequired
};


export default AGTicketCountTable;