From f94453916c452bb5afa146f8c67118a20ac0bf09 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 7 Jun 2024 14:28:49 +0530 Subject: [PATCH] Social: Clean up the creating connection spinner for confirm button (#37734) * Clean up the creating connection spinner for confirm button * Fix tests --- ...clean-up-creating-connection-spinner-logic | 4 +++ .../confirmation-form/index.tsx | 29 +++++++------------ .../tests/confirmation-form.test.js | 4 +-- .../social-store/actions/connection-data.js | 16 ---------- .../src/social-store/actions/constants.ts | 2 -- .../social-store/reducer/connection-data.js | 7 ----- .../social-store/selectors/connection-data.js | 9 ------ .../src/social-store/types.ts | 1 - 8 files changed, 16 insertions(+), 56 deletions(-) create mode 100644 projects/js-packages/publicize-components/changelog/update-clean-up-creating-connection-spinner-logic diff --git a/projects/js-packages/publicize-components/changelog/update-clean-up-creating-connection-spinner-logic b/projects/js-packages/publicize-components/changelog/update-clean-up-creating-connection-spinner-logic new file mode 100644 index 0000000000000..904949fedac36 --- /dev/null +++ b/projects/js-packages/publicize-components/changelog/update-clean-up-creating-connection-spinner-logic @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Clean up the creating connection spinner for confirm button diff --git a/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx b/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx index 8444e2179e78a..45838953f2de5 100644 --- a/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx +++ b/projects/js-packages/publicize-components/src/components/manage-connections-modal/confirmation-form/index.tsx @@ -53,12 +53,11 @@ function AccountInfo( { label, profile_picture }: AccountInfoProps ) { */ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: ConfirmationFormProps ) { const supportedServices = useSupportedServices(); - const { existingConnections, isCreatingConnection } = useSelect( select => { + const { existingConnections } = useSelect( select => { const store = select( socialStore ); return { existingConnections: store.getConnections(), - isCreatingConnection: store.isCreatingConnection(), }; }, [] ); @@ -146,10 +145,14 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir shared: formData.get( 'shared' ) === '1' ? true : undefined, }; + const accountInfo = accounts.not_connected.find( + option => option.value === external_user_ID + ); + // Do not await the connection creation to unblock the UI createConnection( data, { - display_name: formData.get( 'display_name' ), - profile_picture: formData.get( 'profile_picture' ), + display_name: accountInfo?.label, + profile_picture: accountInfo?.profile_picture, service_name: service.ID, } ); @@ -162,6 +165,7 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir onComplete, service.multiple_external_user_ID_support, service.ID, + accounts.not_connected, ] ); @@ -211,12 +215,6 @@ export function ConfirmationForm( { keyringResult, onComplete, isAdmin }: Confir className={ styles[ 'account-input' ] } required /> - - { accounts.not_connected.length ? ( - ) : null } diff --git a/projects/js-packages/publicize-components/src/components/manage-connections-modal/tests/confirmation-form.test.js b/projects/js-packages/publicize-components/src/components/manage-connections-modal/tests/confirmation-form.test.js index 4222f99644ab1..0302e6b941555 100644 --- a/projects/js-packages/publicize-components/src/components/manage-connections-modal/tests/confirmation-form.test.js +++ b/projects/js-packages/publicize-components/src/components/manage-connections-modal/tests/confirmation-form.test.js @@ -78,8 +78,8 @@ describe( 'ConfirmationForm', () => { shared: undefined, }, { - display_name: 'Additional User 1', - profile_picture: 'https://example.com/additional1.jpg', + display_name: 'Additional User 2', + profile_picture: 'https://example.com/additional2.jpg', service_name: 'service-1', } ) diff --git a/projects/js-packages/publicize-components/src/social-store/actions/connection-data.js b/projects/js-packages/publicize-components/src/social-store/actions/connection-data.js index 21cb2ec1f535c..ced3546685510 100644 --- a/projects/js-packages/publicize-components/src/social-store/actions/connection-data.js +++ b/projects/js-packages/publicize-components/src/social-store/actions/connection-data.js @@ -5,7 +5,6 @@ import { store as editorStore } from '@wordpress/editor'; import { __, sprintf } from '@wordpress/i18n'; import { ADD_CONNECTION, - CREATING_CONNECTION, DELETE_CONNECTION, DELETING_CONNECTION, SET_CONNECTIONS, @@ -193,19 +192,6 @@ export function deletingConnection( connectionId, deleting = true ) { }; } -/** - * Whether a connection is being created. - * - * @param {boolean} creating - Whether the connection is being creating. - * @returns {object} Creating connection action. - */ -export function creatingConnection( creating = true ) { - return { - type: CREATING_CONNECTION, - creating, - }; -} - /** * Deletes a connection by disconnecting it. * @@ -275,7 +261,6 @@ export function createConnection( data, optimisticData = {} ) { try { const path = `/jetpack/v4/social/connections/`; - dispatch( creatingConnection() ); dispatch( addConnection( { connection_id: tempId, @@ -327,7 +312,6 @@ export function createConnection( data, optimisticData = {} ) { createErrorNotice( message, { type: 'snackbar', isDismissible: true } ); } finally { - dispatch( creatingConnection( false ) ); dispatch( updatingConnection( tempId, false ) ); // If the connection was not created, delete it. dispatch( deleteConnection( tempId ) ); diff --git a/projects/js-packages/publicize-components/src/social-store/actions/constants.ts b/projects/js-packages/publicize-components/src/social-store/actions/constants.ts index 726f31fcbc96f..9b9c4ff9003f2 100644 --- a/projects/js-packages/publicize-components/src/social-store/actions/constants.ts +++ b/projects/js-packages/publicize-components/src/social-store/actions/constants.ts @@ -8,8 +8,6 @@ export const DELETE_CONNECTION = 'DELETE_CONNECTION'; export const DELETING_CONNECTION = 'DELETING_CONNECTION'; -export const CREATING_CONNECTION = 'CREATING_CONNECTION'; - export const UPDATE_CONNECTION = 'UPDATE_CONNECTION'; export const UPDATING_CONNECTION = 'UPDATING_CONNECTION'; diff --git a/projects/js-packages/publicize-components/src/social-store/reducer/connection-data.js b/projects/js-packages/publicize-components/src/social-store/reducer/connection-data.js index 645574d45362c..57496c0add236 100644 --- a/projects/js-packages/publicize-components/src/social-store/reducer/connection-data.js +++ b/projects/js-packages/publicize-components/src/social-store/reducer/connection-data.js @@ -1,6 +1,5 @@ import { ADD_CONNECTION, - CREATING_CONNECTION, DELETE_CONNECTION, DELETING_CONNECTION, SET_CONNECTIONS, @@ -51,12 +50,6 @@ const connectionData = ( state = {}, action ) => { }; } - case CREATING_CONNECTION: - return { - ...state, - creatingConnection: action.creating, - }; - case UPDATE_CONNECTION: return { ...state, diff --git a/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js b/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js index ebeb1e862ac24..5e66e5969b1de 100644 --- a/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js +++ b/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js @@ -151,15 +151,6 @@ export function getUpdatingConnections( state ) { return state.connectionData?.updatingConnections ?? []; } -/** - * Whether a connection is being created. - * @param {import("../types").SocialStoreState} state - State object. - * @returns {boolean} Whether a connection is being created. - */ -export function isCreatingConnection( state ) { - return state.connectionData?.creatingConnection ?? false; -} - /** * Whether a mastodon account is already connected. * diff --git a/projects/js-packages/publicize-components/src/social-store/types.ts b/projects/js-packages/publicize-components/src/social-store/types.ts index 2a5374345f698..231050799521a 100644 --- a/projects/js-packages/publicize-components/src/social-store/types.ts +++ b/projects/js-packages/publicize-components/src/social-store/types.ts @@ -43,7 +43,6 @@ export type ConnectionData = { connections: Connection[]; deletingConnections?: Array< number | string >; updatingConnections?: Array< number | string >; - creatingConnection?: boolean; keyringResult?: KeyringResult; };