diff --git a/projects/js-packages/publicize-components/changelog/fix-social-connection-refresh-logic b/projects/js-packages/publicize-components/changelog/fix-social-connection-refresh-logic new file mode 100644 index 0000000000000..3df284a7a854d --- /dev/null +++ b/projects/js-packages/publicize-components/changelog/fix-social-connection-refresh-logic @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Fixed double request issue and simplifed refresh logic diff --git a/projects/js-packages/publicize-components/index.ts b/projects/js-packages/publicize-components/index.ts index 38bdb0540595e..2f5bab9bc5780 100644 --- a/projects/js-packages/publicize-components/index.ts +++ b/projects/js-packages/publicize-components/index.ts @@ -4,7 +4,6 @@ import './src/social-store'; export { default as Connection } from './src/components/connection'; -export { default as ConnectionVerify } from './src/components/connection-verify'; export { default as Form } from './src/components/form'; export { default as SocialPreviewsModal } from './src/components/social-previews/modal'; export { default as SocialPreviewsPanel } from './src/components/social-previews/panel'; diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json index d60c477da9f03..57393ea874bd9 100644 --- a/projects/js-packages/publicize-components/package.json +++ b/projects/js-packages/publicize-components/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@automattic/jetpack-publicize-components", - "version": "0.56.1", + "version": "0.56.2-alpha", "description": "A library of JS components required by the Publicize editor plugin", "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/publicize-components/#readme", "bugs": { diff --git a/projects/js-packages/publicize-components/src/components/connection-verify/index.js b/projects/js-packages/publicize-components/src/components/connection-verify/index.js deleted file mode 100644 index 17343f0628ce3..0000000000000 --- a/projects/js-packages/publicize-components/src/components/connection-verify/index.js +++ /dev/null @@ -1,33 +0,0 @@ -/** - * Publicize connections verification component. - * - * Component to create Ajax request to check - * all connections. If any connection tests failed, - * a refresh link may be provided to the user. If - * no connection tests fail, this component will - * not render anything. - */ - -import { compose } from '@wordpress/compose'; -import { withDispatch, withSelect } from '@wordpress/data'; -import { Component } from '@wordpress/element'; -import { SOCIAL_STORE_ID } from '../../social-store'; - -class PublicizeConnectionVerify extends Component { - componentDidMount() { - this.props.refreshConnections(); - } - - render() { - return null; - } -} - -export default compose( [ - withSelect( select => ( { - failedConnections: select( SOCIAL_STORE_ID ).getFailedConnections(), - } ) ), - withDispatch( dispatch => ( { - refreshConnections: dispatch( SOCIAL_STORE_ID ).refreshConnectionTestResults, - } ) ), -] )( PublicizeConnectionVerify ); diff --git a/projects/js-packages/publicize-components/src/components/form/index.tsx b/projects/js-packages/publicize-components/src/components/form/index.tsx index b4294b35a653f..0da1c62e717bb 100644 --- a/projects/js-packages/publicize-components/src/components/form/index.tsx +++ b/projects/js-packages/publicize-components/src/components/form/index.tsx @@ -18,7 +18,6 @@ import useImageGeneratorConfig from '../../hooks/use-image-generator-config'; import useMediaDetails from '../../hooks/use-media-details'; import useMediaRestrictions, { NO_MEDIA_ERROR } from '../../hooks/use-media-restrictions'; import useRefreshAutoConversionSettings from '../../hooks/use-refresh-auto-conversion-settings'; -import useRefreshConnections from '../../hooks/use-refresh-connections'; import useSocialMediaConnections from '../../hooks/use-social-media-connections'; import { store as socialStore } from '../../social-store'; import { ThemedConnectionsModal as ManageConnectionsModal } from '../manage-connections-modal'; @@ -41,7 +40,6 @@ import { ValidationNotice } from './validation-notice'; */ export default function PublicizeForm() { const { connections, hasConnections, hasEnabledConnections } = useSocialMediaConnections(); - const refreshConnections = useRefreshConnections(); const { isEnabled: isSocialImageGeneratorEnabledForPost } = useImageGeneratorConfig(); const { shouldShowNotice, NOTICES } = useDismissNotice(); const { @@ -94,8 +92,6 @@ export default function PublicizeForm() { refreshAutoConversionSettings(); } - refreshConnections(); - return ( { diff --git a/projects/js-packages/publicize-components/src/components/panel/index.jsx b/projects/js-packages/publicize-components/src/components/panel/index.jsx index a9c6d1ec7a2de..c96cff189deb1 100644 --- a/projects/js-packages/publicize-components/src/components/panel/index.jsx +++ b/projects/js-packages/publicize-components/src/components/panel/index.jsx @@ -9,9 +9,9 @@ import { store as editorStore } from '@wordpress/editor'; import { Fragment } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import usePublicizeConfig from '../../hooks/use-publicize-config'; +import useRefreshConnections from '../../hooks/use-refresh-connections'; import { usePostJustPublished } from '../../hooks/use-saving-post'; import useSelectSocialMediaConnections from '../../hooks/use-social-media-connections'; -import PublicizeConnectionVerify from '../connection-verify'; import PublicizeForm from '../form'; import { ManualSharing } from '../manual-sharing'; import { SharePostRow } from '../share-post'; @@ -21,6 +21,7 @@ import './global.scss'; const PublicizePanel = ( { prePublish, children } ) => { const { refresh, hasConnections, hasEnabledConnections } = useSelectSocialMediaConnections(); const isPostPublished = useSelect( select => select( editorStore ).isCurrentPostPublished(), [] ); + const refreshConnections = useRefreshConnections(); const { isPublicizeEnabled, hidePublicizeFeature, togglePublicizeFeature } = usePublicizeConfig(); @@ -42,6 +43,8 @@ const PublicizePanel = ( { prePublish, children } ) => { ? {} : { title: __( 'Share this post', 'jetpack' ), className: styles.panel }; + refreshConnections(); + return ( { children } @@ -64,7 +67,6 @@ const PublicizePanel = ( { prePublish, children } ) => { /> ) } - diff --git a/projects/js-packages/publicize-components/src/hooks/use-refresh-connections/index.js b/projects/js-packages/publicize-components/src/hooks/use-refresh-connections/index.js index 8ac24950829f5..9a4c0556372cc 100644 --- a/projects/js-packages/publicize-components/src/hooks/use-refresh-connections/index.js +++ b/projects/js-packages/publicize-components/src/hooks/use-refresh-connections/index.js @@ -10,11 +10,20 @@ import useSelectSocialMediaConnections from '../use-social-media-connections'; */ export default function useRefreshConnections() { const shouldAutoRefresh = useRef( false ); + const isInitialRefresh = useRef( true ); + const pageHasFocus = usePageVisibility(); const { refresh: refreshConnections } = useSelectSocialMediaConnections(); + + const initialRefresh = useDebounce( refreshConnections, 0 ); const debouncedRefresh = useDebounce( refreshConnections, 2000 ); return () => { + if ( isInitialRefresh.current ) { + initialRefresh(); + isInitialRefresh.current = false; + } + if ( ! pageHasFocus ) { shouldAutoRefresh.current = true; debouncedRefresh.cancel();