From a8feb23e585a669c1cc4422d9fc5cc7dff537114 Mon Sep 17 00:00:00 2001 From: Hritik Chaudhary <33057454+hritikchaudhary@users.noreply.github.com> Date: Thu, 1 Jun 2023 23:45:29 +0530 Subject: [PATCH 1/4] removed proptypes from reviews by product --- .../reviews-by-product/{edit.js => block.tsx} | 41 ++++--------------- .../reviews/reviews-by-product/edit.tsx | 22 ++++++++++ .../{index.js => index.tsx} | 6 +-- ...ceholder.js => no-reviews-placeholder.tsx} | 30 +++++++------- .../reviews/reviews-by-product/types.ts | 35 ++++++++++++++++ 5 files changed, 83 insertions(+), 51 deletions(-) rename assets/js/blocks/reviews/reviews-by-product/{edit.js => block.tsx} (80%) create mode 100644 assets/js/blocks/reviews/reviews-by-product/edit.tsx rename assets/js/blocks/reviews/reviews-by-product/{index.js => index.tsx} (94%) rename assets/js/blocks/reviews/reviews-by-product/{no-reviews-placeholder.js => no-reviews-placeholder.tsx} (72%) create mode 100644 assets/js/blocks/reviews/reviews-by-product/types.ts diff --git a/assets/js/blocks/reviews/reviews-by-product/edit.js b/assets/js/blocks/reviews/reviews-by-product/block.tsx similarity index 80% rename from assets/js/blocks/reviews/reviews-by-product/edit.js rename to assets/js/blocks/reviews/reviews-by-product/block.tsx index 0ef1bee3a38..44692462936 100644 --- a/assets/js/blocks/reviews/reviews-by-product/edit.js +++ b/assets/js/blocks/reviews/reviews-by-product/block.tsx @@ -10,7 +10,6 @@ import { withSpokenMessages, } from '@wordpress/components'; import { SearchListItem } from '@woocommerce/editor-components/search-list-control'; -import PropTypes from 'prop-types'; import ProductControl from '@woocommerce/editor-components/product-control'; import { Icon, commentContent } from '@wordpress/icons'; @@ -18,31 +17,26 @@ import { Icon, commentContent } from '@wordpress/icons'; * Internal dependencies */ import EditorContainerBlock from '../editor-container-block.js'; -import NoReviewsPlaceholder from './no-reviews-placeholder.js'; import { getBlockControls, getSharedReviewContentControls, getSharedReviewListControls, } from '../edit-utils.js'; +import type { ReviewsByProductEditorProps, SearchListItemProps } from './types'; +import NoReviewsPlaceholder from './no-reviews-placeholder'; /** * Component to handle edit mode of "Reviews by Product". * - * @param {Object} props Incoming props for the component. - * @param {Object} props.attributes Incoming block attributes. - * @param {function(any):any} props.debouncedSpeak - * @param {function(any):any} props.setAttributes Setter for block attributes. */ const ReviewsByProductEditor = ( { attributes, debouncedSpeak, setAttributes, -} ) => { +}: ReviewsByProductEditorProps ) => { const { editMode, productId } = attributes; - const renderProductControlItem = ( args ) => { - const { item = 0 } = args; - + const renderProductControlItem = ( args: SearchListItemProps ) => { return ( ); @@ -189,21 +183,4 @@ const ReviewsByProductEditor = ( { ); }; -ReviewsByProductEditor.propTypes = { - /** - * The attributes for this block. - */ - attributes: PropTypes.object.isRequired, - /** - * The register block name. - */ - name: PropTypes.string.isRequired, - /** - * A callback to update attributes. - */ - setAttributes: PropTypes.func.isRequired, - // from withSpokenMessages - debouncedSpeak: PropTypes.func.isRequired, -}; - export default withSpokenMessages( ReviewsByProductEditor ); diff --git a/assets/js/blocks/reviews/reviews-by-product/edit.tsx b/assets/js/blocks/reviews/reviews-by-product/edit.tsx new file mode 100644 index 00000000000..e241189c5f7 --- /dev/null +++ b/assets/js/blocks/reviews/reviews-by-product/edit.tsx @@ -0,0 +1,22 @@ +/** + * External dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import Block from './block'; +import type { ReviewsByProductEditorProps } from './types'; + +export const Edit = ( + props: unknown & ReviewsByProductEditorProps +): JSX.Element => { + const blockProps = useBlockProps(); + + return ( +
+ +
+ ); +}; diff --git a/assets/js/blocks/reviews/reviews-by-product/index.js b/assets/js/blocks/reviews/reviews-by-product/index.tsx similarity index 94% rename from assets/js/blocks/reviews/reviews-by-product/index.js rename to assets/js/blocks/reviews/reviews-by-product/index.tsx index ff6d152d41b..c9927088dc7 100644 --- a/assets/js/blocks/reviews/reviews-by-product/index.js +++ b/assets/js/blocks/reviews/reviews-by-product/index.tsx @@ -8,7 +8,7 @@ import { Icon, commentContent } from '@wordpress/icons'; * Internal dependencies */ import '../editor.scss'; -import Editor from './edit'; +import { Edit } from './edit'; import sharedAttributes from '../attributes'; import save from '../save.js'; import { example } from '../example'; @@ -64,9 +64,7 @@ registerBlockType( 'woocommerce/reviews-by-product', { * * @param {Object} props Props to pass to block. */ - edit( props ) { - return ; - }, + edit: Edit, /** * Save the props to post content. diff --git a/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.js b/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.tsx similarity index 72% rename from assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.js rename to assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.tsx index 9d17ee9e350..f518253feb3 100644 --- a/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.js +++ b/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.tsx @@ -3,18 +3,28 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { Placeholder, Spinner } from '@wordpress/components'; -import PropTypes from 'prop-types'; -import ErrorPlaceholder from '@woocommerce/editor-components/error-placeholder'; +import ErrorPlaceholder, { + ErrorObject, +} from '@woocommerce/editor-components/error-placeholder'; import { Icon, commentContent } from '@wordpress/icons'; import { withProduct } from '@woocommerce/block-hocs'; import { decodeEntities } from '@wordpress/html-entities'; +/** + * Internal dependencies + */ +import type { NoReviewsPlaceholderProps } from './types'; -const NoReviewsPlaceholder = ( { error, getProduct, isLoading, product } ) => { +const NoReviewsPlaceholder = ( { + error, + getProduct, + isLoading, + product, +}: NoReviewsPlaceholderProps ) => { const renderApiError = () => ( ); @@ -53,14 +63,4 @@ const NoReviewsPlaceholder = ( { error, getProduct, isLoading, product } ) => { ); }; -NoReviewsPlaceholder.propTypes = { - // from withProduct - error: PropTypes.object, - isLoading: PropTypes.bool, - product: PropTypes.shape( { - name: PropTypes.node, - review_count: PropTypes.number, - } ), -}; - export default withProduct( NoReviewsPlaceholder ); diff --git a/assets/js/blocks/reviews/reviews-by-product/types.ts b/assets/js/blocks/reviews/reviews-by-product/types.ts new file mode 100644 index 00000000000..f6265597a09 --- /dev/null +++ b/assets/js/blocks/reviews/reviews-by-product/types.ts @@ -0,0 +1,35 @@ +/** + * External dependencies + */ +import { ErrorObject } from '@woocommerce/editor-components/error-placeholder'; +import { renderItemArgs } from '@woocommerce/editor-components/search-list-control/types'; + +export interface ReviewsByProductEditorProps { + attributes: { + editMode: boolean; + categoryIds: number[]; + showProductName: boolean; + productId: number[]; + }; + setAttributes: ( attributes: { + editMode?: boolean; + categoryIds?: number[]; + showProductName?: boolean; + productId?: number[]; + } ) => void; + debouncedSpeak: ( message: string ) => void; +} + +export interface SearchListItemProps extends renderItemArgs { + name: string; + reviewCount: number; +} + +export interface NoReviewsPlaceholderProps { + error?: string | ErrorObject; + getProduct: () => void; + isLoading?: boolean; + product?: { + name: string; + }; +} From 4e823a7cb97e06b68dab9c4fc803dd5885adb357 Mon Sep 17 00:00:00 2001 From: Hritik Chaudhary <33057454+hritikchaudhary@users.noreply.github.com> Date: Thu, 1 Jun 2023 23:47:12 +0530 Subject: [PATCH 2/4] updated checkstyle.xml --- checkstyle.xml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/checkstyle.xml b/checkstyle.xml index fdf9ebdd957..cd3d5c95e38 100644 --- a/checkstyle.xml +++ b/checkstyle.xml @@ -3643,13 +3643,13 @@ Type '{ type: string; default: boolean; }' is not assignable to type 'BlockAttribute<unknown>'." source="TS2769" /> - + - + @@ -3664,7 +3664,7 @@ - + ); From 8d9a9a33cf86f60457d488d5ef127126bede9170 Mon Sep 17 00:00:00 2001 From: Hritik Chaudhary <33057454+hritikchaudhary@users.noreply.github.com> Date: Mon, 5 Jun 2023 23:22:15 +0530 Subject: [PATCH 4/4] addressed review comments --- .../reviews/reviews-by-product/no-reviews-placeholder.tsx | 8 +++----- assets/js/blocks/reviews/reviews-by-product/types.ts | 4 ++-- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.tsx b/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.tsx index 5db45f6c2fa..85301538094 100644 --- a/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.tsx +++ b/assets/js/blocks/reviews/reviews-by-product/no-reviews-placeholder.tsx @@ -3,9 +3,7 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { Placeholder, Spinner } from '@wordpress/components'; -import ErrorPlaceholder, { - ErrorObject, -} from '@woocommerce/editor-components/error-placeholder'; +import ErrorPlaceholder from '@woocommerce/editor-components/error-placeholder'; import { Icon, commentContent } from '@wordpress/icons'; import { withProduct } from '@woocommerce/block-hocs'; import { decodeEntities } from '@wordpress/html-entities'; @@ -23,8 +21,8 @@ const NoReviewsPlaceholder = ( { const renderApiError = () => ( ); diff --git a/assets/js/blocks/reviews/reviews-by-product/types.ts b/assets/js/blocks/reviews/reviews-by-product/types.ts index f6265597a09..e7b6dfc535e 100644 --- a/assets/js/blocks/reviews/reviews-by-product/types.ts +++ b/assets/js/blocks/reviews/reviews-by-product/types.ts @@ -26,9 +26,9 @@ export interface SearchListItemProps extends renderItemArgs { } export interface NoReviewsPlaceholderProps { - error?: string | ErrorObject; + error: ErrorObject; getProduct: () => void; - isLoading?: boolean; + isLoading: boolean; product?: { name: string; };