Social: Refactor feature option storing (#34113)

* Add the new settings object + tests * Update initial states + previous usages * Update UI + store functions * changelog * Fix versions * Add control for fetching both options together * Social: Remove deprecated feature files (#34114) * Remove unneeded files * changelog * 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 * Rename structure * Fixup versions * Fix template issue, and make sure it's migrated * fix tests * Test fix * Fix auto-conversion migration logic + add test * Add auto-conversion sync option * changelog * Update versions * Fix versions
Automattic · Dec 7, 2023 · 1039bd3 · 1039bd3
1 parent 793fbdc
commit 1039bd3
Show file tree

Hide file tree

Showing 70 changed files with 11,032 additions and 11,611 deletions.
diff --git a/...ects/js-packages/publicize-components/changelog/refactor-social-register-feature-settings b/...ects/js-packages/publicize-components/changelog/refactor-social-register-feature-settings
@@ -0,0 +1,4 @@
+Significance: major
+Type: changed
+
+Social: Refactored storing of feature options to use core functions
diff --git a/projects/js-packages/publicize-components/index.ts b/projects/js-packages/publicize-components/index.ts
@@ -17,6 +17,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-social-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/package.json b/projects/js-packages/publicize-components/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize-components",
-	"version": "0.41.9",
+	"version": "0.42.0-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/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 {
@@ -52,7 +39,7 @@ const AutoConversionToggle: React.FC< AutoConversionToggleProps > = ( {
 
 	const toggleStatus = useCallback( () => {
 		const newOption = {
-			image: ! isEnabled,
+			enabled: ! isEnabled,
 		};
 		updateOptions( newOption );
 	}, [ isEnabled, updateOptions ] );

diff --git a/.../js-packages/publicize-components/src/components/refresh-jetpack-social-settings/index.js b/.../js-packages/publicize-components/src/components/refresh-jetpack-social-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/...blicize-components/src/components/social-image-generator/template-picker/button/index.tsx b/...blicize-components/src/components/social-image-generator/template-picker/button/index.tsx
@@ -22,7 +22,7 @@ const TemplatePickerButton: React.FC = () => {
 
 	useEffect( () => {
 		if ( currentTemplate ) {
-			const newOption = { defaults: { template: currentTemplate } };
+			const newOption = { template: currentTemplate };
 			updateOptions( newOption );
 		}
 	}, [ currentTemplate, updateOptions ] );

diff --git a/...s/js-packages/publicize-components/src/components/social-image-generator/toggle/index.tsx b/...s/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/...cts/js-packages/publicize-components/src/social-store/actions/auto-conversion-settings.js b/...cts/js-packages/publicize-components/src/social-store/actions/auto-conversion-settings.js
@@ -20,7 +20,7 @@ export function* updateAutoConversionSettings( settings ) {
 		yield setAutoConversionSettings( settings );
 		yield updateAutoConversionSettingsControl( settings );
 		const updatedSettings = yield fetchAutoConversionSettings();
-		yield setAutoConversionSettings( updatedSettings );
+		yield setAutoConversionSettings( updatedSettings.jetpack_social_autoconvert_images );
 		return true;
 	} catch ( e ) {
 		const oldSettings = select( SOCIAL_STORE_ID ).getAutoConversionSettings();
@@ -41,7 +41,7 @@ export function* refreshAutoConversionSettings() {
 	try {
 		yield setUpdatingAutoConversionSettings();
 		const updatedSettings = yield fetchAutoConversionSettings();
-		yield setAutoConversionSettings( updatedSettings );
+		yield setAutoConversionSettings( updatedSettings.jetpack_social_autoconvert_images );
 		return true;
 	} catch ( e ) {
 		return false;

diff --git a/projects/js-packages/publicize-components/src/social-store/actions/index.js b/projects/js-packages/publicize-components/src/social-store/actions/index.js
@@ -1,12 +1,14 @@
 import autoConversionSettingActions from './auto-conversion-settings';
 import * as connectionData from './connection-data';
 import siteSettingActions from './jetpack-settings';
+import jetpackSocialSettings from './jetpack-social-settings';
 import socialImageGeneratorSettingActions from './social-image-generator-settings';
 
 const actions = {
 	...siteSettingActions,
 	...socialImageGeneratorSettingActions,
 	...autoConversionSettingActions,
+	...jetpackSocialSettings,
 	...connectionData,
 };
 

diff --git a/...ects/js-packages/publicize-components/src/social-store/actions/jetpack-social-settings.js b/...ects/js-packages/publicize-components/src/social-store/actions/jetpack-social-settings.js
@@ -0,0 +1,39 @@
+import { fetchJetpackSocialSettings } from '../controls';
+import {
+	setAutoConversionSettings,
+	setUpdatingAutoConversionSettings,
+	setUpdatingAutoConversionSettingsDone,
+} from './auto-conversion-settings';
+import {
+	setSocialImageGeneratorSettings,
+	setUpdatingSocialImageGeneratorSettings,
+	setUpdatingSocialImageGeneratorSettingsDone,
+} from './social-image-generator-settings';
+
+/**
+ * Yield actions to refresh all of the Jetpack Social registered settings.
+ *
+ * @yields {object} - an action object.
+ * @returns {object} - an action object.
+ */
+export function* refreshJetpackSocialSettings() {
+	try {
+		yield setUpdatingAutoConversionSettings();
+		yield setUpdatingSocialImageGeneratorSettings();
+		const updatedSettings = yield fetchJetpackSocialSettings();
+		yield setAutoConversionSettings( updatedSettings.jetpack_social_autoconvert_images );
+		yield setSocialImageGeneratorSettings(
+			updatedSettings.jetpack_social_image_generator_settings
+		);
+		return true;
+	} catch ( e ) {
+		return false;
+	} finally {
+		yield setUpdatingAutoConversionSettingsDone();
+		yield setUpdatingSocialImageGeneratorSettingsDone();
+	}
+}
+
+export default {
+	refreshJetpackSocialSettings,
+};
diff --git a/...packages/publicize-components/src/social-store/actions/social-image-generator-settings.js b/...packages/publicize-components/src/social-store/actions/social-image-generator-settings.js
@@ -20,7 +20,9 @@ export function* updateSocialImageGeneratorSettings( settings ) {
 		yield setSocialImageGeneratorSettings( settings );
 		yield updateSocialImageGeneratorSettingsControl( settings );
 		const updatedSettings = yield fetchSocialImageGeneratorSettings();
-		yield setSocialImageGeneratorSettings( updatedSettings );
+		yield setSocialImageGeneratorSettings(
+			updatedSettings.jetpack_social_image_generator_settings
+		);
 		return true;
 	} catch ( e ) {
 		const oldSettings = select( SOCIAL_STORE_ID ).getSocialImageGeneratorSettings();
@@ -69,7 +71,9 @@ export function* refreshSocialImageGeneratorSettings() {
 	try {
 		yield setUpdatingSocialImageGeneratorSettings();
 		const updatedSettings = yield fetchSocialImageGeneratorSettings();
-		yield setSocialImageGeneratorSettings( updatedSettings );
+		yield setSocialImageGeneratorSettings(
+			updatedSettings.jetpack_social_image_generator_settings
+		);
 		return true;
 	} catch ( e ) {
 		return false;

diff --git a/projects/js-packages/publicize-components/src/social-store/controls.js b/projects/js-packages/publicize-components/src/social-store/controls.js
@@ -7,6 +7,7 @@ export const UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS = 'UPDATE_SOCIAL_IMAGE_GENER
 
 export const FETCH_AUTO_CONVERSION_SETTINGS = 'FETCH_AUTO_CONVERSION_SETTINGS';
 export const UPDATE_AUTO_CONVERSION_SETTINGS = 'UPDATE_AUTO_CONVERSION_SETTINGS';
+export const FETCH_JETPACK_SOCIAL_SETTINGS = 'FETCH_JETPACK_SOCIAL_SETTINGS';
 
 /**
  * fetchJetpackSettings action
@@ -67,6 +68,17 @@ export const fetchAutoConversionSettings = () => {
 	};
 };
 
+/**
+ * fetchJetpackSocialSettings action
+ *
+ * @returns {object} - an action object.
+ */
+export const fetchJetpackSocialSettings = () => {
+	return {
+		type: FETCH_JETPACK_SOCIAL_SETTINGS,
+	};
+};
+
 /**
  * updateAutoConversionSettings action
  *
@@ -92,23 +104,36 @@ export default {
 		} );
 	},
 	[ FETCH_SOCIAL_IMAGE_GENERATOR_SETTINGS ]: function () {
-		return apiFetch( { path: '/jetpack/v4/social-image-generator/settings' } );
+		return apiFetch( {
+			path: '/wp/v2/settings?_fields=jetpack_social_image_generator_settings',
+		} );
 	},
 	[ UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS ]: function ( action ) {
 		return apiFetch( {
-			path: '/jetpack/v4/social-image-generator/settings',
+			path: '/wp/v2/settings',
 			method: 'POST',
-			data: action.settings,
+			data: {
+				jetpack_social_image_generator_settings: action.settings,
+			},
 		} );
 	},
 	[ FETCH_AUTO_CONVERSION_SETTINGS ]: function () {
-		return apiFetch( { path: '/jetpack/v4/auto-conversion/settings' } );
+		return apiFetch( {
+			path: '/wp/v2/settings?_fields=jetpack_social_autoconvert_images',
+		} );
 	},
 	[ UPDATE_AUTO_CONVERSION_SETTINGS ]: function ( action ) {
 		return apiFetch( {
-			path: '/jetpack/v4/auto-conversion/settings',
+			path: '/wp/v2/settings',
 			method: 'POST',
-			data: action.settings,
+			data: {
+				jetpack_social_autoconvert_images: action.settings,
+			},
+		} );
+	},
+	[ FETCH_JETPACK_SOCIAL_SETTINGS ]: function () {
+		return apiFetch( {
+			path: '/wp/v2/settings?_fields=jetpack_social_autoconvert_images,jetpack_social_image_generator_settings',
 		} );
 	},
 };
diff --git a/projects/js-packages/publicize-components/src/social-store/resolvers.js b/projects/js-packages/publicize-components/src/social-store/resolvers.js
@@ -37,7 +37,7 @@ export function* getSocialImageGeneratorSettings() {
 	try {
 		const settings = yield fetchSocialImageGeneratorSettings();
 		if ( settings ) {
-			return setSocialImageGeneratorSettings( settings );
+			return setSocialImageGeneratorSettings( settings.jetpack_social_image_generator_settings );
 		}
 	} catch ( e ) {
 		// TODO: Add proper error handling here
@@ -55,7 +55,7 @@ export function* getAutoConversionSettings() {
 	try {
 		const settings = yield fetchAutoConversionSettings();
 		if ( settings ) {
-			return setAutoConversionSettings( settings );
+			return setAutoConversionSettings( settings.jetpack_social_autoconvert_images );
 		}
 	} catch ( e ) {
 		// TODO: Add proper error handling here

diff --git a/...s/js-packages/publicize-components/src/social-store/selectors/auto-conversion-settings.js b/...s/js-packages/publicize-components/src/social-store/selectors/auto-conversion-settings.js
@@ -1,7 +1,7 @@
 const autoConversionSettingsSelectors = {
 	getAutoConversionSettings: state => state.autoConversionSettings,
 	isAutoConversionAvailable: state => state.autoConversionSettings.available,
-	isAutoConversionEnabled: state => state.autoConversionSettings.image,
+	isAutoConversionEnabled: state => state.autoConversionSettings.enabled,
 	isAutoConversionSettingsUpdating: state => state.autoConversionSettings.isUpdating,
 };
 

diff --git a/...ckages/publicize-components/src/social-store/selectors/social-image-generator-settings.js b/...ckages/publicize-components/src/social-store/selectors/social-image-generator-settings.js
@@ -3,8 +3,7 @@ const socialImageGeneratorSettingsSelectors = {
 	isSocialImageGeneratorAvailable: state => state.socialImageGeneratorSettings.available,
 	isSocialImageGeneratorEnabled: state => state.socialImageGeneratorSettings.enabled,
 	isUpdatingSocialImageGeneratorSettings: state => state.socialImageGeneratorSettings.isUpdating,
-	getSocialImageGeneratorDefaultTemplate: state =>
-		state.socialImageGeneratorSettings.defaultTemplate,
+	getSocialImageGeneratorDefaultTemplate: state => state.socialImageGeneratorSettings.template,
 };
 
 export default socialImageGeneratorSettingsSelectors;
diff --git a/projects/packages/publicize/changelog/refactor-social-register-feature-settings b/projects/packages/publicize/changelog/refactor-social-register-feature-settings
@@ -0,0 +1,4 @@
+Significance: major
+Type: changed
+
+Social: Refactored storing of feature options to use core functions
diff --git a/projects/packages/publicize/changelog/remove-social-deprecated-feature-files b/projects/packages/publicize/changelog/remove-social-deprecated-feature-files
@@ -0,0 +1,4 @@
+Significance: minor
+Type: removed
+
+Social: Removed deprecated files because of refactore
diff --git a/projects/packages/publicize/composer.json b/projects/packages/publicize/composer.json
@@ -67,7 +67,7 @@
 			"link-template": "https://github.com/Automattic/jetpack-publicize/compare/v${old}...v${new}"
 		},
 		"branch-alias": {
-			"dev-trunk": "0.37.x-dev"
+			"dev-trunk": "0.38.x-dev"
 		}
 	},
 	"config": {

diff --git a/projects/packages/publicize/package.json b/projects/packages/publicize/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize",
-	"version": "0.37.2",
+	"version": "0.38.0-alpha",
 	"description": "Publicize makes it easy to share your site’s posts on several social media networks automatically when you publish a new post.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/publicize/#readme",
 	"bugs": {