Social | Migrate shares data from initial state to new script data (#…

…38988)

* Social | Migrate shares data from initial state to new script data

* Add changelog

* Fix the export

projects/js-packages/publicize-components/changelog/update-social-initial-state-migrate-shares-data

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Social: Migrated shares data to the new script data

projects/js-packages/publicize-components/index.ts

@@ -35,3 +35,4 @@ export * from './src/hooks/use-saving-post';
 export * from './src/hooks/use-post-meta';
 export * from './src/components/share-buttons';
 export * from './src/components/manage-connections-modal';
+export * from './src/utils/shares-data';

projects/js-packages/publicize-components/src/social-store/reducer/index.js

@@ -1,12 +1,10 @@
 import { combineReducers } from '@wordpress/data';
 import connectionData from './connection-data';
 import jetpackSettings from './jetpack-settings';
-import sharesData from './shares-data';
 import siteData from './site-data';
 import socialImageGeneratorSettings from './social-image-generator-settings';
 
 const reducer = combineReducers( {
-	sharesData,
 	siteData,
 	connectionData,
 	jetpackSettings,

projects/js-packages/publicize-components/src/social-store/selectors/index.js

@@ -1,14 +1,12 @@
 import * as connectionDataSelectors from './connection-data';
 import jetpackSettingSelectors from './jetpack-settings';
-import * as sharesData from './shares-data';
 import siteDataSelectors from './site-data';
 import socialImageGeneratorSettingsSelectors from './social-image-generator-settings';
 
 const selectors = {
 	...siteDataSelectors,
 	...connectionDataSelectors,
 	...jetpackSettingSelectors,
-	...sharesData,
 	...socialImageGeneratorSettingsSelectors,
 	userConnectionUrl: state => state.userConnectionUrl,
 	useAdminUiV1: state => state.useAdminUiV1,

projects/js-packages/publicize-components/src/social-store/types.ts

@@ -1,9 +1,3 @@
-export type SharesData = {
-	to_be_publicized_count: number;
-	publicized_count: number;
-	shared_posts_count: number;
-};
-
 export type ConnectionStatus = 'ok' | 'broken';
 
 export type Connection = {
@@ -40,8 +34,6 @@ export type JetpackSettings = {
 
 // TODO we should have a consistent structure across all the pages - editor, dashboard, admin page etc.
 export type SocialStoreState = {
-	connectionData: ConnectionData;
-	sharesData: SharesData;
 	// on post editor
 	hasPaidPlan?: boolean;
 	// on Jetack Social admin page

projects/js-packages/publicize-components/src/types/types.ts

@@ -1,3 +1,9 @@
+export type SharesData = {
+	to_be_publicized_count: number;
+	publicized_count: number;
+	shared_posts_count: number;
+};
+
 export interface FeatureFlags {
 	useAdminUiV1: boolean;
 }
@@ -22,6 +28,7 @@ export interface SocialScriptData {
 	is_publicize_enabled: boolean;
 	feature_flags: FeatureFlags;
 	supported_services: Array< ConnectionService >;
+	shares_data: SharesData;
 }
 
 type JetpackSettingsSelectors = {
@@ -42,11 +49,6 @@ type ConnectionDataSelectors = {
 	hasConnections: () => boolean;
 };
 
-type SharesDataSelectors = {
-	getSharesCount: () => number;
-	getPostsCount: () => number;
-};
-
 type SiteDataSelectors = {
 	getSiteData: () => Array< object >;
 	getSiteTitle: () => string;
@@ -73,6 +75,5 @@ type SocialImageGeneratorSettingsSelectors = {
  */
 export type SocialStoreSelectors = JetpackSettingsSelectors &
 	ConnectionDataSelectors &
-	SharesDataSelectors &
 	SiteDataSelectors &
 	SocialImageGeneratorSettingsSelectors;

projects/js-packages/publicize-components/src/utils/shares-data.ts

@@ -0,0 +1,47 @@
+import { getSocialScriptData } from './script-data';
+
+/**
+ * Returns the shares data.
+ *
+ * @return {import('../types/types').SharesData} Shares data
+ */
+export function getSharesData() {
+	return getSocialScriptData().shares_data;
+}
+/**
+ * Returns the total number of shares already used.
+ *
+ * @return {number} Total number of shares used
+ */
+export function getSharesUsedCount() {
+	return getSharesData().publicized_count ?? 0;
+}
+
+/**
+ * Returns the number of shares scheduled.
+ *
+ * @return {number} Number of shares scheduled
+ */
+export function getScheduledSharesCount() {
+	return getSharesData().to_be_publicized_count ?? 0;
+}
+
+/**
+ * Returns the total number of shares used and scheduled.
+ *
+ * @return {number} Total number of shares used and scheduled
+ */
+export function getTotalSharesCount() {
+	const count = getSharesUsedCount() + getScheduledSharesCount();
+
+	return Math.max( count, 0 );
+}
+
+/**
+ * Number of posts shared this month
+ *
+ * @return {number} Number of posts shared this month
+ */
+export function getSharedPostsCount() {
+	return getSharesData().shared_posts_count ?? 0;
+}

projects/packages/publicize/changelog/update-social-initial-state-migrate-shares-data

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Social: Migrated shares data to the new script data

projects/packages/publicize/src/class-publicize-script-data.php

@@ -12,6 +12,7 @@
 use Automattic\Jetpack\Current_Plan;
 use Automattic\Jetpack\Publicize\Publicize_Utils as Utils;
 use Automattic\Jetpack\Status\Host;
+use Jetpack_Options;
 
 /**
  * Publicize_Script_Data class.
@@ -84,6 +85,7 @@ public static function get_admin_script_data() {
 			'is_publicize_enabled' => Utils::is_publicize_active(),
 			'feature_flags'        => self::get_feature_flags(),
 			'supported_services'   => array(),
+			'shares_data'          => array(),
 		);
 
 		if ( ! Utils::is_publicize_active() ) {
@@ -102,10 +104,10 @@ public static function get_admin_script_data() {
 			array(
 				'api_paths'          => self::get_api_paths(),
 				'supported_services' => self::get_supported_services(),
+				'shares_data'        => self::get_shares_data(),
 				/**
 				 * 'store'       => self::get_store_script_data(),
 				 * 'urls'        => self::get_urls(),
-				 * 'shares_data' => self::get_shares_data(),
 				 */
 			)
 		);
@@ -153,6 +155,15 @@ public static function has_feature_flag( $feature ): bool {
 		return Current_Plan::supports( 'social-' . $feature );
 	}
 
+	/**
+	 * Get the shares data.
+	 *
+	 * @return ?array
+	 */
+	public static function get_shares_data() {
+		return self::publicize()->get_publicize_shares_info( Jetpack_Options::get_option( 'id' ) );
+	}
+
 	/**
 	 * Get the list of supported Publicize services.
 	 *

projects/plugins/social/changelog/update-social-initial-state-migrate-shares-data

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Social: Migrated shares data to the new script data

projects/plugins/social/src/js/components/header/index.js

@@ -7,7 +7,11 @@ import {
 	getUserLocale,
 } from '@automattic/jetpack-components';
 import { ConnectionError, useConnectionErrorNotice } from '@automattic/jetpack-connection';
-import { store as socialStore } from '@automattic/jetpack-publicize-components';
+import {
+	store as socialStore,
+	getTotalSharesCount,
+	getSharedPostsCount,
+} from '@automattic/jetpack-publicize-components';
 import { getScriptData } from '@automattic/jetpack-script-data';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -18,21 +22,18 @@ import styles from './styles.module.scss';
 const Header = () => {
 	const connectionData = window.jetpackSocialInitialState.connectionData ?? {};
 	const {
+		// TODO - Replace some of these with data from initial state
 		connectionsAdminUrl,
 		hasConnections,
 		isModuleEnabled,
 		newPostUrl,
-		postsCount,
-		totalShareCount,
 	} = useSelect( select => {
 		const store = select( socialStore );
 		return {
 			connectionsAdminUrl: connectionData.adminUrl,
 			hasConnections: store.getConnections().length > 0,
 			isModuleEnabled: store.isModuleEnabled(),
 			newPostUrl: `${ store.getAdminUrl() }post-new.php`,
-			postsCount: store.getSharedPostsCount(),
-			totalShareCount: store.getTotalSharesCount(),
 		};
 	} );
 	// TODO - Replace this with a utility function like `getSocialFeatureFlags` when available
@@ -87,14 +88,12 @@ const Header = () => {
 							{
 								icon: <SocialIcon />,
 								label: __( 'Total shares past 30 days', 'jetpack-social' ),
-								loading: null === totalShareCount,
-								value: formatter.format( totalShareCount ),
+								value: formatter.format( getTotalSharesCount() ),
 							},
 							{
 								icon: <Icon icon={ postList } />,
 								label: __( 'Posted this month', 'jetpack-social' ),
-								loading: null === postsCount,
-								value: formatter.format( postsCount ),
+								value: formatter.format( getSharedPostsCount() ),
 							},
 						] }
 					/>

projects/plugins/social/src/js/components/types/types.ts

@@ -18,13 +18,6 @@ type ConnectionDataSelectors = {
 	hasConnections: () => boolean;
 };
 
-type SharesDataSelectors = {
-	getSharesCount: () => number;
-	getPostsCount: () => number;
-	isShareLimitEnabled: () => boolean;
-	numberOfSharesRemaining: () => number;
-};
-
 type SiteDataSelectors = {
 	getSiteData: () => Array< object >;
 	getSiteTitle: () => string;
@@ -58,7 +51,6 @@ type SocialNotesSettingsSelectors = {
  */
 export type SocialStoreSelectors = JetpackSettingsSelectors &
 	ConnectionDataSelectors &
-	SharesDataSelectors &
 	SiteDataSelectors &
 	SocialImageGeneratorSettingsSelectors &
 	SocialNotesSettingsSelectors;