From 522eba4b2563172ab2af1ad044082fdc13676466 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 9 Aug 2022 17:05:16 -0500 Subject: [PATCH] StatusActionBar: create toggle actions for status interactions --- app/soapbox/actions/interactions.ts | 41 ++++++++++++++++++++ app/soapbox/actions/statuses.ts | 12 +++++- app/soapbox/components/status_action_bar.tsx | 37 ++++-------------- 3 files changed, 59 insertions(+), 31 deletions(-) diff --git a/app/soapbox/actions/interactions.ts b/app/soapbox/actions/interactions.ts index ff449e03c..bfefb41f6 100644 --- a/app/soapbox/actions/interactions.ts +++ b/app/soapbox/actions/interactions.ts @@ -94,6 +94,15 @@ const unreblog = (status: StatusEntity) => }); }; +const toggleReblog = (status: StatusEntity) => + (dispatch: AppDispatch, getState: () => RootState) => { + if (status.reblogged) { + dispatch(unreblog(status)); + } else { + dispatch(reblog(status)); + } + }; + const reblogRequest = (status: StatusEntity) => ({ type: REBLOG_REQUEST, status: status, @@ -158,6 +167,16 @@ const unfavourite = (status: StatusEntity) => }); }; +const toggleFavourite = (status: StatusEntity) => + (dispatch: AppDispatch, getState: () => RootState) => { + if (status.favourited) { + dispatch(favourite(status)); + } else { + dispatch(unfavourite(status)); + } + }; + + const favouriteRequest = (status: StatusEntity) => ({ type: FAVOURITE_REQUEST, status: status, @@ -222,6 +241,15 @@ const unbookmark = (status: StatusEntity) => }); }; +const toggleBookmark = (status: StatusEntity) => + (dispatch: AppDispatch, getState: () => RootState) => { + if (status.bookmarked) { + dispatch(unbookmark(status)); + } else { + dispatch(bookmark(status)); + } + }; + const bookmarkRequest = (status: StatusEntity) => ({ type: BOOKMARK_REQUEST, status: status, @@ -394,6 +422,15 @@ const unpin = (status: StatusEntity) => }); }; +const togglePin = (status: StatusEntity) => + (dispatch: AppDispatch, getState: () => RootState) => { + if (status.pinned) { + dispatch(unpin(status)); + } else { + dispatch(pin(status)); + } + }; + const unpinRequest = (status: StatusEntity) => ({ type: UNPIN_REQUEST, status, @@ -488,6 +525,7 @@ export { REMOTE_INTERACTION_FAIL, reblog, unreblog, + toggleReblog, reblogRequest, reblogSuccess, reblogFail, @@ -496,6 +534,7 @@ export { unreblogFail, favourite, unfavourite, + toggleFavourite, favouriteRequest, favouriteSuccess, favouriteFail, @@ -504,6 +543,7 @@ export { unfavouriteFail, bookmark, unbookmark, + toggleBookmark, bookmarkRequest, bookmarkSuccess, bookmarkFail, @@ -530,6 +570,7 @@ export { unpinRequest, unpinSuccess, unpinFail, + togglePin, remoteInteraction, remoteInteractionRequest, remoteInteractionSuccess, diff --git a/app/soapbox/actions/statuses.ts b/app/soapbox/actions/statuses.ts index 9df7f207b..b81dd7ce2 100644 --- a/app/soapbox/actions/statuses.ts +++ b/app/soapbox/actions/statuses.ts @@ -10,7 +10,7 @@ import { openModal } from './modals'; import { deleteFromTimelines } from './timelines'; import type { AppDispatch, RootState } from 'soapbox/store'; -import type { APIEntity } from 'soapbox/types/entities'; +import type { APIEntity, Status } from 'soapbox/types/entities'; const STATUS_CREATE_REQUEST = 'STATUS_CREATE_REQUEST'; const STATUS_CREATE_SUCCESS = 'STATUS_CREATE_SUCCESS'; @@ -266,6 +266,15 @@ const unmuteStatus = (id: string) => }); }; +const toggleMuteStatus = (status: Status) => + (dispatch: AppDispatch, getState: () => RootState) => { + if (status.muted) { + dispatch(unmuteStatus(status.id)); + } else { + dispatch(muteStatus(status.id)); + } + }; + const hideStatus = (ids: string[] | string) => { if (!Array.isArray(ids)) { ids = [ids]; @@ -324,6 +333,7 @@ export { fetchStatusWithContext, muteStatus, unmuteStatus, + toggleMuteStatus, hideStatus, revealStatus, }; diff --git a/app/soapbox/components/status_action_bar.tsx b/app/soapbox/components/status_action_bar.tsx index 278bb3c3f..412303417 100644 --- a/app/soapbox/components/status_action_bar.tsx +++ b/app/soapbox/components/status_action_bar.tsx @@ -7,12 +7,12 @@ import { blockAccount } from 'soapbox/actions/accounts'; import { showAlertForError } from 'soapbox/actions/alerts'; import { launchChat } from 'soapbox/actions/chats'; import { directCompose, mentionCompose, quoteCompose, replyCompose } from 'soapbox/actions/compose'; -import { bookmark, favourite, pin, reblog, unbookmark, unfavourite, unpin, unreblog } from 'soapbox/actions/interactions'; +import { toggleBookmark, toggleFavourite, togglePin, toggleReblog } from 'soapbox/actions/interactions'; import { openModal } from 'soapbox/actions/modals'; import { deactivateUserModal, deleteStatusModal, deleteUserModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation'; import { initMuteModal } from 'soapbox/actions/mutes'; import { initReport } from 'soapbox/actions/reports'; -import { deleteStatus, editStatus, muteStatus, unmuteStatus } from 'soapbox/actions/statuses'; +import { deleteStatus, editStatus, toggleMuteStatus } from 'soapbox/actions/statuses'; import EmojiButtonWrapper from 'soapbox/components/emoji-button-wrapper'; import StatusActionButton from 'soapbox/components/status-action-button'; import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container'; @@ -142,11 +142,7 @@ const StatusActionBar: React.FC = ({ status, withDismiss = fal const handleFavouriteClick: React.EventHandler = (e) => { if (me) { - if (status.get('favourited')) { - dispatch(unfavourite(status)); - } else { - dispatch(favourite(status)); - } + toggleFavourite(status); } else { onOpenUnauthorizedModal('FAVOURITE'); } @@ -156,20 +152,11 @@ const StatusActionBar: React.FC = ({ status, withDismiss = fal const handleBookmarkClick: React.EventHandler = (e) => { e.stopPropagation(); - - if (status.get('bookmarked')) { - dispatch(unbookmark(status)); - } else { - dispatch(bookmark(status)); - } + dispatch(toggleBookmark(status)); }; const modalReblog = () => { - if (status.get('reblogged')) { - dispatch(unreblog(status)); - } else { - dispatch(reblog(status)); - } + dispatch(toggleReblog(status)); }; const handleReblogClick: React.EventHandler = e => { @@ -241,12 +228,7 @@ const StatusActionBar: React.FC = ({ status, withDismiss = fal const handlePinClick: React.EventHandler = (e) => { e.stopPropagation(); - - if (status.get('pinned')) { - dispatch(unpin(status)); - } else { - dispatch(pin(status)); - } + dispatch(togglePin(status)); }; const handleMentionClick: React.EventHandler = (e) => { @@ -307,12 +289,7 @@ const StatusActionBar: React.FC = ({ status, withDismiss = fal const handleConversationMuteClick: React.EventHandler = (e) => { e.stopPropagation(); - - if (status.get('muted')) { - dispatch(unmuteStatus(status.id)); - } else { - dispatch(muteStatus(status.id)); - } + dispatch(toggleMuteStatus(status)); }; const handleCopy: React.EventHandler = (e) => {