69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import { TagsAction } from '@/components/Settings/Tags/actions/TagsAction';
|
|
import { Button, Dialog, DialogContent, DialogTitle } from '@mui/material';
|
|
import { useEffect, useState } from 'react';
|
|
import { useFormState } from 'react-dom';
|
|
import { Tags } from '../../../../data/types';
|
|
import { CreateItemAction } from './actions/CreateItemAction';
|
|
import { CreateItemForm } from './CreateItemForm';
|
|
|
|
interface CreateItemProps {
|
|
open: boolean;
|
|
close: (created: boolean) => void;
|
|
profile: string | undefined;
|
|
}
|
|
|
|
export default function CreateItemDialog({
|
|
open,
|
|
close,
|
|
profile
|
|
}: CreateItemProps) {
|
|
const [tags, setTags] = useState<Tags>([]);
|
|
|
|
const [formState, formAction] = useFormState(CreateItemAction, {
|
|
open: true,
|
|
profile
|
|
});
|
|
|
|
useEffect(() => {
|
|
const updateTags = async () => {
|
|
if (profile) {
|
|
try {
|
|
const updatedTags = await TagsAction({ selectedProfile: profile });
|
|
setTags(updatedTags);
|
|
} catch (error) {
|
|
console.error("Couldn't fetch tags.");
|
|
}
|
|
}
|
|
};
|
|
|
|
updateTags();
|
|
}, [profile]);
|
|
|
|
useEffect(() => {
|
|
if (!formState.open) {
|
|
close(true);
|
|
}
|
|
}, [open, close, formState]);
|
|
|
|
const handleClose = async () => {
|
|
close(false);
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onClose={handleClose}>
|
|
<DialogTitle sx={{ alignSelf: 'center' }}>Create a new item</DialogTitle>
|
|
<DialogContent sx={{ width: '400px' }}>
|
|
<CreateItemForm profile={profile} formAction={formAction} tags={tags} />
|
|
<Button
|
|
variant="outlined"
|
|
color="primary"
|
|
fullWidth
|
|
onClick={handleClose}
|
|
>
|
|
Close
|
|
</Button>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|