From 8d0553f677a9270968c82e77a4094a5f61d5c7cf Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Thu, 18 Jul 2024 17:05:59 +0200 Subject: [PATCH 01/12] date filter rhp working, writing into filters onyx object --- src/ONYXKEYS.ts | 2 + src/libs/actions/Search.ts | 9 +++- src/pages/Search/AdvancedSearchFilters.tsx | 4 +- src/pages/Search/SearchFiltersDatePage.tsx | 52 ++++++++++++++++++-- src/types/form/SearchAdvancedFiltersForm.tsx | 20 ++++++++ src/types/form/index.ts | 1 + 6 files changed, 80 insertions(+), 8 deletions(-) create mode 100644 src/types/form/SearchAdvancedFiltersForm.tsx diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 61641aea6c9a..8cfb7a0b7a05 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -583,6 +583,7 @@ const ONYXKEYS = { NETSUITE_CUSTOM_FORM_ID_FORM_DRAFT: 'netsuiteCustomFormIDFormDraft', SAGE_INTACCT_DIMENSION_TYPE_FORM: 'sageIntacctDimensionTypeForm', SAGE_INTACCT_DIMENSION_TYPE_FORM_DRAFT: 'sageIntacctDimensionTypeFormDraft', + SEARCH_ADVANCED_FILTERS_FORM: 'searchAdvancedFiltersDate', }, } as const; @@ -653,6 +654,7 @@ type OnyxFormValuesMapping = { [ONYXKEYS.FORMS.NETSUITE_TOKEN_INPUT_FORM]: FormTypes.NetSuiteTokenInputForm; [ONYXKEYS.FORMS.NETSUITE_CUSTOM_FORM_ID_FORM]: FormTypes.NetSuiteCustomFormIDForm; [ONYXKEYS.FORMS.SAGE_INTACCT_DIMENSION_TYPE_FORM]: FormTypes.SageIntacctDimensionForm; + [ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM]: FormTypes.SearchAdvancedFiltersForm; }; type OnyxFormDraftValuesMapping = { diff --git a/src/libs/actions/Search.ts b/src/libs/actions/Search.ts index 969812b02b02..5a540634654f 100644 --- a/src/libs/actions/Search.ts +++ b/src/libs/actions/Search.ts @@ -1,5 +1,6 @@ import Onyx from 'react-native-onyx'; import type {OnyxUpdate} from 'react-native-onyx'; +import type {FormOnyxValues} from '@components/Form/types'; import * as API from '@libs/API'; import type {SearchParams} from '@libs/API/parameters'; import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types'; @@ -108,4 +109,10 @@ function exportSearchItemsToCSV(query: string, reportIDList: Array) { + Onyx.merge(`${ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM}`, updatedForm); +} + +export {search, createTransactionThread, deleteMoneyRequestOnSearch, holdMoneyRequestOnSearch, unholdMoneyRequestOnSearch, exportSearchItemsToCSV, mergeFilters}; diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx index 40a31e151112..4227c5dc897f 100644 --- a/src/pages/Search/AdvancedSearchFilters.tsx +++ b/src/pages/Search/AdvancedSearchFilters.tsx @@ -10,12 +10,12 @@ const advancedFilters = [ { fieldName: 'type', description: 'common.type' as const, - route: '/search/filters/type' as Route, + route: 'search/filters/type' as Route, }, { fieldName: 'date', description: 'common.date' as const, - route: '/search/filters/date' as Route, + route: 'search/filters/date' as Route, }, ]; diff --git a/src/pages/Search/SearchFiltersDatePage.tsx b/src/pages/Search/SearchFiltersDatePage.tsx index cf692a806eed..300f6c713664 100644 --- a/src/pages/Search/SearchFiltersDatePage.tsx +++ b/src/pages/Search/SearchFiltersDatePage.tsx @@ -1,16 +1,43 @@ -import React from 'react'; -import {View} from 'react-native'; +import { format } from 'date-fns'; +import React, { useEffect } from 'react'; +import { View } from 'react-native'; +import { useOnyx } from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; +import DatePicker from '@components/DatePicker'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; +import { FormOnyxValues } from '@components/Form/types'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import Text from '@src/components/Text'; +import Navigation from '@libs/Navigation/Navigation'; +import * as Search from '@userActions/Search'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import INPUT_IDS from '@src/types/form/SearchAdvancedFiltersForm'; + + +const currentDate = format(new Date(), CONST.DATE.FNS_FORMAT_STRING); function SearchFiltersDatePage() { const styles = useThemeStyles(); const {translate} = useLocalize(); + const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM); + + const areFiltersInitiated = !!(searchAdvancedFiltersForm && searchAdvancedFiltersForm[INPUT_IDS.DATE]); + const defaultDate = areFiltersInitiated ? searchAdvancedFiltersForm[INPUT_IDS.DATE] : currentDate; + + const updateDate = (value: FormOnyxValues) => { + Search.mergeFilters(value); + Navigation.goBack(); + }; + + useEffect(() => { + console.log(searchAdvancedFiltersForm); + }, [searchAdvancedFiltersForm]); + return ( - Advanced filters Date form + + + @@ -29,4 +71,4 @@ function SearchFiltersDatePage() { SearchFiltersDatePage.displayName = 'SearchFiltersDatePage'; -export default SearchFiltersDatePage; +export default SearchFiltersDatePage; \ No newline at end of file diff --git a/src/types/form/SearchAdvancedFiltersForm.tsx b/src/types/form/SearchAdvancedFiltersForm.tsx new file mode 100644 index 000000000000..1e62f7395da4 --- /dev/null +++ b/src/types/form/SearchAdvancedFiltersForm.tsx @@ -0,0 +1,20 @@ +import type {ValueOf} from 'type-fest'; +import type Form from './Form'; + +const INPUT_IDS = { + TYPE: 'type', + DATE: 'date', +} as const; + +type InputID = ValueOf; + +type SearchAdvancedFiltersForm = Form< + InputID, + { + [INPUT_IDS.TYPE]: string; + [INPUT_IDS.DATE]: string; + } +>; + +export type {SearchAdvancedFiltersForm}; +export default INPUT_IDS; diff --git a/src/types/form/index.ts b/src/types/form/index.ts index 7cd10488399c..64673d07cb8d 100644 --- a/src/types/form/index.ts +++ b/src/types/form/index.ts @@ -61,4 +61,5 @@ export type {SageIntactCredentialsForm} from './SageIntactCredentialsForm'; export type {NetSuiteCustomFieldForm} from './NetSuiteCustomFieldForm'; export type {NetSuiteTokenInputForm} from './NetSuiteTokenInputForm'; export type {NetSuiteCustomFormIDForm} from './NetSuiteCustomFormIDForm'; +export type {SearchAdvancedFiltersForm} from './SearchAdvancedFiltersForm'; export type {default as Form} from './Form'; From 1181d331b9386c98d27fb7aeb4d7f8a24f31c8e7 Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Thu, 18 Jul 2024 17:24:23 +0200 Subject: [PATCH 02/12] linter resolve --- src/ONYXKEYS.ts | 2 +- src/pages/Search/SearchFiltersDatePage.tsx | 5 +++-- ...hAdvancedFiltersForm.tsx => SearchAdvancedFiltersForm.ts} | 0 3 files changed, 4 insertions(+), 3 deletions(-) rename src/types/form/{SearchAdvancedFiltersForm.tsx => SearchAdvancedFiltersForm.ts} (100%) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 8cfb7a0b7a05..f82f3c984b1a 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -583,7 +583,7 @@ const ONYXKEYS = { NETSUITE_CUSTOM_FORM_ID_FORM_DRAFT: 'netsuiteCustomFormIDFormDraft', SAGE_INTACCT_DIMENSION_TYPE_FORM: 'sageIntacctDimensionTypeForm', SAGE_INTACCT_DIMENSION_TYPE_FORM_DRAFT: 'sageIntacctDimensionTypeFormDraft', - SEARCH_ADVANCED_FILTERS_FORM: 'searchAdvancedFiltersDate', + SEARCH_ADVANCED_FILTERS_FORM: 'searchAdvancedFiltersForm', }, } as const; diff --git a/src/pages/Search/SearchFiltersDatePage.tsx b/src/pages/Search/SearchFiltersDatePage.tsx index 300f6c713664..c8a93f2859f6 100644 --- a/src/pages/Search/SearchFiltersDatePage.tsx +++ b/src/pages/Search/SearchFiltersDatePage.tsx @@ -6,7 +6,7 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView import DatePicker from '@components/DatePicker'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; -import { FormOnyxValues } from '@components/Form/types'; +import type { FormOnyxValues } from '@components/Form/types'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; @@ -35,7 +35,8 @@ function SearchFiltersDatePage() { }; useEffect(() => { - console.log(searchAdvancedFiltersForm); + // console log for debugging + // console.log(searchAdvancedFiltersForm); }, [searchAdvancedFiltersForm]); return ( diff --git a/src/types/form/SearchAdvancedFiltersForm.tsx b/src/types/form/SearchAdvancedFiltersForm.ts similarity index 100% rename from src/types/form/SearchAdvancedFiltersForm.tsx rename to src/types/form/SearchAdvancedFiltersForm.ts From ff8a37196a43be0af7e10ccf8dcb483322414e20 Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Thu, 18 Jul 2024 17:27:43 +0200 Subject: [PATCH 03/12] adding draft type --- src/ONYXKEYS.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index f82f3c984b1a..ef24f3f8e760 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -584,6 +584,7 @@ const ONYXKEYS = { SAGE_INTACCT_DIMENSION_TYPE_FORM: 'sageIntacctDimensionTypeForm', SAGE_INTACCT_DIMENSION_TYPE_FORM_DRAFT: 'sageIntacctDimensionTypeFormDraft', SEARCH_ADVANCED_FILTERS_FORM: 'searchAdvancedFiltersForm', + SEARCH_ADVANCED_FILTERS_FORM_DRAFT: 'searchAdvancedFiltersFormDraft', }, } as const; From 21d9313cde96c4cb5d51e13499797c36c319e758 Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Fri, 19 Jul 2024 13:44:03 +0200 Subject: [PATCH 04/12] second calendar, changing date obj structure in Onyx --- src/pages/Search/SearchFiltersDatePage.tsx | 36 ++++++++++++--------- src/types/form/SearchAdvancedFiltersForm.ts | 17 +++++++--- 2 files changed, 32 insertions(+), 21 deletions(-) diff --git a/src/pages/Search/SearchFiltersDatePage.tsx b/src/pages/Search/SearchFiltersDatePage.tsx index c8a93f2859f6..eaa3f9062fc1 100644 --- a/src/pages/Search/SearchFiltersDatePage.tsx +++ b/src/pages/Search/SearchFiltersDatePage.tsx @@ -1,12 +1,12 @@ -import { format } from 'date-fns'; -import React, { useEffect } from 'react'; -import { View } from 'react-native'; -import { useOnyx } from 'react-native-onyx'; +import {format} from 'date-fns'; +import React from 'react'; +import {View} from 'react-native'; +import {useOnyx} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import DatePicker from '@components/DatePicker'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; -import type { FormOnyxValues } from '@components/Form/types'; +import type {FormOnyxValues} from '@components/Form/types'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; @@ -17,7 +17,6 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import INPUT_IDS from '@src/types/form/SearchAdvancedFiltersForm'; - const currentDate = format(new Date(), CONST.DATE.FNS_FORMAT_STRING); function SearchFiltersDatePage() { @@ -26,19 +25,16 @@ function SearchFiltersDatePage() { const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM); - const areFiltersInitiated = !!(searchAdvancedFiltersForm && searchAdvancedFiltersForm[INPUT_IDS.DATE]); - const defaultDate = areFiltersInitiated ? searchAdvancedFiltersForm[INPUT_IDS.DATE] : currentDate; + const isDateAfterInitialized = !!(searchAdvancedFiltersForm && searchAdvancedFiltersForm[INPUT_IDS.DATE.AFTER]); + const isDateBeforeInitialized = !!(searchAdvancedFiltersForm && searchAdvancedFiltersForm[INPUT_IDS.DATE.BEFORE]); + const defaultDateAfter = isDateAfterInitialized ? searchAdvancedFiltersForm[INPUT_IDS.DATE.AFTER] : currentDate; + const defaultDateBefore = isDateBeforeInitialized ? searchAdvancedFiltersForm[INPUT_IDS.DATE.BEFORE] : currentDate; const updateDate = (value: FormOnyxValues) => { Search.mergeFilters(value); Navigation.goBack(); }; - useEffect(() => { - // console log for debugging - // console.log(searchAdvancedFiltersForm); - }, [searchAdvancedFiltersForm]); - return ( + @@ -72,4 +76,4 @@ function SearchFiltersDatePage() { SearchFiltersDatePage.displayName = 'SearchFiltersDatePage'; -export default SearchFiltersDatePage; \ No newline at end of file +export default SearchFiltersDatePage; diff --git a/src/types/form/SearchAdvancedFiltersForm.ts b/src/types/form/SearchAdvancedFiltersForm.ts index 1e62f7395da4..101bd465616f 100644 --- a/src/types/form/SearchAdvancedFiltersForm.ts +++ b/src/types/form/SearchAdvancedFiltersForm.ts @@ -1,19 +1,26 @@ -import type {ValueOf} from 'type-fest'; +import type DeepValueOf from '@src/types/utils/DeepValueOf'; import type Form from './Form'; const INPUT_IDS = { TYPE: 'type', - DATE: 'date', + DATE: { + AFTER: 'dateAfter', + BEFORE: 'dateBefore', + }, } as const; -type InputID = ValueOf; +type InputID = DeepValueOf; + +type Date = { + [INPUT_IDS.DATE.AFTER]: string; + [INPUT_IDS.DATE.BEFORE]: string; +}; type SearchAdvancedFiltersForm = Form< InputID, { [INPUT_IDS.TYPE]: string; - [INPUT_IDS.DATE]: string; - } + } & Date >; export type {SearchAdvancedFiltersForm}; From affa30358c1cda0aa78f28a5fdf70e54e72b1d7b Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Fri, 19 Jul 2024 17:21:26 +0200 Subject: [PATCH 05/12] draft pr updates --- src/languages/en.ts | 1 - src/libs/SearchUtils.ts | 8 ++++++++ src/libs/actions/Search.ts | 17 ++++++----------- src/pages/Search/SearchFiltersDatePage.tsx | 18 ++++++++---------- 4 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 997a9181da20..682b2fff587f 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3535,7 +3535,6 @@ export default { unhold: 'Unhold', noOptionsAvailable: 'No options available for the selected group of expenses.', }, - offlinePrompt: "You can't take this action right now.", filtersHeader: 'Filters', filters: { diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts index 4ec3fa9fb314..19814d73580e 100644 --- a/src/libs/SearchUtils.ts +++ b/src/libs/SearchUtils.ts @@ -1,4 +1,6 @@ +import Onyx from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; +import type {FormOnyxValues} from '@components/Form/types'; import type {AllFieldKeys, ASTNode, QueryFilter, QueryFilters, SearchColumnType, SortOrder} from '@components/Search/types'; import ReportListItem from '@components/SelectionList/Search/ReportListItem'; import TransactionListItem from '@components/SelectionList/Search/TransactionListItem'; @@ -394,6 +396,11 @@ function getFilters(query: string, fields: Array>) { return filters; } +function mergeFilters(updatedForm: FormOnyxValues) { + // eslint-disable-next-line rulesdir/prefer-actions-set-data + Onyx.merge(`${ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM}`, updatedForm); +} + export { buildJSONQuery, getListItem, @@ -408,4 +415,5 @@ export { isTransactionListItemType, isSearchResultsEmpty, getFilters, + mergeFilters, }; diff --git a/src/libs/actions/Search.ts b/src/libs/actions/Search.ts index 5a540634654f..fd60246ae8bb 100644 --- a/src/libs/actions/Search.ts +++ b/src/libs/actions/Search.ts @@ -1,17 +1,17 @@ import Onyx from 'react-native-onyx'; -import type {OnyxUpdate} from 'react-native-onyx'; -import type {FormOnyxValues} from '@components/Form/types'; +import type { OnyxUpdate } from 'react-native-onyx'; import * as API from '@libs/API'; -import type {SearchParams} from '@libs/API/parameters'; -import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types'; +import type { SearchParams } from '@libs/API/parameters'; +import { READ_COMMANDS, WRITE_COMMANDS } from '@libs/API/types'; import * as ApiUtils from '@libs/ApiUtils'; import fileDownload from '@libs/fileDownload'; import enhanceParameters from '@libs/Network/enhanceParameters'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {SearchTransaction} from '@src/types/onyx/SearchResults'; +import type { SearchTransaction } from '@src/types/onyx/SearchResults'; import * as Report from './Report'; + let currentUserEmail: string; Onyx.connect({ key: ONYXKEYS.SESSION, @@ -110,9 +110,4 @@ function exportSearchItemsToCSV(query: string, reportIDList: Array) { - Onyx.merge(`${ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM}`, updatedForm); -} - -export {search, createTransactionThread, deleteMoneyRequestOnSearch, holdMoneyRequestOnSearch, unholdMoneyRequestOnSearch, exportSearchItemsToCSV, mergeFilters}; +export {search, createTransactionThread, deleteMoneyRequestOnSearch, holdMoneyRequestOnSearch, unholdMoneyRequestOnSearch, exportSearchItemsToCSV}; \ No newline at end of file diff --git a/src/pages/Search/SearchFiltersDatePage.tsx b/src/pages/Search/SearchFiltersDatePage.tsx index eaa3f9062fc1..21c428ecc60b 100644 --- a/src/pages/Search/SearchFiltersDatePage.tsx +++ b/src/pages/Search/SearchFiltersDatePage.tsx @@ -12,26 +12,24 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; -import * as Search from '@userActions/Search'; +import {mergeFilters} from '@libs/SearchUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import INPUT_IDS from '@src/types/form/SearchAdvancedFiltersForm'; -const currentDate = format(new Date(), CONST.DATE.FNS_FORMAT_STRING); +const DEFAULT_DATE = format(new Date(), CONST.DATE.FNS_FORMAT_STRING); +const DEFAULT_FILTERS_FORM_VALUE = {[INPUT_IDS.DATE.AFTER]: DEFAULT_DATE, [INPUT_IDS.DATE.BEFORE]: DEFAULT_DATE}; function SearchFiltersDatePage() { const styles = useThemeStyles(); const {translate} = useLocalize(); - const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM); - - const isDateAfterInitialized = !!(searchAdvancedFiltersForm && searchAdvancedFiltersForm[INPUT_IDS.DATE.AFTER]); - const isDateBeforeInitialized = !!(searchAdvancedFiltersForm && searchAdvancedFiltersForm[INPUT_IDS.DATE.BEFORE]); - const defaultDateAfter = isDateAfterInitialized ? searchAdvancedFiltersForm[INPUT_IDS.DATE.AFTER] : currentDate; - const defaultDateBefore = isDateBeforeInitialized ? searchAdvancedFiltersForm[INPUT_IDS.DATE.BEFORE] : currentDate; + const [searchAdvancedFiltersForm = DEFAULT_FILTERS_FORM_VALUE] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM); + const defaultDateAfter = searchAdvancedFiltersForm[INPUT_IDS.DATE.AFTER]; + const defaultDateBefore = searchAdvancedFiltersForm[INPUT_IDS.DATE.BEFORE]; const updateDate = (value: FormOnyxValues) => { - Search.mergeFilters(value); + mergeFilters(value); Navigation.goBack(); }; @@ -45,7 +43,7 @@ function SearchFiltersDatePage() { Date: Mon, 22 Jul 2024 10:52:01 +0200 Subject: [PATCH 06/12] move mergeFilters, change form types --- src/libs/SearchUtils.ts | 8 -------- src/libs/actions/Search.ts | 20 ++++++++++++++------ src/pages/Search/SearchFiltersDatePage.tsx | 12 ++++++------ src/types/form/SearchAdvancedFiltersForm.ts | 19 +++++++------------ 4 files changed, 27 insertions(+), 32 deletions(-) diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts index 19814d73580e..4ec3fa9fb314 100644 --- a/src/libs/SearchUtils.ts +++ b/src/libs/SearchUtils.ts @@ -1,6 +1,4 @@ -import Onyx from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; -import type {FormOnyxValues} from '@components/Form/types'; import type {AllFieldKeys, ASTNode, QueryFilter, QueryFilters, SearchColumnType, SortOrder} from '@components/Search/types'; import ReportListItem from '@components/SelectionList/Search/ReportListItem'; import TransactionListItem from '@components/SelectionList/Search/TransactionListItem'; @@ -396,11 +394,6 @@ function getFilters(query: string, fields: Array>) { return filters; } -function mergeFilters(updatedForm: FormOnyxValues) { - // eslint-disable-next-line rulesdir/prefer-actions-set-data - Onyx.merge(`${ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM}`, updatedForm); -} - export { buildJSONQuery, getListItem, @@ -415,5 +408,4 @@ export { isTransactionListItemType, isSearchResultsEmpty, getFilters, - mergeFilters, }; diff --git a/src/libs/actions/Search.ts b/src/libs/actions/Search.ts index fd60246ae8bb..645228224633 100644 --- a/src/libs/actions/Search.ts +++ b/src/libs/actions/Search.ts @@ -1,17 +1,17 @@ import Onyx from 'react-native-onyx'; -import type { OnyxUpdate } from 'react-native-onyx'; +import type {OnyxUpdate} from 'react-native-onyx'; +import type {FormOnyxValues} from '@components/Form/types'; import * as API from '@libs/API'; -import type { SearchParams } from '@libs/API/parameters'; -import { READ_COMMANDS, WRITE_COMMANDS } from '@libs/API/types'; +import type {SearchParams} from '@libs/API/parameters'; +import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types'; import * as ApiUtils from '@libs/ApiUtils'; import fileDownload from '@libs/fileDownload'; import enhanceParameters from '@libs/Network/enhanceParameters'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type { SearchTransaction } from '@src/types/onyx/SearchResults'; +import type {SearchTransaction} from '@src/types/onyx/SearchResults'; import * as Report from './Report'; - let currentUserEmail: string; Onyx.connect({ key: ONYXKEYS.SESSION, @@ -110,4 +110,12 @@ function exportSearchItemsToCSV(query: string, reportIDList: Array) { + Onyx.merge(`${ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM}`, updatedForm); +} + +export {search, createTransactionThread, deleteMoneyRequestOnSearch, holdMoneyRequestOnSearch, unholdMoneyRequestOnSearch, exportSearchItemsToCSV, mergeFilters}; diff --git a/src/pages/Search/SearchFiltersDatePage.tsx b/src/pages/Search/SearchFiltersDatePage.tsx index 21c428ecc60b..c641bdec6ff9 100644 --- a/src/pages/Search/SearchFiltersDatePage.tsx +++ b/src/pages/Search/SearchFiltersDatePage.tsx @@ -11,22 +11,22 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import {mergeFilters} from '@libs/actions/Search'; import Navigation from '@libs/Navigation/Navigation'; -import {mergeFilters} from '@libs/SearchUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import INPUT_IDS from '@src/types/form/SearchAdvancedFiltersForm'; const DEFAULT_DATE = format(new Date(), CONST.DATE.FNS_FORMAT_STRING); -const DEFAULT_FILTERS_FORM_VALUE = {[INPUT_IDS.DATE.AFTER]: DEFAULT_DATE, [INPUT_IDS.DATE.BEFORE]: DEFAULT_DATE}; +const DEFAULT_FILTERS_FORM_VALUE = {[INPUT_IDS.DATE_AFTER]: DEFAULT_DATE, [INPUT_IDS.DATE_BEFORE]: DEFAULT_DATE}; function SearchFiltersDatePage() { const styles = useThemeStyles(); const {translate} = useLocalize(); const [searchAdvancedFiltersForm = DEFAULT_FILTERS_FORM_VALUE] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM); - const defaultDateAfter = searchAdvancedFiltersForm[INPUT_IDS.DATE.AFTER]; - const defaultDateBefore = searchAdvancedFiltersForm[INPUT_IDS.DATE.BEFORE]; + const defaultDateAfter = searchAdvancedFiltersForm[INPUT_IDS.DATE_AFTER]; + const defaultDateBefore = searchAdvancedFiltersForm[INPUT_IDS.DATE_BEFORE]; const updateDate = (value: FormOnyxValues) => { mergeFilters(value); @@ -51,7 +51,7 @@ function SearchFiltersDatePage() { > ; - -type Date = { - [INPUT_IDS.DATE.AFTER]: string; - [INPUT_IDS.DATE.BEFORE]: string; -}; +type InputID = ValueOf; type SearchAdvancedFiltersForm = Form< InputID, { [INPUT_IDS.TYPE]: string; - } & Date + [INPUT_IDS.DATE_AFTER]: string; + [INPUT_IDS.DATE_BEFORE]: string; + } >; export type {SearchAdvancedFiltersForm}; From 8d2ee8cab588864a5bd29659631e7bd7030fb5cb Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Mon, 22 Jul 2024 13:03:50 +0200 Subject: [PATCH 07/12] translation change --- src/pages/Search/SearchFiltersDatePage.tsx | 4 +-- src/pages/settings/InitialSettingsPage.tsx | 38 +++++++++++++--------- 2 files changed, 24 insertions(+), 18 deletions(-) diff --git a/src/pages/Search/SearchFiltersDatePage.tsx b/src/pages/Search/SearchFiltersDatePage.tsx index c641bdec6ff9..d1bbc33c378c 100644 --- a/src/pages/Search/SearchFiltersDatePage.tsx +++ b/src/pages/Search/SearchFiltersDatePage.tsx @@ -52,7 +52,7 @@ function SearchFiltersDatePage() { ; @@ -253,6 +254,11 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa icon: Expensicons.Heart, routeName: ROUTES.SETTINGS_SAVE_THE_WORLD, }, + { + translationKey: 'search.filtersHeader', + icon: Expensicons.Heart, + routeName: ROUTES.SEARCH_ADVANCED_FILTERS, + }, ]; const signOutItem: MenuData = { translationKey: signOutTranslationKey, @@ -534,4 +540,4 @@ export default withCurrentUserPersonalDetails( key: ONYXKEYS.COLLECTION.POLICY, }, })(InitialSettingsPage), -); +); \ No newline at end of file From 24ef4381b3ad16332df0c6f8aafc210292f7f81d Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Mon, 22 Jul 2024 13:06:38 +0200 Subject: [PATCH 08/12] deleting test purposes --- src/pages/settings/InitialSettingsPage.tsx | 38 +++++++++------------- 1 file changed, 16 insertions(+), 22 deletions(-) diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index 77bf406f7684..e11da8bf49fc 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -1,24 +1,24 @@ -import { useRoute } from '@react-navigation/native'; -import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'; +import {useRoute} from '@react-navigation/native'; +import React, {useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react'; // eslint-disable-next-line no-restricted-imports -import type { GestureResponderEvent, ScrollView as RNScrollView, ScrollViewProps, StyleProp, ViewStyle } from 'react-native'; -import { NativeModules, View } from 'react-native'; -import type { OnyxCollection, OnyxEntry } from 'react-native-onyx'; -import { useOnyx, withOnyx } from 'react-native-onyx'; -import type { ValueOf } from 'type-fest'; +import type {GestureResponderEvent, ScrollView as RNScrollView, ScrollViewProps, StyleProp, ViewStyle} from 'react-native'; +import {NativeModules, View} from 'react-native'; +import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; +import type {ValueOf} from 'type-fest'; import AvatarWithImagePicker from '@components/AvatarWithImagePicker'; import ConfirmModal from '@components/ConfirmModal'; import CurrentUserPersonalDetailsSkeletonView from '@components/CurrentUserPersonalDetailsSkeletonView'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import MenuItem from '@components/MenuItem'; -import { PressableWithFeedback } from '@components/Pressable'; +import {PressableWithFeedback} from '@components/Pressable'; import ScreenWrapper from '@components/ScreenWrapper'; -import { ScrollOffsetContext } from '@components/ScrollOffsetContextProvider'; +import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider'; import ScrollView from '@components/ScrollView'; import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; -import type { WithCurrentUserPersonalDetailsProps } from '@components/withCurrentUserPersonalDetails'; +import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; import useActiveCentralPaneRoute from '@hooks/useActiveCentralPaneRoute'; import useLocalize from '@hooks/useLocalize'; @@ -31,7 +31,7 @@ import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as SubscriptionUtils from '@libs/SubscriptionUtils'; import * as UserUtils from '@libs/UserUtils'; -import { hasGlobalWorkspaceSettingsRBR } from '@libs/WorkspacesSettingsUtils'; +import {hasGlobalWorkspaceSettingsRBR} from '@libs/WorkspacesSettingsUtils'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; import variables from '@styles/variables'; import * as Link from '@userActions/Link'; @@ -40,16 +40,15 @@ import * as PersonalDetails from '@userActions/PersonalDetails'; import * as Session from '@userActions/Session'; import * as Wallet from '@userActions/Wallet'; import CONST from '@src/CONST'; -import type { TranslationPaths } from '@src/languages/types'; +import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; -import type { Route } from '@src/ROUTES'; +import type {Route} from '@src/ROUTES'; import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; -import type { Icon as TIcon } from '@src/types/onyx/OnyxCommon'; -import { isEmptyObject } from '@src/types/utils/EmptyObject'; +import type {Icon as TIcon} from '@src/types/onyx/OnyxCommon'; +import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type IconAsset from '@src/types/utils/IconAsset'; - type InitialSettingsPageOnyxProps = { /** The user's session */ session: OnyxEntry; @@ -254,11 +253,6 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa icon: Expensicons.Heart, routeName: ROUTES.SETTINGS_SAVE_THE_WORLD, }, - { - translationKey: 'search.filtersHeader', - icon: Expensicons.Heart, - routeName: ROUTES.SEARCH_ADVANCED_FILTERS, - }, ]; const signOutItem: MenuData = { translationKey: signOutTranslationKey, @@ -540,4 +534,4 @@ export default withCurrentUserPersonalDetails( key: ONYXKEYS.COLLECTION.POLICY, }, })(InitialSettingsPage), -); \ No newline at end of file +); From db715b2318757609dd4ae0093aa6753c422faf5f Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Tue, 23 Jul 2024 11:00:32 +0200 Subject: [PATCH 09/12] PR fixes to C+ comments --- src/libs/actions/Search.ts | 9 ++- src/pages/Search/SearchFiltersDatePage.tsx | 64 ++++++++++------------ 2 files changed, 34 insertions(+), 39 deletions(-) diff --git a/src/libs/actions/Search.ts b/src/libs/actions/Search.ts index 645228224633..763776784b17 100644 --- a/src/libs/actions/Search.ts +++ b/src/libs/actions/Search.ts @@ -111,11 +111,10 @@ function exportSearchItemsToCSV(query: string, reportIDList: Array) { - Onyx.merge(`${ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM}`, updatedForm); +function updateAdvancedFilters(values: FormOnyxValues) { + Onyx.merge(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, values); } -export {search, createTransactionThread, deleteMoneyRequestOnSearch, holdMoneyRequestOnSearch, unholdMoneyRequestOnSearch, exportSearchItemsToCSV, mergeFilters}; +export {search, createTransactionThread, deleteMoneyRequestOnSearch, holdMoneyRequestOnSearch, unholdMoneyRequestOnSearch, exportSearchItemsToCSV, updateAdvancedFilters}; diff --git a/src/pages/Search/SearchFiltersDatePage.tsx b/src/pages/Search/SearchFiltersDatePage.tsx index d1bbc33c378c..8beb4b2876c7 100644 --- a/src/pages/Search/SearchFiltersDatePage.tsx +++ b/src/pages/Search/SearchFiltersDatePage.tsx @@ -1,6 +1,4 @@ -import {format} from 'date-fns'; import React from 'react'; -import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import DatePicker from '@components/DatePicker'; @@ -11,14 +9,14 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import {mergeFilters} from '@libs/actions/Search'; +import {updateAdvancedFilters} from '@libs/actions/Search'; import Navigation from '@libs/Navigation/Navigation'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; import INPUT_IDS from '@src/types/form/SearchAdvancedFiltersForm'; -const DEFAULT_DATE = format(new Date(), CONST.DATE.FNS_FORMAT_STRING); -const DEFAULT_FILTERS_FORM_VALUE = {[INPUT_IDS.DATE_AFTER]: DEFAULT_DATE, [INPUT_IDS.DATE_BEFORE]: DEFAULT_DATE}; +const DEFAULT_FILTERS_FORM_VALUE = {[INPUT_IDS.DATE_AFTER]: undefined, [INPUT_IDS.DATE_BEFORE]: undefined}; function SearchFiltersDatePage() { const styles = useThemeStyles(); @@ -28,9 +26,9 @@ function SearchFiltersDatePage() { const defaultDateAfter = searchAdvancedFiltersForm[INPUT_IDS.DATE_AFTER]; const defaultDateBefore = searchAdvancedFiltersForm[INPUT_IDS.DATE_BEFORE]; - const updateDate = (value: FormOnyxValues) => { - mergeFilters(value); - Navigation.goBack(); + const updateDateFilter = (values: FormOnyxValues) => { + updateAdvancedFilters(values); + Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS); }; return ( @@ -41,32 +39,30 @@ function SearchFiltersDatePage() { > - - - - - - + + + + ); From ab8511e7e0f5bfff0a5701715df189cbf666cb3c Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Tue, 23 Jul 2024 12:16:46 +0200 Subject: [PATCH 10/12] fix lint prettier --- src/libs/actions/Search.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/actions/Search.ts b/src/libs/actions/Search.ts index 763776784b17..245192ff6e0a 100644 --- a/src/libs/actions/Search.ts +++ b/src/libs/actions/Search.ts @@ -111,7 +111,7 @@ function exportSearchItemsToCSV(query: string, reportIDList: Array) { Onyx.merge(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, values); From 1f80ee73cfa1c28908c59f6918bd5bdb88e2df34 Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Wed, 24 Jul 2024 09:52:21 +0200 Subject: [PATCH 11/12] optional chaining --- src/pages/Search/SearchFiltersDatePage.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/pages/Search/SearchFiltersDatePage.tsx b/src/pages/Search/SearchFiltersDatePage.tsx index 8beb4b2876c7..66dc6a051c77 100644 --- a/src/pages/Search/SearchFiltersDatePage.tsx +++ b/src/pages/Search/SearchFiltersDatePage.tsx @@ -16,15 +16,11 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import INPUT_IDS from '@src/types/form/SearchAdvancedFiltersForm'; -const DEFAULT_FILTERS_FORM_VALUE = {[INPUT_IDS.DATE_AFTER]: undefined, [INPUT_IDS.DATE_BEFORE]: undefined}; - function SearchFiltersDatePage() { const styles = useThemeStyles(); const {translate} = useLocalize(); - const [searchAdvancedFiltersForm = DEFAULT_FILTERS_FORM_VALUE] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM); - const defaultDateAfter = searchAdvancedFiltersForm[INPUT_IDS.DATE_AFTER]; - const defaultDateBefore = searchAdvancedFiltersForm[INPUT_IDS.DATE_BEFORE]; + const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM); const updateDateFilter = (values: FormOnyxValues) => { updateAdvancedFilters(values); @@ -50,7 +46,7 @@ function SearchFiltersDatePage() { InputComponent={DatePicker} inputID={INPUT_IDS.DATE_AFTER} label={translate('search.filters.date.after')} - defaultValue={defaultDateAfter} + defaultValue={searchAdvancedFiltersForm?.[INPUT_IDS.DATE_AFTER]} maxDate={CONST.CALENDAR_PICKER.MAX_DATE} minDate={CONST.CALENDAR_PICKER.MIN_DATE} /> @@ -58,7 +54,7 @@ function SearchFiltersDatePage() { InputComponent={DatePicker} inputID={INPUT_IDS.DATE_BEFORE} label={translate('search.filters.date.before')} - defaultValue={defaultDateBefore} + defaultValue={searchAdvancedFiltersForm?.[INPUT_IDS.DATE_BEFORE]} maxDate={CONST.CALENDAR_PICKER.MAX_DATE} minDate={CONST.CALENDAR_PICKER.MIN_DATE} /> From a25eb54cc9ff9dfd85c5e57751f51a885d8a72a8 Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Wed, 24 Jul 2024 15:29:10 +0200 Subject: [PATCH 12/12] extracting default values --- src/pages/Search/SearchFiltersDatePage.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/Search/SearchFiltersDatePage.tsx b/src/pages/Search/SearchFiltersDatePage.tsx index 66dc6a051c77..9ac9973c8ca2 100644 --- a/src/pages/Search/SearchFiltersDatePage.tsx +++ b/src/pages/Search/SearchFiltersDatePage.tsx @@ -21,6 +21,8 @@ function SearchFiltersDatePage() { const {translate} = useLocalize(); const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM); + const dateAfter = searchAdvancedFiltersForm?.[INPUT_IDS.DATE_AFTER]; + const dateBefore = searchAdvancedFiltersForm?.[INPUT_IDS.DATE_BEFORE]; const updateDateFilter = (values: FormOnyxValues) => { updateAdvancedFilters(values); @@ -46,7 +48,7 @@ function SearchFiltersDatePage() { InputComponent={DatePicker} inputID={INPUT_IDS.DATE_AFTER} label={translate('search.filters.date.after')} - defaultValue={searchAdvancedFiltersForm?.[INPUT_IDS.DATE_AFTER]} + defaultValue={dateAfter} maxDate={CONST.CALENDAR_PICKER.MAX_DATE} minDate={CONST.CALENDAR_PICKER.MIN_DATE} /> @@ -54,7 +56,7 @@ function SearchFiltersDatePage() { InputComponent={DatePicker} inputID={INPUT_IDS.DATE_BEFORE} label={translate('search.filters.date.before')} - defaultValue={searchAdvancedFiltersForm?.[INPUT_IDS.DATE_BEFORE]} + defaultValue={dateBefore} maxDate={CONST.CALENDAR_PICKER.MAX_DATE} minDate={CONST.CALENDAR_PICKER.MIN_DATE} />