-
Notifications
You must be signed in to change notification settings - Fork 1
/
page.tsx
134 lines (126 loc) · 4.33 KB
/
page.tsx
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
"use client";
import { useParams } from "next/navigation";
import { useGetAllReviews } from "@/app/hooks/useGetAllReviews";
import { useServiceModerator } from "@/app/hooks/useServiceModerator";
import { useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import { Button, Label, Modal, Table, TextInput } from "flowbite-react";
import { HiOutlineArrowRight, HiXCircle } from "react-icons/hi";
export default function Reviews() {
const router = useRouter();
const { id, nft } = useParams();
const { dataReviews, dataName, dataStars, isLoading, currentAccount } =
useGetAllReviews(id);
const { handleRemoveReview } = useServiceModerator();
const [reviewId, setReviewId] = useState("");
const [openModal, setOpenModal] = useState(false);
const onDisplayReview = (review_id: string) => {
router.push(`/review/${review_id}`);
};
const onDelete = async () => {
await handleRemoveReview(nft, id, reviewId);
window.location.reload();
};
useEffect(() => {
async function getReviews() {
if (isLoading) {
return;
}
console.dir(
`reviews: ${JSON.stringify(dataReviews)} size=${dataReviews.length}`,
);
}
getReviews();
}, [currentAccount, isLoading, dataReviews]);
return (
<div className="flex flex-col mx-32 my-10">
<h1>Service</h1>
<div>Name: {`${dataName}`}</div>
<div>Id: {`${id}`}</div>
<div>Reviews: {`${dataReviews.length}`}</div>
<div className="container">
{dataReviews.length > 0 && (
<Table hoverable className="items-center text-center">
<Table.Head>
<Table.HeadCell>Review ID</Table.HeadCell>
<Table.HeadCell>Action</Table.HeadCell>
</Table.Head>
<Table.Body className="divide-y">
{dataReviews.map((item) => (
<Table.Row
className="bg-white dark:border-gray-700 dark:bg-gray-800"
key={item}
>
<Table.Cell>
<div className="overflow-hidden">{item}</div>
</Table.Cell>
<Table.Cell>
<div className="flex flex-row space-x-2">
<Button
color="gray"
pill
onClick={() => onDisplayReview(item)}
>
View
<HiOutlineArrowRight className="ml-2 h-5 w-5" />
</Button>
<Button
color="red"
pill
onClick={() => {
setReviewId(item);
setOpenModal(true);
}}
>
Delete
<HiXCircle className="ml-2 h-5 w-5" />
</Button>
</div>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table>
)}
<Modal show={openModal} onClose={() => setOpenModal(false)}>
<Modal.Header>Delete a review from service</Modal.Header>
<Modal.Body>
<div className="space-y-6">
<div>
<div className="mb-2 block">
<Label>Service Id</Label>
</div>
<TextInput id="serviceId" value={id} disabled />
</div>
<div>
<div className="mb-2 block">
<Label>Review Id</Label>
</div>
<TextInput id="reviewId" value={reviewId} disabled />
</div>
<div>
<div className="mb-2 block">
<Label>Moderator Id</Label>
</div>
<TextInput id="nft" value={nft} disabled />
</div>
</div>
</Modal.Body>
<Modal.Footer>
<Button
onClick={() => {
setOpenModal(false);
onDelete();
}}
>
Confirm
</Button>
<Button color="gray" onClick={() => setOpenModal(false)}>
Decline
</Button>
</Modal.Footer>
</Modal>
</div>
</div>
);
}