[TS migration] Migrate 'useCurrentReportID.js' hook to TypeScript#29264
Merged
AndrewGable merged 15 commits intoExpensify:mainfrom Nov 8, 2023
Merged
Conversation
JKobrynski
approved these changes
Oct 11, 2023
…s-migration/useCurrentReportID/hook
VickyStash
reviewed
Oct 13, 2023
Contributor
Author
|
@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>) { |
Contributor
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; |
Contributor
There was a problem hiding this comment.
NAB: Copy the comment from propTypes:
/** Actual content wrapped by this component */
| /** | ||
| * 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 |
Contributor
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 |
Contributor
Author
|
@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] |
Contributor
|
@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
Contributor
AndrewGable
left a comment
AndrewGable
left a comment
There was a problem hiding this comment.
Please write QA tests
Contributor
|
QA step is still missing |
…s-migration/useCurrentReportID/hook
Contributor
Author
|
QA steps added |
AndrewGable
changed the title
situchan
reviewed
Oct 25, 2023
| */ | ||
| const updateCurrentReportID = useCallback( | ||
| (state: NavigationState) => { | ||
| setCurrentReportID(Navigation.getTopmostReportId(state) ?? ''); |
Contributor
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
Contributor
Author
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
Contributor
|
@kubabutkiewicz Also, please fix conflict |
…s-migration/useCurrentReportID/hook
Contributor
Author
|
@situchan fixed |
Contributor
Author
|
@situchan kindly bumping for review 😄 |
Contributor
|
will review this in an hr |
Contributor
|
Please pull main |
situchan
reviewed
Nov 8, 2023
Comment on lines
+81
to
+83
| WithCurrentReportID.displayName = `withCurrentReportID(${getComponentDisplayName(WrappedComponent)})`; | ||
|
|
||
| return forwardRef(WithCurrentReportID); |
Contributor
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.
Contributor
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
Contributor
|
@AndrewGable all yours |
AndrewGable
approved these changes
Nov 8, 2023
Contributor
|
✋ 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
Contributor
|
🚀 Deployed to production by https://github.com/puneetlath in version: 1.3.97-7 🚀
|
Contributor
|
🚀 Deployed to staging by https://github.com/AndrewGable in version: 1.3.98-0 🚀
|
Contributor
|
🚀 Deployed to production by https://github.com/roryabraham in version: 1.3.98-5 🚀
|
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
7 participants
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