refactor for redundant code
This commit is contained in:
Mann Patel
@@ -1,105 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { getCategories, removeCategory } from "../api/admin";
|
||||
import { MdDelete } from "react-icons/md";
|
||||
import Pagination from "../components/Pagination";
|
||||
import { IoAddCircleSharp } from "react-icons/io5";
|
||||
import CategoryForm from "../components/CategoryForm";
|
||||
|
||||
export default function CategoryDashboard() {
|
||||
const [categories, setCategories] = useState([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
let pageLimit = 10;
|
||||
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
const onChangePage = (page, limit = 10) => {
|
||||
setCurrentPage(page);
|
||||
fetchCategory(page, limit);
|
||||
};
|
||||
|
||||
const fetchCategory = (page = 1, limit = 10) => {
|
||||
getCategories(page, limit).then(({ data, total }) => {
|
||||
setCategories(data);
|
||||
setTotal(total);
|
||||
});
|
||||
};
|
||||
|
||||
const notiChange = () => {
|
||||
fetchCategory(currentPage);
|
||||
};
|
||||
|
||||
const handleToggleForm = () => {
|
||||
setVisible((curr) => !curr);
|
||||
};
|
||||
|
||||
const handleRemove = (id) => {
|
||||
removeCategory(id)
|
||||
.then(() => {
|
||||
fetchCategory(currentPage);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
//Get user when initialize the component
|
||||
useEffect(fetchCategory, []);
|
||||
|
||||
return (
|
||||
<div className="pt-10 p-20 w-full">
|
||||
<h1 className="text-4xl pb-3 font-bold text-green-800 underline">
|
||||
CATEGORIES
|
||||
</h1>
|
||||
<button
|
||||
onClick={handleToggleForm}
|
||||
className="flex justify-end items-center bg-blue-500 rounded-md px-2 text-white text-sm p-1 mb-1 ml-auto hover:cursor-pointer hover:bg-blue-600 transtion"
|
||||
>
|
||||
<span className="pr-1 text-xs">Add</span>
|
||||
<IoAddCircleSharp />
|
||||
</button>
|
||||
<CategoryForm onAddCategory={notiChange} visible={visible} />
|
||||
{categories.length > 0 ? (
|
||||
<>
|
||||
<table className="table-fixed w-full text-center border border-green-600">
|
||||
<thead className="bg-green-600 h-10">
|
||||
<tr>
|
||||
<th>CategoryID</th>
|
||||
<th>Name</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{categories.map((category) => (
|
||||
<tr
|
||||
key={category.UserID}
|
||||
className="border border-green-600 h-10"
|
||||
>
|
||||
<td>{category.CategoryID}</td>
|
||||
<td>{category.Name}</td>
|
||||
<td className="flex justify-center pt-2">
|
||||
<MdDelete
|
||||
onClick={() => {
|
||||
handleRemove(category.CategoryID);
|
||||
}}
|
||||
className="hover:text-red-600 cursor-pointer transition-all text-xl"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<Pagination
|
||||
pageNum={Math.ceil(total / pageLimit)}
|
||||
onChange={onChangePage}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-red-700 text-xl bg-red-200 px-3 rounded-md py-1 w-fit">
|
||||
No category exists!
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,362 @@
|
||||
export default function Dashboard() {
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import {
|
||||
getUsers,
|
||||
removeUser,
|
||||
getTransactions,
|
||||
removeTransaction,
|
||||
getProducts,
|
||||
removeProduct,
|
||||
getCategories,
|
||||
removeCategory,
|
||||
} from "../api/admin";
|
||||
import { MdDelete } from "react-icons/md";
|
||||
import { IoAddCircleSharp } from "react-icons/io5";
|
||||
import { FaHome } from "react-icons/fa";
|
||||
import Pagination from "../components/Pagination";
|
||||
import CategoryForm from "../components/CategoryForm";
|
||||
import DashboardNav from "../components/DashboardNav";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
// Spinner Component
|
||||
const Spinner = () => (
|
||||
<div className="flex justify-center items-center h-40 w-full">
|
||||
<div className="w-12 h-12 border-4 border-green-500 border-dashed rounded-full animate-spin"></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Empty State Component
|
||||
const EmptyState = () => (
|
||||
<div className="flex flex-col items-center justify-center bg-gray-50 py-10 rounded-lg w-full">
|
||||
<svg
|
||||
className="w-16 h-16 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
></path>
|
||||
</svg>
|
||||
<p className="mt-4 text-lg font-medium text-gray-600">No data found</p>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
No records are currently available.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Generic Dashboard Component
|
||||
const Dashboard = ({
|
||||
fetchDataFn,
|
||||
deleteFn,
|
||||
columns,
|
||||
idKey,
|
||||
refreshKey = 0,
|
||||
headerAction = null,
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
const [items, setItems] = useState([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const pageLimit = 10;
|
||||
|
||||
const fetchItems = useCallback(
|
||||
(page = 1, limit = 10) => {
|
||||
setLoading(true);
|
||||
fetchDataFn(page, limit)
|
||||
.then((res) => {
|
||||
const data =
|
||||
res.users || res.products || res.transactions || res.data || [];
|
||||
setItems(data);
|
||||
setTotal(res.total);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error fetching data:", error);
|
||||
setItems([]);
|
||||
setTotal(0);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
},
|
||||
[fetchDataFn],
|
||||
);
|
||||
|
||||
const handleRemove = (id) => {
|
||||
if (window.confirm("Are you sure you want to delete this item?")) {
|
||||
setLoading(true);
|
||||
deleteFn(id)
|
||||
.then(() => fetchItems(currentPage))
|
||||
.catch((error) => {
|
||||
console.error("Error removing item:", error);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchItems(currentPage);
|
||||
}, [fetchItems, currentPage, refreshKey]);
|
||||
|
||||
const onChangePage = (page) => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
|
||||
if (loading) return <Spinner />;
|
||||
|
||||
return (
|
||||
<div className="text-3xl font-bold p-3 text-green-800">
|
||||
Welcome to admin dashboard
|
||||
<div className="w-full mt-6">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center mb-4 w-full">
|
||||
<h2 className="text-xl font-semibold text-gray-700 mb-2 md:mb-0">
|
||||
Total: <span className="text-green-600">{total}</span>
|
||||
</h2>
|
||||
{headerAction && <div>{headerAction}</div>}
|
||||
</div>
|
||||
|
||||
{items.length > 0 ? (
|
||||
<div className="w-full overflow-x-auto bg-white rounded-lg shadow">
|
||||
<table className="min-w-full divide-y divide-gray-200 table-fixed">
|
||||
<thead className="bg-green-600">
|
||||
<tr>
|
||||
{columns.map((col) => (
|
||||
<th
|
||||
key={col.label}
|
||||
scope="col"
|
||||
className="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider"
|
||||
>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
<th
|
||||
scope="col"
|
||||
className="px-6 py-3 text-center text-xs font-medium text-white uppercase tracking-wider w-20"
|
||||
>
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{items.map((item) => (
|
||||
<tr
|
||||
key={item[idKey]}
|
||||
className="hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
{columns.map((col) => (
|
||||
<td
|
||||
key={`${item[idKey]}-${col.key}`}
|
||||
className="px-6 py-4 whitespace-nowrap text-sm text-gray-700 overflow-hidden text-ellipsis"
|
||||
>
|
||||
{item[col.key] || "—"}
|
||||
</td>
|
||||
))}
|
||||
<td className="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
|
||||
<button
|
||||
onClick={() => handleRemove(item[idKey])}
|
||||
className="text-red-500 hover:text-red-700 transition-colors"
|
||||
title="Delete"
|
||||
>
|
||||
<MdDelete size={20} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState />
|
||||
)}
|
||||
|
||||
{total > pageLimit && (
|
||||
<div className="mt-4 w-full">
|
||||
<Pagination
|
||||
pageNum={Math.ceil(total / pageLimit)}
|
||||
onChange={onChangePage}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Main Admin Tabs
|
||||
export default function AdminDashboardTabs() {
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
const [tabData, setTabData] = useState({
|
||||
users: { loaded: false, data: null },
|
||||
products: { loaded: false, data: null },
|
||||
transactions: { loaded: false, data: null },
|
||||
categories: { loaded: false, data: null },
|
||||
});
|
||||
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [categoryRefreshKey, setCategoryRefreshKey] = useState(0);
|
||||
const toggleForm = () => setVisible((v) => !v);
|
||||
|
||||
// Preload all tab data
|
||||
useEffect(() => {
|
||||
const tabKeys = ["users", "products", "transactions", "categories"];
|
||||
const loadTabData = async (index) => {
|
||||
if (index === tabKeys.length) return;
|
||||
|
||||
setTabData((prev) => ({
|
||||
...prev,
|
||||
[tabKeys[index]]: { ...prev[tabKeys[index]], loaded: true },
|
||||
}));
|
||||
|
||||
// Load next tab after a short delay
|
||||
setTimeout(() => loadTabData(index + 1), 100);
|
||||
};
|
||||
|
||||
loadTabData(0);
|
||||
}, []);
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
title: "Users",
|
||||
icon: "👥",
|
||||
key: "users",
|
||||
component: () => (
|
||||
<Dashboard
|
||||
fetchDataFn={getUsers}
|
||||
deleteFn={removeUser}
|
||||
idKey="UserID"
|
||||
columns={[
|
||||
{ label: "ID", key: "UserID" },
|
||||
{ label: "UCID", key: "UCID" },
|
||||
{ label: "Name", key: "Name" },
|
||||
{ label: "Email", key: "Email" },
|
||||
{ label: "Phone", key: "Phone" },
|
||||
{ label: "Address", key: "Address" },
|
||||
]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Products",
|
||||
icon: "📦",
|
||||
key: "products",
|
||||
component: () => (
|
||||
<Dashboard
|
||||
fetchDataFn={getProducts}
|
||||
deleteFn={removeProduct}
|
||||
idKey="ProductID"
|
||||
columns={[
|
||||
{ label: "ID", key: "ProductID" },
|
||||
{ label: "Name", key: "ProductName" },
|
||||
{ label: "Price", key: "Price" },
|
||||
{ label: "Category", key: "Category" },
|
||||
{ label: "Seller", key: "SellerName" },
|
||||
]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Transactions",
|
||||
icon: "💰",
|
||||
key: "transactions",
|
||||
component: () => (
|
||||
<Dashboard
|
||||
fetchDataFn={getTransactions}
|
||||
deleteFn={removeTransaction}
|
||||
idKey="TransactionID"
|
||||
columns={[
|
||||
{ label: "ID", key: "TransactionID" },
|
||||
{ label: "User", key: "UserName" },
|
||||
{ label: "Product", key: "ProductName" },
|
||||
{ label: "Date", key: "Date" },
|
||||
{ label: "Status", key: "PaymentStatus" },
|
||||
]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Categories",
|
||||
icon: "🏷️",
|
||||
key: "categories",
|
||||
component: () => (
|
||||
<>
|
||||
<Dashboard
|
||||
fetchDataFn={getCategories}
|
||||
deleteFn={removeCategory}
|
||||
idKey="CategoryID"
|
||||
columns={[
|
||||
{ label: "ID", key: "CategoryID" },
|
||||
{ label: "Name", key: "Name" },
|
||||
]}
|
||||
refreshKey={categoryRefreshKey}
|
||||
headerAction={
|
||||
<button
|
||||
onClick={toggleForm}
|
||||
className="flex items-center bg-green-500 rounded-md px-4 py-2 text-white text-sm hover:bg-green-600 transition-colors font-medium shadow"
|
||||
>
|
||||
<IoAddCircleSharp className="mr-1" size={18} />
|
||||
Add Category
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<CategoryForm
|
||||
visible={visible}
|
||||
onAddCategory={() => {
|
||||
setCategoryRefreshKey((prev) => prev + 1);
|
||||
toggleForm();
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="w-full min-h-screen bg-gray-50">
|
||||
<div className="w-full px-4 py-8">
|
||||
<div className="mb-8 flex justify-between items-center w-full">
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-gray-800">
|
||||
Admin Dashboard
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Mobile Tabs */}
|
||||
<div className="md:hidden w-full mb-4">
|
||||
<select
|
||||
className="w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50 p-2"
|
||||
value={activeTab}
|
||||
onChange={(e) => setActiveTab(parseInt(e.target.value))}
|
||||
>
|
||||
{tabs.map((tab, index) => (
|
||||
<option key={tab.key} value={index}>
|
||||
{tab.icon} {tab.title}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Desktop Tabs */}
|
||||
<div className="hidden md:flex space-x-1 border-b border-gray-200 w-full overflow-x-auto">
|
||||
{tabs.map((tab, index) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
className={`px-6 py-3 font-medium text-sm rounded-t-lg transition-colors ${
|
||||
index === activeTab
|
||||
? "text-green-700 bg-white border-l border-t border-r border-gray-200 border-b-0"
|
||||
: "text-gray-600 hover:text-green-700 bg-gray-50"
|
||||
}`}
|
||||
onClick={() => setActiveTab(index)}
|
||||
>
|
||||
<span className="inline-block mr-2">{tab.icon}</span>
|
||||
{tab.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-4 md:p-6 rounded-lg shadow-sm border border-gray-200 mt-4 w-full">
|
||||
<div className="w-full">
|
||||
{tabData[tabs[activeTab].key].loaded && tabs[activeTab].component()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { getProducts, removeProduct } from "../api/admin";
|
||||
import { MdDelete } from "react-icons/md";
|
||||
import Pagination from "../components/Pagination";
|
||||
|
||||
export default function ProductDashboard() {
|
||||
const [products, setProducts] = useState([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
let pageLimit = 10;
|
||||
|
||||
const onChangePage = (page, limit = 10) => {
|
||||
setCurrentPage(page);
|
||||
fetchProducts(page, limit);
|
||||
};
|
||||
|
||||
const fetchProducts = (page = 1, limit = 10) => {
|
||||
getProducts(page, limit).then(({ products, total }) => {
|
||||
setTotal(total);
|
||||
setProducts(products);
|
||||
});
|
||||
};
|
||||
|
||||
const handleRemoveProduct = (id) => {
|
||||
removeProduct(id)
|
||||
.then((res) => {
|
||||
fetchProducts(currentPage);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
//Get user when initialize the component
|
||||
useEffect(fetchProducts, []);
|
||||
|
||||
return (
|
||||
<div className="pt-10 p-20">
|
||||
<h1 className="text-4xl pb-3 font-bold text-green-800 underline">
|
||||
PRODUCTS
|
||||
</h1>
|
||||
{products.length > 0 ? (
|
||||
<>
|
||||
<table className="table-fixed w-full text-center border border-green-600">
|
||||
<thead className="bg-green-600 h-10">
|
||||
<tr>
|
||||
<th>ProductID</th>
|
||||
<th>Name</th>
|
||||
<th>Price</th>
|
||||
<th>Category</th>
|
||||
<th>Seller</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{products.map((product) => (
|
||||
<tr
|
||||
key={product.ProductID}
|
||||
className="border border-green-600 h-10"
|
||||
>
|
||||
<td>{product.ProductID}</td>
|
||||
<td>{product.ProductName}</td>
|
||||
<td>{product.Price}</td>
|
||||
<td>{product.Category ? product.Category : "N/A"}</td>
|
||||
<td>{product.SellerName ? product.SellerName : "N/A"}</td>
|
||||
<td className="flex justify-center pt-2">
|
||||
<MdDelete
|
||||
onClick={() => {
|
||||
handleRemoveProduct(product.ProductID);
|
||||
}}
|
||||
className="hover:text-red-600 cursor-pointer transition-all text-xl"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<Pagination
|
||||
onChange={onChangePage}
|
||||
pageNum={Math.ceil(total / pageLimit)}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-red-700 text-xl bg-red-200 px-3 rounded-md py-1 w-fit">
|
||||
No product exists!
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { getTransactions, removeTransaction } from "../api/admin";
|
||||
import { MdDelete } from "react-icons/md";
|
||||
import Pagination from "../components/Pagination";
|
||||
|
||||
export default function TransactionDashboard() {
|
||||
const [transactions, setTransactions] = useState([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
let pageLimit = 10;
|
||||
|
||||
const onChangePage = (page, limit = 10) => {
|
||||
setCurrentPage(page);
|
||||
fetchTransactions(page, limit);
|
||||
};
|
||||
|
||||
const fetchTransactions = (page = 1, limit = 10) => {
|
||||
getTransactions(page, limit).then(({ transactions, total }) => {
|
||||
setTotal(total);
|
||||
setTransactions(transactions);
|
||||
});
|
||||
};
|
||||
|
||||
const handleRemoveTransaction = (id) => {
|
||||
removeTransaction(id)
|
||||
.then(() => {
|
||||
fetchTransactions(currentPage);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
//Get user when initialize the component
|
||||
useEffect(fetchTransactions, []);
|
||||
|
||||
return (
|
||||
<div className="pt-10 p-20">
|
||||
<h1 className="text-4xl pb-3 font-bold text-green-800 underline">
|
||||
TRANSACTIONS
|
||||
</h1>
|
||||
{transactions.length > 0 ? (
|
||||
<>
|
||||
<table className="table-fixed w-full text-center border border-green-600">
|
||||
<thead className="bg-green-600 h-10">
|
||||
<tr>
|
||||
<th>TransactionID</th>
|
||||
<th>User</th>
|
||||
<th>Product</th>
|
||||
<th>Date</th>
|
||||
<th>Status</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{transactions.map((t) => (
|
||||
<tr
|
||||
key={t.TransactionID}
|
||||
className="border border-green-600 h-10"
|
||||
>
|
||||
<td>{t.TransactionID}</td>
|
||||
<td>{t.UserName ? t.UserName : "N/A"}</td>
|
||||
<td>{t.ProductName ? t.ProductName : "N/A"}</td>
|
||||
<td>{t.Date}</td>
|
||||
<td>{t.PaymentStatus}</td>
|
||||
<td className="flex justify-center pt-2">
|
||||
<MdDelete
|
||||
onClick={() => {
|
||||
handleRemoveTransaction(t.TransactionID);
|
||||
}}
|
||||
className="hover:text-red-600 cursor-pointer transition-all text-xl"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<Pagination
|
||||
onChange={onChangePage}
|
||||
pageNum={Math.ceil(total / pageLimit)}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-red-700 text-xl bg-red-200 px-3 rounded-md py-1 w-fit">
|
||||
No transaction exists!
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { getUsers, removeUser } from "../api/admin";
|
||||
import { MdDelete } from "react-icons/md";
|
||||
import Pagination from "../components/Pagination";
|
||||
|
||||
export default function UserDashboard() {
|
||||
const [users, setUsers] = useState([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
let pageLimit = 10;
|
||||
|
||||
const onChangePage = (page, limit = 10) => {
|
||||
setCurrentPage(page);
|
||||
fetchUsers(page, limit);
|
||||
};
|
||||
|
||||
const fetchUsers = (page = 1, limit = 10) => {
|
||||
getUsers(page, limit).then(({ users, total }) => {
|
||||
setUsers(users);
|
||||
setTotal(total);
|
||||
});
|
||||
};
|
||||
|
||||
const handleRemoveUser = (id) => {
|
||||
removeUser(id)
|
||||
.then((res) => {
|
||||
fetchUsers(currentPage);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
//Get user when initialize the component
|
||||
useEffect(fetchUsers, []);
|
||||
|
||||
return (
|
||||
<div className="pt-10 p-20">
|
||||
<h1 className="text-4xl pb-3 font-bold text-green-800 underline">
|
||||
USERS
|
||||
</h1>
|
||||
{users.length > 0 ? (
|
||||
<>
|
||||
{" "}
|
||||
<table className="table-fixed w-full text-center border border-green-600">
|
||||
<thead className="bg-green-600 h-10">
|
||||
<tr>
|
||||
<th>UserID</th>
|
||||
<th>UCID</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Phone</th>
|
||||
<th>Address</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user) => (
|
||||
<tr key={user.UserID} className="border border-green-600 h-10">
|
||||
<td>{user.UserID}</td>
|
||||
<td>{user.UCID}</td>
|
||||
<td>{user.Name}</td>
|
||||
<td>{user.Email}</td>
|
||||
<td>{user.Phone}</td>
|
||||
<td>{user.Address}</td>
|
||||
<td className="flex justify-center pt-2">
|
||||
<MdDelete
|
||||
onClick={() => {
|
||||
handleRemoveUser(user.UserID);
|
||||
}}
|
||||
className="hover:text-red-600 cursor-pointer transition-all text-xl"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<Pagination
|
||||
pageNum={Math.ceil(total / pageLimit)}
|
||||
onChange={onChangePage}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-red-700 text-xl bg-red-200 px-3 rounded-md py-1">
|
||||
No user exists!
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user