Refactor CalendarEdit component (#23072)

* Refactor CalendarEdit component * Remove falsy value check Co-authored-by: Patrick Villanueva <[email protected]>
WordPress · Aug 3, 2020 · 8d6a3e6 · 8d6a3e6
1 parent b082a9b
commit 8d6a3e6
Showing 1 changed file with 29 additions and 59 deletions.
diff --git a/packages/block-library/src/calendar/edit.js b/packages/block-library/src/calendar/edit.js
@@ -8,69 +8,39 @@ import memoize from 'memize';
  * WordPress dependencies
  */
 import { Disabled } from '@wordpress/components';
-import { Component } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import ServerSideRender from '@wordpress/server-side-render';
 
-class CalendarEdit extends Component {
-	constructor() {
-		super( ...arguments );
-		this.getYearMonth = memoize( this.getYearMonth.bind( this ), {
-			maxSize: 1,
-		} );
-		this.getServerSideAttributes = memoize(
-			this.getServerSideAttributes.bind( this ),
-			{
-				maxSize: 1,
-			}
-		);
+const getYearMonth = memoize( ( date ) => {
+	if ( ! date ) {
+		return {};
 	}
+	const momentDate = moment( date );
+	return {
+		year: momentDate.year(),
+		month: momentDate.month() + 1,
+	};
+} );
 
-	getYearMonth( date ) {
-		if ( ! date ) {
-			return {};
-		}
-		const momentDate = moment( date );
-		return {
-			year: momentDate.year(),
-			month: momentDate.month() + 1,
-		};
-	}
+export default function CalendarEdit( { attributes } ) {
+	const date = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( 'core/editor' );
 
-	getServerSideAttributes( attributes, date ) {
-		return {
-			...attributes,
-			...this.getYearMonth( date ),
-		};
-	}
+		const postType = getEditedPostAttribute( 'type' );
+		// Dates are used to overwrite year and month used on the calendar.
+		// This overwrite should only happen for 'post' post types.
+		// For other post types the calendar always displays the current month.
+		return postType === 'post'
+			? getEditedPostAttribute( 'date' )
+			: undefined;
+	}, [] );
 
-	render() {
-		return (
-			<Disabled>
-				<ServerSideRender
-					block="core/calendar"
-					attributes={ this.getServerSideAttributes(
-						this.props.attributes,
-						this.props.date
-					) }
-				/>
-			</Disabled>
-		);
-	}
+	return (
+		<Disabled>
+			<ServerSideRender
+				block="core/calendar"
+				attributes={ { ...attributes, ...getYearMonth( date ) } }
+			/>
+		</Disabled>
+	);
 }
-
-export default withSelect( ( select ) => {
-	const coreEditorSelect = select( 'core/editor' );
-	if ( ! coreEditorSelect ) {
-		return;
-	}
-	const { getEditedPostAttribute } = coreEditorSelect;
-	const postType = getEditedPostAttribute( 'type' );
-	// Dates are used to overwrite year and month used on the calendar.
-	// This overwrite should only happen for 'post' post types.
-	// For other post types the calendar always displays the current month.
-	return {
-		date:
-			postType === 'post' ? getEditedPostAttribute( 'date' ) : undefined,
-	};
-} )( CalendarEdit );