[TS migration] Migrate 'useCurrentReportID.js' hook to TypeScript #29264
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
JKobrynski
approved these changes
Oct 11, 2023
…s-migration/useCurrentReportID/hook
VickyStash
reviewed
Oct 13, 2023
|
@VickyStash fixed :) |
blazejkustra
suggested changes
Oct 13, 2023
|
|
||
| export default function withCurrentReportID(WrappedComponent) { | ||
| const WithCurrentReportID = forwardRef((props, ref) => ( | ||
| export default function withCurrentReportID<TComponentProps extends CurrentReportIDContextValue>(WrappedComponent: ComponentType<TComponentProps>) { |
There was a problem hiding this comment.
- Maybe rename to
TComponentPropstoTPropsfor better visibility? - HOCs need to be more generic in terms of ref, that's why we need to add another type parameter
TRef. Without a type parameter, typescript complains with this test code:
const X = forwardRef((props: CurrentReportIDContextValue, ref: React.Ref<HTMLInputElement>) => {
console.log(props.currentReportID);
console.log(props.updateCurrentReportID);
return <input ref={ref} />;
});
function Test() {
const Wrapped = withCurrentReportID(X);
const testRef = useRef<HTMLInputElement>(null);
const x = <Wrapped ref={testRef} />;
}- According to the guidelines (discussion on slack). We should use
forwardRefa bit different, extract the component and define it in a separate line. Wrap it inforwardRefon the last line ofwithCurrentReportIDHOC.
Final code looks like this:
export default function withCurrentReportID<TProps extends CurrentReportIDContextValue, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>) {
function WithCurrentReportID(props: Omit<TProps, keyof CurrentReportIDContextValue>, ref: ForwardedRef<TRef>) {
return (
<CurrentReportIDContext.Consumer>
{(currentReportIDUtils) => (
<WrappedComponent
// eslint-disable-next-line react/jsx-props-no-spreading
{...currentReportIDUtils}
// eslint-disable-next-line react/jsx-props-no-spreading
{...(props as TProps)}
ref={ref}
/>
)}
</CurrentReportIDContext.Consumer>
);
}
WithCurrentReportID.displayName = `withCurrentReportID(${getComponentDisplayName(WrappedComponent)})`;
return forwardRef(WithCurrentReportID);
}| currentReportID: string; | ||
| }; | ||
| type CurrentReportIDContextProviderProps = { | ||
| children: React.ReactNode; |
There was a problem hiding this comment.
NAB: Copy the comment from propTypes:
/** Actual content wrapped by this component */
| }, | ||
| [setCurrentReportID], | ||
| ); | ||
|
|
||
| /** | ||
| * The context this component exposes to child components | ||
| * @returns {Object} currentReportID to share between central pane and LHN | ||
| * @returns currentReportID to share between central pane and LHN |
There was a problem hiding this comment.
Suggested change
| * @returns currentReportID to share between central pane and LHN | |
| * @returns currentReportID to share between central pane and LHN |
|
@blazejkustra thanks for the comments, fixed 😄 |
blazejkustra
approved these changes
Oct 13, 2023
melvin-bot
bot
requested review from
AndrewGable
and removed request for
a team
|
@AndrewGable Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
|
@kubabutkiewicz Again, when you marked this PR as ready no C+ was assigned. @AndrewGable Can you assign some C+ so that they can complete the reviewer checklist? |
AndrewGable
requested changes
Oct 13, 2023
|
QA step is still missing |
…s-migration/useCurrentReportID/hook
|
QA steps added |
AndrewGable
changed the title
situchan
reviewed
Oct 25, 2023
| */ | ||
| const updateCurrentReportID = useCallback( | ||
| (state: NavigationState) => { | ||
| setCurrentReportID(Navigation.getTopmostReportId(state) ?? ''); |
There was a problem hiding this comment.
why is this change needed?
I think it's original logic to return undefined or null as is
There was a problem hiding this comment.
@situchan So
App/src/components/withCurrentReportID.js
Lines 20 to 22 in a094cbb
The default state is empty string so useState is infering from this that currentReportID will be always string, and
Navigation.getTopmostReportId is returning string | undefined we need to use ?? to put empty string in caseNavigation.getTopmostReportId would return undefined
|
@kubabutkiewicz Also, please fix conflict |
…s-migration/useCurrentReportID/hook
|
@situchan fixed |
|
@situchan kindly bumping for review 😄 |
|
will review this in an hr |
|
Please pull main |
situchan
reviewed
Nov 8, 2023
Comment on lines
+81
to
+83
| WithCurrentReportID.displayName = `withCurrentReportID(${getComponentDisplayName(WrappedComponent)})`; | ||
|
|
||
| return forwardRef(WithCurrentReportID); |
There was a problem hiding this comment.
I expected this would cause console error since displayName is set to component wrapped with forwardRef.
But actually not happening. Not sure why.
Reviewer Checklist
Screenshots/VideosAndroid: Nativeandroid.movAndroid: mWeb Chromemchrome.moviOS: Nativeios.moviOS: mWeb Safarimsafari.movMacOS: Chrome / Safariweb.movMacOS: Desktopdesktop.mov |
situchan
approved these changes
Nov 8, 2023
…s-migration/useCurrentReportID/hook
|
@AndrewGable all yours |
AndrewGable
approved these changes
Nov 8, 2023
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
This was referenced Nov 8, 2023
|
🚀 Deployed to production by https://github.com/puneetlath in version: 1.3.97-7 🚀
|
|
🚀 Deployed to staging by https://github.com/AndrewGable in version: 1.3.98-0 🚀
|
|
🚀 Deployed to production by https://github.com/roryabraham in version: 1.3.98-5 🚀
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Details
Fixed Issues
$ 24944
$ 24956
Tests
Offline tests
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)myBool && <MyComponent />.src/languages/*files and using the translation methodWaiting for Copylabel for a copy review on the original GH to get the correct copy.STYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)/** comment above it */thisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
android.mp4
Android: mWeb Chrome
iOS: Native
ios.mp4
iOS: mWeb Safari
MacOS: Chrome / Safari
web.mp4
MacOS: Desktop
desktop.mp4