From 2b51295c517742a548d23cec04f43d5700e5097b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gergely=20M=C3=A1rk=20Juh=C3=A1sz?= <36671565+gmjuhasz@users.noreply.github.com> Date: Mon, 20 Nov 2023 11:59:05 +0100 Subject: [PATCH] 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 --- .../js-packages/publicize-components/index.ts | 1 + .../auto-conversion/toggle/index.tsx | 13 -------- .../refresh-jetpack-settings/index.js | 20 ++++++++++++ .../social-image-generator/toggle/index.tsx | 13 -------- .../features/auto-conversion-section.jsx | 2 +- .../social-image-generator-section.jsx | 2 +- .../jetpack/_inc/client/sharing/publicize.jsx | 13 +++++--- .../src/js/components/admin-page/index.jsx | 32 +++++++++++++++---- .../auto-conversion-toggle/index.tsx | 17 +++------- .../social-image-generator-toggle/index.tsx | 18 ++++------- 10 files changed, 68 insertions(+), 63 deletions(-) create mode 100644 projects/js-packages/publicize-components/src/components/refresh-jetpack-settings/index.js diff --git a/projects/js-packages/publicize-components/index.ts b/projects/js-packages/publicize-components/index.ts index 061990860c32f..c60ea1876c03f 100644 --- 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 index ccea8a824cc5a..826f171c97364 100644 --- 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 new file mode 100644 index 0000000000000..db0b488bb2000 --- /dev/null +++ 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/projects/js-packages/publicize-components/src/components/social-image-generator/toggle/index.tsx b/projects/js-packages/publicize-components/src/components/social-image-generator/toggle/index.tsx index fb9427a72a9d5..154b38b034f8d 100644 --- a/projects/js-packages/publicize-components/src/components/social-image-generator/toggle/index.tsx +++ b/projects/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 index 8628fc7fa47fe..42d14af49b42d 100644 --- 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 ( - +
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 index 75f01d9c38367..a38602f92add5 100644 --- 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 ( - +
{ __( 'Enable Social Image Generator', 'jetpack' ) } diff --git a/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx b/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx index 10e7a1fefa2b5..39a477d22ec09 100644 --- 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' ) } - { shouldShowChildElements && hasAutoConversion && } - { shouldShowChildElements && hasSocialImageGenerator && ( - - ) } + + { shouldShowChildElements && hasAutoConversion && } + { shouldShowChildElements && hasSocialImageGenerator && ( + + ) } + ) } diff --git a/projects/plugins/social/src/js/components/admin-page/index.jsx b/projects/plugins/social/src/js/components/admin-page/index.jsx index a4b468aea4a2a..ef9f8bcbb4a33 100644 --- 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 && } - { ! isUpdatingJetpackSettings && isModuleEnabled && isAutoConversionAvailable && ( - + { isModuleEnabled && isAutoConversionAvailable && ( + ) } - { ! isUpdatingJetpackSettings && isModuleEnabled && isSocialImageGeneratorAvailable && ( - + { isModuleEnabled && isSocialImageGeneratorAvailable && ( + ) } 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 index f2f9f177dea0a..7b26d417e0fdf 100644 --- 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 ( 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 index 816f05d2a703e..9220bd8a0df27 100644 --- 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 (