Reconmap/web-client

import { useDisclosure } from "@chakra-ui/react";
import RestrictedComponent from "components/logic/RestrictedComponent";
import NoteModalDialog from "components/notes/ModalDialog";
import CreateButton from "components/ui/buttons/Create";
import useDelete from "../../hooks/useDelete";
import useFetch from "../../hooks/useFetch";
import NotesTable from "../notes/Table";
import { IconDocument } from "../ui/Icons";
import Loading from "../ui/Loading";

const ProjectNotesTab = ({ project }) => {
    const [notes, reloadNotes] = useFetch(
        `/notes?parentType=project&parentId=${project.id}`,
    );
    const deleteNoteById = useDelete("/notes/", reloadNotes);
    const { isOpen, onOpen, onClose } = useDisclosure();

    const onDeleteButtonClick = (ev, note) => {
        ev.preventDefault();

        deleteNoteById(note.id);
    };

    const onNoteFormSaved = () => {
        reloadNotes();
        onClose();
    };

    if (!notes) {
        return <Loading />;
    }

    return (
        <section>
            <h4>
                <IconDocument />
                Project comments
                <RestrictedComponent
                    roles={["administrator", "superuser", "user"]}
                >
                    <NoteModalDialog
                        parentType="project"
                        parent={project}
                        isOpen={isOpen}
                        onClose={onNoteFormSaved}
                        onCancel={onClose}
                    />
                    <CreateButton onClick={onOpen}>Add note...</CreateButton>
                </RestrictedComponent>
            </h4>
            <NotesTable
                notes={notes}
                onDeleteButtonClick={onDeleteButtonClick}
            />
        </section>
    );
};

export default ProjectNotesTab;