-
Notifications
You must be signed in to change notification settings - Fork 2.9k
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
[TS migration] Migrate SearchPage #34655
[TS migration] Migrate SearchPage #34655
Conversation
src/pages/SearchPage.tsx
Outdated
|
||
type SearchPageProps = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
type SearchPageProps = { | |
type SearchPageOnyxProps = { |
src/pages/SearchPage.tsx
Outdated
SearchPage.displayName = 'SearchPage'; | ||
export default withOnyx({ | ||
|
||
export default withOnyx<SearchPageProps, SearchPageProps>({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
export default withOnyx<SearchPageProps, SearchPageProps>({ | |
export default withOnyx<SearchPageProps, SearchPageOnyxProps>({ |
src/pages/SearchPage.tsx
Outdated
type SearchOptions = { | ||
recentReports: OnyxTypes.Report[]; | ||
personalDetails: OnyxTypes.PersonalDetails[]; | ||
userToInvite: []; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just an empty array? it doesn't look right for the type, also are you sure it's array at all?
src/pages/SearchPage.tsx
Outdated
const [searchOptions, setSearchOptions] = useState<SearchOptions>({ | ||
recentReports: [], | ||
personalDetails: [], | ||
userToInvite: [], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are you sure userToInvite
is an array?
src/pages/SearchPage.tsx
Outdated
/** The report currently being looked at */ | ||
reports: OnyxEntry<OnyxTypes.Report>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/** The report currently being looked at */ | |
reports: OnyxEntry<OnyxTypes.Report>; | |
/** All reports shared with the user */ | |
reports: OnyxCollection<OnyxTypes.Report>; |
src/pages/SearchPage.tsx
Outdated
@@ -99,8 +96,6 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports, nav | |||
|
|||
/** | |||
* Returns the sections needed for the OptionsSelector | |||
* | |||
* @returns {Array} | |||
*/ | |||
const getSections = () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add return type for this function
src/pages/SearchPage.tsx
Outdated
@@ -68,7 +70,7 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports, nav | |||
recentReports: localRecentReports, | |||
personalDetails: localPersonalDetails, | |||
userToInvite: localUserToInvite, | |||
} = OptionsListUtils.getSearchOptions(reports, personalDetails, searchValue.trim(), betas); | |||
} = OptionsListUtils.getSearchOptions(reports, personalDetails, searchValue.trim(), betas ?? undefined); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
} = OptionsListUtils.getSearchOptions(reports, personalDetails, searchValue.trim(), betas ?? undefined); | |
} = OptionsListUtils.getSearchOptions(reports, personalDetails, searchValue.trim(), betas ?? []); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it would be better to apply this suggestion. :)
# Conflicts: # src/pages/SearchPage.tsx
4bb464c
to
751c974
Compare
Hi, @ruben-rebelo, sorry for the delay, could you please resolve the conflicts? I can review this PR today. :) |
# Conflicts: # src/ONYXKEYS.ts # src/components/ScreenWrapper.tsx
Hello @ntdiary, no problem! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi, the PR looks good. However, I found we have another PR #35058 in progress to remove this file and use the new SearchPage/index.js
. Also, considering we have a TODO comment waiting for the OptionsSelector
migration, I'm not sure how we should proceed here. Maybe we could wait for PR #35058 to be completed and then migrate SearchPage/index.js
?
I've posted a message on slack to get some inputs, and please feel free to let me know If you have a different thought ❤️
src/pages/SearchPage.tsx
Outdated
@@ -68,7 +70,7 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports, nav | |||
recentReports: localRecentReports, | |||
personalDetails: localPersonalDetails, | |||
userToInvite: localUserToInvite, | |||
} = OptionsListUtils.getSearchOptions(reports, personalDetails, searchValue.trim(), betas); | |||
} = OptionsListUtils.getSearchOptions(reports, personalDetails, searchValue.trim(), betas ?? undefined); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it would be better to apply this suggestion. :)
Hello @ntdiary, I didn't knew about that PR, Let's keep this on hold until that one is merged than I proceed with the migration from there. Thank you for the information! |
# Conflicts: # src/pages/SearchPage.tsx
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ruben-rebelo, there's a ts error in WorkspaceMembersPage
, and I've also made a few minor ts suggestions. I have tested it locally and they works well. I will fill out the list after they are addressed. :)
src/components/ScreenWrapper.tsx
Outdated
@@ -14,7 +14,7 @@ import useTackInputFocus from '@hooks/useTackInputFocus'; | |||
import useThemeStyles from '@hooks/useThemeStyles'; | |||
import useWindowDimensions from '@hooks/useWindowDimensions'; | |||
import * as Browser from '@libs/Browser'; | |||
import type {RootStackParamList} from '@libs/Navigation/types'; | |||
import type {RootStackParamList, SearchNavigatorParamList} from '@libs/Navigation/types'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
import type {RootStackParamList, SearchNavigatorParamList} from '@libs/Navigation/types'; | |
import type {RootStackParamList} from '@libs/Navigation/types'; |
SearchPage doesn't pass navigation
to ScreenWrapper
, so we can revert this change.
src/components/ScreenWrapper.tsx
Outdated
@@ -89,7 +89,7 @@ type ScreenWrapperProps = { | |||
* | |||
* This is required because transitionEnd event doesn't trigger in the testing environment. | |||
*/ | |||
navigation?: StackNavigationProp<RootStackParamList>; | |||
navigation?: StackNavigationProp<RootStackParamList> | StackNavigationProp<SearchNavigatorParamList>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
navigation?: StackNavigationProp<RootStackParamList> | StackNavigationProp<SearchNavigatorParamList>; | |
navigation?: StackNavigationProp<RootStackParamList>; |
src/pages/SearchPage/index.tsx
Outdated
betas: [], | ||
reports: {}, | ||
isSearchingForReports: false, | ||
type SearchPageProps = SearchPageOnyxProps & StackScreenProps<SearchNavigatorParamList, typeof SCREENS.SEARCH_ROOT>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
type SearchPageProps = SearchPageOnyxProps & StackScreenProps<SearchNavigatorParamList, typeof SCREENS.SEARCH_ROOT>; | |
type SearchPageProps = SearchPageOnyxProps; |
src/pages/SearchPage/index.tsx
Outdated
newSections.push({ | ||
data: recentReports, | ||
shouldShow: true, | ||
indexOffset, | ||
}); | ||
indexOffset += recentReports.length; | ||
indexOffset += recentReports?.length; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
indexOffset += recentReports?.length; | |
indexOffset += recentReports.length; |
recentReports.length > 0
is true
. :)
src/pages/RoomMembersPage.tsx
Outdated
@@ -202,7 +202,7 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) { | |||
}); | |||
}); | |||
|
|||
result = result.sort((value1, value2) => localeCompare(value1.text, value2.text)); | |||
result = result.sort((value1, value2) => localeCompare(value1?.text ?? '', value2?.text ?? '')); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
result = result.sort((value1, value2) => localeCompare(value1?.text ?? '', value2?.text ?? '')); | |
result = result.sort((value1, value2) => localeCompare(value1.text ?? '', value2.text ?? '')); |
@@ -462,7 +462,7 @@ function BaseSelectionList<TItem extends ListItem>( | |||
getItemLayout={getItemLayout} | |||
onScroll={onScroll} | |||
onScrollBeginDrag={onScrollBeginDrag} | |||
keyExtractor={(item) => item.keyForList} | |||
keyExtractor={(item) => item.keyForList ?? ''} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
keyExtractor={(item) => item.keyForList ?? ''} | |
keyExtractor={(item, index) => item.keyForList ?? `${index}`} |
How about falling back to using the index, like React does?
src/pages/SearchPage/index.tsx
Outdated
const [isScreenTransitionEnd, setIsScreenTransitionEnd] = useState(false); | ||
const {translate} = useLocalize(); | ||
const {isOffline} = useNetwork(); | ||
const themeStyles = useThemeStyles(); | ||
const personalDetails = usePersonalDetails(); | ||
|
||
const offlineMessage = isOffline ? [`${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}`, {isTranslated: true}] : ''; | ||
const offlineMessage = isOffline ? ([`${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}`, {isTranslated: true}] as unknown as string) : ''; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const offlineMessage = isOffline ? ([`${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}`, {isTranslated: true}] as unknown as string) : ''; | |
const offlineMessage : MaybePhraseKey = isOffline ? [`${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}`, {isTranslated: true}] : ''; |
also change the type of textInputHint
to MaybePhraseKey
.
# Conflicts: # src/components/SelectionList/BaseSelectionList.tsx # src/components/SelectionList/RadioListItem.tsx # src/components/SelectionList/TableListItem.tsx # src/components/SelectionList/UserListItem.tsx # src/components/SelectionList/types.ts
@ntdiary I've updated this PR including your suggestions + merge with main + some ts fixes that appeared after the changes. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ruben-rebelo, the last minor change, I'm testing it now, and will update the videos later. 😄
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM :)
We did not find an internal engineer to review this PR, trying to assign a random engineer to #25182 as well as to this PR... Please reach out for help on Slack if no one gets assigned! |
@ruben-rebelo Conflicts |
Co-authored-by: wentao <[email protected]>
# Conflicts: # src/pages/SearchPage/index.tsx
…belo/App into ts-migration/searchPage
@yuwenmemon Conflicts Resolved |
still works well, @yuwenmemon, friendly reminder to merge. :) |
Apologies for the delay! I was sick last week 🤕 |
@yuwenmemon looks like this was merged without a test passing. Please add a note explaining why this was done and remove the |
🚀 Deployed to staging by https://github.com/yuwenmemon in version: 1.4.51-0 🚀
|
🚀 Deployed to production by https://github.com/luacmartins in version: 1.4.51-3 🚀
|
Details
[TS migration] Migrate SearchPage to TypeScript
Fixed Issues
$ #25182
PROPOSAL: N/A
Tests
Test NewChatPage:
Offline tests
N/A
QA Steps
Same as in the Tests section.
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodWaiting for Copy
label for a copy review on the original GH to get the correct copy.STYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Design
label so the design team can review the changes.ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
MacOS: Desktop