Skip to content

Commit

Permalink
replace search input manager for the updated screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@BrtqKr
BrtqKr committed Sep 10, 2024
1 parent 043056c commit dd11582
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 30 deletions.
37 changes: 18 additions & 19 deletions src/pages/InviteReportParticipantsPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, {useCallback, useEffect, useMemo, useState} from 'react';
import type {SectionListData} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import {useOnyx, withOnyx} from 'react-native-onyx';
import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import {useOptionsList} from '@components/OptionListContextProvider';
Expand All @@ -14,6 +14,7 @@ import type {WithNavigationTransitionEndProps} from '@components/withNavigationT
import useDebouncedState from '@hooks/useDebouncedState';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import * as UserSearchPhraseActions from '@libs/actions/RoomMembersUserSearchPhrase';
import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import * as LoginUtils from '@libs/LoginUtils';
import Navigation from '@libs/Navigation/Navigation';
Expand All @@ -28,7 +29,6 @@ import ROUTES from '@src/ROUTES';
import type {InvitedEmailsToAccountIDs, PersonalDetailsList} from '@src/types/onyx';
import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound';
import withReportOrNotFound from './home/report/withReportOrNotFound';
import SearchInputManager from './workspace/SearchInputManager';

type InviteReportParticipantsPageOnyxProps = {
/** All of the personal details for everyone */
Expand All @@ -46,13 +46,13 @@ function InviteReportParticipantsPage({betas, personalDetails, report, didScreen

const styles = useThemeStyles();
const {translate} = useLocalize();
const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
const [userSearchPhrase] = useOnyx(ONYXKEYS.ROOM_MEMBERS_USER_SEARCH_PHRASE);
const [searchValue, debouncedSearchTerm, setSearchValue] = useDebouncedState(userSearchPhrase ?? '');
const [selectedOptions, setSelectedOptions] = useState<ReportUtils.OptionData[]>([]);

useEffect(() => {
setSearchTerm(SearchInputManager.searchInput);
// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
}, []);
UserSearchPhraseActions.updateUserSearchPhrase(debouncedSearchTerm);
}, [debouncedSearchTerm]);

// Any existing participants and Expensify emails should not be eligible for invitation
const excludedUsers = useMemo(
Expand Down Expand Up @@ -104,8 +104,8 @@ function InviteReportParticipantsPage({betas, personalDetails, report, didScreen
filterSelectedOptions = selectedOptions.filter((option) => {
const accountID = option?.accountID;
const isOptionInPersonalDetails = inviteOptions.personalDetails.some((personalDetail) => accountID && personalDetail?.accountID === accountID);
const searchValue = OptionsListUtils.getSearchValueForPhoneOrEmail(debouncedSearchTerm);
const isPartOfSearchTerm = !!option.text?.toLowerCase().includes(searchValue) || !!option.login?.toLowerCase().includes(searchValue);
const processedSearchValue = OptionsListUtils.getSearchValueForPhoneOrEmail(debouncedSearchTerm);
const isPartOfSearchTerm = !!option.text?.toLowerCase().includes(processedSearchValue) || !!option.login?.toLowerCase().includes(processedSearchValue);
return isPartOfSearchTerm || isOptionInPersonalDetails;
});
}
Expand Down Expand Up @@ -183,22 +183,22 @@ function InviteReportParticipantsPage({betas, personalDetails, report, didScreen
}, [selectedOptions, backRoute, reportID, validate]);

const headerMessage = useMemo(() => {
const searchValue = debouncedSearchTerm.trim().toLowerCase();
const processedLogin = debouncedSearchTerm.trim().toLowerCase();
const expensifyEmails = CONST.EXPENSIFY_EMAILS as string[];
if (!inviteOptions.userToInvite && expensifyEmails.includes(searchValue)) {
if (!inviteOptions.userToInvite && expensifyEmails.includes(processedLogin)) {
return translate('messages.errorMessageInvalidEmail');
}
if (
!inviteOptions.userToInvite &&
excludedUsers.includes(
PhoneNumber.parsePhoneNumber(LoginUtils.appendCountryCode(searchValue)).possible
? PhoneNumber.addSMSDomainIfPhoneNumber(LoginUtils.appendCountryCode(searchValue))
: searchValue,
PhoneNumber.parsePhoneNumber(LoginUtils.appendCountryCode(processedLogin)).possible
? PhoneNumber.addSMSDomainIfPhoneNumber(LoginUtils.appendCountryCode(processedLogin))
: processedLogin,
)
) {
return translate('messages.userIsAlreadyMember', {login: searchValue, name: reportName ?? ''});
return translate('messages.userIsAlreadyMember', {login: processedLogin, name: reportName ?? ''});
}
return OptionsListUtils.getHeaderMessage(inviteOptions.recentReports.length + inviteOptions.personalDetails.length !== 0, !!inviteOptions.userToInvite, searchValue);
return OptionsListUtils.getHeaderMessage(inviteOptions.recentReports.length + inviteOptions.personalDetails.length !== 0, !!inviteOptions.userToInvite, processedLogin);
}, [debouncedSearchTerm, inviteOptions.userToInvite, inviteOptions.recentReports.length, inviteOptions.personalDetails.length, excludedUsers, translate, reportName]);

const footerContent = useMemo(
Expand All @@ -207,7 +207,7 @@ function InviteReportParticipantsPage({betas, personalDetails, report, didScreen
isDisabled={!selectedOptions.length}
buttonText={translate('common.invite')}
onSubmit={() => {
SearchInputManager.searchInput = '';
UserSearchPhraseActions.clearUserSearchPhrase();
inviteUsers();
}}
containerStyles={[styles.flexReset, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto]}
Expand Down Expand Up @@ -236,10 +236,9 @@ function InviteReportParticipantsPage({betas, personalDetails, report, didScreen
sections={sections}
ListItem={InviteMemberListItem}
textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
textInputValue={searchTerm}
textInputValue={searchValue}
onChangeText={(value) => {
SearchInputManager.searchInput = value;
setSearchTerm(value);
setSearchValue(value);
}}
headerMessage={headerMessage}
onSelectRow={toggleOption}
Expand Down
22 changes: 13 additions & 9 deletions src/pages/ReportParticipantsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import TableListItem from '@components/SelectionList/TableListItem';
import type {ListItem, SelectionListHandle} from '@components/SelectionList/types';
import SelectionListWithModal from '@components/SelectionListWithModal';
import Text from '@components/Text';
import useDebouncedState from '@hooks/useDebouncedState';
import useLocalize from '@hooks/useLocalize';
import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
import useNetwork from '@hooks/useNetwork';
Expand All @@ -25,6 +26,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
import useThemeStyles from '@hooks/useThemeStyles';
import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
import * as Report from '@libs/actions/Report';
import * as UserSearchPhraseActions from '@libs/actions/RoomMembersUserSearchPhrase';
import Navigation from '@libs/Navigation/Navigation';
import * as OptionsListUtils from '@libs/OptionsListUtils';
import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
Expand All @@ -34,7 +36,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound';
import withReportOrNotFound from './home/report/withReportOrNotFound';
import SearchInputManager from './workspace/SearchInputManager';

type MemberOption = Omit<ListItem, 'accountID'> & {accountID: number};

Expand All @@ -47,6 +48,7 @@ function ReportParticipantsPage({report}: WithReportOrNotFoundProps) {
const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
const selectionListRef = useRef<SelectionListHandle>(null);
const textInputRef = useRef<TextInput>(null);
const [userSearchPhrase] = useOnyx(ONYXKEYS.ROOM_MEMBERS_USER_SEARCH_PHRASE);
const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`);
const {selectionMode} = useMobileSelectionMode();
const [session] = useOnyx(ONYXKEYS.SESSION);
Expand All @@ -57,15 +59,19 @@ function ReportParticipantsPage({report}: WithReportOrNotFoundProps) {
const isFocused = useIsFocused();
const {isOffline} = useNetwork();
const canSelectMultiple = isGroupChat && isCurrentUserAdmin && (isSmallScreenWidth ? selectionMode?.isEnabled : true);
const [searchValue, setSearchValue] = useState('');
const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');

useEffect(
() => () => {
SearchInputManager.searchInput = '';
UserSearchPhraseActions.clearUserSearchPhrase();
},
[],
);

useEffect(() => {
UserSearchPhraseActions.updateUserSearchPhrase(debouncedSearchValue);
}, [debouncedSearchValue]);

useEffect(() => {
if (isFocused) {
return;
Expand Down Expand Up @@ -96,12 +102,12 @@ function ReportParticipantsPage({report}: WithReportOrNotFoundProps) {
return;
}
if (shouldShowTextInput) {
setSearchValue(SearchInputManager.searchInput);
setSearchValue(userSearchPhrase ?? '');
} else {
SearchInputManager.searchInput = '';
UserSearchPhraseActions.clearUserSearchPhrase();
setSearchValue('');
}
}, [isFocused, shouldShowTextInput]);
}, [isFocused, setSearchValue, shouldShowTextInput, userSearchPhrase]);

const getParticipants = () => {
let result: MemberOption[] = [];
Expand Down Expand Up @@ -186,7 +192,6 @@ function ReportParticipantsPage({report}: WithReportOrNotFoundProps) {
* Open the modal to invite a user
*/
const inviteUser = useCallback(() => {
setSearchValue('');
Navigation.navigate(ROUTES.REPORT_PARTICIPANTS_INVITE.getRoute(report.reportID));
}, [report]);

Expand All @@ -199,7 +204,7 @@ function ReportParticipantsPage({report}: WithReportOrNotFoundProps) {
const accountIDsToRemove = selectedMembers.filter((id) => id !== currentUserAccountID);
Report.removeFromGroupChat(report.reportID, accountIDsToRemove);
setSearchValue('');
SearchInputManager.searchInput = '';
UserSearchPhraseActions.clearUserSearchPhrase();
setSelectedMembers([]);
setRemoveMembersConfirmModalVisible(false);
};
Expand Down Expand Up @@ -404,7 +409,6 @@ function ReportParticipantsPage({report}: WithReportOrNotFoundProps) {
textInputLabel={translate('selectionList.findMember')}
textInputValue={searchValue}
onChangeText={(value) => {
SearchInputManager.searchInput = value;
setSearchValue(value);
}}
headerMessage={headerMessage}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/RoomMembersPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) {
}
setSearchValue('');
Navigation.navigate(ROUTES.ROOM_INVITE.getRoute(report.reportID));
}, [report]);
}, [report, setSearchValue]);

/**
* Remove selected users from the room
Expand Down Expand Up @@ -205,7 +205,7 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) {
UserSearchPhraseActions.clearUserSearchPhrase();
setSearchValue('');
}
}, [isFocusedScreen, shouldShowTextInput]);
}, [isFocusedScreen, setSearchValue, shouldShowTextInput, userSearchPhrase]);

const data = useMemo((): ListItem[] => {
let result: ListItem[] = [];
Expand Down

0 comments on commit dd11582

Please sign in to comment.