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

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

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';

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 = {

projects/js-packages/publicize-components/src/types.d.ts → 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' {

projects/js-packages/publicize-components/src/social-store/actions/connection-data.js → 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(

projects/js-packages/publicize-components/src/social-store/index.js → 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';

projects/js-packages/publicize-components/src/social-store/reducer/connection-data.js → 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 {

projects/js-packages/publicize-components/src/social-store/reducer/index.js → 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,
 } );

projects/js-packages/publicize-components/src/social-store/resolvers.js → 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 }`,
 			} );
 

projects/js-packages/publicize-components/src/social-store/selectors/index.js → 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,

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

projects/js-packages/publicize-components/src/types/types.ts → 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;
 }

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.

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

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.
 	 *

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 ?? {};
-}

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
+
+

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

projects/plugins/social/src/js/components/connection-screen/index.js

@@ -1,28 +1,16 @@
 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';
 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' );