diff --git a/projects/js-packages/publicize-components/src/social-store/types.ts b/projects/js-packages/publicize-components/src/social-store/types.ts index 5fa80e4675fca..2d0e4d16f2fca 100644 --- a/projects/js-packages/publicize-components/src/social-store/types.ts +++ b/projects/js-packages/publicize-components/src/social-store/types.ts @@ -44,6 +44,8 @@ export type SocialStoreState = { declare global { interface Window { - jetpackSocialInitialState?: SocialStoreState; + jetpackSocialInitialState?: SocialStoreState & { + is_publicize_enabled: boolean; + }; } } diff --git a/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx b/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx index 7704d7552c32d..4df8ae5571e75 100644 --- a/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx +++ b/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx @@ -27,6 +27,14 @@ export const Publicize = withModuleSettingsFormHelpers( } ); } + componentDidUpdate() { + const isActive = this.props.getOptionValue( 'publicize' ); + // Reload the page if Publicize is enabled. + if ( isActive && ! window.Initial_State.socialInitialState.is_publicize_enabled ) { + window.location.reload(); + } + } + render() { const unavailableInOfflineMode = this.props.isUnavailableInOfflineMode( 'publicize' ), isLinked = this.props.isLinked, diff --git a/projects/plugins/social/src/js/components/social-module-toggle/index.tsx b/projects/plugins/social/src/js/components/social-module-toggle/index.tsx index a7aa13805be8d..b1be442997781 100644 --- a/projects/plugins/social/src/js/components/social-module-toggle/index.tsx +++ b/projects/plugins/social/src/js/components/social-module-toggle/index.tsx @@ -21,11 +21,16 @@ const SocialModuleToggle: React.FC = () => { const updateOptions = useDispatch( SOCIAL_STORE_ID ).updateJetpackSettings; - const toggleModule = useCallback( () => { + const toggleModule = useCallback( async () => { const newOption = { publicize_active: ! isModuleEnabled, }; - updateOptions( newOption ); + await updateOptions( newOption ); + + // If the module was enabled, we need to refresh the connection list + if ( newOption.publicize_active && ! window.jetpackSocialInitialState.is_publicize_enabled ) { + window.location.reload(); + } }, [ isModuleEnabled, updateOptions ] ); const [ isSmall ] = useBreakpointMatch( 'sm' );