diff --git a/src/components/Event/EventAdminControls.tsx b/src/components/Event/EventAdminControls.tsx index 1bcd0c3..beb87e9 100644 --- a/src/components/Event/EventAdminControls.tsx +++ b/src/components/Event/EventAdminControls.tsx @@ -37,9 +37,26 @@ export default function EventAdminControls() { // const descriptionTextareaRef = useRef(null); - const [onPressDelete, deletionStatus] = useAsyncCallback( - useCallback(() => deleteEvent(id), [id]) - ); + const [eventDeletionConfirmationShown, setEventDeletionConfirmationShown] = + useState(false); + const [eventDeletionStatus, setEventDeletionStatus] = + useState(null); + + const onPressInitialDelete = useCallback(() => { + setEventDeletionConfirmationShown(true); + }, []); + + const onPressCancelDelete = useCallback(() => { + setEventDeletionConfirmationShown(false); + }, []); + + const onPressConfirmDelete = useCallback(() => { + setEventDeletionConfirmationShown(false); + setEventDeletionStatus('deleting'); + deleteEvent(id) + .then(() => setEventDeletionStatus('deleted')) + .catch(() => setEventDeletionStatus('errored')); + }, [id]); // const [onSaveDescription, saveDescriptionStatus] = useAsyncCallback( // useCallback(() => { @@ -55,11 +72,23 @@ export default function EventAdminControls() { return (
- {deletionStatus === AsyncCallbackStatus.NONE ? ( - Delete - ) : deletionStatus === AsyncCallbackStatus.PENDING ? ( + {eventDeletionConfirmationShown ? ( + <> + + Cancel deletion + + + Confirm deletion + + + ) : eventDeletionStatus === null ? ( + Delete + ) : eventDeletionStatus === 'deleting' ? ( Deleting... - ) : deletionStatus === AsyncCallbackStatus.RESOLVED ? ( + ) : eventDeletionStatus === 'deleted' ? ( Deleted ) : ( Delete failed diff --git a/src/components/Event/EventContent.tsx b/src/components/Event/EventContent.tsx index dabf713..766fdf5 100644 --- a/src/components/Event/EventContent.tsx +++ b/src/components/Event/EventContent.tsx @@ -33,7 +33,12 @@ export default function EventContent() {
- {isEventCreator && } + {isEventCreator && ( + <> +
+ + + )} ); }