95 lines
2.4 KiB
JavaScript
95 lines
2.4 KiB
JavaScript
import React from "react";
|
|
import TableItems from "../components/Table";
|
|
import ListHeader from "../../../components/ListHeader";
|
|
import EmptyList from "../../../components/EmptyList";
|
|
import Banner from "../../../components/Banner";
|
|
import AddModal from "../new";
|
|
import EditModal from "../edit";
|
|
import DeleteModal from "../delete";
|
|
import useItems from "./useItems";
|
|
import { CircularProgress, Box } from "@mui/material";
|
|
import Alert from "@mui/material/Alert";
|
|
import Stack from "@mui/material/Stack";
|
|
import { getUser } from '../../../tokenUtility'
|
|
|
|
const List = () => {
|
|
const [formModalopen, setFormModalopen] = React.useState({
|
|
selectedItem: {},
|
|
open: false,
|
|
});
|
|
const [deleteModalopen, setDeleteModalopen] = React.useState({
|
|
selectedItem: {},
|
|
open: false,
|
|
});
|
|
const [apiStatus, setApiStatus] = React.useState({
|
|
show: false,
|
|
status: "",
|
|
message: "",
|
|
});
|
|
const handleClickFormModalOpen = () => {
|
|
setFormModalopen({ open: true });
|
|
};
|
|
const isEdit = !!formModalopen.selectedItem;
|
|
|
|
const user = getUser();
|
|
|
|
const {
|
|
list: items,
|
|
isError,
|
|
isLoading,
|
|
errorMessage,
|
|
} = useItems(apiStatus, setApiStatus);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<Box component="span" m={1}>
|
|
<CircularProgress />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
const isEmptyList = !items || items.length == 0;
|
|
|
|
return (
|
|
<>
|
|
<Banner apiStatus={apiStatus} setApiStatus={setApiStatus} />
|
|
<Stack sx={{ width: "100%", mb: 1 }} spacing={2}>
|
|
{errorMessage && (
|
|
<Alert severity="error">{errorMessage}</Alert>
|
|
)}
|
|
</Stack>
|
|
<ListHeader
|
|
handleClickFormModalOpen={handleClickFormModalOpen}
|
|
isEmpty={isEmptyList}
|
|
text={'AddressBook'}
|
|
/>
|
|
<TableItems
|
|
items={items}
|
|
onEditClick={setFormModalopen}
|
|
onDeleteClick={setDeleteModalopen}
|
|
isEmpty={isEmptyList}
|
|
/>
|
|
<AddModal
|
|
open={formModalopen.open}
|
|
setOpen={setFormModalopen}
|
|
isEdit={isEdit}
|
|
setApiStatus={setApiStatus}
|
|
/>
|
|
<EditModal
|
|
userItem={{ ...formModalopen.selectedItem }}
|
|
open={formModalopen.open}
|
|
setOpen={setFormModalopen}
|
|
isEdit={isEdit}
|
|
setApiStatus={setApiStatus}
|
|
/>
|
|
<DeleteModal
|
|
userItem={{ ...deleteModalopen.selectedItem }}
|
|
open={deleteModalopen.open}
|
|
setOpen={setDeleteModalopen}
|
|
setApiStatus={setApiStatus}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default List;
|