Fix post editor dirty state caused by publicize store

projects/js-packages/publicize-components/changelog/add-social-store-connections-unit-tests

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add jetpack social store connections unit tests

projects/js-packages/publicize-components/changelog/fix-editor-dirty-state-by-publicize

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixed post editor dirty state cause by publicize store

projects/js-packages/publicize-components/package.json

@@ -58,6 +58,7 @@
 		"@testing-library/user-event": "14.4.3",
 		"@types/react": "18.2.33",
 		"@wordpress/babel-plugin-import-jsx-pragma": "4.28.0",
+		"@wordpress/core-data": "6.22.0",
 		"babel-jest": "29.4.3",
 		"jest": "29.4.3",
 		"jest-environment-jsdom": "29.4.3",

projects/js-packages/publicize-components/src/components/connection-verify/index.js

@@ -13,6 +13,7 @@ import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { Component, Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { SOCIAL_STORE_ID } from '../../social-store';
 
 class PublicizeConnectionVerify extends Component {
 	componentDidMount() {
@@ -101,9 +102,9 @@ class PublicizeConnectionVerify extends Component {
 
 export default compose( [
 	withSelect( select => ( {
-		failedConnections: select( 'jetpack/publicize' ).getFailedConnections(),
+		failedConnections: select( SOCIAL_STORE_ID ).getFailedConnections(),
 	} ) ),
 	withDispatch( dispatch => ( {
-		refreshConnections: dispatch( 'jetpack/publicize' ).refreshConnectionTestResults,
+		refreshConnections: dispatch( SOCIAL_STORE_ID ).refreshConnectionTestResults,
 	} ) ),
 ] )( PublicizeConnectionVerify );

projects/js-packages/publicize-components/src/components/connection/index.js

@@ -11,6 +11,7 @@ import { withSelect } from '@wordpress/data';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { includes } from 'lodash';
+import { SOCIAL_STORE_ID } from '../../social-store';
 import ConnectionToggle from '../connection-toggle';
 import componentStyles from '../styles.module.scss';
 import styles from './styles.module.scss';
@@ -94,6 +95,6 @@ class PublicizeConnection extends Component {
 }
 
 export default withSelect( select => ( {
-	failedConnections: select( 'jetpack/publicize' ).getFailedConnections(),
-	mustReauthConnections: select( 'jetpack/publicize' ).getMustReauthConnections(),
+	failedConnections: select( SOCIAL_STORE_ID ).getFailedConnections(),
+	mustReauthConnections: select( SOCIAL_STORE_ID ).getMustReauthConnections(),
 } ) )( PublicizeConnection );

projects/js-packages/publicize-components/src/components/connection/test/index.test.js

@@ -3,10 +3,9 @@ import { render, renderHook, screen } from '@testing-library/react';
 import { useSelect } from '@wordpress/data';
 import React from 'react';
 import '../../../store';
+import { SOCIAL_STORE_ID } from '../../../social-store';
 import PublicizeConnection from '../index';
 
-const STORE_ID = 'jetpack/publicize';
-
 describe( 'PublicizeConnection', () => {
 	test( 'renders an input', () => {
 		const props = {
@@ -18,7 +17,7 @@ describe( 'PublicizeConnection', () => {
 		};
 
 		let storeSelect;
-		renderHook( () => useSelect( select => ( storeSelect = select( STORE_ID ) ) ) );
+		renderHook( () => useSelect( select => ( storeSelect = select( SOCIAL_STORE_ID ) ) ) );
 		jest.spyOn( storeSelect, 'getFailedConnections' ).mockReset().mockReturnValue( [] );
 
 		render( <PublicizeConnection { ...props } /> );

projects/js-packages/publicize-components/src/components/social-previews/facebook.js

@@ -1,23 +1,20 @@
 import { FacebookPreviews as Previews } from '@automattic/social-previews';
-import { withSelect } from '@wordpress/data';
-import useSocialMediaConnections from '../../hooks/use-social-media-connections';
+import { useSelect, withSelect } from '@wordpress/data';
 import useSocialMediaMessage from '../../hooks/use-social-media-message';
+import { SOCIAL_STORE_ID, CONNECTION_SERVICE_FACEBOOK } from '../../social-store';
 
 const FacebookPreview = props => {
-	const { connections } = useSocialMediaConnections();
 	const { message } = useSocialMediaMessage();
 
 	const { title, excerpt, content } = props;
-	const connection = connections?.find( conn => conn.service_name === 'facebook' );
 
-	let user;
+	const user = useSelect( select => {
+		const { displayName, profileImage: avatarUrl } = select(
+			SOCIAL_STORE_ID
+		).getConnectionProfileDetails( CONNECTION_SERVICE_FACEBOOK );
 
-	if ( connection ) {
-		user = {
-			displayName: connection.display_name,
-			avatarUrl: connection.profile_picture,
-		};
-	}
+		return { displayName, avatarUrl };
+	} );
 
 	return (
 		<Previews

projects/js-packages/publicize-components/src/components/social-previews/instagram.js

@@ -1,7 +1,8 @@
 import { InstagramPreviews } from '@automattic/social-previews';
+import { useSelect } from '@wordpress/data';
 import React from 'react';
 import useSocialMediaMessage from '../../hooks/use-social-media-message';
-import { getInstagramDetails } from '../../store/selectors';
+import { SOCIAL_STORE_ID, CONNECTION_SERVICE_INSTAGRAM_BUSINESS } from '../../social-store';
 
 /**
  * The Instagram tab component.
@@ -11,8 +12,9 @@ import { getInstagramDetails } from '../../store/selectors';
  */
 export function Instagram( props ) {
 	const { title, image, media } = props;
-
-	const { name, profileImage } = getInstagramDetails();
+	const { username: name, profileImage } = useSelect( select =>
+		select( SOCIAL_STORE_ID ).getConnectionProfileDetails( CONNECTION_SERVICE_INSTAGRAM_BUSINESS )
+	);
 
 	const { message: text } = useSocialMediaMessage();
 

projects/js-packages/publicize-components/src/components/social-previews/linkedin.js

@@ -1,8 +1,9 @@
 import { LinkedInPreviews } from '@automattic/social-previews';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import React from 'react';
 import useSocialMediaMessage from '../../hooks/use-social-media-message';
-import { getLinkedInDetails } from '../../store/selectors';
+import { SOCIAL_STORE_ID, CONNECTION_SERVICE_LINKEDIN } from '../../social-store';
 
 /**
  * The linkedin tab component.
@@ -13,7 +14,9 @@ import { getLinkedInDetails } from '../../store/selectors';
 export function LinkedIn( props ) {
 	const { title, url, image, media } = props;
 
-	const { name, profileImage } = getLinkedInDetails();
+	const { displayName: name, profileImage } = useSelect( select =>
+		select( SOCIAL_STORE_ID ).getConnectionProfileDetails( CONNECTION_SERVICE_LINKEDIN )
+	);
 
 	const { message: text } = useSocialMediaMessage();
 

projects/js-packages/publicize-components/src/components/social-previews/mastodon.js

@@ -1,12 +1,11 @@
 import { MastodonPreviews } from '@automattic/social-previews';
 import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
-import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import useSocialMediaMessage from '../../hooks/use-social-media-message';
+import { SOCIAL_STORE_ID, CONNECTION_SERVICE_MASTODON } from '../../social-store';
 import { shouldUploadAttachedMedia } from '../../store/selectors';
 
 const MastodonPreview = props => {
-	const { connections } = useSocialMediaConnections();
 	const { message } = useSocialMediaMessage();
 	const { content, siteName } = useSelect( select => {
 		const { getEditedPostAttribute } = select( 'core/editor' );
@@ -18,17 +17,16 @@ const MastodonPreview = props => {
 		};
 	} );
 	const isSocialPost = shouldUploadAttachedMedia();
-	const connection = connections?.find( conn => conn.service_name === 'mastodon' );
 
-	let user;
+	const user = useSelect( select => {
+		const {
+			displayName,
+			profileImage: avatarUrl,
+			username: address,
+		} = select( SOCIAL_STORE_ID ).getConnectionProfileDetails( CONNECTION_SERVICE_MASTODON );
 
-	if ( connection ) {
-		user = {
-			displayName: connection.display_name,
-			avatarUrl: connection.profile_picture,
-			address: connection.username,
-		};
-	}
+		return { displayName, avatarUrl, address };
+	} );
 
 	const firstMediaItem = props.media?.[ 0 ];
 

projects/js-packages/publicize-components/src/components/social-previews/nextdoor.js

@@ -1,7 +1,8 @@
 import { NextdoorPreviews } from '@automattic/social-previews';
+import { useSelect } from '@wordpress/data';
 import React from 'react';
 import useSocialMediaMessage from '../../hooks/use-social-media-message';
-import { getNextdoorDetails } from '../../store/selectors';
+import { SOCIAL_STORE_ID, CONNECTION_SERVICE_NEXTDOOR } from '../../social-store';
 
 /**
  * The linkedin tab component.
@@ -12,7 +13,9 @@ import { getNextdoorDetails } from '../../store/selectors';
 export function Nextdoor( props ) {
 	const { title, url, image, media } = props;
 
-	const { name, profileImage } = getNextdoorDetails();
+	const { displayName: name, profileImage } = useSelect( select =>
+		select( SOCIAL_STORE_ID ).getConnectionProfileDetails( CONNECTION_SERVICE_NEXTDOOR )
+	);
 
 	const { message: text } = useSocialMediaMessage();
 

projects/js-packages/publicize-components/src/components/social-previews/tumblr.js

@@ -1,7 +1,7 @@
 import { TumblrPreviews } from '@automattic/social-previews';
 import { useSelect } from '@wordpress/data';
-import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import useSocialMediaMessage from '../../hooks/use-social-media-message';
+import { SOCIAL_STORE_ID, CONNECTION_SERVICE_TUMBLR } from '../../social-store';
 
 const TumblrPreview = props => {
 	const { content, author } = useSelect( select => {
@@ -15,19 +15,17 @@ const TumblrPreview = props => {
 			author: user?.name,
 		};
 	} );
-	const { connections } = useSocialMediaConnections();
 	const { message } = useSocialMediaMessage();
 
-	const connection = connections?.find( conn => conn.service_name === 'tumblr' );
+	const user = useSelect(
+		select => {
+			const { displayName, profileImage: avatarUrl } =
+				select( SOCIAL_STORE_ID ).getConnectionProfileDetails( CONNECTION_SERVICE_TUMBLR );
 
-	let user;
-
-	if ( connection ) {
-		user = {
-			displayName: connection.display_name || author,
-			avatarUrl: connection.profile_picture,
-		};
-	}
+			return { displayName: displayName || author, avatarUrl };
+		},
+		[ author ]
+	);
 
 	return (
 		<TumblrPreviews { ...props } user={ user } description={ content } customText={ message } />

projects/js-packages/publicize-components/src/components/social-previews/twitter.js

@@ -1,6 +1,7 @@
 import { TwitterPreviews } from '@automattic/social-previews';
 import { useSelect } from '@wordpress/data';
 import React from 'react';
+import { SOCIAL_STORE_ID, CONNECTION_SERVICE_TWITTER } from '../../social-store';
 
 /**
  * The twitter tab component.
@@ -16,10 +17,18 @@ import React from 'react';
 function Twitter( { title, description, image, url, media } ) {
 	const tweets = useSelect(
 		select => {
-			const { getTweetTemplate, getShareMessage } = select( 'jetpack/publicize' );
+			const { getShareMessage } = select( 'jetpack/publicize' );
+			const {
+				displayName: name,
+				profileImage,
+				username: screenName,
+			} = select( SOCIAL_STORE_ID ).getConnectionProfileDetails( CONNECTION_SERVICE_TWITTER );
+
 			return [
 				{
-					...getTweetTemplate(),
+					name,
+					profileImage,
+					screenName,
 					text: getShareMessage() + ( media.length ? ` ${ url }` : '' ),
 					cardType: image ? 'summary_large_image' : 'summary',
 					title,

projects/js-packages/publicize-components/src/hooks/use-social-media-connections/index.js

@@ -1,4 +1,5 @@
 import { useDispatch, useSelect } from '@wordpress/data';
+import { SOCIAL_STORE_ID } from '../../social-store';
 
 /**
  * Hooks to deal with the social media connections.
@@ -7,9 +8,9 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 export default function useSocialMediaConnections() {
 	const { refreshConnectionTestResults: refresh, toggleConnectionById } =
-		useDispatch( 'jetpack/publicize' );
+		useDispatch( SOCIAL_STORE_ID );
 
-	const connections = useSelect( select => select( 'jetpack/publicize' ).getConnections(), [] );
+	const connections = useSelect( select => select( SOCIAL_STORE_ID ).getConnections(), [] );
 	const skippedConnections = connections
 		.filter( connection => ! connection.enabled )
 		.map( connection => connection.id );