diff --git a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx index 70c3548bb4..c1ee819f83 100644 --- a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx +++ b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx @@ -21,6 +21,7 @@ export const ConfirmationModal: React.FC< title: React.ReactNode; message: React.ReactNode; confirm: React.ReactNode; + cancel?: React.ReactNode; secondary?: React.ReactNode; onSecondary?: () => void; onConfirm: () => void; @@ -30,6 +31,7 @@ export const ConfirmationModal: React.FC< title, message, confirm, + cancel, onClose, onConfirm, secondary, @@ -65,10 +67,12 @@ export const ConfirmationModal: React.FC<
{secondary && ( diff --git a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/discard_draft_confirmation.tsx b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/discard_draft_confirmation.tsx new file mode 100644 index 0000000000..412649ef68 --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/discard_draft_confirmation.tsx @@ -0,0 +1,104 @@ +import { useCallback } from 'react'; + +import { defineMessages, useIntl } from 'react-intl'; + +import { replyCompose } from 'flavours/glitch/actions/compose'; +import { editStatus } from 'flavours/glitch/actions/statuses'; +import type { Status } from 'flavours/glitch/models/status'; +import { useAppDispatch, useAppSelector } from 'flavours/glitch/store'; + +import type { BaseConfirmationModalProps } from './confirmation_modal'; +import { ConfirmationModal } from './confirmation_modal'; + +const editMessages = defineMessages({ + title: { + id: 'confirmations.discard_draft.edit.title', + defaultMessage: 'Discard changes to your post?', + }, + message: { + id: 'confirmations.discard_draft.edit.message', + defaultMessage: + 'Continuing will discard any changes you have made to the post you are currently editing.', + }, + cancel: { + id: 'confirmations.discard_draft.edit.cancel', + defaultMessage: 'Resume editing', + }, +}); + +const postMessages = defineMessages({ + title: { + id: 'confirmations.discard_draft.post.title', + defaultMessage: 'Discard your draft post?', + }, + message: { + id: 'confirmations.discard_draft.post.message', + defaultMessage: + 'Continuing will discard the post you are currently composing.', + }, + cancel: { + id: 'confirmations.discard_draft.post.cancel', + defaultMessage: 'Resume draft', + }, +}); + +const messages = defineMessages({ + confirm: { + id: 'confirmations.discard_draft.confirm', + defaultMessage: 'Discard and continue', + }, +}); + +const DiscardDraftConfirmationModal: React.FC< + { + onConfirm: () => void; + } & BaseConfirmationModalProps +> = ({ onConfirm, onClose }) => { + const intl = useIntl(); + const isEditing = useAppSelector((state) => !!state.compose.get('id')); + + const contextualMessages = isEditing ? editMessages : postMessages; + + return ( + + ); +}; + +export const ConfirmReplyModal: React.FC< + { + status: Status; + } & BaseConfirmationModalProps +> = ({ status, onClose }) => { + const dispatch = useAppDispatch(); + + const onConfirm = useCallback(() => { + dispatch(replyCompose(status)); + }, [dispatch, status]); + + return ( + + ); +}; + +export const ConfirmEditStatusModal: React.FC< + { + statusId: string; + } & BaseConfirmationModalProps +> = ({ statusId, onClose }) => { + const dispatch = useAppDispatch(); + + const onConfirm = useCallback(() => { + dispatch(editStatus(statusId)); + }, [dispatch, statusId]); + + return ( + + ); +}; diff --git a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/edit_status.tsx b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/edit_status.tsx deleted file mode 100644 index 4a7e56c2a1..0000000000 --- a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/edit_status.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { useCallback } from 'react'; - -import { defineMessages, useIntl } from 'react-intl'; - -import { editStatus } from 'flavours/glitch/actions/statuses'; -import { useAppDispatch } from 'flavours/glitch/store'; - -import type { BaseConfirmationModalProps } from './confirmation_modal'; -import { ConfirmationModal } from './confirmation_modal'; - -const messages = defineMessages({ - editTitle: { - id: 'confirmations.edit.title', - defaultMessage: 'Overwrite post?', - }, - editConfirm: { id: 'confirmations.edit.confirm', defaultMessage: 'Edit' }, - editMessage: { - id: 'confirmations.edit.message', - defaultMessage: - 'Editing now will overwrite the message you are currently composing. Are you sure you want to proceed?', - }, -}); - -export const ConfirmEditStatusModal: React.FC< - { - statusId: string; - } & BaseConfirmationModalProps -> = ({ statusId, onClose }) => { - const intl = useIntl(); - const dispatch = useAppDispatch(); - - const onConfirm = useCallback(() => { - dispatch(editStatus(statusId)); - }, [dispatch, statusId]); - - return ( - - ); -}; diff --git a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/index.ts b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/index.ts index 4893fb096a..25ffb3b629 100644 --- a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/index.ts +++ b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/index.ts @@ -1,8 +1,10 @@ export { ConfirmationModal } from './confirmation_modal'; export { ConfirmDeleteStatusModal } from './delete_status'; export { ConfirmDeleteListModal } from './delete_list'; -export { ConfirmReplyModal } from './reply'; -export { ConfirmEditStatusModal } from './edit_status'; +export { + ConfirmReplyModal, + ConfirmEditStatusModal, +} from './discard_draft_confirmation'; export { ConfirmUnfollowModal } from './unfollow'; export { ConfirmClearNotificationsModal } from './clear_notifications'; export { ConfirmLogOutModal } from './log_out'; diff --git a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/reply.tsx b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/reply.tsx deleted file mode 100644 index 415a453954..0000000000 --- a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/reply.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { useCallback } from 'react'; - -import { defineMessages, useIntl } from 'react-intl'; - -import { replyCompose } from 'flavours/glitch/actions/compose'; -import type { Status } from 'flavours/glitch/models/status'; -import { useAppDispatch } from 'flavours/glitch/store'; - -import type { BaseConfirmationModalProps } from './confirmation_modal'; -import { ConfirmationModal } from './confirmation_modal'; - -const messages = defineMessages({ - replyTitle: { - id: 'confirmations.reply.title', - defaultMessage: 'Overwrite post?', - }, - replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' }, - replyMessage: { - id: 'confirmations.reply.message', - defaultMessage: - 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?', - }, -}); - -export const ConfirmReplyModal: React.FC< - { - status: Status; - } & BaseConfirmationModalProps -> = ({ status, onClose }) => { - const intl = useIntl(); - const dispatch = useAppDispatch(); - - const onConfirm = useCallback(() => { - dispatch(replyCompose(status)); - }, [dispatch, status]); - - return ( - - ); -};