{"size": 3424, "ext": "js", "max_stars_repo_path": "src/views/Users/UserReport.js", "max_stars_repo_name": "UAhmadSoft/Accents-Walls-AdminPanel", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/views/Users/UserReport.js", "max_issues_repo_name": "UAhmadSoft/Accents-Walls-AdminPanel", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/views/Users/UserReport.js", "max_forks_repo_name": "UAhmadSoft/Accents-Walls-AdminPanel", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.1374045802, "max_line_length": 69, "alphanum_fraction": 0.495911215}
import { Box, makeStyles } from '@material-ui/core';
import Axios from 'axios';
import React, { useState, useEffect } from 'react';
import './styles.css';
import ReactHTMLTableToExcel from 'react-html-table-to-excel';
import { genMediaQuery } from 'src/utils/mediaStyles';
import { useParams } from 'react-router-dom';
import { API_BASE_URL } from 'src/utils/API_URLS';

const useStyles = makeStyles(theme => ({
  Table: {
    // minWidth: 650,
    display: 'block',
    overflow: 'scroll',
    borderCollapse: 'collapse',
    borderBottom: '2px solid #00cccc',
    border: '1px solid #eee',
    margin: 'auto',
    boxShadow: `0px 0px 20px rgba(0,0,0,0.10),
     0px: 10px 20px rgba(0,0,0,0.05);
     0px: 20px 20px rgba(0,0,0,0.05);
     0px: '30px 20px rgba(0,0,0,0.05)'`,
    maxWidth: 900,
    [genMediaQuery('xs')]: {
      maxWidth: 500
    },
    '& th': {
      background: '#00cccc',
      color: '#fff',
      textTransform: 'uppercase',
      fontSize: 12,
      '&.lastTh': {
        borderRight: 'none'
      },
      padding: '12px 35px'
    },
    '& tr': {
      textAlign: 'center',
      minWidth: 'fit-content',
      border: '1px solid #999',

      color: '#999',
      border: '1px solid #eee',
      borderCollapse: 'collapse',
      maxWidth: '100%',

      '& td': {
        padding: '12px 35px'
      },
      '&:hover': {
        background: '#f4f4f4',
        '& td': {
          color: '#555'
        }
      }
    }
  }
}));

const OrderReport = props => {
  //   let url = window.location.href.split('/');
  //   const classes = useStyles(props);
  //   const orderId = url[url.length - 1];

  const classes = useStyles();
  const { userId } = useParams();

  const [loading, setLoading] = useState(true);

  const [user, setUser] = useState(undefined);

  // * Get Order From Backend
  useEffect(() => {
    (async () => {
      const res = await Axios.get(`${API_BASE_URL}/users/${userId}`);

      console.log('res', res);

      setUser(res.data.user);
      setLoading(false);
    })();
  }, []);

  return (
    <Box margin="20px 0px" display="flex" flexDirection="column">
      {loading ? (
        <div className="loader"></div>
      ) : (
        <>
          <ReactHTMLTableToExcel
            id="test-table-xls-button"
            className="download-table-xls-button"
            table="table-to-xls"
            filename="tablexls"
            sheet="tablexls"
            buttonText="Download Report"
          />
          <table id="table-to-xls" className={classes.Table}>
            <tr>
              <th className={'firstTh'}>Name</th>
              <th>Email</th>
              <th>Shipping Address</th>
              <th>Zip Code</th>
              <th>Total Orders</th>
              <th className={'lastTh'}>Zip Code</th>
            </tr>
            {user && (
              <tr
              // className={
              //   idx === 0
              //     ? 'firstTr'
              //     : idx + 1 === user.orderItems.length && 'lastTr'
              // }
              >
                <td>{user.name}</td>
                <td>{user.email}</td>
                <td>{user.shippingAddress}</td>
                <td>{user.zipCode}</td>
                <td>{user.orders ? user.orders.length : 0}</td>
                <td>{user.role}</td>
              </tr>
            )}
          </table>
        </>
      )}
    </Box>
  );
};

export default OrderReport;
