Social: Fix connection refresh logic

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

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';

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": {

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 (
 		<Wrapper>
 			{

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 (
 		<PanelWrapper { ...wrapperProps }>
 			{ children }
@@ -64,7 +67,6 @@ const PublicizePanel = ( { prePublish, children } ) => {
 						/>
 					) }
 
-					<PublicizeConnectionVerify />
 					<PublicizeForm />
 					<SharePostRow />
 				</Fragment>

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();