Remove propTypes definitions from Top Rated Products block

[hritikchaudhary]

Fixes #9519

Changes in the PR:

Removed propTypes definitions from product-search block and converted it to tsx.

Testing

Automated Tests

• Changes in this PR are covered by Automated Tests.
  • Unit tests
  • E2E tests

User Facing Testing

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

[nielslange]

Thank you so much for working on this, @hritikchaudhary. I just added a comment regarding converting the file from a class component into a functional component.

I also noticed that this change introduces two TS errors in the following files:

• assets/js/blocks/product-top-rated/block.tsx
• assets/js/blocks/product-top-rated/index.js

The TS error in assets/js/blocks/product-top-rated/block.tsx is related to import ServerSideRender from '@wordpress/server-side-render'; and can be ignored.

The TS error in assets/js/blocks/product-top-rated/index.js is related to overloading the registerBlockType() call. Could you look into this and also convert that file to TS?

[nielslange]

Initially, I didn't notice that this file was still a class component. When working on files that are class components, we usually convert them to functional components. Do you think you could that in this case? If so, we should also adjust getInspectorControls(), in the line below, accordingly.

[hritikchaudhary]

Hi sure I'll work on it... I was not aware about that.
Not sure how assets/js/blocks/product-top-rated/index.js got flagged though, I didn't make any change in it, anyway will look into it.
Thanks for the feedback and direction!

[nielslange]

Thank you so much for working on this, @hritikchaudhary. I just added a comment regarding converting the file from a class component into a functional component.

I also noticed that this change introduces two TS errors in the following files:

• assets/js/blocks/product-top-rated/block.tsx
• assets/js/blocks/product-top-rated/index.js

The TS error in assets/js/blocks/product-top-rated/block.tsx is related to import ServerSideRender from '@wordpress/server-side-render'; and can be ignored.

The TS error in assets/js/blocks/product-top-rated/index.js is related to overloading the registerBlockType() call. Could you look into this and also convert that file to TS?

[hritikchaudhary]

Hi @nielslange

1. I have converted class components to functional components
2. To resolve issues and convert index.js file, I had to take reference from product-best-sellers block as there were multiple errors while resolving overloading the registerBlockType() call isssue and overloading issue is still there but it is no longer flagging the entire file and I checked other components as well which are using metadata approach.. Let me know if there is a different approach I can follow.
3. Sorry it took some time to push the changes as I primarily use angular for frontend at my current job, so I'm learning at the same time 😀

[nielslange]

1. I have converted class components to functional components

Fantastic!

2. To resolve issues and convert index.js file, I had to take reference from product-best-sellers block as there were multiple errors while resolving overloading the registerBlockType() call isssue and overloading issue is still there but it is no longer flagging the entire file and I checked other components as well which are using metadata approach.. Let me know if there is a different approach I can follow.

Your approach is absolutely fine.

3. Sorry it took some time to push the changes as I primarily use angular for frontend at my current job, so I'm learning at the same time 😀

Don't worry, @hritikchaudhary. Please take all the time that you need. After all, you are contributing in your spare time, which we appreciate very much. It's also great to hear that use this opportunity to learn React. That's fantastic. I'm sure you can find a lot of interesting code patterns within WooCommerce Blocks.

[nielslange]

Thanks for applying the suggestions, @hritikchaudhary. The changes look great, and I'll merge this PR now. Thanks again for working on this. 🙏