From 958981455e63f4723ba1d5bc22d855ed60ed85f5 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 29 Nov 2024 17:00:29 +0100 Subject: [PATCH 01/13] init callbacks for useState in CalendarPicker --- src/components/DatePicker/CalendarPicker/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx index 9906f9b04c3c..4e1fef2d827e 100644 --- a/src/components/DatePicker/CalendarPicker/index.tsx +++ b/src/components/DatePicker/CalendarPicker/index.tsx @@ -53,14 +53,14 @@ function CalendarPicker({ const {preferredLocale, translate} = useLocalize(); const pressableRef = useRef(null); - const [currentDateView, setCurrentDateView] = useState(getInitialCurrentDateView(value, minDate, maxDate)); + const [currentDateView, setCurrentDateView] = useState(() => getInitialCurrentDateView(value, minDate, maxDate)); const [isYearPickerVisible, setIsYearPickerVisible] = useState(false); const minYear = getYear(new Date(minDate)); const maxYear = getYear(new Date(maxDate)); - const [years, setYears] = useState( + const [years, setYears] = useState(() => Array.from({length: maxYear - minYear + 1}, (v, i) => i + minYear).map((year) => ({ text: year.toString(), value: year, From 290b2d5e2d2ac245dc318e45a8532f0884d84c9e Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 29 Nov 2024 17:00:35 +0100 Subject: [PATCH 02/13] init callbacks for useState in BaseVideoPlayer --- src/components/VideoPlayer/BaseVideoPlayer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx index 140d3f5eccc4..a77993e90f92 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.tsx +++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx @@ -73,7 +73,7 @@ function BaseVideoPlayer({ const [isEnded, setIsEnded] = useState(false); const [isBuffering, setIsBuffering] = useState(true); // we add "#t=0.001" at the end of the URL to skip first milisecond of the video and always be able to show proper video preview when video is paused at the beginning - const [sourceURL] = useState(VideoUtils.addSkipTimeTagToURL(url.includes('blob:') || url.includes('file:///') ? url : addEncryptedAuthTokenToURL(url), 0.001)); + const [sourceURL] = useState(() => VideoUtils.addSkipTimeTagToURL(url.includes('blob:') || url.includes('file:///') ? url : addEncryptedAuthTokenToURL(url), 0.001)); const [isPopoverVisible, setIsPopoverVisible] = useState(false); const [popoverAnchorPosition, setPopoverAnchorPosition] = useState({horizontal: 0, vertical: 0}); const [controlStatusState, setControlStatusState] = useState(controlsStatus); From a748336bfb9d265bc1fce408c884243980c3b14b Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 29 Nov 2024 17:00:42 +0100 Subject: [PATCH 03/13] init callbacks for useState in DebugDetailsDateTimePickerPage --- src/pages/Debug/DebugDetailsDateTimePickerPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Debug/DebugDetailsDateTimePickerPage.tsx b/src/pages/Debug/DebugDetailsDateTimePickerPage.tsx index 920b5b52076c..c68c1a93894b 100644 --- a/src/pages/Debug/DebugDetailsDateTimePickerPage.tsx +++ b/src/pages/Debug/DebugDetailsDateTimePickerPage.tsx @@ -26,7 +26,7 @@ function DebugDetailsDateTimePickerPage({ }: DebugDetailsDateTimePickerPageProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const [date, setDate] = useState(DateUtils.extractDate(fieldValue)); + const [date, setDate] = useState(() => DateUtils.extractDate(fieldValue)); return ( From aa453ca010fba27a24437ac5b6d66cb5dac5d1ca Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 29 Nov 2024 17:00:50 +0100 Subject: [PATCH 04/13] init callbacks for useState in DebugReportActionCreatePage --- src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx b/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx index c1ef0e0fdfec..18adfc311f58 100644 --- a/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx +++ b/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx @@ -48,7 +48,7 @@ function DebugReportActionCreatePage({ const styles = useThemeStyles(); const [session] = useOnyx(ONYXKEYS.SESSION); const [personalDetailsList] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); - const [draftReportAction, setDraftReportAction] = useState(getInitialReportAction(reportID, session, personalDetailsList)); + const [draftReportAction, setDraftReportAction] = useState(() => getInitialReportAction(reportID, session, personalDetailsList)); const [error, setError] = useState(); return ( From 489d605fe08eca846a5c68f9720ee8c3c99bdef2 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 29 Nov 2024 17:00:56 +0100 Subject: [PATCH 05/13] init callbacks for useState in DebugTransactionViolationCreatePage --- .../DebugTransactionViolationCreatePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Debug/TransactionViolation/DebugTransactionViolationCreatePage.tsx b/src/pages/Debug/TransactionViolation/DebugTransactionViolationCreatePage.tsx index 4e36ab8fcd12..be44d1983885 100644 --- a/src/pages/Debug/TransactionViolation/DebugTransactionViolationCreatePage.tsx +++ b/src/pages/Debug/TransactionViolation/DebugTransactionViolationCreatePage.tsx @@ -63,7 +63,7 @@ function DebugTransactionViolationCreatePage({ const {translate} = useLocalize(); const styles = useThemeStyles(); const [transactionViolations] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`); - const [draftTransactionViolation, setDraftTransactionViolation] = useState(getInitialTransactionViolation()); + const [draftTransactionViolation, setDraftTransactionViolation] = useState(() => getInitialTransactionViolation()); const [error, setError] = useState(); const editJSON = useCallback( From 395c4b4a43576583aca0e644c53b45517829ac9b Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 29 Nov 2024 17:01:04 +0100 Subject: [PATCH 06/13] init callbacks for useState in ReimbursementAccountPage --- src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index dd8a9b767eb1..b23fef35d0f5 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx @@ -204,7 +204,7 @@ function ReimbursementAccountPage({route, policy}: ReimbursementAccountPageProps which acts similarly to `componentDidUpdate` when the `reimbursementAccount` dependency changes. */ const [hasACHDataBeenLoaded, setHasACHDataBeenLoaded] = useState(reimbursementAccount !== CONST.REIMBURSEMENT_ACCOUNT.DEFAULT_DATA && isPreviousPolicy); - const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(getShouldShowContinueSetupButtonInitialValue()); + const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(() => getShouldShowContinueSetupButtonInitialValue()); const handleNextNonUSDBankAccountStep = () => { switch (nonUSDBankAccountStep) { From 154f91e17853828f753fb6d0689bf0a4e72df821 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 29 Nov 2024 17:01:12 +0100 Subject: [PATCH 07/13] init callbacks for useState in ReportActionsList --- src/pages/home/report/ReportActionsList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index d562669a6bac..169dae7bce86 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -162,7 +162,7 @@ function ReportActionsList({ const reportScrollManager = useReportScrollManager(); const userActiveSince = useRef(DateUtils.getDBTime()); const lastMessageTime = useRef(null); - const [isVisible, setIsVisible] = useState(Visibility.isVisible()); + const [isVisible, setIsVisible] = useState(() => Visibility.isVisible()); const isFocused = useIsFocused(); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`); From f38efcdf0e6ff0ff596a443cc4cf5944800d2494 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 29 Nov 2024 17:01:18 +0100 Subject: [PATCH 08/13] init callbacks for useState in IOURequestStepAttendees --- src/pages/iou/request/step/IOURequestStepAttendees.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/request/step/IOURequestStepAttendees.tsx b/src/pages/iou/request/step/IOURequestStepAttendees.tsx index f1d253db0c18..409ef1cfe02d 100644 --- a/src/pages/iou/request/step/IOURequestStepAttendees.tsx +++ b/src/pages/iou/request/step/IOURequestStepAttendees.tsx @@ -40,7 +40,7 @@ function IOURequestStepAttendees({ }: IOURequestStepAttendeesProps) { const isEditing = action === CONST.IOU.ACTION.EDIT; const [transaction] = useOnyx(`${isEditing ? ONYXKEYS.COLLECTION.TRANSACTION : ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID || -1}`); - const [attendees, setAttendees] = useState(TransactionUtils.getAttendees(transaction)); + const [attendees, setAttendees] = useState(() => TransactionUtils.getAttendees(transaction)); const previousAttendees = usePrevious(attendees); const {translate} = useLocalize(); const [violations] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`); From c1605b49a8c2c980867a3377298b1148d86946a1 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 29 Nov 2024 17:01:24 +0100 Subject: [PATCH 09/13] init callbacks for useState in StatusClearAfterPage --- .../settings/Profile/CustomStatus/StatusClearAfterPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.tsx b/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.tsx index 2d3538b8fbc5..b46c2ab36162 100644 --- a/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.tsx +++ b/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.tsx @@ -87,7 +87,7 @@ function StatusClearAfterPage({customStatus}: StatusClearAfterPageProps) { const clearAfter = currentUserPersonalDetails.status?.clearAfter ?? ''; const draftClearAfter = customStatus?.clearAfter ?? ''; - const [draftPeriod, setDraftPeriod] = useState(getSelectedStatusType(draftClearAfter || clearAfter)); + const [draftPeriod, setDraftPeriod] = useState(() => getSelectedStatusType(draftClearAfter || clearAfter)); const statusType = useMemo( () => Object.entries(CONST.CUSTOM_STATUS_TYPES).map(([key, value]) => ({ From e895b54dc7e9bbe152f392336a629ce443d7afe8 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 29 Nov 2024 17:01:30 +0100 Subject: [PATCH 10/13] init callbacks for useState in CardSection --- src/pages/settings/Subscription/CardSection/CardSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Subscription/CardSection/CardSection.tsx b/src/pages/settings/Subscription/CardSection/CardSection.tsx index bf0fdcbb6da3..153c5a65b3b4 100644 --- a/src/pages/settings/Subscription/CardSection/CardSection.tsx +++ b/src/pages/settings/Subscription/CardSection/CardSection.tsx @@ -65,7 +65,7 @@ function CardSection() { Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query})); }, []); - const [billingStatus, setBillingStatus] = useState(CardSectionUtils.getBillingStatus(translate, defaultCard?.accountData ?? {})); + const [billingStatus, setBillingStatus] = useState(() => CardSectionUtils.getBillingStatus(translate, defaultCard?.accountData ?? {})); const nextPaymentDate = !isEmptyObject(privateSubscription) ? CardSectionUtils.getNextBillingDate() : undefined; From 22c995596caea92a700595e10ede4090d7db271d Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 29 Nov 2024 17:01:35 +0100 Subject: [PATCH 11/13] init callbacks for useState in TransactionStartDateStep --- .../companyCards/assignCard/TransactionStartDateStep.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx b/src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx index cd630d83d36c..737e25810346 100644 --- a/src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx +++ b/src/pages/workspace/companyCards/assignCard/TransactionStartDateStep.tsx @@ -29,7 +29,7 @@ function TransactionStartDateStep() { const [dateOptionSelected, setDateOptionSelected] = useState(data?.dateOption ?? CONST.COMPANY_CARD.TRANSACTION_START_DATE_OPTIONS.FROM_BEGINNING); const [isModalOpened, setIsModalOpened] = useState(false); - const [startDate, setStartDate] = useState(format(new Date(), CONST.DATE.FNS_FORMAT_STRING)); + const [startDate, setStartDate] = useState(() => format(new Date(), CONST.DATE.FNS_FORMAT_STRING)); const handleBackButtonPress = () => { if (isEditing) { From 97f676ffd8def3585a5a48aa92dbd6e6df0db887 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Mon, 2 Dec 2024 13:19:49 +0100 Subject: [PATCH 12/13] refactor StatusClearAfterPage for useOnyx --- .../CustomStatus/StatusClearAfterPage.tsx | 20 ++++--------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.tsx b/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.tsx index c1cd4669e5eb..55c0100a84db 100644 --- a/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.tsx +++ b/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.tsx @@ -1,7 +1,6 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import type {OnyxEntry} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import FormProvider from '@components/Form/FormProvider'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -19,7 +18,6 @@ import * as ValidationUtils from '@libs/ValidationUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type * as OnyxTypes from '@src/types/onyx'; type CustomStatusTypes = ValueOf; @@ -30,13 +28,6 @@ type StatusType = { isSelected: boolean; }; -type StatusClearAfterPageOnyxProps = { - /** User's custom status */ - customStatus: OnyxEntry; -}; - -type StatusClearAfterPageProps = StatusClearAfterPageOnyxProps; - /** * @param data - either a value from CONST.CUSTOM_STATUS_TYPES or a dateTime string in the format YYYY-MM-DD HH:mm */ @@ -80,11 +71,12 @@ const useValidateCustomDate = (data: string) => { return {customDateError, customTimeError, validateCustomDate}; }; -function StatusClearAfterPage({customStatus}: StatusClearAfterPageProps) { +function StatusClearAfterPage() { const styles = useThemeStyles(); const {translate} = useLocalize(); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const clearAfter = currentUserPersonalDetails.status?.clearAfter ?? ''; + const [customStatus] = useOnyx(ONYXKEYS.CUSTOM_STATUS_DRAFT); const draftClearAfter = customStatus?.clearAfter ?? ''; const [draftPeriod, setDraftPeriod] = useState(() => getSelectedStatusType(draftClearAfter || clearAfter)); @@ -222,8 +214,4 @@ function StatusClearAfterPage({customStatus}: StatusClearAfterPageProps) { StatusClearAfterPage.displayName = 'StatusClearAfterPage'; -export default withOnyx({ - customStatus: { - key: ONYXKEYS.CUSTOM_STATUS_DRAFT, - }, -})(StatusClearAfterPage); +export default StatusClearAfterPage; From 7d0f8a349fc1ed61e7b2b32444503e7205d64eab Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Mon, 2 Dec 2024 16:20:18 +0100 Subject: [PATCH 13/13] simplify ReportActionsList --- src/pages/home/report/ReportActionsList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index 6a718b76b6bd..688d0d675cd6 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -162,7 +162,7 @@ function ReportActionsList({ const reportScrollManager = useReportScrollManager(); const userActiveSince = useRef(DateUtils.getDBTime()); const lastMessageTime = useRef(null); - const [isVisible, setIsVisible] = useState(() => Visibility.isVisible()); + const [isVisible, setIsVisible] = useState(Visibility.isVisible); const isFocused = useIsFocused(); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`);