Social: Disable resharing and schedule buttons while operations are in progress

projects/js-packages/publicize-components/changelog/SOCIAL-269

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Disable resharing and schedule buttons while operations are in progress.

projects/js-packages/publicize-components/src/components/schedule-button/index.tsx

@@ -76,11 +76,14 @@ const ScheduleButton = () => {
 	const { schedulePost } = useSchedulePost();
 	const isSavingPost = useSelect( select => select( editorStore ).isSavingPost(), [] );
 
-	const isSavingScheduledShare = useSelect(
-		select => select( socialStore ).isSavingScheduledShare(),
-		[]
-	);
-	const isBusy = isSavingScheduledShare || isSavingPost;
+	const { isSavingScheduledShare, isResharing } = useSelect( select => {
+		const socialSelector = select( socialStore );
+		return {
+			isSavingScheduledShare: socialSelector.isSavingScheduledShare(),
+			isResharing: socialSelector.isResharingPost(),
+		};
+	}, [] );
+	const isBusy = isSavingScheduledShare || isSavingPost || isResharing;
 
 	const onConfirm = useCallback(
 		async ( scheduleTimestamp: number ) => {
@@ -101,7 +104,7 @@ const ScheduleButton = () => {
 				icon={ calendar }
 				isSecondary
 				isBusy={ isBusy }
-				disabled={ ! isReSharingPossible }
+				disabled={ ! isReSharingPossible || isBusy }
 			>
 				{ __( 'Schedule', 'jetpack-publicize-components' ) }
 			</Button>

projects/js-packages/publicize-components/src/hooks/use-share-post/index.js

@@ -1,10 +1,11 @@
 import apiFetch from '@wordpress/api-fetch';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { useState, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import useSocialMediaMessage from '../../hooks/use-social-media-message';
+import { store as socialStore } from '../../social-store';
 import { getSocialScriptData } from '../../utils/script-data';
 
 /**
@@ -73,6 +74,7 @@ export default function useSharePost( postId ) {
 	// Sharing data.
 	const { message } = useSocialMediaMessage();
 	const { skippedConnections } = useSocialMediaConnections();
+	const { setIsResharing } = useDispatch( socialStore );
 
 	// Get post ID to share.
 	const currentPostId = useSelect( select => select( editorStore ).getCurrentPostId(), [] );
@@ -104,6 +106,7 @@ export default function useSharePost( postId ) {
 				...initialState,
 				isFetching: true,
 			} );
+			setIsResharing( true );
 
 			await apiFetch( {
 				path,
@@ -146,13 +149,16 @@ export default function useSharePost( postId ) {
 						data: [],
 						error: getHumanReadableError( error ),
 					} ) );
+				} )
+				.finally( () => {
+					setIsResharing( false );
 				} );
 
 			return function () {
 				setData( initialState ); // clean the state.
 			};
 		},
-		[ postId, message, skippedConnections, data.isFetching, path ]
+		[ postId, message, skippedConnections, data.isFetching, path, setIsResharing ]
 	);
 
 	return { ...data, doPublicize };

projects/js-packages/publicize-components/src/social-store/actions/constants.ts

@@ -43,3 +43,5 @@ export const SET_UNIFIED_MODAL_INITIAL_PATH = 'SET_UNIFIED_MODAL_INITIAL_PATH' a
 export const SET_UNIFIED_MODAL_SCREEN_LOCK = 'SET_UNIFIED_MODAL_SCREEN_LOCK' as const;
 
 export const INCREMENT_RENDER_COUNT = 'INCREMENT_RENDER_COUNT' as const;
+
+export const SET_IS_RESHARING = 'SET_IS_RESHARING' as const;

projects/js-packages/publicize-components/src/social-store/actions/share-post.ts

@@ -1,4 +1,4 @@
-import { TOGGLE_SHARE_POST_MODAL } from './constants';
+import { TOGGLE_SHARE_POST_MODAL, SET_IS_RESHARING } from './constants';
 
 /**
  * Toggles the share post modal.
@@ -14,6 +14,20 @@ export function toggleSharePostModal( isOpen: boolean ) {
 	};
 }
 
+/**
+ * Sets the resharing state.
+ *
+ * @param isResharing - Whether a reshare is in progress.
+ *
+ * @return - An action object.
+ */
+export function setIsResharing( isResharing: boolean ) {
+	return {
+		type: SET_IS_RESHARING,
+		isResharing,
+	};
+}
+
 /**
  * Opens the share post modal.
  *

projects/js-packages/publicize-components/src/social-store/reducer/share-post.ts

@@ -1,8 +1,11 @@
-import { TOGGLE_SHARE_POST_MODAL } from '../actions/constants';
-import { toggleSharePostModal } from '../actions/share-post';
+import { TOGGLE_SHARE_POST_MODAL, SET_IS_RESHARING } from '../actions/constants';
+import { toggleSharePostModal, setIsResharing } from '../actions/share-post';
 import { SocialStoreState } from '../types';
 
-type Action = ReturnType< typeof toggleSharePostModal > | { type: 'default' };
+type Action =
+	| ReturnType< typeof toggleSharePostModal >
+	| ReturnType< typeof setIsResharing >
+	| { type: 'default' };
 
 /**
  * Share post data reducer
@@ -22,6 +25,11 @@ export function sharePost(
 				...state,
 				isModalOpen: action.isOpen,
 			};
+		case SET_IS_RESHARING:
+			return {
+				...state,
+				isResharing: action.isResharing,
+			};
 	}
 
 	return state;

projects/js-packages/publicize-components/src/social-store/selectors/share-post.ts

@@ -10,3 +10,14 @@ import type { SocialStoreState } from '../types';
 export function isSharePostModalOpen( state: SocialStoreState ) {
 	return state.sharePost?.isModalOpen ?? false;
 }
+
+/**
+ * Whether a reshare is currently in progress.
+ *
+ * @param state - State object.
+ *
+ * @return Whether a reshare is in progress.
+ */
+export function isResharingPost( state: SocialStoreState ) {
+	return state.sharePost?.isResharing ?? false;
+}

projects/js-packages/publicize-components/src/social-store/types.ts

@@ -62,6 +62,7 @@ export type ShareStatus = {
 
 export type SharePost = {
 	isModalOpen?: boolean;
+	isResharing?: boolean;
 };
 
 export type UnifiedModalState = {