From 11d94d0ff464a897e1335de572335ec8a9e44959 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Mon, 11 Nov 2024 01:29:25 -0800 Subject: [PATCH] Social | Migrate remaining settings to script data (#40081) * Social | Migrate remaining settings to script data * Remove the unnecessary props to useConnection * Add changelog * Be generous for unit tests * Fix import * Update class-publicize-script-data.php * Clean up the social initial state from Jetpack plugin --- ...-migrate-remaining-settings-to-script-data | 4 +++ .../js-packages/publicize-components/index.ts | 2 +- .../services/use-supported-services.tsx | 2 +- .../src/{types.d.ts => declarations.d.ts} | 4 +-- ...{connection-data.js => connection-data.ts} | 6 ++-- .../actions/{index.js => index.ts} | 0 .../src/social-store/{index.js => index.ts} | 7 ++--- ...{connection-data.js => connection-data.ts} | 3 +- .../reducer/{index.js => index.ts} | 2 -- .../src/social-store/reducer/site-data.js | 5 ---- .../{resolvers.js => resolvers.ts} | 3 +- .../selectors/{index.js => index.ts} | 2 -- .../src/social-store/selectors/site-data.js | 7 ----- .../src/social-store/types.ts | 10 ++----- .../src/{types => }/types.ts | 7 ++++- .../src/utils/script-data.ts | 2 +- ...-migrate-remaining-settings-to-script-data | 4 +++ .../src/class-publicize-script-data.php | 29 ++++++++++++++++--- .../client/state/initial-state/reducer.js | 10 ------- ...-migrate-remaining-settings-to-script-data | 5 ++++ ...-migrate-remaining-settings-to-script-data | 4 +++ .../js/components/connection-screen/index.js | 12 -------- 22 files changed, 63 insertions(+), 67 deletions(-) create mode 100644 projects/js-packages/publicize-components/changelog/update-social-migrate-remaining-settings-to-script-data rename projects/js-packages/publicize-components/src/{types.d.ts => declarations.d.ts} (76%) rename projects/js-packages/publicize-components/src/social-store/actions/{connection-data.js => connection-data.ts} (99%) rename projects/js-packages/publicize-components/src/social-store/actions/{index.js => index.ts} (100%) rename projects/js-packages/publicize-components/src/social-store/{index.js => index.ts} (81%) rename projects/js-packages/publicize-components/src/social-store/reducer/{connection-data.js => connection-data.ts} (96%) rename projects/js-packages/publicize-components/src/social-store/reducer/{index.js => index.ts} (83%) delete mode 100644 projects/js-packages/publicize-components/src/social-store/reducer/site-data.js rename projects/js-packages/publicize-components/src/social-store/{resolvers.js => resolvers.ts} (96%) rename projects/js-packages/publicize-components/src/social-store/selectors/{index.js => index.ts} (92%) delete mode 100644 projects/js-packages/publicize-components/src/social-store/selectors/site-data.js rename projects/js-packages/publicize-components/src/{types => }/types.ts (87%) create mode 100644 projects/packages/publicize/changelog/update-social-migrate-remaining-settings-to-script-data create mode 100644 projects/plugins/jetpack/changelog/update-social-migrate-remaining-settings-to-script-data create mode 100644 projects/plugins/social/changelog/update-social-migrate-remaining-settings-to-script-data diff --git a/projects/js-packages/publicize-components/changelog/update-social-migrate-remaining-settings-to-script-data b/projects/js-packages/publicize-components/changelog/update-social-migrate-remaining-settings-to-script-data new file mode 100644 index 0000000000000..b913e50e3eb88 --- /dev/null +++ b/projects/js-packages/publicize-components/changelog/update-social-migrate-remaining-settings-to-script-data @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Social: Migrated the last bits of social store to new script data diff --git a/projects/js-packages/publicize-components/index.ts b/projects/js-packages/publicize-components/index.ts index e6ea16e810548..0480dc8f2d9e0 100644 --- a/projects/js-packages/publicize-components/index.ts +++ b/projects/js-packages/publicize-components/index.ts @@ -4,7 +4,7 @@ import './src/social-store'; // Ensure that module augmentation is applied -export type {} from './src/types'; +export type {} from './src/declarations'; export { default as Connection } from './src/components/connection'; export { default as Form } from './src/components/form'; diff --git a/projects/js-packages/publicize-components/src/components/services/use-supported-services.tsx b/projects/js-packages/publicize-components/src/components/services/use-supported-services.tsx index f594d8ee56cfb..97bfc1042e278 100644 --- a/projects/js-packages/publicize-components/src/components/services/use-supported-services.tsx +++ b/projects/js-packages/publicize-components/src/components/services/use-supported-services.tsx @@ -8,7 +8,7 @@ import connectionsLinkedin from '../../assets/connections-linkedin.png'; import connectionsNextdoor from '../../assets/connections-nextdoor.png'; import connectionsThreads from '../../assets/connections-threads.png'; import connectionsTumblr from '../../assets/connections-tumblr.png'; -import { ConnectionService } from '../../types/types'; +import { ConnectionService } from '../../types'; import { getSocialScriptData } from '../../utils/script-data'; export type Badge = { diff --git a/projects/js-packages/publicize-components/src/types.d.ts b/projects/js-packages/publicize-components/src/declarations.d.ts similarity index 76% rename from projects/js-packages/publicize-components/src/types.d.ts rename to projects/js-packages/publicize-components/src/declarations.d.ts index ea279b28c476b..62a990e9cb64b 100644 --- a/projects/js-packages/publicize-components/src/types.d.ts +++ b/projects/js-packages/publicize-components/src/declarations.d.ts @@ -1,5 +1,5 @@ -import { SocialSettingsFields } from './social-store/types'; -import { SocialScriptData } from './types/types'; +import { SocialPluginSettings, SocialSettingsFields } from './social-store/types'; +import { SocialScriptData } from './types'; // Use module augmentation to add the social property to JetpackInitialState declare module '@automattic/jetpack-script-data' { 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.ts similarity index 99% rename from projects/js-packages/publicize-components/src/social-store/actions/connection-data.js rename to projects/js-packages/publicize-components/src/social-store/actions/connection-data.ts index 78012e39b3db5..189dffa64d678 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.ts @@ -4,6 +4,7 @@ import { dispatch as coreDispatch } from '@wordpress/data'; import { store as editorStore } from '@wordpress/editor'; import { __, sprintf } from '@wordpress/i18n'; import { getSocialScriptData } from '../../utils/script-data'; +import { Connection } from '../types'; import { ADD_CONNECTION, DELETE_CONNECTION, @@ -357,10 +358,7 @@ export function createConnection( data, optimisticData = {} ) { // Mark the connection as updating to show the spinner. dispatch( updatingConnection( tempId ) ); - /** - * @type {import('../types').Connection} - */ - const connection = await apiFetch( { method: 'POST', path, data } ); + const connection = await apiFetch< Connection >( { method: 'POST', path, data } ); if ( connection ) { dispatch( diff --git a/projects/js-packages/publicize-components/src/social-store/actions/index.js b/projects/js-packages/publicize-components/src/social-store/actions/index.ts similarity index 100% rename from projects/js-packages/publicize-components/src/social-store/actions/index.js rename to projects/js-packages/publicize-components/src/social-store/actions/index.ts diff --git a/projects/js-packages/publicize-components/src/social-store/index.js b/projects/js-packages/publicize-components/src/social-store/index.ts similarity index 81% rename from projects/js-packages/publicize-components/src/social-store/index.js rename to projects/js-packages/publicize-components/src/social-store/index.ts index cf1c0cd45ec49..746760a47cb1a 100644 --- a/projects/js-packages/publicize-components/src/social-store/index.js +++ b/projects/js-packages/publicize-components/src/social-store/index.ts @@ -1,4 +1,5 @@ import { createReduxStore, register } from '@wordpress/data'; +import { getSocialScriptData } from '../utils'; import actions from './actions'; import reducer from './reducer'; import resolvers from './resolvers'; @@ -10,11 +11,7 @@ export const SOCIAL_STORE_CONFIG = { actions, selectors, resolvers, - initialState: - window?.jetpackSocialInitialState || // Jetpack Social - window?.Initial_State?.socialInitialState || // Jetpack Dashboard - window?.Jetpack_Editor_Initial_State?.social || // Gutenberg - {}, + initialState: getSocialScriptData()?.store_initial_state, }; export const CONNECTION_SERVICE_FACEBOOK = 'facebook'; 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.ts similarity index 96% rename from projects/js-packages/publicize-components/src/social-store/reducer/connection-data.js rename to projects/js-packages/publicize-components/src/social-store/reducer/connection-data.ts index c8f350f077eb6..29fd84f077177 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.ts @@ -13,6 +13,7 @@ import { REMOVE_ABORT_CONTROLLERS, REQUEST_TYPE_DEFAULT, } from '../actions/constants'; +import { ConnectionData } from '../types'; /** * Connection data reducer @@ -21,7 +22,7 @@ import { * @param {object} action - Action object. * @return {import('../types').ConnectionData} The new state. */ -const connectionData = ( state = {}, action ) => { +const connectionData = ( state: ConnectionData = { connections: [] }, action ) => { switch ( action.type ) { case TOGGLE_CONNECTIONS_MODAL: return { diff --git a/projects/js-packages/publicize-components/src/social-store/reducer/index.js b/projects/js-packages/publicize-components/src/social-store/reducer/index.ts similarity index 83% rename from projects/js-packages/publicize-components/src/social-store/reducer/index.js rename to projects/js-packages/publicize-components/src/social-store/reducer/index.ts index 2b5ff17db0a5d..f2afc7e3e35a9 100644 --- a/projects/js-packages/publicize-components/src/social-store/reducer/index.js +++ b/projects/js-packages/publicize-components/src/social-store/reducer/index.ts @@ -1,10 +1,8 @@ import { combineReducers } from '@wordpress/data'; import connectionData from './connection-data'; import { shareStatus } from './share-status'; -import siteData from './site-data'; const reducer = combineReducers( { - siteData, connectionData, shareStatus, } ); diff --git a/projects/js-packages/publicize-components/src/social-store/reducer/site-data.js b/projects/js-packages/publicize-components/src/social-store/reducer/site-data.js deleted file mode 100644 index 8e1a578dc9566..0000000000000 --- a/projects/js-packages/publicize-components/src/social-store/reducer/site-data.js +++ /dev/null @@ -1,5 +0,0 @@ -const siteData = ( state = {} ) => { - return state; -}; - -export default siteData; diff --git a/projects/js-packages/publicize-components/src/social-store/resolvers.js b/projects/js-packages/publicize-components/src/social-store/resolvers.ts similarity index 96% rename from projects/js-packages/publicize-components/src/social-store/resolvers.js rename to projects/js-packages/publicize-components/src/social-store/resolvers.ts index 5a14ec91cbc6a..fa21a83cd124a 100644 --- a/projects/js-packages/publicize-components/src/social-store/resolvers.js +++ b/projects/js-packages/publicize-components/src/social-store/resolvers.ts @@ -6,6 +6,7 @@ import { getSocialScriptData } from '../utils/script-data'; import { normalizeShareStatus } from '../utils/share-status'; import { setConnections } from './actions/connection-data'; import { fetchPostShareStatus, receivePostShareStaus } from './actions/share-status'; +import { PostShareStatus } from './types'; /** * Resolves the connections from the post. @@ -44,7 +45,7 @@ export function getPostShareStatus( _postId ) { try { dispatch( fetchPostShareStatus( postId ) ); - let result = await apiFetch( { + let result = await apiFetch< PostShareStatus >( { path: `jetpack/v4/social/share-status/${ postId }`, } ); diff --git a/projects/js-packages/publicize-components/src/social-store/selectors/index.js b/projects/js-packages/publicize-components/src/social-store/selectors/index.ts similarity index 92% rename from projects/js-packages/publicize-components/src/social-store/selectors/index.js rename to projects/js-packages/publicize-components/src/social-store/selectors/index.ts index 87fdffd64a42d..0b22db4734352 100644 --- a/projects/js-packages/publicize-components/src/social-store/selectors/index.js +++ b/projects/js-packages/publicize-components/src/social-store/selectors/index.ts @@ -2,7 +2,6 @@ import { store as coreStore } from '@wordpress/core-data'; import { createRegistrySelector } from '@wordpress/data'; import * as connectionDataSelectors from './connection-data'; import * as shareStatusSelectors from './share-status'; -import siteDataSelectors from './site-data'; import * as sigSelectors from './social-image-generator'; import * as socialPluginSelectors from './social-plugin-settings'; @@ -16,7 +15,6 @@ export const isSavingSiteSettings = createRegistrySelector( select => () => { } ); const selectors = { - ...siteDataSelectors, ...connectionDataSelectors, ...shareStatusSelectors, isSavingSiteSettings, diff --git a/projects/js-packages/publicize-components/src/social-store/selectors/site-data.js b/projects/js-packages/publicize-components/src/social-store/selectors/site-data.js deleted file mode 100644 index 451616deddf25..0000000000000 --- a/projects/js-packages/publicize-components/src/social-store/selectors/site-data.js +++ /dev/null @@ -1,7 +0,0 @@ -const siteDataSelectors = { - getAPIRootUrl: state => state.siteData?.apiRoot ?? null, - getAPINonce: state => state.siteData?.apiNonce ?? null, - getRegistrationNonce: state => state.siteData?.registrationNonce ?? null, -}; - -export default siteDataSelectors; 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 16d546ea20eb8..f5910652b5e2d 100644 --- a/projects/js-packages/publicize-components/src/social-store/types.ts +++ b/projects/js-packages/publicize-components/src/social-store/types.ts @@ -3,6 +3,7 @@ export type ConnectionStatus = 'ok' | 'broken'; export type Connection = { id: string; service_name: string; + label?: string; display_name: string; external_display?: string; external_id: string; @@ -27,6 +28,7 @@ export type ConnectionData = { updatingConnections?: Array< number | string >; reconnectingAccount?: Connection; keyringResult?: KeyringResult; + abortControllers?: Record< string, Array< AbortController > >; }; export type JetpackSettings = { @@ -102,11 +104,3 @@ export type SocialPluginSettings = { export type SocialSettingsFields = { jetpack_social_image_generator_settings: SocialImageGeneratorConfig; }; - -declare global { - interface Window { - jetpackSocialInitialState?: SocialStoreState & { - is_publicize_enabled: boolean; - }; - } -} diff --git a/projects/js-packages/publicize-components/src/types/types.ts b/projects/js-packages/publicize-components/src/types.ts similarity index 87% rename from projects/js-packages/publicize-components/src/types/types.ts rename to projects/js-packages/publicize-components/src/types.ts index a9b84f7545998..c54975c8e2f35 100644 --- a/projects/js-packages/publicize-components/src/types/types.ts +++ b/projects/js-packages/publicize-components/src/types.ts @@ -1,4 +1,8 @@ -import { SocialImageGeneratorConfig, SocialPluginSettings } from '../social-store/types'; +import { + SocialImageGeneratorConfig, + SocialPluginSettings, + SocialStoreState, +} from './social-store/types'; export interface SocialUrls { connectionsManagementPage: string; @@ -45,6 +49,7 @@ export interface SocialScriptData { plugin_info: PluginInfo; settings: SocialSettings; shares_data: SharesData; + store_initial_state: SocialStoreState; supported_services: Array< ConnectionService >; urls: SocialUrls; } diff --git a/projects/js-packages/publicize-components/src/utils/script-data.ts b/projects/js-packages/publicize-components/src/utils/script-data.ts index 1a954bc7e7894..1da56c298391e 100644 --- a/projects/js-packages/publicize-components/src/utils/script-data.ts +++ b/projects/js-packages/publicize-components/src/utils/script-data.ts @@ -1,5 +1,5 @@ import { getScriptData, siteHasFeature } from '@automattic/jetpack-script-data'; -import { SocialScriptData } from '../types/types'; +import { SocialScriptData } from '../types'; /** * Get the social script data from the window object. diff --git a/projects/packages/publicize/changelog/update-social-migrate-remaining-settings-to-script-data b/projects/packages/publicize/changelog/update-social-migrate-remaining-settings-to-script-data new file mode 100644 index 0000000000000..b913e50e3eb88 --- /dev/null +++ b/projects/packages/publicize/changelog/update-social-migrate-remaining-settings-to-script-data @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Social: Migrated the last bits of social store to new script data diff --git a/projects/packages/publicize/src/class-publicize-script-data.php b/projects/packages/publicize/src/class-publicize-script-data.php index 59da521de2642..9c8f5d863a33a 100644 --- a/projects/packages/publicize/src/class-publicize-script-data.php +++ b/projects/packages/publicize/src/class-publicize-script-data.php @@ -114,10 +114,11 @@ public static function get_admin_script_data() { return array_merge( $basic_data, array( - 'api_paths' => self::get_api_paths(), - 'supported_services' => self::get_supported_services(), - 'shares_data' => self::get_shares_data(), - 'urls' => self::get_urls(), + 'api_paths' => self::get_api_paths(), + 'supported_services' => self::get_supported_services(), + 'shares_data' => self::get_shares_data(), + 'urls' => self::get_urls(), + 'store_initial_state' => self::get_store_initial_state(), ) ); } @@ -136,6 +137,26 @@ public static function get_social_settings() { ); } + /** + * Get the social store initial state. + * + * @return array + */ + public static function get_store_initial_state() { + + $is_wpcom = ( new Host() )->is_wpcom_platform(); + + return array( + 'connectionData' => array( + // We do not have this method on WPCOM Publicize class yet. + 'connections' => ! $is_wpcom ? self::publicize()->get_all_connections_for_user() : array(), + ), + 'shareStatus' => array( + // Here goes the share status data for posts with key as post ID. + ), + ); + } + /** * Get the feature flags. * diff --git a/projects/plugins/jetpack/_inc/client/state/initial-state/reducer.js b/projects/plugins/jetpack/_inc/client/state/initial-state/reducer.js index 3056ecd57f62c..0c2930467a2fc 100644 --- a/projects/plugins/jetpack/_inc/client/state/initial-state/reducer.js +++ b/projects/plugins/jetpack/_inc/client/state/initial-state/reducer.js @@ -778,13 +778,3 @@ export function getNewsetterDateExample( state ) { export function subscriptionSiteEditSupported( state ) { return !! state.jetpack.initialState.subscriptionSiteEditSupported; } - -/** - * Get the Jetpack Social Initial State - * - * @param {object} state - Global state tree. - * @return {object} Jetpack Social Initial State - */ -export function getSocialInitiaState( state ) { - return state.jetpack.initialState.socialInitialState ?? {}; -} diff --git a/projects/plugins/jetpack/changelog/update-social-migrate-remaining-settings-to-script-data b/projects/plugins/jetpack/changelog/update-social-migrate-remaining-settings-to-script-data new file mode 100644 index 0000000000000..0818dfc1a4b8f --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-social-migrate-remaining-settings-to-script-data @@ -0,0 +1,5 @@ +Significance: patch +Type: other +Comment: Cleaned up social initial state + + diff --git a/projects/plugins/social/changelog/update-social-migrate-remaining-settings-to-script-data b/projects/plugins/social/changelog/update-social-migrate-remaining-settings-to-script-data new file mode 100644 index 0000000000000..b913e50e3eb88 --- /dev/null +++ b/projects/plugins/social/changelog/update-social-migrate-remaining-settings-to-script-data @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Social: Migrated the last bits of social store to new script data diff --git a/projects/plugins/social/src/js/components/connection-screen/index.js b/projects/plugins/social/src/js/components/connection-screen/index.js index 61d2f25e5b6e1..a69ed579450ce 100644 --- a/projects/plugins/social/src/js/components/connection-screen/index.js +++ b/projects/plugins/social/src/js/components/connection-screen/index.js @@ -1,7 +1,5 @@ import { Dialog, ProductOffer, TermsOfService } from '@automattic/jetpack-components'; import { useConnection } from '@automattic/jetpack-connection'; -import { SOCIAL_STORE_ID } from '@automattic/jetpack-publicize-components'; -import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import React from 'react'; import background from './background.svg'; @@ -9,20 +7,10 @@ import illustration from './illustration.png'; import styles from './styles.module.scss'; const ConnectionScreen = () => { - const connectProps = useSelect( select => { - const store = select( SOCIAL_STORE_ID ); - return { - apiRoot: store.getAPIRootUrl(), - apiNonce: store.getAPINonce(), - registrationNonce: store.getRegistrationNonce(), - }; - } ); - const { userIsConnecting, siteIsRegistering, handleRegisterSite, registrationError } = useConnection( { from: 'jetpack-social', redirectUri: 'admin.php?page=jetpack-social', - ...connectProps, } ); const buttonText = __( 'Get Started', 'jetpack-social' );