text: import { PDFViewer } from '@react-pdf/renderer';
  
  import Invoice from '../InvoiceComp/reports/Invoice';
  import { invoice } from '../InvoiceData/invoice';
  
  import React, { useState, useEffect, useContext } from 'react';
  import { useParams } from 'react-router-dom';
  
  // import image from "../component/Images/stash.jpg";
  import Axios from 'axios';
  import { API_BASE_URL } from '../../utils/API_URLS';
  import { AuthContext } from 'src/Contexts/AuthContext';
  
  const userId = window.localStorage.getItem('data');
  
  const GetInvoice = props => {
    const { user } = useContext(AuthContext);
    const { orderId } = useParams();
    //   const currentOrderId = props.match.params.id;
  
    const [order, setorder] = useState(null);
    const [loading, setLoading] = useState(true);
  
    useEffect(() => {
      // * Get Order From Backend via orderId
      if (!user || user === {}) return;
      (async () => {
        const res = await Axios.get(`${API_BASE_URL}/orders/${orderId}`);
  
        console.clear();
        console.log('res', res.data.orders);
        setorder(invoice(res.data.orders, user));
  
        console.log(
          'invoice(res.data.orders, user)',
          invoice(res.data.orders, user)
        );
        console.log('order', order);
        // setorder(res.data.orders);
        setLoading(false);
      })();
  
      // setorder(currentOrder);
      // setLoading(false);
    }, [user]);
  
    // useEffect(() => {
    //    const orders = order && order.orderItems;
    // }, [order]);
  
    // useEffect(() => {
    //    setorder(invoice(startingOrder, user));
    // }, [user, userOrderList]);
  
    return (
      <>
        {loading ? (
          <>
            <h1 align="center">Generating Order's Invoice ...</h1>
            <div className="loader"></div>
          </>
        ) : (
          order && (
            <PDFViewer
              style={{
                width: '100%',
                height: '100vh'
              }}
              className="app"
            >
              <Invoice invoice={order} />
              {/* <Invoice invoice={invoiceOld} /> */}
            </PDFViewer>
          )
        )}
      </>
    );
  };
  
  export default GetInvoice;
  