From 02e025e4d76c812a706837767f899102854852e9 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Fri, 18 Apr 2025 00:53:16 +0300 Subject: [PATCH 1/3] update implementation to use translationKey --- src/components/HeaderWithBackButton/types.ts | 5 +++-- src/components/PromotedActionsBar.tsx | 12 +++++++----- src/libs/HeaderUtils.ts | 5 ++--- src/stories/PromotedActionBar.stories.tsx | 6 ++++-- 4 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/components/HeaderWithBackButton/types.ts b/src/components/HeaderWithBackButton/types.ts index fe25015cd305..da899b727d2b 100644 --- a/src/components/HeaderWithBackButton/types.ts +++ b/src/components/HeaderWithBackButton/types.ts @@ -4,6 +4,7 @@ import type {OnyxEntry} from 'react-native-onyx'; import type {PopoverMenuItem} from '@components/PopoverMenu'; import type {Action} from '@hooks/useSingleExecution'; import type {StepCounterParams} from '@src/languages/params'; +import type {TranslationPaths} from '@src/languages/types'; import type {AnchorPosition} from '@src/styles'; import type {Policy, Report} from '@src/types/onyx'; import type {Icon} from '@src/types/onyx/OnyxCommon'; @@ -15,8 +16,8 @@ type ThreeDotsMenuItem = { /** An icon element displayed on the left side */ icon: IconAsset; - /** Text label */ - text: string; + /** Translation key for the label */ + translationKey: TranslationPaths; /** A callback triggered when the item is selected */ onSelected: () => void; diff --git a/src/components/PromotedActionsBar.tsx b/src/components/PromotedActionsBar.tsx index b40aed8cd230..41be1e79bfc6 100644 --- a/src/components/PromotedActionsBar.tsx +++ b/src/components/PromotedActionsBar.tsx @@ -1,10 +1,10 @@ import React from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; +import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {getPinMenuItem, getShareMenuItem} from '@libs/HeaderUtils'; -import {translateLocal} from '@libs/Localize'; import isSearchTopmostFullScreenRoute from '@libs/Navigation/helpers/isSearchTopmostFullScreenRoute'; import Navigation from '@libs/Navigation/Navigation'; import {changeMoneyRequestHoldStatus} from '@libs/ReportUtils'; @@ -50,7 +50,7 @@ const PromotedActions = { join: (report) => ({ key: CONST.PROMOTED_ACTIONS.JOIN, icon: Expensicons.ChatBubbles, - text: translateLocal('common.join'), + translationKey: 'common.join', onSelected: callFunctionIfActionIsAllowed(() => { Navigation.dismissModal(); joinRoom(report); @@ -59,7 +59,7 @@ const PromotedActions = { message: ({reportID, accountID, login}) => ({ key: CONST.PROMOTED_ACTIONS.MESSAGE, icon: Expensicons.CommentBubbles, - text: translateLocal('common.message'), + translationKey: 'common.message', onSelected: () => { if (reportID) { Navigation.navigateToReportWithPolicyCheck({reportID}); @@ -79,7 +79,7 @@ const PromotedActions = { hold: ({isTextHold, reportAction, isDelegateAccessRestricted, setIsNoDelegateAccessMenuVisible, currentSearchHash}) => ({ key: CONST.PROMOTED_ACTIONS.HOLD, icon: Expensicons.Stopwatch, - text: translateLocal(`iou.${isTextHold ? 'hold' : 'unhold'}`), + translationKey: `iou.${isTextHold ? 'hold' : 'unhold'}`, onSelected: () => { if (isDelegateAccessRestricted) { setIsNoDelegateAccessMenuVisible(true); // Show the menu @@ -111,6 +111,7 @@ type PromotedActionsBarProps = { function PromotedActionsBar({promotedActions, containerStyle}: PromotedActionsBarProps) { const theme = useTheme(); const styles = useThemeStyles(); + const {translate} = useLocalize(); if (promotedActions.length === 0) { return null; @@ -118,7 +119,7 @@ function PromotedActionsBar({promotedActions, containerStyle}: PromotedActionsBa return ( - {promotedActions.map(({key, onSelected, ...props}) => ( + {promotedActions.map(({key, onSelected, translationKey, ...props}) => ( diff --git a/src/libs/HeaderUtils.ts b/src/libs/HeaderUtils.ts index d23277448d15..d8dcd0509992 100644 --- a/src/libs/HeaderUtils.ts +++ b/src/libs/HeaderUtils.ts @@ -4,7 +4,6 @@ import ROUTES from '@src/ROUTES'; import type OnyxReport from '@src/types/onyx/Report'; import {togglePinnedState} from './actions/Report'; import {callFunctionIfActionIsAllowed} from './actions/Session'; -import {translateLocal} from './Localize'; import Navigation from './Navigation/Navigation'; function getPinMenuItem(report: OnyxReport): ThreeDotsMenuItem { @@ -12,7 +11,7 @@ function getPinMenuItem(report: OnyxReport): ThreeDotsMenuItem { return { icon: Expensicons.Pin, - text: translateLocal(isPinned ? 'common.unPin' : 'common.pin'), + translationKey: isPinned ? 'common.unPin' : 'common.pin', onSelected: callFunctionIfActionIsAllowed(() => togglePinnedState(report.reportID, isPinned)), }; } @@ -20,7 +19,7 @@ function getPinMenuItem(report: OnyxReport): ThreeDotsMenuItem { function getShareMenuItem(report: OnyxReport, backTo?: string): ThreeDotsMenuItem { return { icon: Expensicons.QrCode, - text: translateLocal('common.share'), + translationKey: 'common.share', onSelected: () => Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS_SHARE_CODE.getRoute(report?.reportID, backTo)), }; } diff --git a/src/stories/PromotedActionBar.stories.tsx b/src/stories/PromotedActionBar.stories.tsx index 30e37c2237aa..2dd81d8b5945 100644 --- a/src/stories/PromotedActionBar.stories.tsx +++ b/src/stories/PromotedActionBar.stories.tsx @@ -15,7 +15,9 @@ const story = { component: PromotedActionsBar, }; -type StoryType = typeof Template & {args?: Partial}; +type PromotedActionWithText = Omit & {text: string}; +type PromotedActionsBarPropsWithText = Omit & {promotedActions: PromotedActionWithText[]}; +type StoryType = typeof Template & {args?: Partial}; function Template(args: PromotedActionsBarProps) { return ( @@ -47,7 +49,7 @@ const promotedActions = [ text: 'Share', onSelected: () => {}, }, -] satisfies PromotedAction[]; +] satisfies PromotedActionWithText[]; const defaultPromotedAction = { key: '', From abf570378f968d7a9baffbdddc91caf35231fad4 Mon Sep 17 00:00:00 2001 From: FitseTLT Date: Thu, 24 Apr 2025 00:57:00 +0300 Subject: [PATCH 2/3] applied translation for you --- src/libs/PersonalDetailsUtils.ts | 10 ++++++++-- src/pages/ProfilePage.tsx | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/libs/PersonalDetailsUtils.ts b/src/libs/PersonalDetailsUtils.ts index b57ae95aad81..e3622c55fee2 100644 --- a/src/libs/PersonalDetailsUtils.ts +++ b/src/libs/PersonalDetailsUtils.ts @@ -63,7 +63,13 @@ Onyx.connect({ const regexMergedAccount = new RegExp(CONST.REGEX.MERGED_ACCOUNT_PREFIX); -function getDisplayNameOrDefault(passedPersonalDetails?: Partial | null, defaultValue = '', shouldFallbackToHidden = true, shouldAddCurrentUserPostfix = false): string { +function getDisplayNameOrDefault( + passedPersonalDetails?: Partial | null, + defaultValue = '', + shouldFallbackToHidden = true, + shouldAddCurrentUserPostfix = false, + youAfterTranslation = youTranslation, +): string { let displayName = passedPersonalDetails?.displayName ?? ''; let login = passedPersonalDetails?.login ?? ''; @@ -84,7 +90,7 @@ function getDisplayNameOrDefault(passedPersonalDetails?: Partial Date: Thu, 24 Apr 2025 15:00:18 +0300 Subject: [PATCH 3/3] fix lint --- src/pages/ProfilePage.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx index f0e8af1d84d9..ce05adb791bd 100755 --- a/src/pages/ProfilePage.tsx +++ b/src/pages/ProfilePage.tsx @@ -65,13 +65,14 @@ const chatReportSelector = (report: OnyxEntry): OnyxEntry => }; function ProfilePage({route}: ProfilePageProps) { - const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: (c) => mapOnyxCollectionItems(c, chatReportSelector)}); - const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); - const [personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_METADATA); - const [session] = useOnyx(ONYXKEYS.SESSION); - const [isDebugModeEnabled] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.isDebugModeEnabled}); + const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: (c) => mapOnyxCollectionItems(c, chatReportSelector), canBeMissing: true}); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: true}); + const [personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_METADATA, {canBeMissing: true}); + const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false}); + const [isDebugModeEnabled] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.isDebugModeEnabled, canBeMissing: true}); const [guideCalendarLink] = useOnyx(ONYXKEYS.ACCOUNT, { selector: (account) => account?.guideCalendarLink, + canBeMissing: true, }); const accountID = Number(route.params?.accountID ?? CONST.DEFAULT_NUMBER_ID); @@ -84,7 +85,7 @@ function ProfilePage({route}: ProfilePageProps) { } return `${ONYXKEYS.COLLECTION.REPORT}${reportID}` as const; }, [accountID, isCurrentUser, reports, session]); - const [report] = useOnyx(reportKey); + const [report] = useOnyx(reportKey, {canBeMissing: true}); const styles = useThemeStyles(); const {translate, formatPhoneNumber} = useLocalize();