Retrieve all future posts in a given month (#44540)

* Retrieve all future posts in a given month

* Retrieve 100 posts and only retrieve ID and date

* Remove type and title from events

* Use date-fns for date calculations

* Fix date parsing errors

* Update package.json

Required for new editor dependency (date-fns)

Co-authored-by: Robert Anderson <robert@noisysocks.com>

packages/editor/package.json

@@ -58,6 +58,7 @@
 		"@wordpress/url": "file:../url",
 		"@wordpress/wordcount": "file:../wordcount",
 		"classnames": "^2.3.1",
+		"date-fns": "^2.28.0",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",

packages/editor/src/components/post-schedule/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { parseISO, endOfMonth, startOfMonth } from 'date-fns';
+
 /**
  * WordPress dependencies
  */
@@ -12,15 +17,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-function getDayOfTheMonth( date = new Date(), firstDay = true ) {
-	const d = new Date( date );
-	return new Date(
-		d.getFullYear(),
-		d.getMonth() + ( firstDay ? 0 : 1 ),
-		firstDay ? 1 : 0
-	).toISOString();
-}
-
 export default function PostSchedule( { onClose } ) {
 	const { postDate, postType } = useSelect(
 		( select ) => ( {
@@ -34,30 +30,28 @@ export default function PostSchedule( { onClose } ) {
 	const onUpdateDate = ( date ) => editPost( { date } );
 
 	const [ previewedMonth, setPreviewedMonth ] = useState(
-		getDayOfTheMonth( postDate )
+		startOfMonth( new Date( postDate ) )
 	);
 
 	// Pick up published and schduled site posts.
 	const eventsByPostType = useSelect(
 		( select ) =>
 			select( coreStore ).getEntityRecords( 'postType', postType, {
 				status: 'publish,future',
-				after: getDayOfTheMonth( previewedMonth ),
-				before: getDayOfTheMonth( previewedMonth, false ),
+				after: startOfMonth( previewedMonth ).toISOString(),
+				before: endOfMonth( previewedMonth ).toISOString(),
 				exclude: [ select( editorStore ).getCurrentPostId() ],
+				per_page: 100,
+				_fields: 'id,date',
 			} ),
 		[ previewedMonth, postType ]
 	);
 
 	const events = useMemo(
 		() =>
-			( eventsByPostType || [] ).map(
-				( { title, type, date: eventDate } ) => ( {
-					title: title?.rendered,
-					type,
-					date: new Date( eventDate ),
-				} )
-			),
+			( eventsByPostType || [] ).map( ( { date: eventDate } ) => ( {
+				date: new Date( eventDate ),
+			} ) ),
 		[ eventsByPostType ]
 	);
 
@@ -80,7 +74,9 @@ export default function PostSchedule( { onClose } ) {
 			onChange={ onUpdateDate }
 			is12Hour={ is12HourTime }
 			events={ events }
-			onMonthPreviewed={ setPreviewedMonth }
+			onMonthPreviewed={ ( date ) =>
+				setPreviewedMonth( parseISO( date ) )
+			}
 			onClose={ onClose }
 		/>
 	);