Migrate components/post_view/post_flag_icon/post_flag_icon.tsx from class to function component
#24187
Conversation
mm-cloud-bot
added
the
release-note-none
| const PostFlagIcon = ({ | ||
| actions: { | ||
| flagPost, | ||
| unflagPost, | ||
| }, | ||
| isFlagged, | ||
| postId, | ||
| location = Locations.CENTER, | ||
| }: Props) => { |
There was a problem hiding this comment.
Expanded props to better track unused props.
| const buttonRef = useRef<HTMLButtonElement>(null); | ||
| const [a11yActive, setA11yActive] = useState(false); | ||
|
|
||
| const handlePress = useCallback((e: React.MouseEvent) => { |
There was a problem hiding this comment.
useCallback to avoid passing a new function to children objects on every render.
| const handleA11yActivateEvent = () => { | ||
| setA11yActive(true); | ||
| }; | ||
|
|
||
| handleA11yDeactivateEvent = () => { | ||
| this.setState({a11yActive: false}); | ||
| const handleA11yDeactivateEvent = () => { | ||
| setA11yActive(false); | ||
| }; |
There was a problem hiding this comment.
No need for useCallback since are only used on on mount/dismount
| ); | ||
| }; | ||
|
|
||
| export default React.memo(PostFlagIcon); |
There was a problem hiding this comment.
Rect.memo since the component used to be a Pure Component.
|
|
||
| handleA11yActivateEvent = () => { | ||
| this.setState({a11yActive: true}); | ||
| const handleA11yActivateEvent = () => { |
There was a problem hiding this comment.
I think this 2 functions should be defined inside the useEffect, that is the right scope for them, and there is not reason to have it outside.
| const handleA11yActivateEvent = () => { | ||
| setA11yActive(true); | ||
| }; | ||
| const handleA11yDeactivateEvent = () => { | ||
| setA11yActive(false); | ||
| }; |
There was a problem hiding this comment.
Any reasons why these are anonymous functions stored in a variable instead of plain functions?
There was a problem hiding this comment.
If you mean why use const foo = () => {...} instead of using just () => {...} where needed, it is because I want to send the same reference to both add and remove listener.
If you mean why use const foo = () => {...} instead of func foo () {...}, no reason at all. Not sure if there is any real difference between both options.
There was a problem hiding this comment.
yes i meant latter, there is no difference anyways. We don't want to set expectations for contributors to always use anonymous functions instead of plain functions.
| @@ -19,115 +19,97 @@ export type Actions = { | |||
| unflagPost: typeof unflagPost; | |||
| } | |||
|
|
|||
| interface Props { | |||
| type Props = { | |||
There was a problem hiding this comment.
I was receiving a weird typescript error (maybe just on local) where the index file was complaining with the following error: Default export of the module has or is using private name 'Props'.. Moving it to a type fixed it.
|
@M-ZubairAhmed The failing test seems to be non related to this. Any chance it is a flaky test? |
Yes this is a flaky test, happens with my PRs randomly sometimes as well
|
larkox
added
3: QA Review
|
E2E tests not automatically triggered, because the PR is not in a mergeable state. Please update the branch with the base branch and resolve outstanding conflicts. |
|
@yasserfaraazkhan QA Notes: The No functionality should have changed. |
|
/update-branch |
yasserfaraazkhan
added
Setup Cloud + CWS Test Server
larkox
removed
the
3: QA Review
Summary
Migrate
components/post_view/post_flag_icon/post_flag_icon.tsxfrom class to function componentTicket Link
None
Release Note