Refactor Media Upload Progress component converting from Class to Function

[dantovbein]

Based on #22890

What?

Migrate the MediaUploadProgress react native component, currently as a React Class, to a Functional Component.

Why?

React introduced Hooks after 16.8.* version.
👇 Taken from their official documentation .

We recommend defining components as functions instead of classes. See how to migrate.

How?

Following this document

Testing Instructions

1. Open a post or page.
2. Insert an image block.
3. Upload a new image

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @dantovbein! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[dantovbein]

An important thing to mentions is that I've used the combination of useCallback and useMemo hooks to prevent the pre-render.

[SiobhyB]

@dantovbein, thank you for your contribution! It's cool to see moves to migrate class components to hooks. :)

I added a couple of comments related to the dependency arrays. I'm concerned about including all the props in the arrays, and think it's worth reviewing whether there are different approaches to take.

For the mediaUpload function, for example, perhaps we could manage addMediaUploadListener via a useEffect hook, then call mediaUpload as a regular function? (As I was looking through the code, I also wondered if it may be made more readable by separating that logic into its own useMediaUpload hook. But, I will leave that implementation decision to you.)

In addition, I noticed tests in the following suites are failing following the changes in this PR:

• packages/block-editor/src/components/media-upload-progress/test/index.native.js
• packages/block-library/src/audio/test/edit.native.js
• packages/block-library/src/file/test/edit.native.js

Would you be able to take a look into these? I believe they're false positives, but the code will need to be updated to reflect the changes from this PR. We have steps for getting set up with the native tests here. If you have questions about setting up, please feel welcome to either reach out here or in the #mobile channel on Slack.

Thank you again for your contribution here! I'd be happy to take another look and do further testing if you can address those initial comments. 🙇‍♀️

[SiobhyB]

I'm hesitant about passing all props to the dependency array. It feels like it defeats the purpose of having the array if the function's going to update on every render, and also doesn't seem necessary to me.

In the original code, mediaUpload is only called when the component is mounted. Could we maybe refactor this to use useEffect or potentially move some of this logic to a separate custom hook within this file? I think we could make this even cleaner.

[SiobhyB]

Sharing similar concerns about passing all props to the dependency array, I'm worried it could lead to some unwanted side effects or unnecessary renders. Could we review the dependencies that are being used here to ensure they're all necessary?