import React, { useCallback, useState } from "react"; import { deleteAnnouncement, updateAnnouncementContent, } from "actions/announcements"; import AnnouncementEditModal from "components/annoucements/AnnouncementEditModal"; import AnnouncementList from "components/annoucements/AnnouncementList"; import ModalConfirm from "components/modals/ModalConfirm"; import { useItemActionConfirm } from "hooks"; import { AnnouncementStore } from "stores"; import findIndex from "lodash/findIndex"; const AnnoucementsContainer = () => { const [itemToEdit, setItemToEdit] = useState(null); const [ itemToDelete, setItemToDelete, onDeleteConfirm, onDeleteCancel, ] = useItemActionConfirm(deleteAnnouncement); const items = AnnouncementStore.useState((state) => state.items); const confirmEdit = useCallback( async (newContent) => { if (itemToEdit && newContent) { await updateAnnouncementContent.run({ item: itemToEdit, newContent }); setItemToEdit(null); } }, [itemToEdit, setItemToEdit] ); const cancelEdit = useCallback(() => { setItemToEdit(null); }, [setItemToEdit]); /** * Mark down user saw this post already. * @param {CF2021.Announcement} post */ const markSeen = (announcement) => { AnnouncementStore.update((state) => { const idx = findIndex(state.items, announcement); state.items[idx].seen = true; }); }; return ( <> <AnnouncementList items={items} displayActions={true} onDelete={setItemToDelete} onEdit={setItemToEdit} onSeen={markSeen} /> <ModalConfirm isOpen={!!itemToDelete} onConfirm={onDeleteConfirm} onCancel={onDeleteCancel} title="Opravdu chcete toto oznámení smazat?" yesActionLabel="Smazat" > Opravdu chcete ukončit rozpravu? </ModalConfirm> {itemToEdit && ( <AnnouncementEditModal isOpen={true} announcement={itemToEdit} onConfirm={confirmEdit} onCancel={cancelEdit} /> )} </> ); }; export default AnnoucementsContainer;