csv

import React, { Component } from "react";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Spinner from "../../components/Spinner";
import axios from "axios";
import Button from "@material-ui/core/Button";
import ViewsDetails from "../viewsDetails";
// import TableSearchVouchertype from './TableSearchVouchertype/FormSearchVouchertype';
import { CSVLink } from "react-csv";

class StandalonTable extends Component {

constructor(){
super()
   this.download = this.download.bind(this)
   state = {
    newUser: [],
    isLoading: true,
    error: null,
    searchVouchertype: "",
    searchStartdate: "",
    filterData: {}
  };
}
 

  updateSearchVouchertype = e => {
    this.setState({ searchVouchertype: e.target.value.substr(0, 20) });
  };

  componentDidMount() {
    axios
      .get("http://demo5882170.mockable.io/create", {
        responseType: "json"
      })
      .then(response => {
        const newUser = response.data;
        this.setState({
          newUser,
          isLoading: false
        });
        console.log(response);
      })
      .catch(error =>
        this.setState({
          error,
          isLoading: false
        })
      );
  }

  ///////////////////////
  download() {
    this.filteredData = this.state.newUser.map(user => user);
    this.headers = [
      { label: "Merchant ID", key: "merchantid" },
      { label: "Voucher ID", key: "voucherid" },
      { label: "Voucher Type", key: "vouchertype" }
    ];

    return <CSVLink data={this.filteredData}>Download me</CSVLink>;
  }
  //////////////////////////////////

  render() {
    const { classes } = this.props;
    const { isLoading } = this.state;
    let filteredvoucherType = this.state.newUser.filter(user => {
      return (
        user.voucherType
          .toLowerCase()
          .indexOf(this.state.searchVouchertype.toLowerCase()) !== -1
      );
    });

    return (
      <Paper className={classes.root}>
        <input
          type="text"
          value={this.state.searchVouchertype}
          onChange={this.updateSearchVouchertype}
          placeholder={"VoucherType"}
        />

        {!isLoading ? (
          <Table className={classes.table}>
            <TableHead>
              <TableRow style={{ backgroundColor: "#972FB0", color: "white" }}>
                <TableCell style={{ color: "white", fontSize: "15px" }}>
                  Dessert
                </TableCell>
                <TableCell
                  align="right"
                  style={{ color: "white", fontSize: "15px" }}
                >
                  Calories
                </TableCell>
                <TableCell
                  align="right"
                  style={{ color: "white", fontSize: "15px" }}
                >
                  Calories
                </TableCell>
                <TableCell
                  align="right"
                  style={{ color: "white", fontSize: "15px" }}
                >
                  Fat
                </TableCell>
                <TableCell
                  align="right"
                  style={{ color: "white", fontSize: "15px" }}
                >
                  Carbs
                </TableCell>
                <TableCell
                  align="right"
                  style={{ color: "white", fontSize: "15px" }}
                >
                  Protein
                </TableCell>
                <TableCell
                  align="right"
                  style={{ color: "white", fontSize: "15px" }}
                >
                  AdditionInfo
                </TableCell>
                <TableCell
                  align=""
                  style={{ color: "white", fontSize: "15px" }}
                >
                  View
                </TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {filteredvoucherType.map(user => (
                <TableRow key={user.merchantId}>
                  <TableCell style={{ fontSize: "12px" }}>
                    {user.merchantId}
                  </TableCell>
                  <TableCell align="right" style={{ fontSize: "12px" }}>
                    {user.voucherType}
                  </TableCell>
                  <TableCell align="right" style={{ fontSize: "12px" }}>
                    {user.Status}
                  </TableCell>
                  <TableCell align="right" style={{ fontSize: "12px" }}>
                    {user.startDate}
                  </TableCell>
                  <TableCell align="right" style={{ fontSize: "12px" }}>
                    {user.expirationDate.length < 5
                      ? user.expirationDate
                      : user.expirationDate.substring(0, 6) + "..."}
                  </TableCell>
                  <TableCell align="right" style={{ fontSize: "12px" }}>
                    {user.status}
                  </TableCell>
                  <TableCell align="right" style={{ fontSize: "12px" }}>
                    {user.additionInfo.length < 5
                      ? user.additionInfo
                      : user.additionInfo.substring(0, 6) + "..."}
                  </TableCell>
                  <TableCell align="">
                    <ViewsDetails
                      voucherType={user.voucherType}
                      startDate={user.voucherType}
                      expirationDate={user.startDate}
                      code={user.code}
                      status={user.status}
                      category={user.status}
                      additionInfo={user.additionInfo}
                    />
                  </TableCell>
                  <TableCell>
                    <button onClick={this.download}>Download CSV</button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        ) : (
          <Spinner />
        )}
      </Paper>
    );
  }
}
const styles = theme => ({
  root: {
    width: "100%",
    marginTop: theme.spacing.unit * 3,
    overflowX: "auto"
  },
  table: {
    minWidth: 700
  }
});

export default withStyles(styles)(StandalonTable);