Social: Migrate Social Image Generator settings initial state

projects/js-packages/publicize-components/changelog/update-migrate-sid-settings-to-new-store

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Social: Migrated Social Image Generator settings to new store

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

@@ -17,7 +17,6 @@ export { default as TemplatePickerButton } from './src/components/social-image-g
 export { default as PublicizePanel } from './src/components/panel';
 export { default as ReviewPrompt } from './src/components/review-prompt';
 export { default as PostPublishPanels } from './src/components/post-publish-panels';
-export { default as RefreshJetpackSocialSettingsWrapper } from './src/components/refresh-jetpack-social-settings';
 export { default as ConnectionManagement } from './src/components/connection-management';
 
 export { default as useSocialMediaConnections } from './src/hooks/use-social-media-connections';

projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/button/index.tsx

@@ -3,29 +3,30 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useCallback, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import React from 'react';
-import { SOCIAL_STORE_ID } from '../../../../social-store';
-import { SocialStoreSelectors } from '../../../../types/types';
+import { store as socialStore } from '../../../../social-store';
 import TemplatePickerModal from '../modal';
 
 const TemplatePickerButton: React.FC = () => {
 	const [ currentTemplate, setCurrentTemplate ] = useState( null );
 	const { isEnabled, isUpdating, defaultTemplate } = useSelect( select => {
-		const store = select( SOCIAL_STORE_ID ) as SocialStoreSelectors;
+		const store = select( socialStore );
+
+		const config = store.getSocialImageGeneratorConfig();
 		return {
-			isEnabled: store.isSocialImageGeneratorEnabled(),
-			isUpdating: store.isUpdatingSocialImageGeneratorSettings(),
-			defaultTemplate: store.getSocialImageGeneratorDefaultTemplate(),
+			isEnabled: config.enabled,
+			defaultTemplate: config.template,
+			isUpdating: store.isSavingSiteSettings(),
 		};
 	}, [] );
 
-	const updateOptions = useDispatch( SOCIAL_STORE_ID ).updateSocialImageGeneratorSettings;
+	const { updateSocialImageGeneratorConfig } = useDispatch( socialStore );
 
 	useEffect( () => {
 		if ( currentTemplate ) {
 			const newOption = { template: currentTemplate };
-			updateOptions( newOption );
+			updateSocialImageGeneratorConfig( newOption );
 		}
-	}, [ currentTemplate, updateOptions ] );
+	}, [ currentTemplate, updateSocialImageGeneratorConfig ] );
 
 	const [ isSmall ] = useBreakpointMatch( 'sm' );
 

projects/js-packages/publicize-components/src/components/social-image-generator/toggle/index.tsx

@@ -2,8 +2,7 @@ import { ToggleControl } from '@automattic/jetpack-components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import React from 'react';
-import { SOCIAL_STORE_ID } from '../../../social-store';
-import { SocialStoreSelectors } from '../../../types/types';
+import { store as socialStore } from '../../../social-store';
 
 type SocialImageGeneratorToggleProps = {
 	/**
@@ -28,21 +27,22 @@ const SocialImageGeneratorToggle: React.FC< SocialImageGeneratorToggleProps > =
 	children,
 } ) => {
 	const { isEnabled, isUpdating } = useSelect( select => {
-		const store = select( SOCIAL_STORE_ID ) as SocialStoreSelectors;
+		const store = select( socialStore );
+
 		return {
-			isEnabled: store.isSocialImageGeneratorEnabled(),
-			isUpdating: store.isUpdatingSocialImageGeneratorSettings(),
+			isEnabled: store.getSocialImageGeneratorConfig().enabled,
+			isUpdating: store.isSavingSiteSettings(),
 		};
 	}, [] );
 
-	const updateOptions = useDispatch( SOCIAL_STORE_ID ).updateSocialImageGeneratorSettings;
+	const { updateSocialImageGeneratorConfig } = useDispatch( socialStore );
 
 	const toggleStatus = useCallback( () => {
 		const newOption = {
 			enabled: ! isEnabled,
 		};
-		updateOptions( newOption );
-	}, [ isEnabled, updateOptions ] );
+		updateSocialImageGeneratorConfig( newOption );
+	}, [ isEnabled, updateSocialImageGeneratorConfig ] );
 
 	return (
 		<ToggleControl

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

@@ -1,17 +1,15 @@
 import * as connectionData from './connection-data';
 import siteSettingActions from './jetpack-settings';
-import jetpackSocialSettings from './jetpack-social-settings';
 import * as shareStatus from './share-status';
-import socialImageGeneratorSettingActions from './social-image-generator-settings';
+import * as sigActions from './social-image-generator';
 import socialNotesSettings from './social-notes-settings';
 
 const actions = {
 	...shareStatus,
 	...siteSettingActions,
-	...socialImageGeneratorSettingActions,
-	...jetpackSocialSettings,
 	...connectionData,
 	...socialNotesSettings,
+	...sigActions,
 };
 
 export default actions;

projects/js-packages/publicize-components/src/social-store/actions/social-image-generator.ts

@@ -0,0 +1,18 @@
+import { store as coreStore } from '@wordpress/core-data';
+import { SIG_SETTINGS_KEY } from '../constants';
+import { SocialImageGeneratorConfig } from '../types';
+
+/**
+ * Saves the Social Image Generator settings.
+ *
+ * @param {Partial< SocialImageGeneratorConfig >} data - The data to save.
+ *
+ * @return {Function} A thunk.
+ */
+export function updateSocialImageGeneratorConfig( data: Partial< SocialImageGeneratorConfig > ) {
+	return async function ( { registry } ) {
+		const { saveSite } = registry.dispatch( coreStore );
+
+		await saveSite( { [ SIG_SETTINGS_KEY ]: data } );
+	};
+}

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

@@ -0,0 +1 @@
+export const SIG_SETTINGS_KEY = 'jetpack_social_image_generator_settings';

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

@@ -2,8 +2,6 @@ import apiFetch from '@wordpress/api-fetch';
 
 export const FETCH_JETPACK_SETTINGS = 'FETCH_JETPACK_SETTINGS';
 export const UPDATE_JETPACK_SETTINGS = 'UPDATE_JETPACK_SETTINGS';
-export const FETCH_SOCIAL_IMAGE_GENERATOR_SETTINGS = 'FETCH_SOCIAL_IMAGE_GENERATOR_SETTINGS';
-export const UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS = 'UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS';
 
 export const FETCH_JETPACK_SOCIAL_SETTINGS = 'FETCH_JETPACK_SOCIAL_SETTINGS';
 
@@ -31,30 +29,6 @@ export const updateJetpackSettings = settings => {
 	};
 };
 
-/**
- * fetchSocialImageGeneratorSettings action
- *
- * @return {object} - an action object.
- */
-export const fetchSocialImageGeneratorSettings = () => {
-	return {
-		type: FETCH_SOCIAL_IMAGE_GENERATOR_SETTINGS,
-	};
-};
-
-/**
- * updateSocialImageGeneratorSettings action
- *
- * @param {*} settings - Social Image Generator settings object.
- * @return {object} - an action object.
- */
-export const updateSocialImageGeneratorSettings = settings => {
-	return {
-		type: UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS,
-		settings,
-	};
-};
-
 /**
  * fetchJetpackSocialSettings action
  *
@@ -77,20 +51,6 @@ export default {
 			data: action.settings,
 		} );
 	},
-	[ FETCH_SOCIAL_IMAGE_GENERATOR_SETTINGS ]: function () {
-		return apiFetch( {
-			path: '/wp/v2/settings?_fields=jetpack_social_image_generator_settings',
-		} );
-	},
-	[ UPDATE_SOCIAL_IMAGE_GENERATOR_SETTINGS ]: function ( action ) {
-		return apiFetch( {
-			path: '/wp/v2/settings',
-			method: 'POST',
-			data: {
-				jetpack_social_image_generator_settings: action.settings,
-			},
-		} );
-	},
 	[ FETCH_JETPACK_SOCIAL_SETTINGS ]: function () {
 		return apiFetch( {
 			path: '/wp/v2/settings?_fields=jetpack_social_image_generator_settings',

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

@@ -3,13 +3,11 @@ import connectionData from './connection-data';
 import jetpackSettings from './jetpack-settings';
 import { shareStatus } from './share-status';
 import siteData from './site-data';
-import socialImageGeneratorSettings from './social-image-generator-settings';
 
 const reducer = combineReducers( {
 	siteData,
 	connectionData,
 	jetpackSettings,
-	socialImageGeneratorSettings,
 	shareStatus,
 } );