migrate REPORT_SETTINGS_NAME #85034
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import {useRoute} from '@react-navigation/native'; | ||
| import {useMemo} from 'react'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
| import type {Report} from '@src/types/onyx'; | ||
| import useOnyx from './useOnyx'; | ||
|
|
||
| type UseReportFromDynamicRouteResult = { | ||
| report: Report | null | undefined; | ||
| reportID: string; | ||
| isLoading: boolean; | ||
| }; | ||
|
|
||
| /** | ||
| * Hook to extract reportID from dynamic route path and fetch the report | ||
| * Use this for dynamic routes like /r/123/settings/name where reportID is in the URL path | ||
| */ | ||
| function useReportFromDynamicRoute(): UseReportFromDynamicRouteResult { | ||
| const route = useRoute(); | ||
|
|
||
| // Extract reportID from the current path | ||
| const reportID = useMemo(() => { | ||
| const currentPath = route.path ?? ''; | ||
| const match = currentPath.match(/\/r\/([^/]+)/); | ||
|
||
| return match ? match[1] : ''; | ||
| }, [route.path]); | ||
|
|
||
| const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`); | ||
| const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA); | ||
|
|
||
| return { | ||
| report, | ||
| reportID, | ||
| isLoading: !reportID || (!report && !!isLoadingReportData), | ||
| }; | ||
| } | ||
|
|
||
| export default useReportFromDynamicRoute; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import React from 'react'; | ||
| import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; | ||
| import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; | ||
| import useDynamicBackPath from '@hooks/useDynamicBackPath'; | ||
| import useReportFromDynamicRoute from '@hooks/useReportFromDynamicRoute'; | ||
| import {isGroupChat, isTripRoom} from '@libs/ReportUtils'; | ||
| import GroupChatNameEditPage from '@pages/GroupChatNameEditPage'; | ||
| import TripChatNameEditPage from '@pages/TripChatNameEditPage'; | ||
| import {DYNAMIC_ROUTES} from '@src/ROUTES'; | ||
| import {isEmptyObject} from '@src/types/utils/EmptyObject'; | ||
| import RoomNamePage from './RoomNamePage'; | ||
|
|
||
| function DynamicNamePage() { | ||
| const backPath = useDynamicBackPath(DYNAMIC_ROUTES.REPORT_SETTINGS_NAME.path); | ||
| const {report, isLoading} = useReportFromDynamicRoute(); | ||
|
|
||
| if (isLoading) { | ||
| return <FullscreenLoadingIndicator />; | ||
| } | ||
|
||
|
|
||
| if (isEmptyObject(report)) { | ||
| return <FullPageNotFoundView shouldShow />; | ||
|
||
| } | ||
|
|
||
| if (isTripRoom(report)) { | ||
| return <TripChatNameEditPage report={report} />; | ||
| } | ||
|
|
||
| if (isGroupChat(report)) { | ||
| return <GroupChatNameEditPage report={report} />; | ||
| } | ||
|
|
||
| return ( | ||
| <RoomNamePage | ||
| report={report} | ||
| navigateBackTo={backPath} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export default DynamicNamePage; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
❌ CLEAN-REACT-PATTERNS-0 (docs)
React Compiler is enabled in this codebase and automatically memoizes derived values. The
useMemowrapping the regex-basedreportIDextraction is redundant because the compiler will automatically cache this computation based on its dependency (route.path). Manual memoization adds noise and interferes with the compiler's optimization model.Remove the
useMemowrapper and computereportIDdirectly:Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.