Merge branch 'feature/award-year-meta-block' into develop

src/blocks/er-award-meta-year/edit.js

@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { RadioControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Placeholder, RadioControl, Spinner } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp } from '@wordpress/core-data';
 import { useBlockProps } from '@wordpress/block-editor';
@@ -11,39 +12,75 @@ import { useBlockProps } from '@wordpress/block-editor';
  */
 import { STORE_NAME } from '../../store/constants';
 
+/**
+ * Generates the radio control year options from the string.
+ *
+ * Adds the "All Years" option to the list of choices.
+ *
+ * @param {string} awardYearGroups A newline-separated string of award year groups.
+ * @return {Object[]} The formatted award years for the radio component.
+ */
+function formatAwardYearOptions( awardYearGroups ) {
+	const awardYears = awardYearGroups
+		.split( /\r?\n/ )
+		.filter( ( year ) => year )
+		.map( ( yearGroup ) => {
+			const yearGroupOption =
+				'-1' !== yearGroup
+					? {
+							label: `${ yearGroup } Years`,
+							value: Number( yearGroup ),
+					  }
+					: { label: 'All Years', value: Number( yearGroup ) };
+
+			return yearGroupOption;
+		} );
+
+	return awardYears;
+}
+
 function ERAwardMetaYearEdit() {
 	const blockProps = useBlockProps();
 
-	const { postType, erAwardOptions } = useSelect( ( select ) => {
-		return {
-			postType: select( 'core/editor' ).getCurrentPostType(),
-			erAwardOptions: select( STORE_NAME ).getOption(
-				'hrswp_er_award_years'
-			),
-		};
-	}, [] );
+	const { postType, erAwardYearGroups, isRequesting } = useSelect(
+		( select ) => {
+			const { getCurrentPostType } = select( 'core/editor' );
+			const { getOption, isResolving } = select( STORE_NAME );
+
+			return {
+				postType: getCurrentPostType(),
+				erAwardYearGroups: getOption( 'hrswp_er_award_years' ),
+				isRequesting: isResolving( 'getOption', [
+					'hrswp_er_award_years',
+				] ),
+			};
+		},
+		[]
+	);
+
+	const erAwardOptions =
+		erAwardYearGroups?.length > 0
+			? formatAwardYearOptions( erAwardYearGroups )
+			: [];
 
 	const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
-	const metaFieldValue = meta[ 'hrswp_er_awards_year' ];
+	const metaFieldValue = meta.hrswp_er_awards_year;
 
 	const updateMetaValue = ( newValue ) => {
 		setMeta( { ...meta, hrswp_er_awards_year: Number( newValue ) } );
 	};
 
 	return (
 		<div { ...blockProps }>
+			{ isRequesting && (
+				<Placeholder icon="admin-post" label={ __( 'ER Award Year' ) }>
+					<Spinner />
+				</Placeholder>
+			) }
 			<RadioControl
 				label="ER Award Year"
 				selected={ metaFieldValue }
-				options={ [
-					{ label: 'All Years', value: -1 },
-					{ label: '5 Years', value: 5 },
-					{ label: '10 Years', value: 10 },
-					{ label: '15 Years', value: 15 },
-					{ label: '20 Years', value: 20 },
-					{ label: '25 Years', value: 25 },
-					{ label: '30 Years', value: 30 },
-				] }
+				options={ erAwardOptions }
 				onChange={ updateMetaValue }
 			/>
 		</div>