Refactor form value use with new hook for consistency.

Author: aaemnnosttv

assets/js/components/pdf-generation/PDFSectionsSelectionPanel/PanelContent.tsx

@@ -30,8 +30,6 @@ import { Fragment, useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useDispatch } from 'googlesitekit-data';
-import { CORE_FORMS } from '@/js/googlesitekit/datastore/forms/constants';
 import { SelectionPanelContent } from '@/js/components/SelectionPanel';
 import SelectionPanelNotice from '@/js/components/SelectionPanel/SelectionPanelNotice';
 import { NOTICE_TYPES } from '@/js/components/Notice/constants';
@@ -51,27 +49,23 @@ interface PanelContentProps {
 }
 
 const PanelContent: FC< PanelContentProps > = ( { closePanel } ) => {
-	const [ selectedSectionsValue ] = useFormValue(
+	const [ selectedSectionsValue, setSelectedSections ] = useFormValue(
 		FORM_PDF_DOWNLOAD,
 		FORM_PDF_DOWNLOAD_SELECTED_SECTIONS
 	);
 	const selectedSections =
 		( selectedSectionsValue as string[] | undefined ) ??
 		DEFAULT_SELECTED_SECTIONS;
 
-	const { setValues } = useDispatch( CORE_FORMS );
-
 	const toggleSection = useCallback(
 		( slug: string ) => {
 			const nextSelection = selectedSections.includes( slug )
 				? selectedSections.filter( ( item ) => item !== slug )
 				: [ ...selectedSections, slug ];
 
-			setValues( FORM_PDF_DOWNLOAD, {
-				[ FORM_PDF_DOWNLOAD_SELECTED_SECTIONS ]: nextSelection,
-			} );
+			setSelectedSections( nextSelection );
 		},
-		[ selectedSections, setValues ]
+		[ selectedSections, setSelectedSections ]
 	);
 
 	const hasSelection = selectedSections.length > 0;

assets/js/components/pdf-generation/PDFSectionsSelectionPanel/index.stories.tsx

@@ -33,6 +33,7 @@ import { useDispatch } from 'googlesitekit-data';
 import WithRegistrySetup from '../../../../../tests/js/WithRegistrySetup';
 import { CORE_UI } from '@/js/googlesitekit/datastore/ui/constants';
 import { CORE_FORMS } from '@/js/googlesitekit/datastore/forms/constants';
+import useFormValue from '@/js/hooks/useFormValue';
 import {
 	FORM_PDF_DOWNLOAD,
 	FORM_PDF_DOWNLOAD_SELECTED_SECTIONS,
@@ -50,17 +51,18 @@ function DefaultTemplate() {
 }
 
 function EmptyTemplate() {
-	const { setValues } = useDispatch( CORE_FORMS );
+	const [ , setSelectedSections ] = useFormValue(
+		FORM_PDF_DOWNLOAD,
+		FORM_PDF_DOWNLOAD_SELECTED_SECTIONS
+	);
 
 	// The panel's `onSideSheetOpen` resets the form to default selection on
 	// every mount. Re-applying the empty selection from this Template's
 	// `useEffect` runs after the panel's reset (effects fire bottom-up),
 	// so the story renders with no sections selected.
 	useEffect( () => {
-		setValues( FORM_PDF_DOWNLOAD, {
-			[ FORM_PDF_DOWNLOAD_SELECTED_SECTIONS ]: [],
-		} );
-	}, [ setValues ] );
+		setSelectedSections( [] );
+	}, [ setSelectedSections ] );
 
 	return <PDFSectionsSelectionPanel />;
 }

assets/js/components/pdf-generation/PDFSectionsSelectionPanel/index.tsx

@@ -31,14 +31,14 @@ import { useCallback } from '@wordpress/element';
  */
 import { useSelect, useDispatch, type Select } from 'googlesitekit-data';
 import { CORE_UI } from '@/js/googlesitekit/datastore/ui/constants';
-import { CORE_FORMS } from '@/js/googlesitekit/datastore/forms/constants';
 import {
 	DEFAULT_SELECTED_SECTIONS,
 	FORM_PDF_DOWNLOAD,
 	FORM_PDF_DOWNLOAD_SELECTED_SECTIONS,
 	PDF_DOWNLOAD_PANEL_OPENED_KEY,
 	PDF_GENERATING_KEY,
 } from '@/js/components/pdf-generation/constants';
+import useFormValue from '@/js/hooks/useFormValue';
 import InViewProvider from '@/js/components/InViewProvider';
 import SelectionPanel from '@/js/components/SelectionPanel';
 import PanelContent from './PanelContent';
@@ -51,7 +51,10 @@ const PDFSectionsSelectionPanel: FC = () => {
 	);
 
 	const { setValue } = useDispatch( CORE_UI );
-	const { setValues } = useDispatch( CORE_FORMS );
+	const [ , setSelectedSections ] = useFormValue(
+		FORM_PDF_DOWNLOAD,
+		FORM_PDF_DOWNLOAD_SELECTED_SECTIONS
+	);
 
 	const closePanel = useCallback( () => {
 		if ( isOpen ) {
@@ -60,12 +63,10 @@ const PDFSectionsSelectionPanel: FC = () => {
 	}, [ isOpen, setValue ] );
 
 	const onSideSheetOpen = useCallback( () => {
-		setValues( FORM_PDF_DOWNLOAD, {
-			[ FORM_PDF_DOWNLOAD_SELECTED_SECTIONS ]: DEFAULT_SELECTED_SECTIONS,
-		} );
+		setSelectedSections( DEFAULT_SELECTED_SECTIONS );
 		// Reset any stale "generating" state left over from a previous session.
 		setValue( PDF_GENERATING_KEY, false );
-	}, [ setValues, setValue ] );
+	}, [ setSelectedSections, setValue ] );
 
 	return (
 		<InViewProvider