gistfile1.txt

import React from "react";
import axios from "axios";
import { useState, useEffect } from "react";
import { Table, Button, Modal, Input, Form } from "antd";
 
const { REACT_APP_MURL } = process.env;
 
function Expcont(record) {
  const columns = [
    {
      title: "Lot Number",
      dataIndex: "lot",
      key: "lot",
      width: "10%",
      sorter: (a, b) => a.lot.localeCompare(b.lot),
    },
    {
      title: "Expiration",
      dataIndex: "exp",
      key: "exp",
      width: "10%",
      sorter: (a, b) => a.exp.localeCompare(b.exp),
    },
    {
      title: "Quantity",
      dataIndex: "qty",
      key: "qty",
      width: "10%",
      sorter: (a, b) => a.qty - b.qty,
    },
    {
      title: "Vendor",
      dataIndex: "vend",
      key: "vend",
      width: "10%",
      sorter: (a, b) => a.vend.localeCompare(b.vend),
    },
    {
      title: "Price",
      dataIndex: "price",
      key: "price",
      width: "10%",
      sorter: (a, b) => a.price - b.price,
    },
    {
      title: "Notes",
      dataIndex: "notes",
      key: "notes",
      width: "40%",
      sorter: (a, b) => a.notes.localeCompare(b.vend),
    },
    {
      title: "Actions",
      width: "10%",
      render: (text, record, index) => (
        <>
          <Button
            onClick={() => {
              setModalData();
              openModal(record);
            }}
            style={{ margin: "0 10px 0 0" }}
            type="primary"
            size={"small"}
          >
            Modify
          </Button>
          <Button danger type="primary" size="small">
            Delete
          </Button>
        </>
      ),
    },
  ];
 
  const openModal = (record) => {
    setVisible(true);
    setModalData(record);
  };
 
  const onFinish = (values) => {
    axios.put(`${REACT_APP_MURL}/transaction/manupdate`, { value: values }).then((response) => {
      console.log(response.data);
    });
 
    setVisible(false);
  };
 
  const [form] = Form.useForm();
  const [modalData, setModalData] = useState([]);
  const [visible, setVisible] = useState(false);
  const [resp, setResp] = useState([]);
 
  useEffect(() => {
    console.log("Component Rendered");
 
    const gtin = record.prop.gtin;
 
    axios
      .post(`${REACT_APP_MURL}/transaction/searchall`, { gtin })
      .then((response) => {
        setResp(response.data);
        console.log(response.data);
      })
 
      .catch((error) => {
        console.log(error);
      });
  }, [record.prop.gtin]);
 
  return (
    <div>
      <Modal title={record.prop.iname} centered visible={visible} onOk={form.submit} onCancel={() => setVisible(false)}>
        <Form form={form} onFinish={onFinish} layout="vertical" size="small">
          <Form.Item initialValue={modalData.gtin} name="gtin" label="GTIN">
            <Input />
          </Form.Item>
          <Form.Item initialValue={modalData.lot} name="lot" label="Lot Number">
            <Input />
          </Form.Item>
          <Form.Item initialValue={modalData.exp} name="exp" label="Expiration Date (YYYY-MM-DD)">
            <Input />
          </Form.Item>
          <Form.Item initialValue={modalData.qty} name="qty" label="Quantity">
            <Input />
          </Form.Item>
          <Form.Item initialValue={modalData.vend} name="vend" label="Vendor">
            <Input />
          </Form.Item>
          <Form.Item initialValue={modalData.price} name="price" label="Price">
            <Input />
          </Form.Item>
          <Form.Item initialValue={modalData.notes} name="notes" label="Notes">
            <Input />
          </Form.Item>
          <Form.Item hidden initialValue={modalData._id} name="_id" label="_id">
            <Input />
          </Form.Item>
        </Form>
      </Modal>
      <Table columns={columns} dataSource={resp} rowKey="_id" pagination={false} />
    </div>
  );
}
 
export default Expcont;