AllOrders

Script client - AllOrders

AllOrders component client script is also using ReactJs and Ant Design react component library. This component renders the list of all orders in the database.

const { Badge, Dropdown, Space, Table, Button, Modal} = antd;
const { DownOutlined } = antdIcons;
const { useState, useRef, useEffect, useMemo } = React;
const items = [
  {
    key: "1",
    label: "Action 1"
  },
  {
    key: "2",
    label: "Action 2"
  }
];
const AllOrders = () => {
  const [data, setData] = useState([]);
  const [open, setOpen] = useState(false);
  const [selectedOrder, setSelectedOrder] = useState({});
  const dispatch = useDispatch();
  const columns = [
    {
      title: "Order#",
      width: 100,
      dataIndex: "sequence",
      key: "sequence",
      fixed: "left"
    },
    {
      title: "Name",
      width: 100,
      dataIndex: "customerName",
      key: "customerName",
      fixed: "left"
    },
    {
      title: "Mobile Number",
      width: 100,
      dataIndex: "customerMobile",
      key: "customerMobile",
      fixed: "left",
      sorter: true
    },
    // {
    //   title: "Category",
    //   dataIndex: "studentClass",
    //   key: "studentClass"
    // },
    {
      title: "Amount",
      width: 100,
      dataIndex: "totalAmount",
      key: "totalAmount"
    },
    {
      title: "Transaction Date",
      width: 150,
      dataIndex: "transactionDate",
      key: "transactionDate"
    },
    {
      title: "Action",
      width: 200,
      key: "operation",
      fixed: "right",
      width: 100,
      render: (text, record) => (
        <Button
          type="primary"
          onClick={() => {
            setSelectedOrder(record);
            setTimeout(()=>setOpen(true), 100);
          }}
        >
          Receipt
        </Button>
      )
    }
  ];
  const fetchAllOrders = async searchTerms => {
    try {
      // setLoading(true);
      const response = await http.get(
        `/v1/getOrders?nd=${new Date().getTime()}`
      );
      setData(
        response.data.map(val => {
          val.key = val._id;
          return val;
        })
      );
      dispatch({
        type: "UPDATE",
        payload: {
          orderCreated: false
        }
      });
    } catch (error) {
      console.error("Error fetching student details:", error);
      // Handle error appropriately
    } finally {
      // setLoading(false);
    }
  };
  const expandedRowRender = record => {
    console.log(JSON.stringify(record.orderLines));
    const columns = [
      {
        title: "SKU",
        dataIndex: "sku",
        key: "sku"
      },
      {
        title: "Description",
        dataIndex: "description",
        key: "description"
      },
      {
        title: "Price",
        key: "price",
        dataIndex: "price"
      },
      {
        title: "Quantity",
        key: "quantity",
        dataIndex: "quantity"
      }
    ];
    const data = record.orderLines;
    return <Table columns={columns} dataSource={data} pagination={false} />;
  };
  const appState = useSelector(state => state.appState);
  useMemo(() => {
    //Subscribe to broker
    console.log(appState);
    if (appState.orderCreated) {
      fetchAllOrders();
    }
  }, [appState]);
  useEffect(() => {
    fetchAllOrders(); // This will always use latest value of count
  }, []);
  return (
    <>
      <Table
        columns={columns}
        dataSource={data}
        expandable={{
          expandedRowRender
        }}
        scroll={{
          x: 1300
        }}
      />
      <Modal
        title="Order Receipt"
        centered
        open={open}
        onOk={() => setOpen(false)}
        onCancel={() => setOpen(false)}
        width={1000}
      >
        <p>Receipt Details</p>
        <p>Content</p>
        <p>Total Amount {selectedOrder.totalAmount}</p>
      </Modal>
    </>
  );
};
return AllOrders;