Skip to content
This repository has been archived by the owner on Mar 26, 2024. It is now read-only.

Commit

Permalink
Admin client dev (#62)
Browse files Browse the repository at this point in the history
  • Loading branch information
@amarnath-dev
amarnath-dev committed Mar 10, 2024
2 parents cf6d64d + 4a4e28a commit dffe9cb
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 82 deletions.
121 changes: 72 additions & 49 deletions client/src/components/CheckReport/CheckReport.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,91 @@
import { Modal } from "flowbite-react";
import { useState } from "react";

// eslint-disable-next-line react/prop-types
function CheckReport({ openModal, setOpenModal, reportObject }) {
const [show, setShow] = useState(false);
const handleView = () => {
setShow((state) => !state);
function CheckReport({ openModal, setOpenModal, userReport }) {
const [accordionStates, setAccordionStates] = useState(
Array(userReport.length).fill(false)
);

const handleView = (index) => {
setAccordionStates((prevStates) => {
const newStates = [...prevStates];
newStates[index] = !newStates[index];
return newStates;
});
};

return (
<>
<Modal
show={openModal}
onClose={() => setOpenModal(false)}
reportObject={reportObject}
userReport={userReport}
>
<Modal.Header className="bg-gray-800">
<h1 className="text-white font-bold">User Reports</h1>
</Modal.Header>
<Modal.Body className="ring-1 bg-background rounded-b-md px-2 py-2">
<div className="w-full">
<div id="accordion-collapse" data-accordion="collapse">
<h2 id="accordion-collapse-heading-1">
<button
type="button"
className="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 gap-3"
data-accordion-target="#accordion-collapse-body-1"
aria-expanded="true"
aria-controls="accordion-collapse-body-1"
onClick={handleView}
>
<span>Personal Harrasment</span>
<svg
data-accordion-icon
className="w-3 h-3 rotate-180 shrink-0"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 10 6"
{userReport?.length === 0 ? (
<>
<h1 className="text-white">No Reports for this User</h1>
</>
) : (
<>
<div className="w-full">
{userReport?.map((report, index) => (
<div
id={`accordion-collapse-${index}`}
data-accordion="collapse"
key={index}
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M9 5 5 1 1 5"
/>
</svg>
</button>
</h2>
<div
id="accordion-collapse-body-1"
className={show ? "block" : "hidden"}
aria-labelledby="accordion-collapse-heading-1"
>
<div className="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p className="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components
built on top of Tailwind CSS including buttons, dropdowns,
modals, navbars, and more.
</p>
</div>
<h2 id={`accordion-collapse-heading-${index}`}>
<button
type="button"
className="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 gap-3"
data-accordion-target={`#accordion-collapse-body-${index}`}
aria-expanded={accordionStates[index]}
aria-controls={`accordion-collapse-body-${index}`}
onClick={() => handleView(index)}
>
<span className="text-text text-lg">
Report {index + 1}
</span>
<svg
data-accordion-icon
className={`w-3 h-3 rotate-180 shrink-0 ${
accordionStates[index] ? "rotate-180" : ""
}`}
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 10 6"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M9 5 5 1 1 5"
/>
</svg>
</button>
</h2>
<div
id={`accordion-collapse-body-${index}`}
className={accordionStates[index] ? "block" : "hidden"}
aria-labelledby={`accordion-collapse-heading-${index}`}
>
<div className="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p className="mb-2 text-text dark:text-gray-400">
{report?.reason}
</p>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</>
)}
</Modal.Body>
</Modal>
</>
Expand Down
84 changes: 51 additions & 33 deletions client/src/pages/AdminPages/Managment/Managment.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,31 @@ import { toast } from "react-toastify";

function Managment() {
const [openModal, setOpenModal] = useState(false);
const [reportObject, setReportObject] = useState();

const [users, setUsers] = useState([]);
const [userReport, setUserReport] = useState([]);

const handleModal = () => {
const handleModal = (userId) => {
const user = users.find((user) => {
return user._id === userId;
});
setUserReport(user.reports);
setOpenModal(true);
};
useEffect(() => {
const fetchUsers = async () => {
const response = await getUsers();
if (response.success === true) {
setUsers(response.users);
console.log(response.userList);
setUsers(response?.userList);
}
};
fetchUsers();
}, []);

const handleBlock = async (userId) => {
const response = await blockUser(userId);
if (response.success === true) {
toast(response.message);
if (response?.success === true) {
toast(response?.message);
}
};

Expand All @@ -35,7 +39,7 @@ function Managment() {
<CheckReport
openModal={openModal}
setOpenModal={setOpenModal}
reportObject={reportObject}
userReport={userReport}
/>
<div className=" h-screen bg-background">
<div className="col-span-9">
Expand All @@ -62,32 +66,46 @@ function Managment() {
</th>
</tr>
</thead>

<tbody>
<tr className="border-b">
<th scope="row" className="px-6 py-4 font-medium">
Amarnath as
</th>
<td className="px-6 py-4">Silver</td>
<td className="px-6 py-4">Laptop</td>
<td className="px-6 py-4">
<button
className="border border-gray-600 bg-gray-700 py-1 px-6 rounded"
onClick={handleModal}
>
View
</button>
</td>
<td className="px-6 py-4">
<button
className="border py-1 px-6 rounded hover:bg-red-700"
onClick={() => handleBlock(user?._id)}
>
Block
</button>
</td>
</tr>
</tbody>
{users?.map((user, index) => {
return (
<>
<tbody key={index}>
<tr className="border-b">
<th scope="row" className="px-6 py-4 font-medium">
{user?.fullname}
</th>
<td className="px-6 py-4">{user?.email}</td>
<td className="px-6 py-4">{user?.reports.length}</td>
<td className="px-6 py-4">
<button
className="border border-gray-600 bg-gray-700 py-1 px-6 rounded"
onClick={() => handleModal(user?._id)}
>
View
</button>
</td>
<td className="px-6 py-4">
{user?.is_blocked ? (
<button
className="border py-1 px-4 rounded hover:bg-green-700"
onClick={() => handleBlock(user?._id)}
>
UnBlock
</button>
) : (
<button
className="border py-1 px-6 rounded hover:bg-red-700"
onClick={() => handleBlock(user?._id)}
>
Block
</button>
)}
</td>
</tr>
</tbody>
</>
);
})}
</table>
</div>
</div>
Expand Down

0 comments on commit dffe9cb

Please sign in to comment.