Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert Wikimedia classes to components #3407

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

reosarevok
Copy link
Member

Description

This turns the WikipediaExtract file (and the mostly deprecated CommonsImage one) from classes to React components, and moves from jQuery to useCallback/useEffect hooks.

Testing

Manually, by loading some files with both in a dev setup, such as /artist/ae0b2424-d4c5-4c54-82ac-fe3be5453270

@reosarevok reosarevok added the Refactoring Refactoring-only PRs (eslint fixes etc) label Nov 8, 2024
This turns the WikipediaExtract file (and the mostly deprecated
CommonsImage one) from classes to React components, and moves from
jQuery to useCallback/useEffect hooks.
Copy link
Member

@mwiencek mwiencek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested locally and works great, but could use a small cleanup.

Comment on lines +41 to +48
const loadCallback: CommonsImageRequestCallbackT =
React.useCallback((data) => {
setCommonsImage(data);
}, [setCommonsImage]);

React.useEffect(() => {
if (cachedImage == null) {
loadCommonsImage(entity, loadCallback);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The set function returned from useState is stable, so there's actually no need to wrap it in useCallback. You don't even have to include it in useEffect dependency lists.

Suggested change
const loadCallback: CommonsImageRequestCallbackT =
React.useCallback((data) => {
setCommonsImage(data);
}, [setCommonsImage]);
React.useEffect(() => {
if (cachedImage == null) {
loadCommonsImage(entity, loadCallback);
React.useEffect(() => {
if (cachedImage == null) {
loadCommonsImage(entity, setCommonsImage);

</div>
) : null;
}
}, [entity, loadCallback]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
}, [entity, loadCallback]);
}, [entity]);

Comment on lines +61 to +64
const loadCallback: WikipediaExtractRequestCallbackT =
React.useCallback((data) => {
setWikipediaExtract(data);
}, [setWikipediaExtract]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const loadCallback: WikipediaExtractRequestCallbackT =
React.useCallback((data) => {
setWikipediaExtract(data);
}, [setWikipediaExtract]);

});
React.useEffect(() => {
if (cachedWikipediaExtract == null) {
loadWikipediaExtract(entity, loadCallback);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
loadWikipediaExtract(entity, loadCallback);
loadWikipediaExtract(entity, setWikipediaExtract);

}
}
}, [entity, loadCallback]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
}, [entity, loadCallback]);
}, [entity]);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Refactoring Refactoring-only PRs (eslint fixes etc)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants