StatusActionBar: create toggle actions for status interactions

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,

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,
 };

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<IStatusActionBar> = ({ status, withDismiss = fal
 
   const handleFavouriteClick: React.EventHandler<React.MouseEvent> = (e) => {
     if (me) {
-      if (status.get('favourited')) {
+      toggleFavourite(status);
-        dispatch(unfavourite(status));
-      } else {
-        dispatch(favourite(status));
-      }
     } else {
       onOpenUnauthorizedModal('FAVOURITE');
     }
@@ -156,20 +152,11 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({ status, withDismiss = fal
 
   const handleBookmarkClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
-
+    dispatch(toggleBookmark(status));
-    if (status.get('bookmarked')) {
-      dispatch(unbookmark(status));
-    } else {
-      dispatch(bookmark(status));
-    }
   };
 
   const modalReblog = () => {
-    if (status.get('reblogged')) {
+    dispatch(toggleReblog(status));
-      dispatch(unreblog(status));
-    } else {
-      dispatch(reblog(status));
-    }
   };
 
   const handleReblogClick: React.EventHandler<React.MouseEvent> = e => {
@@ -241,12 +228,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({ status, withDismiss = fal
 
   const handlePinClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
-
+    dispatch(togglePin(status));
-    if (status.get('pinned')) {
-      dispatch(unpin(status));
-    } else {
-      dispatch(pin(status));
-    }
   };
 
   const handleMentionClick: React.EventHandler<React.MouseEvent> = (e) => {
@@ -307,12 +289,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({ status, withDismiss = fal
 
   const handleConversationMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
-
+    dispatch(toggleMuteStatus(status));
-    if (status.get('muted')) {
-      dispatch(unmuteStatus(status.id));
-    } else {
-      dispatch(muteStatus(status.id));
-    }
   };
 
   const handleCopy: React.EventHandler<React.MouseEvent> = (e) => {