From cd8d6c2c950bfda4510de3fc3ad8b9e741870946 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Mon, 25 Mar 2024 13:16:33 +0100 Subject: [PATCH 1/5] refactorings --- .../ShareLogList/BaseShareLogList.tsx | 114 +++++++----------- .../settings/AboutPage/ShareLogList/types.ts | 7 +- 2 files changed, 48 insertions(+), 73 deletions(-) diff --git a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx index 1a7b23477349..aea358e43ce0 100644 --- a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx +++ b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx @@ -1,66 +1,62 @@ -import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; -import {View} from 'react-native'; +import React, {useMemo, useRef} from 'react'; import {withOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; -import {usePersonalDetails} from '@components/OnyxProvider'; -import OptionsSelector from '@components/OptionsSelector'; +import {useBetas, usePersonalDetails} from '@components/OnyxProvider'; import ScreenWrapper from '@components/ScreenWrapper'; +import SelectionList from '@components/SelectionList'; +import UserListItem from '@components/SelectionList/UserListItem'; +import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; -import useThemeStyles from '@hooks/useThemeStyles'; import * as FileUtils from '@libs/fileDownload/FileUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; +import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Report} from '@src/types/onyx'; import type {BaseShareLogListOnyxProps, BaseShareLogListProps} from './types'; -function BaseShareLogList({betas, reports, onAttachLogToReport}: BaseShareLogListProps) { - const [searchValue, setSearchValue] = useState(''); - const [searchOptions, setSearchOptions] = useState>({ - recentReports: [], - personalDetails: [], - userToInvite: null, - }); - +function BaseShareLogList({reports, onAttachLogToReport}: BaseShareLogListProps) { + const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState(''); const {isOffline} = useNetwork(); const {translate} = useLocalize(); - const styles = useThemeStyles(); const isMounted = useRef(false); const personalDetails = usePersonalDetails(); + const betas = useBetas(); + + const searchOptions = useMemo(() => { + const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails); - const updateOptions = useCallback(() => { + if (!isMounted.current || !isOptionsDataReady) { + isMounted.current = true; + return { + recentReports: [], + personalDetails: [], + userToInvite: undefined, + headerMessage: '', + }; + } const { recentReports: localRecentReports, personalDetails: localPersonalDetails, userToInvite: localUserToInvite, - } = OptionsListUtils.getShareLogOptions(reports, personalDetails, searchValue.trim(), betas ?? []); + } = OptionsListUtils.getShareLogOptions(reports, personalDetails, debouncedSearchValue.trim(), betas ?? []); + + const header = OptionsListUtils.getHeaderMessage( + (searchOptions?.recentReports?.length || 0) + (searchOptions?.personalDetails?.length || 0) !== 0, + Boolean(searchOptions?.userToInvite), + debouncedSearchValue, + ); - setSearchOptions({ + return { recentReports: localRecentReports, personalDetails: localPersonalDetails, userToInvite: localUserToInvite, - }); - }, [betas, personalDetails, reports, searchValue]); - - const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails); - - useEffect(() => { - updateOptions(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - useEffect(() => { - if (!isMounted.current) { - isMounted.current = true; - return; - } - - updateOptions(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [searchValue]); + headerMessage: header, + }; + }, [betas, personalDetails, reports, debouncedSearchValue]); const sections = useMemo(() => { const sectionsList = []; @@ -91,17 +87,7 @@ function BaseShareLogList({betas, reports, onAttachLogToReport}: BaseShareLogLis } return sectionsList; - }, [searchOptions.personalDetails, searchOptions.recentReports, searchOptions.userToInvite, translate]); - - const headerMessage = OptionsListUtils.getHeaderMessage( - searchOptions.recentReports.length + searchOptions.personalDetails.length !== 0, - Boolean(searchOptions.userToInvite), - searchValue, - ); - - const onChangeText = (value = '') => { - setSearchValue(value); - }; + }, [searchOptions?.personalDetails, searchOptions?.recentReports, searchOptions?.userToInvite, translate]); const attachLogToReport = (option: Report) => { if (!option.reportID) { @@ -117,28 +103,24 @@ function BaseShareLogList({betas, reports, onAttachLogToReport}: BaseShareLogLis testID={BaseShareLogList.displayName} includeSafeAreaPaddingBottom={false} > - {({safeAreaPaddingBottomStyle}) => ( + {({didScreenTransitionEnd}) => ( <> Navigation.goBack(ROUTES.SETTINGS_CONSOLE)} /> - - - + )} @@ -151,8 +133,4 @@ export default withOnyx({ reports: { key: ONYXKEYS.COLLECTION.REPORT, }, - betas: { - key: ONYXKEYS.BETAS, - initialValue: [], - }, })(BaseShareLogList); diff --git a/src/pages/settings/AboutPage/ShareLogList/types.ts b/src/pages/settings/AboutPage/ShareLogList/types.ts index abbdbfb88e0b..6d385e6cac74 100644 --- a/src/pages/settings/AboutPage/ShareLogList/types.ts +++ b/src/pages/settings/AboutPage/ShareLogList/types.ts @@ -1,10 +1,7 @@ -import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; -import type {Beta, Report} from '@src/types/onyx'; +import type {OnyxCollection} from 'react-native-onyx'; +import type {Report} from '@src/types/onyx'; type BaseShareLogListOnyxProps = { - /** Beta features list */ - betas: OnyxEntry; - /** All reports shared with the user */ reports: OnyxCollection; }; From 52a9f5ea41746aa443fa42b0f425dc591df21f26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Tue, 26 Mar 2024 11:24:41 +0100 Subject: [PATCH 2/5] removed isMounted flag --- .../settings/AboutPage/ShareLogList/BaseShareLogList.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx index aea358e43ce0..3fdf503023c4 100644 --- a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx +++ b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx @@ -1,4 +1,4 @@ -import React, {useMemo, useRef} from 'react'; +import React, {useMemo} from 'react'; import {withOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import {useBetas, usePersonalDetails} from '@components/OnyxProvider'; @@ -22,15 +22,13 @@ function BaseShareLogList({reports, onAttachLogToReport}: BaseShareLogListProps) const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState(''); const {isOffline} = useNetwork(); const {translate} = useLocalize(); - const isMounted = useRef(false); const personalDetails = usePersonalDetails(); const betas = useBetas(); const searchOptions = useMemo(() => { const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails); - if (!isMounted.current || !isOptionsDataReady) { - isMounted.current = true; + if (!isOptionsDataReady) { return { recentReports: [], personalDetails: [], From 59dff36b466ff6a9f268c2313a9cac71c2db122c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Wed, 27 Mar 2024 10:58:31 +0100 Subject: [PATCH 3/5] move isOptionsDataReady outside of useMemo --- .../settings/AboutPage/ShareLogList/BaseShareLogList.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx index 3fdf503023c4..866f4adaab88 100644 --- a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx +++ b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx @@ -24,10 +24,9 @@ function BaseShareLogList({reports, onAttachLogToReport}: BaseShareLogListProps) const {translate} = useLocalize(); const personalDetails = usePersonalDetails(); const betas = useBetas(); + const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails); const searchOptions = useMemo(() => { - const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails); - if (!isOptionsDataReady) { return { recentReports: [], @@ -54,7 +53,7 @@ function BaseShareLogList({reports, onAttachLogToReport}: BaseShareLogListProps) userToInvite: localUserToInvite, headerMessage: header, }; - }, [betas, personalDetails, reports, debouncedSearchValue]); + }, [isOptionsDataReady, reports, personalDetails, debouncedSearchValue, betas]); const sections = useMemo(() => { const sectionsList = []; From 6e2e2c991f90d892b44e7a5653c446cfe1414863 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Thu, 4 Apr 2024 16:48:45 +0200 Subject: [PATCH 4/5] merge fixes and results not found fix --- .../ShareLogList/BaseShareLogList.tsx | 27 +++++-------------- 1 file changed, 6 insertions(+), 21 deletions(-) diff --git a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx index cd77147e3aef..578efbe5317b 100644 --- a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx +++ b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx @@ -1,9 +1,7 @@ import React, {useMemo} from 'react'; -import {withOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; -import {useBetas, usePersonalDetails} from '@components/OnyxProvider'; +import {useBetas} from '@components/OnyxProvider'; import {useOptionsList} from '@components/OptionListContextProvider'; -import OptionsSelector from '@components/OptionsSelector'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; import UserListItem from '@components/SelectionList/UserListItem'; @@ -13,20 +11,16 @@ import useNetwork from '@hooks/useNetwork'; import * as FileUtils from '@libs/fileDownload/FileUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; -import * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Report} from '@src/types/onyx'; -import type {BaseShareLogListOnyxProps, BaseShareLogListProps} from './types'; +import type {BaseShareLogListProps} from './types'; -function BaseShareLogList({reports, onAttachLogToReport}: BaseShareLogListProps) { +function BaseShareLogList({onAttachLogToReport}: BaseShareLogListProps) { const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState(''); const {isOffline} = useNetwork(); const {translate} = useLocalize(); - const personalDetails = usePersonalDetails(); const betas = useBetas(); - const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails); const {options, areOptionsInitialized} = useOptionsList(); const searchOptions = useMemo(() => { @@ -44,11 +38,7 @@ function BaseShareLogList({reports, onAttachLogToReport}: BaseShareLogListProps) userToInvite: localUserToInvite, } = OptionsListUtils.getShareLogOptions(options, debouncedSearchValue.trim(), betas ?? []); - const header = OptionsListUtils.getHeaderMessage( - (searchOptions?.recentReports?.length || 0) + (searchOptions?.personalDetails?.length || 0) !== 0, - Boolean(searchOptions?.userToInvite), - debouncedSearchValue, - ); + const header = OptionsListUtils.getHeaderMessage((localRecentReports?.length || 0) + (localPersonalDetails?.length || 0) !== 0, Boolean(localUserToInvite), debouncedSearchValue); return { recentReports: localRecentReports, @@ -56,7 +46,7 @@ function BaseShareLogList({reports, onAttachLogToReport}: BaseShareLogListProps) userToInvite: localUserToInvite, headerMessage: header, }; - }, [isOptionsDataReady, reports, personalDetails, debouncedSearchValue, betas]); + }, [areOptionsInitialized, options, debouncedSearchValue, betas]); const sections = useMemo(() => { const sectionsList = []; @@ -112,7 +102,6 @@ function BaseShareLogList({reports, onAttachLogToReport}: BaseShareLogListProps) headerMessage={searchOptions.headerMessage} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} textInputHint={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''} - autoFocus showLoadingPlaceholder={!didScreenTransitionEnd} /> @@ -123,8 +112,4 @@ function BaseShareLogList({reports, onAttachLogToReport}: BaseShareLogListProps) BaseShareLogList.displayName = 'ShareLogPage'; -export default withOnyx({ - reports: { - key: ONYXKEYS.COLLECTION.REPORT, - }, -})(BaseShareLogList); +export default BaseShareLogList; From 5194168e0c1ff0abe553ac5b18924e6a5631c16a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Thu, 4 Apr 2024 16:55:52 +0200 Subject: [PATCH 5/5] type fixes --- src/pages/settings/AboutPage/ShareLogList/types.ts | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/pages/settings/AboutPage/ShareLogList/types.ts b/src/pages/settings/AboutPage/ShareLogList/types.ts index 6d385e6cac74..500641a3da42 100644 --- a/src/pages/settings/AboutPage/ShareLogList/types.ts +++ b/src/pages/settings/AboutPage/ShareLogList/types.ts @@ -1,18 +1,10 @@ -import type {OnyxCollection} from 'react-native-onyx'; -import type {Report} from '@src/types/onyx'; - -type BaseShareLogListOnyxProps = { - /** All reports shared with the user */ - reports: OnyxCollection; -}; - type ShareLogListProps = { /** The source of the log file to share */ logSource: string; }; -type BaseShareLogListProps = BaseShareLogListOnyxProps & { +type BaseShareLogListProps = { onAttachLogToReport: (reportID: string, filename: string) => void; }; -export type {BaseShareLogListOnyxProps, BaseShareLogListProps, ShareLogListProps}; +export type {BaseShareLogListProps, ShareLogListProps};