115 lines
2.8 KiB
TypeScript
115 lines
2.8 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { Box, Button, Typography } from "@mui/material";
|
|
import AddEditCategoryModal from "../../components/AddEditCategoryModal";
|
|
import { useForm } from "react-hook-form";
|
|
import CustomTable, { Column } from "../../components/CustomTable";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { adminList, updateAdmin } from "../../redux/slices/adminSlice";
|
|
import { AppDispatch, RootState } from "../../redux/store/store"; // Import RootState for selector
|
|
|
|
export default function AdminList() {
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const { reset } = useForm();
|
|
|
|
const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
|
|
const [rowData, setRowData] = React.useState<any | null>(null);
|
|
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
|
|
// Fetching admin data from the Redux store
|
|
const admins = useSelector((state: RootState) => state.adminReducer.admins);
|
|
|
|
// Dispatching the API call when the component mounts
|
|
useEffect(() => {
|
|
dispatch(adminList());
|
|
}, [dispatch]);
|
|
|
|
const handleClickOpen = () => {
|
|
setModalOpen(true);
|
|
};
|
|
|
|
const handleCloseModal = () => {
|
|
setModalOpen(false);
|
|
reset();
|
|
};
|
|
|
|
const handleUpdate = async (id: string, name: string, role: string) => {
|
|
try {
|
|
await dispatch(updateAdmin({ id, name, role }));
|
|
await dispatch(adminList()); // Fetch updated admins list after update
|
|
} catch (error) {
|
|
console.error("Update failed", error);
|
|
}
|
|
};
|
|
|
|
const categoryColumns: Column[] = [
|
|
{ id: "srno", label: "Sr No" },
|
|
{ id: "name", label: "Name" },
|
|
{ id: "role", label: "Role" },
|
|
{ id: "action", label: "Action", align: "center" },
|
|
];
|
|
|
|
// If no admins are available, display the sample data
|
|
const categoryRows = admins?.length
|
|
? admins?.map(
|
|
(
|
|
admin: { id: string; name: string; role: string },
|
|
index: number
|
|
) => ({
|
|
id: admin?.id,
|
|
srno: index + 1,
|
|
name: admin?.name,
|
|
role: admin?.role,
|
|
})
|
|
)
|
|
: [];
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
maxWidth: {
|
|
sm: "100%",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
},
|
|
}}
|
|
>
|
|
{/* Title and Add Category button */}
|
|
<Typography
|
|
component="h2"
|
|
variant="h6"
|
|
sx={{ mt: 2, fontWeight: 600 }}
|
|
>
|
|
Admins
|
|
</Typography>
|
|
<Button
|
|
variant="contained"
|
|
size="medium"
|
|
sx={{ textAlign: "right" }}
|
|
onClick={handleClickOpen}
|
|
>
|
|
Add Category
|
|
</Button>
|
|
</Box>
|
|
|
|
<CustomTable
|
|
columns={categoryColumns}
|
|
rows={categoryRows}
|
|
setDeleteModal={setDeleteModal}
|
|
deleteModal={deleteModal}
|
|
setRowData={setRowData}
|
|
setModalOpen={setModalOpen}
|
|
/>
|
|
<AddEditCategoryModal
|
|
open={modalOpen}
|
|
handleClose={handleCloseModal}
|
|
editRow={rowData}
|
|
handleUpdate={handleUpdate}
|
|
/>
|
|
</>
|
|
);
|
|
}
|