manageOrders.js

import React, { Component } from 'react';
import './../../App.css';

// import afterSearch from './ManageProduct';
import { Table, Button, Modal, ModalHeader,
	ModalBody, ModalFooter,  Form,
	FormGroup, Label, Input, Col, Collapse,
	CardBlock, Card } from 'reactstrap';
import { Link } from 'react-router-dom';

import {connect} from 'react-redux';
import {fetchOrders, deleteOrder,
		updateOrder} from '../Actions/OrderAction';

import localforage from 'localforage';



class ManageOrders extends Component {
	constructor(props) {
		super(props);

		// this.toggle = this.toggle.bind(this);
		this.state = {
			modal: false,
			order_number: '',
			order_items: [
				{
					order_id: '',
					product_name: '',
					order_price: '',
					order_qty: ''
				}
			],
			order_total: '',
			order_owner: {
				name: '',
				address: '',
				phone_number: ''
			},
			order_status: ''


		};


		this.toggle = this.toggle.bind(this);
		this.state = { collapse: false };
		this.handleOrder = this.handleOrder.bind(this);
        this.handleDelete = this.handleDelete.bind(this);

    }

	handleOrder(e){
		let jsondata = e.currentTarget.dataset;
        e.preventDefault()
		console.log(JSON.parse(jsondata.order_items));
		// console.log(JSON.parse(jsondata.order_owner));

	}


    handleDelete() {
        let id = this.refs.order_id.value;
        localforage.getItem('reduxPersist:Account').then(function (value) {
            let user = JSON.parse(value);
            let store_name = user.user.store_name;

        if (window.confirm('Are you sure you want to delete: ')) {
            this.props.deleteOrder(store_name, id);
        }
   	 }.bind(this))
	}

	toggle() {
		this.setState({ collapse: !this.state.collapse });
	}

	 componentDidMount(){
		 this.props.fetchOrders();
	}

	render(){

		let orders = this.props.Order.orders.sort((a, b) => {
			return new Date(b.timestamp) - new Date(a.timestamp);
		})
			console.log("these are oders: ", this.props.Order.orders);
		if (orders){
			return (
				<div className="page-content">
					<div className="container-fluid">

						<Table className="text-center " responsive bordered hover size="sm">
							<thead className="text-center ">
							<tr>
								<th>Order Number (#)</th>
								<th>Customer</th>
								<th>Products</th>
								<th>Total</th>
								<th>Status</th>
								<th>Action</th>
							</tr>
							</thead>
							<tbody >
								{orders.map((order, id) => {
									return (
										<tr key={id}>
											<td >{order.order_number}</td>
                                            <td >{order.order_owner.name}</td>

											<td >{order.order_items.length}</td>
											<td >{order.order_total}</td>
											<td >{order.order_status}</td>
											<td >
												<div className="btn-group btn-group-xs">
													<a className="btn btn-default" title="view">
													<Link onClick={this.handleOrder} to="viewOrder"
														  data-order_items={JSON.stringify(order.order_items)}
														  data-order_name={JSON.stringify(order.order_owner)}>
														  <i className="btn-link fa fa-eye"></i></Link></a>

													<a onClick={this.handleDelete}
													   data-order_id={order.order_id}
													   className="btn btn-danger" title="delete">
														<i className="fa fa-times"></i></a>

												</div>
											</td>
										</tr>
									)
								})}
							</tbody>
						</Table>



					</div>
				</div>

			)
		}else {
			return (
				<h6>no orders</h6>
			)
		}

	 }
}





const mapStateToProps = (state) => {
	return {
		Account: state.Account,
		Order: state.Order
	}
};

const mapDispatchToProps = (dispatch) => {
	return {

		fetchOrders: () => {
			dispatch(
				fetchOrders()
			)
		},
		deleteOrder:(storename, id) => {
			dispatch(
				deleteOrder(storename, id)
			)
		}
	}
};

export default connect(mapStateToProps, mapDispatchToProps)(ManageOrders);