54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import { Button, Dialog, DialogContent, DialogTitle } from '@mui/material';
|
|
import { nanoid } from 'nanoid';
|
|
import { useCallback, useEffect, useState } from 'react';
|
|
import { Item, ItemComment } from '../../../../data/types';
|
|
import { ItemsTableRowAction } from '../Items/ItemsTableRowAction';
|
|
import CreateComment from './CreateComment/CreateComment';
|
|
import ItemData from './ItemData';
|
|
|
|
interface ItemDialogProps {
|
|
item: Item;
|
|
open: boolean;
|
|
handleClose: () => void;
|
|
}
|
|
|
|
export default function ItemDialog({
|
|
item,
|
|
open,
|
|
handleClose
|
|
}: ItemDialogProps) {
|
|
const [comments, setComments] = useState<ItemComment[]>([]);
|
|
const [formKey, setFormKey] = useState(() => nanoid());
|
|
|
|
const fetchData = useCallback(async () => {
|
|
try {
|
|
const comments = await ItemsTableRowAction(item.id);
|
|
setComments(comments);
|
|
} catch (error) {
|
|
console.error("Couldn't fetch comments.");
|
|
}
|
|
}, [item]);
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [fetchData, formKey]);
|
|
|
|
return (
|
|
<Dialog open={open} onClose={handleClose}>
|
|
<DialogTitle sx={{ alignSelf: 'center' }}>Item: {item.name}</DialogTitle>
|
|
<DialogContent sx={{ width: 400 }}>
|
|
<ItemData item={item} comments={comments} />
|
|
<CreateComment key={formKey} itemId={item.id} setFormKey={setFormKey} />
|
|
<Button
|
|
variant="outlined"
|
|
color="primary"
|
|
onClick={handleClose}
|
|
sx={{ width: '100%' }}
|
|
>
|
|
Close
|
|
</Button>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|