From e4139118fad56b2d9d3fa25e39e7c5bfd8fe5ce6 Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 29 Apr 2024 23:41:22 +0700 Subject: [PATCH 1/7] fix: Selected members disappear from search result after returning from confirmation page --- src/pages/NewChatPage.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx index 3f0c9a23da3f..8ce5e9efe9f2 100755 --- a/src/pages/NewChatPage.tsx +++ b/src/pages/NewChatPage.tsx @@ -97,12 +97,16 @@ function useOptions({isGroupChat}: NewChatPageProps) { if (!newGroupDraft?.participants) { return; } - const selectedParticipants = newGroupDraft.participants.filter((participant) => participant.accountID !== personalData.accountID); - const newSelectedOptions = selectedParticipants.map((participant): OptionData => { - const baseOption = OptionsListUtils.getParticipantsOption({accountID: participant.accountID, login: participant.login, reportID: ''}, personalDetails); - return {...baseOption, reportID: baseOption.reportID ?? '', isSelected: true}; - }); + const combinedList = [...options.personalDetails, ...selectedOptions, options.userToInvite]; + const selectedAccountIDs = newGroupDraft.participants.map((participant) => participant.accountID); + const selectedParticipants = combinedList.filter((option) => option?.accountID && selectedAccountIDs.includes(option?.accountID)); + const newSelectedOptions = selectedParticipants.map((participant) => ({ + ...participant, + reportID: participant?.reportID ?? '', + isSelected: true, + })); setSelectedOptions(newSelectedOptions); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [newGroupDraft, personalData, personalDetails]); return {...options, searchTerm, debouncedSearchTerm, setSearchTerm, areOptionsInitialized: areOptionsInitialized && didScreenTransitionEnd, selectedOptions, setSelectedOptions}; From a29c8fd819b37ef3c92aa4f758f918001774978d Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 2 May 2024 21:43:09 +0700 Subject: [PATCH 2/7] fix: selected items are removed after refreshing --- src/pages/NewChatPage.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx index 8ce5e9efe9f2..d62fba088cfa 100755 --- a/src/pages/NewChatPage.tsx +++ b/src/pages/NewChatPage.tsx @@ -1,6 +1,7 @@ +import {isEqual} from 'lodash'; import isEmpty from 'lodash/isEmpty'; import reject from 'lodash/reject'; -import React, {useCallback, useEffect, useMemo, useState} from 'react'; +import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; @@ -51,6 +52,8 @@ function useOptions({isGroupChat}: NewChatPageProps) { shouldInitialize: didScreenTransitionEnd, }); + const combinedListRef = useRef>([]); + const options = useMemo(() => { const filteredOptions = OptionsListUtils.getFilteredOptions( listOptions.reports ?? [], @@ -98,6 +101,10 @@ function useOptions({isGroupChat}: NewChatPageProps) { return; } const combinedList = [...options.personalDetails, ...selectedOptions, options.userToInvite]; + if (isEqual(combinedList, combinedListRef.current)) { + return; + } + combinedListRef.current = combinedList; const selectedAccountIDs = newGroupDraft.participants.map((participant) => participant.accountID); const selectedParticipants = combinedList.filter((option) => option?.accountID && selectedAccountIDs.includes(option?.accountID)); const newSelectedOptions = selectedParticipants.map((participant) => ({ @@ -106,8 +113,7 @@ function useOptions({isGroupChat}: NewChatPageProps) { isSelected: true, })); setSelectedOptions(newSelectedOptions); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [newGroupDraft, personalData, personalDetails]); + }, [newGroupDraft, personalData, options, selectedOptions, personalDetails]); return {...options, searchTerm, debouncedSearchTerm, setSearchTerm, areOptionsInitialized: areOptionsInitialized && didScreenTransitionEnd, selectedOptions, setSelectedOptions}; } From fdd1263d09160ca069ab8775e7f33f8cbbc82620 Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 6 May 2024 15:59:11 +0700 Subject: [PATCH 3/7] fix: can not select option --- src/pages/NewChatPage.tsx | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx index d62fba088cfa..07af0d6466d6 100755 --- a/src/pages/NewChatPage.tsx +++ b/src/pages/NewChatPage.tsx @@ -1,7 +1,6 @@ -import {isEqual} from 'lodash'; import isEmpty from 'lodash/isEmpty'; import reject from 'lodash/reject'; -import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; +import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; @@ -46,14 +45,11 @@ function useOptions({isGroupChat}: NewChatPageProps) { const [betas] = useOnyx(ONYXKEYS.BETAS); const [newGroupDraft] = useOnyx(ONYXKEYS.NEW_GROUP_CHAT_DRAFT); const personalData = useCurrentUserPersonalDetails(); - const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const {didScreenTransitionEnd} = useScreenWrapperTranstionStatus(); const {options: listOptions, areOptionsInitialized} = useOptionsList({ shouldInitialize: didScreenTransitionEnd, }); - const combinedListRef = useRef>([]); - const options = useMemo(() => { const filteredOptions = OptionsListUtils.getFilteredOptions( listOptions.reports ?? [], @@ -100,20 +96,16 @@ function useOptions({isGroupChat}: NewChatPageProps) { if (!newGroupDraft?.participants) { return; } - const combinedList = [...options.personalDetails, ...selectedOptions, options.userToInvite]; - if (isEqual(combinedList, combinedListRef.current)) { - return; - } - combinedListRef.current = combinedList; + const combinedList = [...listOptions.personalDetails]; const selectedAccountIDs = newGroupDraft.participants.map((participant) => participant.accountID); - const selectedParticipants = combinedList.filter((option) => option?.accountID && selectedAccountIDs.includes(option?.accountID)); + const selectedParticipants = combinedList.filter((option) => option?.accountID && option.accountID !== personalData.accountID && selectedAccountIDs.includes(option?.accountID)); const newSelectedOptions = selectedParticipants.map((participant) => ({ ...participant, reportID: participant?.reportID ?? '', isSelected: true, })); setSelectedOptions(newSelectedOptions); - }, [newGroupDraft, personalData, options, selectedOptions, personalDetails]); + }, [newGroupDraft, listOptions.personalDetails, personalData]); return {...options, searchTerm, debouncedSearchTerm, setSearchTerm, areOptionsInitialized: areOptionsInitialized && didScreenTransitionEnd, selectedOptions, setSelectedOptions}; } From a6cc6a51b1b9addefede4a8b925d4864513e97f4 Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 6 May 2024 16:00:27 +0700 Subject: [PATCH 4/7] clean code --- src/pages/NewChatPage.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx index 07af0d6466d6..08223401e45a 100755 --- a/src/pages/NewChatPage.tsx +++ b/src/pages/NewChatPage.tsx @@ -96,9 +96,8 @@ function useOptions({isGroupChat}: NewChatPageProps) { if (!newGroupDraft?.participants) { return; } - const combinedList = [...listOptions.personalDetails]; const selectedAccountIDs = newGroupDraft.participants.map((participant) => participant.accountID); - const selectedParticipants = combinedList.filter((option) => option?.accountID && option.accountID !== personalData.accountID && selectedAccountIDs.includes(option?.accountID)); + const selectedParticipants = listOptions.personalDetails.filter((option) => option?.accountID && option.accountID !== personalData.accountID && selectedAccountIDs.includes(option?.accountID)); const newSelectedOptions = selectedParticipants.map((participant) => ({ ...participant, reportID: participant?.reportID ?? '', From a41aefcf4540b2c01b8d5544678e585a72609885 Mon Sep 17 00:00:00 2001 From: tienifr Date: Tue, 7 May 2024 10:34:36 +0700 Subject: [PATCH 5/7] lint fix --- src/pages/NewChatPage.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx index 41981108269e..ff61e532d5b6 100755 --- a/src/pages/NewChatPage.tsx +++ b/src/pages/NewChatPage.tsx @@ -95,7 +95,9 @@ function useOptions({isGroupChat}: NewChatPageProps) { return; } const selectedAccountIDs = newGroupDraft.participants.map((participant) => participant.accountID); - const selectedParticipants = listOptions.personalDetails.filter((option) => option?.accountID && option.accountID !== personalData.accountID && selectedAccountIDs.includes(option?.accountID)); + const selectedParticipants = listOptions.personalDetails.filter( + (option) => option?.accountID && option.accountID !== personalData.accountID && selectedAccountIDs.includes(option?.accountID), + ); const newSelectedOptions = selectedParticipants.map((participant) => ({ ...participant, reportID: participant?.reportID ?? '', From 49fd21c61e59646eac4d0ede3d1ae39f960126f6 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 8 May 2024 16:01:21 +0700 Subject: [PATCH 6/7] fix: can not add user to group --- src/libs/OptionsListUtils.ts | 1 + src/pages/NewChatPage.tsx | 25 ++++++++++++++++++++----- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 082952e58f9e..b62f3af5a3d6 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -2443,6 +2443,7 @@ export { getReportOption, getTaxRatesSection, getFirstKeyForList, + getUserToInviteOption, }; export type {MemberForList, CategorySection, CategoryTreeSection, Options, OptionList, SearchOption, PayeePersonalDetails, Category, Tax, TaxRatesOption, Option, OptionTree}; diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx index ff61e532d5b6..4d92d06eb675 100755 --- a/src/pages/NewChatPage.tsx +++ b/src/pages/NewChatPage.tsx @@ -94,17 +94,32 @@ function useOptions({isGroupChat}: NewChatPageProps) { if (!newGroupDraft?.participants) { return; } - const selectedAccountIDs = newGroupDraft.participants.map((participant) => participant.accountID); - const selectedParticipants = listOptions.personalDetails.filter( - (option) => option?.accountID && option.accountID !== personalData.accountID && selectedAccountIDs.includes(option?.accountID), - ); + const selectedParticipants: OptionData[] = []; + newGroupDraft.participants.forEach((p) => { + if (p.accountID === personalData.accountID) { + return; + } + const participant = listOptions.personalDetails.find((option) => option.accountID === p.accountID); + if (participant) { + selectedParticipants.push(participant); + return; + } + const userToInvite = OptionsListUtils.getUserToInviteOption({ + searchValue: p.login, + betas, + }); + if (!userToInvite) { + return; + } + selectedParticipants.push(userToInvite); + }); const newSelectedOptions = selectedParticipants.map((participant) => ({ ...participant, reportID: participant?.reportID ?? '', isSelected: true, })); setSelectedOptions(newSelectedOptions); - }, [newGroupDraft, listOptions.personalDetails, personalData]); + }, [newGroupDraft, listOptions.personalDetails, betas, personalData]); return {...options, searchTerm, debouncedSearchTerm, setSearchTerm, areOptionsInitialized: areOptionsInitialized && didScreenTransitionEnd, selectedOptions, setSelectedOptions}; } From 261163342dba020ec382f4d2bceb58270de25969 Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 10 May 2024 15:01:11 +0700 Subject: [PATCH 7/7] refactor --- src/pages/NewChatPage.tsx | 34 +++++++++++++++------------------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx index 4d92d06eb675..36be521215fa 100755 --- a/src/pages/NewChatPage.tsx +++ b/src/pages/NewChatPage.tsx @@ -94,32 +94,28 @@ function useOptions({isGroupChat}: NewChatPageProps) { if (!newGroupDraft?.participants) { return; } - const selectedParticipants: OptionData[] = []; - newGroupDraft.participants.forEach((p) => { - if (p.accountID === personalData.accountID) { + const newSelectedOptions: OptionData[] = []; + newGroupDraft.participants.forEach((participant) => { + if (participant.accountID === personalData.accountID) { return; } - const participant = listOptions.personalDetails.find((option) => option.accountID === p.accountID); - if (participant) { - selectedParticipants.push(participant); - return; + let participantOption: OptionData | undefined | null = listOptions.personalDetails.find((option) => option.accountID === participant.accountID); + if (!participantOption) { + participantOption = OptionsListUtils.getUserToInviteOption({ + searchValue: participant.login, + betas, + }); } - const userToInvite = OptionsListUtils.getUserToInviteOption({ - searchValue: p.login, - betas, - }); - if (!userToInvite) { + if (!participantOption) { return; } - selectedParticipants.push(userToInvite); + newSelectedOptions.push({ + ...participantOption, + isSelected: true, + }); }); - const newSelectedOptions = selectedParticipants.map((participant) => ({ - ...participant, - reportID: participant?.reportID ?? '', - isSelected: true, - })); setSelectedOptions(newSelectedOptions); - }, [newGroupDraft, listOptions.personalDetails, betas, personalData]); + }, [newGroupDraft?.participants, listOptions.personalDetails, betas, personalData.accountID]); return {...options, searchTerm, debouncedSearchTerm, setSearchTerm, areOptionsInitialized: areOptionsInitialized && didScreenTransitionEnd, selectedOptions, setSelectedOptions}; }