Social: Refresh store on Publicize module toggle via 1 call (#34142)

* Remove previous refresh functionality * Add wrapper to refresh settings in class component on Jetpack Settings * Refresh on social admin page on module toggle change * Remove useEffect * Run useEffect only once on module update * Show toggles instantly on change + only refresh ones on page lifetime * Update ref logic
Automattic · Nov 20, 2023 · 2b51295 · 2b51295
1 parent b5de327
commit 2b51295
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 63 deletions.
diff --git a/projects/js-packages/publicize-components/index.ts b/projects/js-packages/publicize-components/index.ts
@@ -18,6 +18,7 @@ export { default as PublicizePanel } from './src/components/panel';
 export { default as ReviewPrompt } from './src/components/review-prompt';
 export { default as PostPublishReviewPrompt } from './src/components/post-publish-review-prompt';
 export { default as PostPublishOneClickSharing } from './src/components/post-publish-one-click-sharing';
+export { default as RefreshJetpackSocialSettingsWrapper } from './src/components/refresh-jetpack-settings';
 
 export { default as useSocialMediaConnections } from './src/hooks/use-social-media-connections';
 export { default as useSocialMediaMessage } from './src/hooks/use-social-media-message';

diff --git a/projects/js-packages/publicize-components/src/components/auto-conversion/toggle/index.tsx b/projects/js-packages/publicize-components/src/components/auto-conversion/toggle/index.tsx
@@ -1,7 +1,6 @@
 import { ToggleControl } from '@automattic/jetpack-components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
-import { useEffect } from '@wordpress/element';
 import React from 'react';
 import { SOCIAL_STORE_ID } from '../../../social-store';
 import { SocialStoreSelectors } from '../../../types/types';
@@ -16,11 +15,6 @@ type AutoConversionToggleProps = {
 	 * The class name to add to the toggle.
 	 */
 	toggleClass?: string;
-
-	/**
-	 * Whether or not to refresh the settings.
-	 */
-	shouldRefresh?: boolean;
 };
 
 /**
@@ -30,16 +24,9 @@ type AutoConversionToggleProps = {
  * @returns {React.ReactElement} - JSX.Element
  */
 const AutoConversionToggle: React.FC< AutoConversionToggleProps > = ( {
-	shouldRefresh = false,
 	toggleClass,
 	children,
 } ) => {
-	const refreshSettings = useDispatch( SOCIAL_STORE_ID ).refreshAutoConversionSettings;
-
-	useEffect( () => {
-		shouldRefresh && refreshSettings();
-	}, [ shouldRefresh, refreshSettings ] );
-
 	const { isEnabled, isUpdating } = useSelect( select => {
 		const store = select( SOCIAL_STORE_ID ) as SocialStoreSelectors;
 		return {

diff --git a/projects/js-packages/publicize-components/src/components/refresh-jetpack-settings/index.js b/projects/js-packages/publicize-components/src/components/refresh-jetpack-settings/index.js
@@ -0,0 +1,20 @@
+import { useDispatch } from '@wordpress/data';
+import { SOCIAL_STORE_ID } from '../../social-store';
+
+/**
+ * HOC that refreshes all of the Jetpack Social settings in the store, to be used in class components.
+ *
+ * @param {object} props - The component props.
+ * @param {boolean} props.shouldRefresh - Whether or not to refresh the settings.
+ * @param {object} props.children - The children to render.
+ * @returns { object } The refreshJetpackSocialSettings function.
+ */
+export default function RefreshJetpackSocialSettingsWrapper( { shouldRefresh, children } ) {
+	const refreshOptions = useDispatch( SOCIAL_STORE_ID ).refreshJetpackSocialSettings;
+
+	if ( shouldRefresh ) {
+		refreshOptions();
+	}
+
+	return children;
+}
diff --git a/...s/js-packages/publicize-components/src/components/social-image-generator/toggle/index.tsx b/...s/js-packages/publicize-components/src/components/social-image-generator/toggle/index.tsx
@@ -1,7 +1,6 @@
 import { ToggleControl } from '@automattic/jetpack-components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
-import { useEffect } from '@wordpress/element';
 import React from 'react';
 import { SOCIAL_STORE_ID } from '../../../social-store';
 import { SocialStoreSelectors } from '../../../types/types';
@@ -16,11 +15,6 @@ type SocialImageGeneratorToggleProps = {
 	 * The class name to add to the toggle.
 	 */
 	toggleClass?: string;
-
-	/**
-	 * Whether or not to refresh the settings.
-	 */
-	shouldRefresh?: boolean;
 };
 
 /**
@@ -32,14 +26,7 @@ type SocialImageGeneratorToggleProps = {
 const SocialImageGeneratorToggle: React.FC< SocialImageGeneratorToggleProps > = ( {
 	toggleClass,
 	children,
-	shouldRefresh = false,
 } ) => {
-	const refreshSettings = useDispatch( SOCIAL_STORE_ID ).refreshSocialImageGeneratorSettings;
-
-	useEffect( () => {
-		shouldRefresh && refreshSettings();
-	}, [ refreshSettings, shouldRefresh ] );
-
 	const { isEnabled, isUpdating } = useSelect( select => {
 		const store = select( SOCIAL_STORE_ID ) as SocialStoreSelectors;
 		return {

diff --git a/projects/plugins/jetpack/_inc/client/sharing/features/auto-conversion-section.jsx b/projects/plugins/jetpack/_inc/client/sharing/features/auto-conversion-section.jsx
@@ -9,7 +9,7 @@ import { FormFieldset } from '../../components/forms';
 const AutoConversionSection = () => {
 	return (
 		<FormFieldset>
-			<AutoConversionToggle shouldRefresh toggleClass="jp-settings-sharing__sig-toggle">
+			<AutoConversionToggle toggleClass="jp-settings-sharing__sig-toggle">
 				<div>
 					<div>
 						<Text>

diff --git a/projects/plugins/jetpack/_inc/client/sharing/features/social-image-generator-section.jsx b/projects/plugins/jetpack/_inc/client/sharing/features/social-image-generator-section.jsx
@@ -10,7 +10,7 @@ import './style.scss';
 const SocialImageGeneratorSection = () => {
 	return (
 		<FormFieldset>
-			<SocialImageGeneratorToggle shouldRefresh toggleClass="jp-settings-sharing__sig-toggle">
+			<SocialImageGeneratorToggle toggleClass="jp-settings-sharing__sig-toggle">
 				<div>
 					<Text>
 						<strong>{ __( 'Enable Social Image Generator', 'jetpack' ) }</strong>

diff --git a/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx b/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx
@@ -1,4 +1,5 @@
 import { getRedirectUrl } from '@automattic/jetpack-components';
+import { RefreshJetpackSocialSettingsWrapper } from '@automattic/jetpack-publicize-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import Card from 'components/card';
@@ -154,10 +155,14 @@ export const Publicize = withModuleSettingsFormHelpers(
 							>
 								{ __( 'Automatically share your posts to social networks', 'jetpack' ) }
 							</ModuleToggle>
-							{ shouldShowChildElements && hasAutoConversion && <AutoConversionSection /> }
-							{ shouldShowChildElements && hasSocialImageGenerator && (
-								<SocialImageGeneratorSection />
-							) }
+							<RefreshJetpackSocialSettingsWrapper
+								shouldRefresh={ ! isActive && this.props.isSavingAnyOption( 'publicize' ) }
+							>
+								{ shouldShowChildElements && hasAutoConversion && <AutoConversionSection /> }
+								{ shouldShowChildElements && hasSocialImageGenerator && (
+									<SocialImageGeneratorSection />
+								) }
+							</RefreshJetpackSocialSettingsWrapper>
 						</SettingsGroup>
 					) }
 

diff --git a/projects/plugins/social/src/js/components/admin-page/index.jsx b/projects/plugins/social/src/js/components/admin-page/index.jsx
@@ -7,8 +7,8 @@ import {
 } 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 { useState, useCallback } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useState, useCallback, useEffect, useRef } from '@wordpress/element';
 import React from 'react';
 import AdvancedUpsellNotice from '../advanced-upsell-notice';
 import AutoConversionToggle from '../auto-conversion-toggle';
@@ -28,6 +28,8 @@ const Admin = () => {
 	const showConnectionCard = ! isRegistered || ! isUserConnected;
 	const [ forceDisplayPricingPage, setForceDisplayPricingPage ] = useState( false );
 
+	const refreshJetpackSocialSettings = useDispatch( SOCIAL_STORE_ID ).refreshJetpackSocialSettings;
+
 	const onUpgradeToggle = useCallback( () => setForceDisplayPricingPage( true ), [] );
 	const onPricingPageDismiss = useCallback( () => setForceDisplayPricingPage( false ), [] );
 
@@ -56,6 +58,24 @@ const Admin = () => {
 		};
 	} );
 
+	const hasEnabledModule = useRef( isModuleEnabled );
+
+	useEffect( () => {
+		if (
+			isModuleEnabled &&
+			! hasEnabledModule.current &&
+			( isAutoConversionAvailable || isSocialImageGeneratorAvailable )
+		) {
+			hasEnabledModule.current = true;
+			refreshJetpackSocialSettings();
+		}
+	}, [
+		isAutoConversionAvailable,
+		isModuleEnabled,
+		isSocialImageGeneratorAvailable,
+		refreshJetpackSocialSettings,
+	] );
+
 	const moduleName = `Jetpack Social ${ pluginVersion }`;
 
 	if ( showConnectionCard ) {
@@ -89,11 +109,11 @@ const Admin = () => {
 						{ shouldShowAdvancedPlanNudge && <AdvancedUpsellNotice /> }
 						<InstagramNotice onUpgrade={ onUpgradeToggle } />
 						<SocialModuleToggle />
-						{ ! isUpdatingJetpackSettings && isModuleEnabled && isAutoConversionAvailable && (
-							<AutoConversionToggle shouldRefresh />
+						{ isModuleEnabled && isAutoConversionAvailable && (
+							<AutoConversionToggle disabled={ isUpdatingJetpackSettings } />
 						) }
-						{ ! isUpdatingJetpackSettings && isModuleEnabled && isSocialImageGeneratorAvailable && (
-							<SocialImageGeneratorToggle shouldRefresh />
+						{ isModuleEnabled && isSocialImageGeneratorAvailable && (
+							<SocialImageGeneratorToggle disabled={ isUpdatingJetpackSettings } />
 						) }
 					</AdminSection>
 					<AdminSectionHero>

diff --git a/projects/plugins/social/src/js/components/auto-conversion-toggle/index.tsx b/projects/plugins/social/src/js/components/auto-conversion-toggle/index.tsx
@@ -3,7 +3,6 @@ import { SOCIAL_STORE_ID } from '@automattic/jetpack-publicize-components';
 import { ExternalLink } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { createInterpolateElement, useCallback } from '@wordpress/element';
-import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import React from 'react';
 import ToggleSection from '../toggle-section';
@@ -12,20 +11,12 @@ import styles from './styles.module.scss';
 
 type AutoConversionToggleProps = {
 	/**
-	 * Whether or not to refresh the settings.
+	 * If the toggle is disabled.
 	 */
-	shouldRefresh?: boolean;
+	disabled?: boolean;
 };
 
-const AutoConversionToggle: React.FC< AutoConversionToggleProps > = ( {
-	shouldRefresh = false,
-} ) => {
-	const refreshSettings = useDispatch( SOCIAL_STORE_ID ).refreshAutoConversionSettings;
-
-	useEffect( () => {
-		shouldRefresh && refreshSettings();
-	}, [ shouldRefresh, refreshSettings ] );
-
+const AutoConversionToggle: React.FC< AutoConversionToggleProps > = ( { disabled } ) => {
 	const { isEnabled, isUpdating } = useSelect( select => {
 		const store = select( SOCIAL_STORE_ID ) as SocialStoreSelectors;
 		return {
@@ -46,7 +37,7 @@ const AutoConversionToggle: React.FC< AutoConversionToggleProps > = ( {
 	return (
 		<ToggleSection
 			title={ __( 'Automatically convert images for compatibility', 'jetpack-social' ) }
-			disabled={ isUpdating }
+			disabled={ isUpdating || disabled }
 			checked={ isEnabled }
 			onChange={ toggleStatus }
 		>

diff --git a/projects/plugins/social/src/js/components/social-image-generator-toggle/index.tsx b/projects/plugins/social/src/js/components/social-image-generator-toggle/index.tsx
@@ -9,22 +9,16 @@ import ToggleSection from '../toggle-section';
 import { SocialStoreSelectors } from '../types/types';
 import styles from './styles.module.scss';
 
-interface SocialImageGeneratorToggleProps {
+type SocialImageGeneratorToggleProps = {
 	/**
-	 * Whether or not to refresh the settings.
+	 * If the toggle is disabled.
 	 */
-	shouldRefresh: boolean;
-}
+	disabled?: boolean;
+};
 
 const SocialImageGeneratorToggle: React.FC< SocialImageGeneratorToggleProps > = ( {
-	shouldRefresh,
+	disabled,
 } ) => {
-	const refreshSettings = useDispatch( SOCIAL_STORE_ID ).refreshSocialImageGeneratorSettings;
-
-	useEffect( () => {
-		shouldRefresh && refreshSettings();
-	}, [ shouldRefresh, refreshSettings ] );
-
 	const [ currentTemplate, setCurrentTemplate ] = useState< string | null >( null );
 	const { isEnabled, isUpdating, defaultTemplate } = useSelect( select => {
 		const store = select( SOCIAL_STORE_ID ) as SocialStoreSelectors;
@@ -71,7 +65,7 @@ const SocialImageGeneratorToggle: React.FC< SocialImageGeneratorToggleProps > =
 	return (
 		<ToggleSection
 			title={ __( 'Enable Social Image Generator', 'jetpack-social' ) }
-			disabled={ isUpdating }
+			disabled={ isUpdating || disabled }
 			checked={ isEnabled }
 			onChange={ toggleStatus }
 		>