Notes

import React, { Fragment, useEffect, useState, useContext } from "react";
import { useNavigate } from "react-router-dom";
import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
import MuiButton from "@mui/material/Button";
import List from "@mui/material/List";
import Divider from "@mui/material/Divider";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ShortTextIcon from "@mui/icons-material/ShortText";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import { Anchor } from "@mui/icons-material";
import { Dialog } from "primereact/dialog";
import { Button } from "primereact/button";
import AuthContext from "../../context/auth/AuthContext";
import FilingMasterContext from "../../context/filing-master/FilingMasterContext";
import CloseIcon from '@mui/icons-material/Close';
import { IconButton } from "@mui/material";
import { format } from "date-fns";
import {
Card,
CardActions,
CardContent,
CardMedia,
Grid,
Stack,
TextField,
Typography,
} from "@mui/material";
import { FilingMaster, FilingMasterComment } from "../../types/FilingMaster";

type Anchor = "top" | "left" | "bottom" | "right";

export default function FilingMasterComments(props: {
dockAt?: "top" | "left" | "bottom" | "right";
show?: boolean;
handleClose: () => void;
draft?: FilingMaster;
comments?: FilingMasterComment[];
}) {
const filingMasterContext = useContext(FilingMasterContext);
const { getFilingMasterComments, addFilingMasterComment } =
filingMasterContext;
const [data, setData] = React.useState<FilingMasterComment[]>([]);
const [state, setState] = React.useState({
top: false,
left: false,
bottom: false,
right: false,
});
const authContext = useContext(AuthContext);
const { authUserId } = authContext;
const [alertMessage, setAlertMessage] = useState("");
const [approvalComment, setApprovalComment] = useState("");
const [showAlert, setShowAlert] = useState(false);
const navigate = useNavigate();

const closeAlert = () => {
setShowAlert(false);
props.handleClose();
navigate("/filing-master-list");
};

const footerContent = (
<div>
<Button
label='OK'
icon='pi pi-check'
onClick={() => closeAlert()}
autoFocus
/>
</div>
);

const toggleDrawer =
(anchor: Anchor, open: boolean) =>
(event: React.KeyboardEvent | React.MouseEvent) => {
console.log(`Drawer Mouse Key Event...`);
// if (
// event.type === "keydown" &&
// ((event as React.KeyboardEvent).key === "Tab" ||
// (event as React.KeyboardEvent).key === "Shift")
// ) {
// return;
// }
// console.log(`Toogle Drawer: DockAt:${anchor}, Show: ${open}`);
// setState({ ...state, [anchor]: open });
// if (!open) props.handleClose();
};

useEffect(() => {
if (
typeof props.dockAt !== "undefined" &&
typeof props.show !== "undefined"
) {
console.log(
`Toogle Drawer UEF: DockAt:${props.dockAt}, Show: ${props.show}`
);
// toggleDrawer(props.dockAt, props.show);
if (props.show) setState({ ...state, [props.dockAt]: props.show });
}
setApprovalComment((old) => "");

if (getFilingMasterComments && props.draft && props.draft.filingId) {
console.log(`Fetching Commnet for :${props.draft.filingId}`);
fetchFilingMasterComments(props.draft.filingId);
}
//eslint-disable-next-line
}, [props.show]);

useEffect(() => {
const _data: FilingMasterComment[] = props.comments!;
if (props.comments) {
setData(() => _data);
}

//eslint-disable-next-line
}, [props.comments]);

useEffect(() => {
// if(props.draft && props.draft.createDate!==null)
//eslint-disable-next-line
}, [props.draft]);

const fetchFilingMasterComments = async (filingId: number) => {
console.log("@@Fetch FilingMasters1:", getFilingMasterComments);
if (getFilingMasterComments) {
console.log("@@Fetch FilingMasters2:");
try {
const commentList = await getFilingMasterComments(filingId);
setData(() => commentList);
console.log("@@Fetch FilingMasters2 comments:", commentList);
} catch (error) {
console.log("@@Error:", error);
}
}
};

useEffect(() => {
console.log(`Fetching Commnet for 0:${props.draft}`);
if (
typeof props.dockAt !== "undefined" &&
typeof props.show !== "undefined"
) {
console.log(
`Toogle Drawer UED: DockAt:${props.dockAt}, Show: ${props.show}`
);
// toggleDrawer(props.dockAt, props.show);
setState({ ...state, [props.dockAt]: props.show });
}
setApprovalComment((old) => "");

if (getFilingMasterComments && props.draft && props.draft.filingId) {
console.log(`Fetching Commnet for :${props.draft.filingId}`);
fetchFilingMasterComments(props.draft.filingId);
}
//eslint-disable-next-line
}, []);

const list = (anchor: Anchor) => (
<Fragment>
<Grid container>
<Stack
sx={{
width: anchor === "top" || anchor === "bottom" ? "auto" : "20vw",
minWidth: "35vw",
display: "flex",
alignContent: "center",
}}
role='presentation'
onClick={toggleDrawer(anchor, false)}
onKeyDown={toggleDrawer(anchor, false)}
>
<Card>
<CardContent>
<Stack direction="row" justifyContent="space-between" >
<Typography gutterBottom variant='h5' component='div'>
Comments
</Typography>
<IconButton >
<CloseIcon onClick={() => handleCancel(anchor)} />
</IconButton>
</Stack>
<List>
{data &&
data.map((item, index: number) => (
<Fragment>
<ListItem key={index} disablePadding>
<ListItemButton>
<ListItemIcon>
<ShortTextIcon />
</ListItemIcon>
<ListItemText
primary={
item &&
item.commentsText &&
item.commentsText !== null
? item.commentsText
: ""
}
/>
</ListItemButton>
</ListItem>
<ListItem key={`${index}-1`} disablePadding>
<ListItemText
secondary={
item &&
item.createDate &&
item.createUser &&
`${item.createUser} : ${item.createDate}`
}
/>
</ListItem>
</Fragment>
))}
</List>
<Divider />
{/* // <Typography
// variant='subtitle2'
// color='text.secondary'
// key={index}
// >
// {item && item.commentsText && item.commentsText !== null
// ? item.commentsText
// : ""}
// </Typography> */}
{/* <Typography variant='subtitle2' color='text.secondary'>
{item.createDate && item.createDate !== null
? // ? format(props.draft.createDate, "dd-MMM-yyyy HH:MI:SS")
item.createDate.toString()
: ""}
</Typography>

// ))}*/}
<Typography
variant='h6'
color='text.secondary'
sx={{ mt: "2rem" }}
>
Please enter your comments:
</Typography>
</CardContent>
<Box sx={{ mx: 2 }}>
<TextField
id='notes'
name='notes'
label='Comments'
multiline
fullWidth
minRows={3}
variant='filled'
placeholder={"Enter Comments..."}
value={approvalComment}
onChange={onCommentChange}
/>
</Box>
<CardActions
sx={{
mt: "3rem",
display: "flex",
flexDirection: "row",
justifyContent: "flex-end",
}}
>
<MuiButton
variant='contained'
color='secondary'
sx={{ margin: 1, padding: 1 }}
onClick={() => handleCancel(anchor)}
>
Cancel
</MuiButton>
<MuiButton
variant='contained'
type='submit'
sx={{ margin: 1, padding: 1 }}
onClick={() => handleOk(anchor)}
>
Save
</MuiButton>
</CardActions>
</Card>
</Stack>
</Grid>
</Fragment>
);

const onCommentChange = async (e: React.ChangeEvent<any>) => {
setApprovalComment((old) => e.target.value);
};

const handleOk = async (anchor: Anchor) => {
// navigate("/filing-master-list");
console.log(`Add Comment:${approvalComment}`);
try {
const payload = {
commentsText: approvalComment,
filingId: props.draft?.filingId,
createDate: new Date(),
createUser: authUserId,
};
if (addFilingMasterComment) {
const res = await addFilingMasterComment(payload);
if (res) {
console.log(`Comment has been added`);
setApprovalComment(() => "");
setState({ ...state, [anchor]: false });
setAlertMessage("Comment has been added");
setShowAlert(true);
return;
}
}
} catch (error) {
console.log(`Error while adding comment`, error);
}
};

const handleCancel = async (anchor: Anchor) => {
setApprovalComment(() => "");
setState({ ...state, [anchor]: false });
props.handleClose();
};

return (
<div>
{/* {(["left", "right", "top", "bottom"] as const).map((anchor) => (
// <React.Fragment key={anchor}>
<Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button> */}
<Dialog
header='Info'
visible={showAlert}
style={{ width: "30vw" }}
onHide={() => closeAlert()}
footer={footerContent}
>
<p className='m-0'>{alertMessage}</p>
</Dialog>
{typeof props.dockAt !== "undefined" && (
<React.Fragment>
<Drawer
anchor={props.dockAt}
open={state[props.dockAt]}
onClose={toggleDrawer(props.dockAt, false)}
>
{list(props.dockAt)}
</Drawer>
</React.Fragment>
)}
</div>
);
}