[DONT MERGE] WIP POC for refactoring

projects/js-packages/publicize-components/changelog/refactor-social-option-format

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+WIP

projects/js-packages/publicize-components/src/hooks/use-publicize-config/index.js

@@ -31,6 +31,8 @@ export default function usePublicizeConfig() {
 		getJetpackData()?.social?.publicizeConnectionsUrl ??
 		'https://wordpress.com/marketing/connections/';
 
+	const jetpackSocialSettings = getJetpackData()?.social?.jetpackSocialSettings;
+
 	/*
 	 * isPublicizeEnabledMeta:
 	 * It's stored in the jetpack_publicize_feature_enabled post metadata,
@@ -98,7 +100,7 @@ export default function usePublicizeConfig() {
 	 * isAutoConversionEnabled:
 	 * Whether the site has the auto conversion feature enabled.
 	 */
-	const isAutoConversionEnabled = !! getJetpackData()?.social?.isAutoConversionEnabled;
+	const isAutoConversionEnabled = jetpackSocialSettings?.autoConversionSettings?.image;
 
 	return {
 		isPublicizeEnabledMeta,
@@ -114,8 +116,9 @@ export default function usePublicizeConfig() {
 		shouldShowAdvancedPlanNudge: sharesData.show_advanced_plan_upgrade_nudge,
 		hasPaidPlan,
 		isEnhancedPublishingEnabled,
-		isSocialImageGeneratorAvailable: !! getJetpackData()?.social?.isSocialImageGeneratorAvailable,
-		isSocialImageGeneratorEnabled: !! getJetpackData()?.social?.isSocialImageGeneratorEnabled,
+		isSocialImageGeneratorAvailable:
+			!! jetpackSocialSettings?.socialImageGeneratorSettings?.available,
+		isSocialImageGeneratorEnabled: !! jetpackSocialSettings?.socialImageGeneratorSettings?.enabled,
 		connectionsAdminUrl: connectionsRootUrl + getSiteFragment(),
 		adminUrl: getJetpackData()?.social?.adminUrl,
 		isAutoConversionEnabled,

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

@@ -1,11 +1,9 @@
-import autoConversionSettingActions from './auto-conversion-settings';
 import siteSettingActions from './jetpack-settings';
-import socialImageGeneratorSettingActions from './social-image-generator-settings';
+import jetpackSocialSettingActions from './jetpack-social-settings';
 
 const actions = {
 	...siteSettingActions,
-	...socialImageGeneratorSettingActions,
-	...autoConversionSettingActions,
+	...jetpackSocialSettingActions,
 };
 
 export default actions;

projects/js-packages/publicize-components/src/social-store/actions/jetpack-social-settings.js

@@ -0,0 +1,156 @@
+import { select } from '@wordpress/data';
+import { SOCIAL_STORE_ID } from '../../social-store';
+import {
+	fetchJetpackSocialSettings,
+	updateSocialImageGeneratorSettings as updateSocialImageGeneratorSettingsControl,
+	updateAutoConversionSettings as updateAutoConversionSettingsControl,
+} from '../controls';
+
+export const SET_JETPACK_SOCIAL_SETTINGS = 'SET_JETPACK_SOCIAL_SETTINGS';
+export const SET_SOCIAL_IMAGE_GENERATOR_SETTINGS = 'SET_SOCIAL_IMAGE_GENERATOR_SETTINGS';
+export const SET_AUTO_CONVERSION_SETTINGS = 'SET_AUTO_CONVERSION_SETTINGS';
+
+/**
+ *
+ * @param settings
+ */
+export function* updateSocialImageGeneratorSettings( settings ) {
+	try {
+		yield setUpdatingSocialImageGeneratorSettings();
+		yield setSocialImageGeneratorSettings( settings );
+		yield updateSocialImageGeneratorSettingsControl( settings );
+		const updatedSettings = yield fetchJetpackSocialSettings();
+		yield setSocialImageGeneratorSettings( updatedSettings );
+		return true;
+	} catch ( e ) {
+		const oldSettings = select( SOCIAL_STORE_ID ).getJetpackSocialSettings();
+		yield setJetpackSocialSettings( oldSettings );
+		return false;
+	} finally {
+		yield setUpdatingSocialImageGeneratorSettingsDone();
+	}
+}
+
+/**
+ *
+ * @param settings
+ */
+export function* updateAutoConversionSettings( settings ) {
+	try {
+		yield setUpdatingAutoConversionSettings();
+		yield setAutoConversionSettings( settings );
+		yield updateAutoConversionSettingsControl( settings );
+		const updatedSettings = yield fetchJetpackSocialSettings();
+		yield setAutoConversionSettings( updatedSettings );
+		return true;
+	} catch ( e ) {
+		const oldSettings = select( SOCIAL_STORE_ID ).getJetpackSocialSettings();
+		yield setJetpackSocialSettings( oldSettings );
+		return false;
+	} finally {
+		yield setUpdatingAutoConversionSettingsDone();
+	}
+}
+
+/**
+ * Yield actions to refresh settings
+ *
+ * @yields {object} - an action object.
+ * @returns {object} - an action object.
+ */
+export function* refreshJetpackSocialSettings() {
+	try {
+		const updatedSettings = yield fetchJetpackSocialSettings();
+		yield setJetpackSocialSettings( updatedSettings );
+		return true;
+	} catch ( e ) {
+		return false;
+	}
+}
+
+/**
+ * Set state updating action
+ *
+ * @returns {object} - an action object.
+ */
+export function setUpdatingJetpackSocialSettings() {
+	return setJetpackSocialSettings( { isUpdating: true } );
+}
+
+/**
+ * Set state updating finished
+ *
+ * @returns {object} - an action object.
+ */
+export function setUpdatingJetpackSocialSettingsDone() {
+	return setJetpackSocialSettings( { isUpdating: false } );
+}
+
+/**
+ * Set state updating action
+ *
+ * @returns {object} - an action object.
+ */
+export function setUpdatingAutoConversionSettings() {
+	return setJetpackSocialSettings( { isUpdatingAutoConversionSettings: true } );
+}
+
+/**
+ * Set state updating finished
+ *
+ * @returns {object} - an action object.
+ */
+export function setUpdatingAutoConversionSettingsDone() {
+	return setJetpackSocialSettings( { isUpdatingAutoConversionSettings: false } );
+}
+
+/**
+ * Set state updating action
+ *
+ * @returns {object} - an action object.
+ */
+export function setUpdatingSocialImageGeneratorSettings() {
+	return setJetpackSocialSettings( { isUpdatingSocialImageGeneratorSettings: true } );
+}
+
+/**
+ * Set state updating finished
+ *
+ * @returns {object} - an action object.
+ */
+export function setUpdatingSocialImageGeneratorSettingsDone() {
+	return setJetpackSocialSettings( { isUpdatingSocialImageGeneratorSettings: false } );
+}
+
+/**
+ * Set Social Image Generator settings action
+ *
+ * @param {object} options - Social Image Generator settings.
+ * @returns {object} - an action object.
+ */
+export function setJetpackSocialSettings( options ) {
+	return { type: SET_JETPACK_SOCIAL_SETTINGS, options };
+}
+
+/**
+ *
+ * @param options
+ */
+export function setSocialImageGeneratorSettings( options ) {
+	return { type: SET_SOCIAL_IMAGE_GENERATOR_SETTINGS, options };
+}
+
+/**
+ *
+ * @param options
+ */
+export function setAutoConversionSettings( options ) {
+	return { type: SET_AUTO_CONVERSION_SETTINGS, options };
+}
+
+export default {
+	updateAutoConversionSettings,
+	updateSocialImageGeneratorSettings,
+	setJetpackSocialSettings,
+	refreshJetpackSocialSettings,
+};

projects/js-packages/publicize-components/src/social-store/controls.js

@@ -8,6 +8,9 @@ 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';
+export const UPDATE_JETPACK_SOCIAL_SETTINGS = 'UPDATE_JETPACK_SOCIAL_SETTINGS';
+
 /**
  * fetchJetpackSettings action
  *
@@ -80,6 +83,17 @@ export const updateAutoConversionSettings = settings => {
 	};
 };
 
+/**
+ * fetchJetpackSocialSettings action
+ *
+ * @returns {object} - an action object.
+ */
+export const fetchJetpackSocialSettings = () => {
+	return {
+		type: FETCH_JETPACK_SOCIAL_SETTINGS,
+	};
+};
+
 export default {
 	[ FETCH_JETPACK_SETTINGS ]: function () {
 		return apiFetch( { path: '/jetpack/v4/social/settings' } );
@@ -91,24 +105,28 @@ export default {
 			data: action.settings,
 		} );
 	},
-	[ FETCH_SOCIAL_IMAGE_GENERATOR_SETTINGS ]: function () {
-		return apiFetch( { path: '/jetpack/v4/social-image-generator/settings' } );
+	[ FETCH_JETPACK_SOCIAL_SETTINGS ]: function () {
+		return apiFetch( { path: '/jetpack/v4/jetpack-social/settings' } );
 	},
-	[ UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS ]: function ( action ) {
+	[ UPDATE_JETPACK_SOCIAL_SETTINGS ]: function ( action ) {
 		return apiFetch( {
-			path: '/jetpack/v4/social-image-generator/settings',
+			path: '/jetpack/v4/jetpack-social/settings',
 			method: 'POST',
 			data: action.settings,
 		} );
 	},
-	[ FETCH_AUTO_CONVERSION_SETTINGS ]: function () {
-		return apiFetch( { path: '/jetpack/v4/auto-conversion/settings' } );
+	[ UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS ]: function ( action ) {
+		return apiFetch( {
+			path: '/jetpack/v4/jetpack-social/settings',
+			method: 'POST',
+			data: { socialImageGeneratorSettings: action.settings },
+		} );
 	},
 	[ UPDATE_AUTO_CONVERSION_SETTINGS ]: function ( action ) {
 		return apiFetch( {
-			path: '/jetpack/v4/auto-conversion/settings',
+			path: '/jetpack/v4/jetpack-social/settings',
 			method: 'POST',
-			data: action.settings,
+			data: { autoConversionSettings: action.settings },
 		} );
 	},
 };

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

@@ -1,18 +1,16 @@
 import { combineReducers } from '@wordpress/data';
-import autoConversionSettings from './auto-conversion-settings';
 import connectionData from './connection-data';
 import jetpackSettings from './jetpack-settings';
+import jetpackSocialSettings from './jetpack-social-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,
-	socialImageGeneratorSettings,
-	autoConversionSettings,
+	jetpackSocialSettings,
 } );
 
 export default reducer;

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

@@ -0,0 +1,20 @@
+import { merge } from 'lodash';
+import {
+	SET_AUTO_CONVERSION_SETTINGS,
+	SET_JETPACK_SOCIAL_SETTINGS,
+	SET_SOCIAL_IMAGE_GENERATOR_SETTINGS,
+} from '../actions/jetpack-social-settings';
+
+const jetpackSocialSettings = ( state = {}, action ) => {
+	switch ( action.type ) {
+		case SET_JETPACK_SOCIAL_SETTINGS:
+			return merge( {}, state, action.options );
+		case SET_AUTO_CONVERSION_SETTINGS:
+			return merge( {}, state, { autoConversionSettings: action.options } );
+		case SET_SOCIAL_IMAGE_GENERATOR_SETTINGS:
+			return merge( {}, state, { socialImageGeneratorSettings: action.options } );
+	}
+	return state;
+};
+
+export default jetpackSocialSettings;

projects/js-packages/publicize-components/src/social-store/resolvers.js

@@ -1,11 +1,6 @@
-import { setAutoConversionSettings } from './actions/auto-conversion-settings';
 import { setJetpackSettings } from './actions/jetpack-settings';
-import { setSocialImageGeneratorSettings } from './actions/social-image-generator-settings';
-import {
-	fetchJetpackSettings,
-	fetchSocialImageGeneratorSettings,
-	fetchAutoConversionSettings,
-} from './controls';
+import { setJetpackSocialSettings } from './actions/jetpack-social-settings';
+import { fetchJetpackSettings, fetchJetpackSocialSettings } from './controls';
 
 /**
  * Yield actions to get the Jetpack settings.
@@ -26,39 +21,24 @@ export function* getJetpackSettings() {
 }
 
 /**
- * Yield actions to get the Social Image Generator settings.
+ * Yield actions to get the Jetpack Social settings.
  *
  * @yields {object} - an action object.
  * @returns {object} - an action object.
  */
-export function* getSocialImageGeneratorSettings() {
+export function* getJetpackSocialSettings() {
 	try {
-		const settings = yield fetchSocialImageGeneratorSettings();
+		const settings = yield fetchJetpackSocialSettings();
 		if ( settings ) {
-			return setSocialImageGeneratorSettings( settings );
+			return setJetpackSocialSettings( settings );
 		}
 	} catch ( e ) {
 		// TODO: Add proper error handling here
 		console.log( e ); // eslint-disable-line no-console
 	}
 }
 
-/**
- * Yield actions to get the Auto Conversion settings.
- *
- * @yields {object} - an action object.
- * @returns {object} - an action object.
- */
-export function* getAutoConversionSettings() {
-	try {
-		const settings = yield fetchAutoConversionSettings();
-		if ( settings ) {
-			return setAutoConversionSettings( settings );
-		}
-	} catch ( e ) {
-		// TODO: Add proper error handling here
-		console.log( e ); // eslint-disable-line no-console
-	}
-}
-
-export default { getJetpackSettings, getSocialImageGeneratorSettings, getAutoConversionSettings };
+export default {
+	getJetpackSettings,
+	getJetpackSocialSettings,
+};

projects/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.image,
 	isAutoConversionSettingsUpdating: state => state.autoConversionSettings.isUpdating,
 };