Get rid of jetpack/publicize store (#34111)

* Move store sections to separate utility functions * Update consumer components * Get rid of lodash and refx deps * Add changelog * Update SIG settings type * Rename getImageGeneratorSettings back to getImageGeneratorPostSettings * Unify connection availability check * Add changelog * @wordpress/data isn't made to work well with TypeScript * Fix unit tests * Add unit tests
Automattic · Nov 16, 2023 · bf9d7e8 · bf9d7e8
1 parent 8969ebb
commit bf9d7e8
Show file tree

Hide file tree

Showing 52 changed files with 680 additions and 411 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/js-packages/publicize-components/changelog/update-remove-jetpack-publicize-store b/projects/js-packages/publicize-components/changelog/update-remove-jetpack-publicize-store
@@ -0,0 +1,4 @@
+Significance: patch
+Type: removed
+
+Removed jetpack/publicize store
diff --git a/projects/js-packages/publicize-components/index.ts b/projects/js-packages/publicize-components/index.ts
@@ -1,7 +1,6 @@
 //TODO: Work out a more explicit way of initialising the store
 //where it's needed. It's not clear if we'll always want the
 //store for the components, but at the moment they're tied.
-import './src/store';
 import './src/social-store';
 
 export { default as Connection } from './src/components/connection';
@@ -26,6 +25,7 @@ export { default as useSharePost } from './src/hooks/use-share-post';
 export { default as useDismissNotice } from './src/hooks/use-dismiss-notice';
 
 export * from './src/social-store';
+export * from './src/utils';
 export * from './src/components/share-post';
 export * from './src/hooks/use-saving-post';
 export * from './src/components/share-buttons';
diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json
@@ -39,10 +39,8 @@
 		"@wordpress/icons": "9.36.0",
 		"@wordpress/notices": "4.13.0",
 		"classnames": "2.3.2",
-		"lodash": "4.17.21",
 		"prop-types": "15.8.1",
 		"react-page-visibility": "7.0.0",
-		"refx": "3.1.1",
 		"rememo": "4.0.1"
 	},
 	"devDependencies": {

diff --git a/projects/js-packages/publicize-components/src/components/connection/index.js b/projects/js-packages/publicize-components/src/components/connection/index.js
@@ -10,7 +10,6 @@ import { Notice, ExternalLink } from '@wordpress/components';
 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';
@@ -47,7 +46,7 @@ class PublicizeConnection extends Component {
 	 *
 	 * @returns {boolean} True if connection must be reauthenticated.
 	 */
-	connectionNeedsReauth = () => includes( this.props.mustReauthConnections, this.props.name );
+	connectionNeedsReauth = () => this.props.mustReauthConnections.includes( this.props.name );
 
 	onConnectionChange = () => {
 		const { id } = this.props;

diff --git a/projects/js-packages/publicize-components/src/components/connection/test/index.test.js b/projects/js-packages/publicize-components/src/components/connection/test/index.test.js
@@ -2,7 +2,6 @@ import { jest } from '@jest/globals';
 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';
 

diff --git a/projects/js-packages/publicize-components/src/components/form/index.js b/projects/js-packages/publicize-components/src/components/form/index.js
@@ -22,15 +22,15 @@ import useRefreshAutoConversionSettings from '../../hooks/use-refresh-auto-conve
 import useRefreshConnections from '../../hooks/use-refresh-connections';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import useSocialMediaMessage from '../../hooks/use-social-media-message';
-import { SOCIAL_STORE_ID } from '../../social-store';
+import { CONNECTION_SERVICE_INSTAGRAM_BUSINESS, SOCIAL_STORE_ID } from '../../social-store';
+import { getSupportedAdditionalConnections } from '../../utils';
 import PublicizeConnection from '../connection';
 import MediaSection from '../media-section';
 import MessageBoxControl from '../message-box-control';
 import Notice from '../notice';
 import PublicizeSettingsButton from '../settings-button';
 import styles from './styles.module.scss';
 
-const PUBLICIZE_STORE_ID = 'jetpack/publicize';
 const MONTH_IN_SECONDS = 30 * 24 * 60 * 60;
 
 const checkConnectionCode = ( connection, code ) =>
@@ -69,17 +69,13 @@ export default function PublicizeForm( {
 	const { isEnabled: isSocialImageGeneratorEnabledForPost } = useImageGeneratorConfig();
 	const { dismissNotice, shouldShowNotice, NOTICES } = useDismissNotice();
 
-	const { isInstagramConnectionSupported } = useSelect( select => ( {
-		isInstagramConnectionSupported: select( PUBLICIZE_STORE_ID ).isInstagramConnectionSupported(),
-	} ) );
-
 	const hasInstagramConnection = connections.some(
 		connection => connection.service_name === 'instagram-business'
 	);
 
 	const shouldShowInstagramNotice =
 		! hasInstagramConnection &&
-		isInstagramConnectionSupported &&
+		getSupportedAdditionalConnections().includes( CONNECTION_SERVICE_INSTAGRAM_BUSINESS ) &&
 		shouldShowNotice( NOTICES.instagram );
 
 	const onDismissInstagramNotice = useCallback( () => {

diff --git a/projects/js-packages/publicize-components/src/components/share-buttons/useShareButtonText.ts b/projects/js-packages/publicize-components/src/components/share-buttons/useShareButtonText.ts
@@ -1,5 +1,6 @@
 import { useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
+import { getShareMessage } from '../../utils';
 
 /**
  * Prepares the text to share.
@@ -15,8 +16,7 @@ export function useShareButtonText() {
 		return {
 			link: getEditedPostAttribute( 'link' ),
 			message:
-				// eslint-disable-next-line @typescript-eslint/no-explicit-any
-				( select( 'jetpack/publicize' ) as any ).getShareMessage() ||
+				getShareMessage() ||
 				getEditedPostAttribute( 'meta' )?.jetpack_seo_html_title ||
 				getEditedPostAttribute( 'title' ),
 		};

diff --git a/projects/js-packages/publicize-components/src/components/social-previews/mastodon.js b/projects/js-packages/publicize-components/src/components/social-previews/mastodon.js
@@ -3,7 +3,7 @@ import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import useSocialMediaMessage from '../../hooks/use-social-media-message';
 import { SOCIAL_STORE_ID, CONNECTION_SERVICE_MASTODON } from '../../social-store';
-import { shouldUploadAttachedMedia } from '../../store/selectors';
+import { shouldUploadAttachedMedia } from '../../utils';
 
 const MastodonPreview = props => {
 	const { message } = useSocialMediaMessage();

diff --git a/projects/js-packages/publicize-components/src/components/social-previews/modal.js b/projects/js-packages/publicize-components/src/components/social-previews/modal.js
@@ -12,7 +12,7 @@ import {
 	getAttachedMedia,
 	getImageGeneratorPostSettings,
 	shouldUploadAttachedMedia,
-} from '../../store/selectors';
+} from '../../utils';
 import { getSigImageUrl } from '../generated-image-preview/utils';
 import { useAvailableSerivces } from './useAvailableServices';
 import { getMediaSourceUrl } from './utils';

diff --git a/projects/js-packages/publicize-components/src/components/social-previews/twitter.js b/projects/js-packages/publicize-components/src/components/social-previews/twitter.js
@@ -2,6 +2,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';
+import { getShareMessage } from '../../utils';
 
 /**
  * The twitter tab component.
@@ -17,7 +18,6 @@ import { SOCIAL_STORE_ID, CONNECTION_SERVICE_TWITTER } from '../../social-store'
 function Twitter( { title, description, image, url, media } ) {
 	const tweets = useSelect(
 		select => {
-			const { getShareMessage } = select( 'jetpack/publicize' );
 			const {
 				displayName: name,
 				profileImage,

diff --git a/...s/js-packages/publicize-components/src/components/social-previews/useAvailableServices.js b/...s/js-packages/publicize-components/src/components/social-previews/useAvailableServices.js
@@ -1,7 +1,12 @@
 import { SocialServiceIcon } from '@automattic/jetpack-components';
-import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import React, { useMemo } from 'react';
+import {
+	CONNECTION_SERVICE_INSTAGRAM_BUSINESS,
+	CONNECTION_SERVICE_MASTODON,
+	CONNECTION_SERVICE_NEXTDOOR,
+} from '../../social-store';
+import { getSupportedAdditionalConnections } from '../../utils';
 import FacebookPreview from './facebook';
 import GoogleSearch from './google-search';
 import { Instagram } from './instagram';
@@ -17,15 +22,12 @@ import Twitter from './twitter';
  * @returns {Array<{title: string, icon: React.Component, name: string, preview: React.Component}>} The list of available services.
  */
 export function useAvailableSerivces() {
-	const { isInstagramSupported, isMastodonSupported, isNextdoorSupported } = useSelect( select => {
-		const store = select( 'jetpack/publicize' );
-
-		return {
-			isInstagramSupported: store.isInstagramConnectionSupported(),
-			isMastodonSupported: store.isMastodonConnectionSupported(),
-			isNextdoorSupported: store.isNextdoorConnectionSupported(),
-		};
-	} );
+	const additionalConnections = getSupportedAdditionalConnections();
+	const isInstagramSupported = additionalConnections.includes(
+		CONNECTION_SERVICE_INSTAGRAM_BUSINESS
+	);
+	const isMastodonSupported = additionalConnections.includes( CONNECTION_SERVICE_MASTODON );
+	const isNextdoorSupported = additionalConnections.includes( CONNECTION_SERVICE_NEXTDOOR );
 
 	return useMemo(
 		() =>

diff --git a/projects/js-packages/publicize-components/src/hooks/use-attached-media/index.js b/projects/js-packages/publicize-components/src/hooks/use-attached-media/index.js
@@ -1,8 +1,7 @@
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { useCallback } from '@wordpress/element';
-
-const PUBLICIZE_STORE = 'jetpack/publicize';
+import { getAttachedMedia, getJetpackSocialOptions, shouldUploadAttachedMedia } from '../../utils';
 
 /**
  * @typedef {object} AttachedMediaHook
@@ -20,26 +19,20 @@ const PUBLICIZE_STORE = 'jetpack/publicize';
 export default function useAttachedMedia() {
 	const { editPost } = useDispatch( editorStore );
 
-	const { shouldUploadAttachedMedia, attachedMedia, currentOptions } = useSelect( select => ( {
-		shouldUploadAttachedMedia: select( PUBLICIZE_STORE ).shouldUploadAttachedMedia(),
-		attachedMedia: select( PUBLICIZE_STORE ).getAttachedMedia(),
-		currentOptions: select( PUBLICIZE_STORE ).getJetpackSocialOptions(),
-	} ) );
-
 	const updateJetpackSocialOptions = useCallback(
 		( key, value ) => {
 			editPost( {
 				meta: {
-					jetpack_social_options: { ...currentOptions, [ key ]: value },
+					jetpack_social_options: { ...getJetpackSocialOptions(), [ key ]: value },
 				},
 			} );
 		},
-		[ currentOptions, editPost ]
+		[ editPost ]
 	);
 
 	return {
-		attachedMedia,
-		shouldUploadAttachedMedia,
+		attachedMedia: getAttachedMedia(),
+		shouldUploadAttachedMedia: shouldUploadAttachedMedia(),
 		updateAttachedMedia: media => updateJetpackSocialOptions( 'attached_media', media ),
 		updateShouldUploadAttachedMedia: option =>
 			updateJetpackSocialOptions( 'should_upload_attached_media', option ),

diff --git a/projects/js-packages/publicize-components/src/hooks/use-image-generator-config/index.js b/projects/js-packages/publicize-components/src/hooks/use-image-generator-config/index.js
@@ -1,8 +1,7 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { useCallback } from '@wordpress/element';
-
-const PUBLICIZE_STORE_ID = 'jetpack/publicize';
+import { getJetpackSocialOptions, getImageGeneratorPostSettings } from '../../utils';
 
 const getCurrentSettings = ( sigSettings, isPostPublished ) => ( {
 	isEnabled: sigSettings?.enabled ?? ! isPostPublished,
@@ -34,11 +33,6 @@ const getCurrentSettings = ( sigSettings, isPostPublished ) => ( {
 export default function useImageGeneratorConfig() {
 	const { editPost } = useDispatch( editorStore );
 
-	const { postSettings, currentOptions } = useSelect( select => ( {
-		postSettings: select( PUBLICIZE_STORE_ID ).getImageGeneratorPostSettings(),
-		currentOptions: select( PUBLICIZE_STORE_ID ).getJetpackSocialOptions(),
-	} ) );
-
 	const { isPostPublished } = useSelect( select => ( {
 		isPostPublished: select( editorStore ).isCurrentPostPublished(),
 	} ) );
@@ -47,31 +41,34 @@ export default function useImageGeneratorConfig() {
 		settings => {
 			editPost( {
 				meta: {
-					jetpack_social_options: { ...currentOptions, image_generator_settings: settings },
+					jetpack_social_options: {
+						...getJetpackSocialOptions(),
+						image_generator_settings: settings,
+					},
 				},
 			} );
 		},
-		[ currentOptions, editPost ]
+		[ editPost ]
 	);
 
 	const updateProperty = useCallback(
 		( key, value ) => {
-			const settings = { ...postSettings, [ key ]: value };
+			const settings = { ...getImageGeneratorPostSettings(), [ key ]: value };
 			_commitPostUpdate( settings );
 		},
-		[ postSettings, _commitPostUpdate ]
+		[ _commitPostUpdate ]
 	);
 
 	const updateSettings = useCallback(
 		settings => {
-			const newSettings = { ...postSettings, ...settings };
+			const newSettings = { ...getImageGeneratorPostSettings(), ...settings };
 			_commitPostUpdate( newSettings );
 		},
-		[ postSettings, _commitPostUpdate ]
+		[ _commitPostUpdate ]
 	);
 
 	return {
-		...getCurrentSettings( currentOptions?.image_generator_settings, isPostPublished ),
+		...getCurrentSettings( getJetpackSocialOptions().image_generator_settings, isPostPublished ),
 		setIsEnabled: value => updateProperty( 'enabled', value ),
 		setToken: value => updateProperty( 'token', value ),
 		updateSettings,

diff --git a/projects/js-packages/publicize-components/src/hooks/use-publicize-config/index.js b/projects/js-packages/publicize-components/src/hooks/use-publicize-config/index.js
@@ -4,8 +4,13 @@ import {
 	getJetpackData,
 	getSiteFragment,
 } from '@automattic/jetpack-shared-extension-utils';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
+import {
+	isPublicizeEnabled as isPublicizeFeatureEnabled,
+	getJetpackSocialPostAlreadyShared,
+	togglePublicizeFeature,
+} from '../../utils';
 
 const republicizeFeatureName = 'republicize';
 
@@ -17,16 +22,13 @@ const republicizeFeatureName = 'republicize';
  * for toggling support for the current post.
  */
 export default function usePublicizeConfig() {
-	const { togglePublicizeFeature } = useDispatch( 'jetpack/publicize' );
 	const sharesData = getJetpackData()?.social?.sharesData ?? {};
 	const isShareLimitEnabled = sharesData.is_share_limit_enabled;
 	const isRePublicizeFeatureAvailable =
 		getJetpackExtensionAvailability( republicizeFeatureName )?.available || isShareLimitEnabled;
 	const isPostPublished = useSelect( select => select( editorStore ).isCurrentPostPublished(), [] );
-	const isPostAlreadyShared = useSelect(
-		select => select( 'jetpack/publicize' ).getJetpackSocialPostAlreadyShared(),
-		[]
-	);
+	const isPostAlreadyShared = getJetpackSocialPostAlreadyShared();
+
 	const connectionsRootUrl =
 		getJetpackData()?.social?.publicizeConnectionsUrl ??
 		'https://wordpress.com/marketing/connections/';
@@ -37,10 +39,7 @@ export default function usePublicizeConfig() {
 	 * and usually is handled from the UI (main toggle control),
 	 * dispathicng the togglePublicizeFeature() action (jetpack/publicize).
 	 */
-	const isPublicizeEnabledMeta = useSelect(
-		select => select( 'jetpack/publicize' ).getFeatureEnableState(),
-		[]
-	);
+	const isPublicizeEnabledMeta = isPublicizeFeatureEnabled();
 
 	/*
 	 * isRePublicizeUpgradableViaUpsell:

diff --git a/projects/js-packages/publicize-components/src/hooks/use-social-media-message/index.js b/projects/js-packages/publicize-components/src/hooks/use-social-media-message/index.js
@@ -1,5 +1,6 @@
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
+import { getShareMessage, getShareMessageMaxLength } from '../../utils';
 
 /**
  * @typedef {object} MessageHook
@@ -16,17 +17,9 @@ import { store as editorStore } from '@wordpress/editor';
 export default function useSocialMediaMessage() {
 	const { editPost } = useDispatch( editorStore );
 
-	const { message, maxLength } = useSelect(
-		select => ( {
-			message: select( 'jetpack/publicize' ).getShareMessage(),
-			maxLength: select( 'jetpack/publicize' ).getShareMessageMaxLength(),
-		} ),
-		[]
-	);
-
 	return {
-		message,
-		maxLength,
+		message: getShareMessage(),
+		maxLength: getShareMessageMaxLength(),
 		updateMessage: function ( text ) {
 			editPost( {
 				meta: {