GiftcardListing.js
2.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import { Fragment, useEffect, useState } from "react";
import { Button, Image } from "react-bootstrap";
import { getGiftCard } from "../../redux/actions/giftCardAction";
import { useDispatch, useSelector } from "react-redux";
import { Empty, Table } from "antd";
import axios from "axios";
const GiftcardListing = () => {
const [giftData, setGiftData] = useState([]);
useEffect(() => {
axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/gift-cards`).then((res) => {
let giftDatas =
res.data &&
res.data.data.map((data) => {
return {
key: data.id,
amount: data?.attributes?.amount,
senderEmail: data?.attributes?.senderEmail,
receiverEmail: data?.attributes?.receiverEmail,
status: data?.attributes?.status,
}
})
setGiftData(giftDatas)
}).catch((err) => {
console.log(err)
})
}, [])
const columns = [
{
title: "Sender Email Address",
dataIndex: "senderEmail",
key: "senderEmail",
render: text => <a>{text}</a>
},
{
title: "Receiver Email Address",
dataIndex: "receiverEmail",
key: "receiverEmail",
render: text => <a>{text}</a>
},
{
title: "Amount",
dataIndex: "amount",
key: "amount",
render: text => <a>{text}</a>
},
{
title: "Status",
dataIndex: "status",
key: "status",
render: text => <a>{text}</a>
},
]
return (
<Fragment>
<div className="p-5 h-100">
<div className="d-flex align-items-center justify-content-between px-2 mb-2">
<div>
<h2 style={{ fontSize: 28 }}>Gift Card Requests</h2>
<p>View all the gift cards</p>
</div>
<div>
<Button type="button" variant="" className="btnAdd m-0">
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter
</Button>
</div>
</div>
<Table columns={columns} dataSource={giftData} />
</div>
</Fragment>
);
};
export default GiftcardListing;