Skip to content

Commit ec01b62

Browse files
BeamanatorBeamanator
authored
Merge pull request Expensify#66126 from Expensify/revert-65744-Update-the-transaction-thread-report-loading-to-show-skeleton
[CP Staging] Revert "Update the transaction thread report loading to show skeleton"
2 parents ea46ec6 + 6b9c748 commit ec01b62

9 files changed

Lines changed: 210 additions & 346 deletions

File tree

‎src/ROUTES.ts‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -87,16 +87,12 @@ const ROUTES = {
8787
getRoute: ({
8888
reportID,
8989
reportActionID,
90-
parentReportID,
91-
parentReportActionID,
9290
backTo,
9391
moneyRequestReportActionID,
9492
transactionID,
9593
}: {
9694
reportID: string | undefined;
9795
reportActionID?: string;
98-
parentReportID?: string;
99-
parentReportActionID?: string;
10096
backTo?: string;
10197
moneyRequestReportActionID?: string;
10298
transactionID?: string;
@@ -116,14 +112,6 @@ const ROUTES = {
116112
queryParams.push(`moneyRequestReportActionID=${moneyRequestReportActionID}`);
117113
}
118114

119-
if (parentReportID) {
120-
queryParams.push(`parentReportID=${parentReportID}`);
121-
}
122-
123-
if (parentReportActionID) {
124-
queryParams.push(`parentReportActionID=${parentReportActionID}`);
125-
}
126-
127115
const queryString = queryParams.length > 0 ? (`${baseRoute}?${queryParams.join('&')}` as const) : baseRoute;
128116
return getUrlWithBackToParam(queryString, backTo);
129117
},

‎src/components/MoneyRequestHeader.tsx‎

Lines changed: 97 additions & 169 deletions
Large diffs are not rendered by default.

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -200,9 +200,7 @@ function MoneyRequestReportTransactionList({
200200
// to display prev/next arrows in RHP for navigation
201201
const sortedSiblingTransactionReportIDs = getThreadReportIDsForTransactions(reportActions, sortedTransactions);
202202
setActiveTransactionThreadIDs(sortedSiblingTransactionReportIDs).then(() => {
203-
Navigation.navigate(
204-
ROUTES.SEARCH_REPORT.getRoute({reportID: reportIDToNavigate, backTo, parentReportID: activeTransaction.reportID, parentReportActionID: iouAction?.reportActionID}),
205-
);
203+
Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: reportIDToNavigate, backTo}));
206204
});
207205
},
208206
[reportActions, sortedTransactions],

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionsNavigation.tsx‎

Lines changed: 9 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -12,37 +12,25 @@ import getEmptyArray from '@src/types/utils/getEmptyArray';
1212

1313
type MoneyRequestReportRHPNavigationButtonsProps = {
1414
currentReportID: string;
15-
16-
/** The ID of the parent report that contains the transaction threads */
17-
parentReportID?: string;
18-
19-
/** The route to navigate back to when the user clicks on the back button */
20-
backTo?: string;
2115
};
2216

23-
function MoneyRequestReportTransactionsNavigation({currentReportID, parentReportID, backTo}: MoneyRequestReportRHPNavigationButtonsProps) {
17+
function MoneyRequestReportTransactionsNavigation({currentReportID}: MoneyRequestReportRHPNavigationButtonsProps) {
2418
const [reportIDsList = getEmptyArray<string>()] = useOnyx(ONYXKEYS.TRANSACTION_THREAD_NAVIGATION_REPORT_IDS, {
2519
canBeMissing: true,
2620
});
27-
const [parentReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReportID}`, {
28-
canBeMissing: true,
29-
selector: (reportActions) => Object.values(reportActions ?? {}),
30-
});
3121

32-
const {prevReportID, prevParentReportActionID, nextReportID, nextParentReportActionID} = useMemo(() => {
22+
const {prevReportID, nextReportID} = useMemo(() => {
3323
if (!reportIDsList || reportIDsList.length < 2) {
34-
return {prevReportID: undefined, prevParentReportActionID: undefined, nextReportID: undefined, nextParentReportActionID: undefined};
24+
return {prevReportID: undefined, nextReportID: undefined};
3525
}
3626

3727
const currentReportIndex = reportIDsList.findIndex((id) => id === currentReportID);
3828

3929
const prevID = currentReportIndex > 0 ? reportIDsList.at(currentReportIndex - 1) : undefined;
4030
const nextID = currentReportIndex <= reportIDsList.length - 1 ? reportIDsList.at(currentReportIndex + 1) : undefined;
41-
const prevReportActionID = currentReportIndex > 0 ? parentReportActions?.find((action) => action.childReportID === prevID)?.reportActionID : undefined;
42-
const nextReportActionID = currentReportIndex <= reportIDsList.length - 1 ? parentReportActions?.find((action) => action.childReportID === nextID)?.reportActionID : undefined;
4331

44-
return {prevReportID: prevID, prevParentReportActionID: prevReportActionID, nextReportID: nextID, nextParentReportActionID: nextReportActionID};
45-
}, [currentReportID, parentReportActions, reportIDsList]);
32+
return {prevReportID: prevID, nextReportID: nextID};
33+
}, [currentReportID, reportIDsList]);
4634

4735
/**
4836
* We clear the sibling transactionThreadIDs when unmounting this component
@@ -67,22 +55,14 @@ function MoneyRequestReportTransactionsNavigation({currentReportID, parentReport
6755
isPrevButtonDisabled={!prevReportID}
6856
isNextButtonDisabled={!nextReportID}
6957
onNext={(e) => {
58+
const backTo = Navigation.getActiveRoute();
7059
e?.preventDefault();
71-
Navigation.navigate(
72-
ROUTES.SEARCH_REPORT.getRoute({reportID: nextReportID, parentReportActionID: nextParentReportActionID, parentReportID, backTo: backTo ?? Navigation.getActiveRoute()}),
73-
{
74-
forceReplace: true,
75-
},
76-
);
60+
Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: nextReportID, backTo}), {forceReplace: true});
7761
}}
7862
onPrevious={(e) => {
63+
const backTo = Navigation.getActiveRoute();
7964
e?.preventDefault();
80-
Navigation.navigate(
81-
ROUTES.SEARCH_REPORT.getRoute({reportID: prevReportID, parentReportActionID: prevParentReportActionID, parentReportID, backTo: backTo ?? Navigation.getActiveRoute()}),
82-
{
83-
forceReplace: true,
84-
},
85-
);
65+
Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: prevReportID, backTo}), {forceReplace: true});
8666
}}
8767
/>
8868
);

‎src/components/MoneyRequestReportView/MoneyRequestReportView.tsx‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -133,22 +133,20 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe
133133
const isEmptyTransactionReport = visibleTransactions && visibleTransactions.length === 0 && transactionThreadReportID === undefined;
134134
const shouldDisplayMoneyRequestActionsList = !!isEmptyTransactionReport || shouldDisplayReportTableView(report, visibleTransactions ?? []);
135135

136-
const handleBackButtonPress = useCallback(() => {
137-
if (!backToRoute) {
138-
goBackFromSearchMoneyRequest();
139-
return;
140-
}
141-
Navigation.goBack(backToRoute);
142-
}, [backToRoute]);
143-
144136
const reportHeaderView = useMemo(
145137
() =>
146138
isTransactionThreadView ? (
147139
<MoneyRequestHeader
148140
report={report}
149141
policy={policy}
150142
parentReportAction={parentReportAction}
151-
onBackButtonPress={handleBackButtonPress}
143+
onBackButtonPress={() => {
144+
if (!backToRoute) {
145+
goBackFromSearchMoneyRequest();
146+
return;
147+
}
148+
Navigation.goBack(backToRoute);
149+
}}
152150
/>
153151
) : (
154152
<MoneyReportHeader
@@ -158,10 +156,16 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe
158156
transactionThreadReportID={transactionThreadReportID}
159157
isLoadingInitialReportActions={isLoadingInitialReportActions}
160158
shouldDisplayBackButton
161-
onBackButtonPress={handleBackButtonPress}
159+
onBackButtonPress={() => {
160+
if (!backToRoute) {
161+
goBackFromSearchMoneyRequest();
162+
return;
163+
}
164+
Navigation.goBack(backToRoute);
165+
}}
162166
/>
163167
),
164-
[handleBackButtonPress, isLoadingInitialReportActions, isTransactionThreadView, parentReportAction, policy, report, reportActions, transactionThreadReportID],
168+
[backToRoute, isLoadingInitialReportActions, isTransactionThreadView, parentReportAction, policy, report, reportActions, transactionThreadReportID],
165169
);
166170

167171
if (!!(isLoadingInitialReportActions && reportActions.length === 0 && !isOffline) || shouldWaitForTransactions) {

‎src/libs/Navigation/types.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1768,8 +1768,6 @@ type ReportsSplitNavigatorParamList = {
17681768
[SCREENS.REPORT]: {
17691769
reportID: string;
17701770
reportActionID?: string;
1771-
parentReportID?: string;
1772-
parentReportActionID?: string;
17731771
openOnAdminRoom?: boolean;
17741772
referrer?: string;
17751773
backTo?: Routes;

‎src/pages/home/ReportScreen.tsx‎

Lines changed: 46 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -137,8 +137,6 @@ function ReportScreen({route, navigation}: ReportScreenProps) {
137137
const {translate} = useLocalize();
138138
const reportIDFromRoute = getNonEmptyStringOnyxID(route.params?.reportID);
139139
const reportActionIDFromRoute = route?.params?.reportActionID;
140-
const parentReportIDFromRoute = route?.params?.parentReportID;
141-
const parentReportActionIDFromRoute = route?.params?.parentReportActionID;
142140
const isFocused = useIsFocused();
143141
const prevIsFocused = usePrevious(isFocused);
144142
const firstRenderRef = useRef(true);
@@ -159,9 +157,9 @@ function ReportScreen({route, navigation}: ReportScreenProps) {
159157
const [reportNameValuePairsOnyx] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${reportIDFromRoute}`, {allowStaleData: true, canBeMissing: true});
160158
const [reportMetadata = defaultReportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportIDFromRoute}`, {canBeMissing: true, allowStaleData: true});
161159
const [policies = getEmptyObject<NonNullable<OnyxCollection<OnyxTypes.Policy>>>()] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {allowStaleData: true, canBeMissing: false});
162-
const [parentReportAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getNonEmptyStringOnyxID(reportOnyx?.parentReportID ?? parentReportIDFromRoute)}`, {
160+
const [parentReportAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getNonEmptyStringOnyxID(reportOnyx?.parentReportID)}`, {
163161
canEvict: false,
164-
selector: (parentReportActions) => getParentReportAction(parentReportActions, reportOnyx?.parentReportActionID ?? parentReportActionIDFromRoute),
162+
selector: (parentReportActions) => getParentReportAction(parentReportActions, reportOnyx?.parentReportActionID),
165163
canBeMissing: true,
166164
});
167165
const deletedParentAction = isDeletedParentAction(parentReportAction);
@@ -207,8 +205,6 @@ function ReportScreen({route, navigation}: ReportScreenProps) {
207205
return '';
208206
}, [accountManagerReportID, accountManagerReport, personalDetails, translate]);
209207

210-
const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${parentReportIDFromRoute}`, {canBeMissing: true});
211-
212208
/**
213209
* Create a lightweight Report so as to keep the re-rendering as light as possible by
214210
* passing in only the required props.
@@ -219,58 +215,48 @@ function ReportScreen({route, navigation}: ReportScreenProps) {
219215
*/
220216
const report = useMemo(
221217
() =>
222-
// This is required to get the transaction data from the parent report, to render the optimistic transaction thread
223-
parentReportIDFromRoute && parentReportActionIDFromRoute
224-
? ({
225-
...reportOnyx,
226-
reportID: reportIDFromRoute,
227-
parentReportID: parentReportIDFromRoute,
228-
parentReportActionID: parentReportActionIDFromRoute,
229-
policyID: parentReport?.policyID,
230-
type: CONST.REPORT.TYPE.CHAT,
231-
} as OnyxTypes.Report)
232-
: reportOnyx && {
233-
lastReadTime: reportOnyx.lastReadTime,
234-
reportID: reportOnyx.reportID,
235-
policyID: reportOnyx.policyID,
236-
lastVisibleActionCreated: reportOnyx.lastVisibleActionCreated,
237-
statusNum: reportOnyx.statusNum,
238-
stateNum: reportOnyx.stateNum,
239-
writeCapability: reportOnyx.writeCapability,
240-
type: reportOnyx.type,
241-
errorFields: reportOnyx.errorFields,
242-
parentReportID: reportOnyx.parentReportID,
243-
parentReportActionID: reportOnyx.parentReportActionID,
244-
chatType: reportOnyx.chatType,
245-
pendingFields: reportOnyx.pendingFields,
246-
isDeletedParentAction: reportOnyx.isDeletedParentAction,
247-
reportName: reportOnyx.reportName,
248-
description: reportOnyx.description,
249-
managerID: reportOnyx.managerID,
250-
total: reportOnyx.total,
251-
nonReimbursableTotal: reportOnyx.nonReimbursableTotal,
252-
fieldList: reportOnyx.fieldList,
253-
ownerAccountID: reportOnyx.ownerAccountID,
254-
currency: reportOnyx.currency,
255-
unheldTotal: reportOnyx.unheldTotal,
256-
unheldNonReimbursableTotal: reportOnyx.unheldNonReimbursableTotal,
257-
participants: reportOnyx.participants,
258-
isWaitingOnBankAccount: reportOnyx.isWaitingOnBankAccount,
259-
iouReportID: reportOnyx.iouReportID,
260-
isOwnPolicyExpenseChat: reportOnyx.isOwnPolicyExpenseChat,
261-
isPinned: reportOnyx.isPinned,
262-
chatReportID: reportOnyx.chatReportID,
263-
visibility: reportOnyx.visibility,
264-
oldPolicyName: reportOnyx.oldPolicyName,
265-
policyName: reportOnyx.policyName,
266-
private_isArchived: reportNameValuePairsOnyx?.private_isArchived,
267-
lastMentionedTime: reportOnyx.lastMentionedTime,
268-
avatarUrl: reportOnyx.avatarUrl,
269-
permissions,
270-
invoiceReceiver: reportOnyx.invoiceReceiver,
271-
policyAvatar: reportOnyx.policyAvatar,
272-
},
273-
[parentReportIDFromRoute, parentReportActionIDFromRoute, reportOnyx, reportIDFromRoute, parentReport?.policyID, reportNameValuePairsOnyx?.private_isArchived, permissions],
218+
reportOnyx && {
219+
lastReadTime: reportOnyx.lastReadTime,
220+
reportID: reportOnyx.reportID,
221+
policyID: reportOnyx.policyID,
222+
lastVisibleActionCreated: reportOnyx.lastVisibleActionCreated,
223+
statusNum: reportOnyx.statusNum,
224+
stateNum: reportOnyx.stateNum,
225+
writeCapability: reportOnyx.writeCapability,
226+
type: reportOnyx.type,
227+
errorFields: reportOnyx.errorFields,
228+
parentReportID: reportOnyx.parentReportID,
229+
parentReportActionID: reportOnyx.parentReportActionID,
230+
chatType: reportOnyx.chatType,
231+
pendingFields: reportOnyx.pendingFields,
232+
isDeletedParentAction: reportOnyx.isDeletedParentAction,
233+
reportName: reportOnyx.reportName,
234+
description: reportOnyx.description,
235+
managerID: reportOnyx.managerID,
236+
total: reportOnyx.total,
237+
nonReimbursableTotal: reportOnyx.nonReimbursableTotal,
238+
fieldList: reportOnyx.fieldList,
239+
ownerAccountID: reportOnyx.ownerAccountID,
240+
currency: reportOnyx.currency,
241+
unheldTotal: reportOnyx.unheldTotal,
242+
unheldNonReimbursableTotal: reportOnyx.unheldNonReimbursableTotal,
243+
participants: reportOnyx.participants,
244+
isWaitingOnBankAccount: reportOnyx.isWaitingOnBankAccount,
245+
iouReportID: reportOnyx.iouReportID,
246+
isOwnPolicyExpenseChat: reportOnyx.isOwnPolicyExpenseChat,
247+
isPinned: reportOnyx.isPinned,
248+
chatReportID: reportOnyx.chatReportID,
249+
visibility: reportOnyx.visibility,
250+
oldPolicyName: reportOnyx.oldPolicyName,
251+
policyName: reportOnyx.policyName,
252+
private_isArchived: reportNameValuePairsOnyx?.private_isArchived,
253+
lastMentionedTime: reportOnyx.lastMentionedTime,
254+
avatarUrl: reportOnyx.avatarUrl,
255+
permissions,
256+
invoiceReceiver: reportOnyx.invoiceReceiver,
257+
policyAvatar: reportOnyx.policyAvatar,
258+
},
259+
[reportOnyx, reportNameValuePairsOnyx, permissions],
274260
);
275261
const reportID = report?.reportID;
276262

@@ -322,7 +308,7 @@ function ReportScreen({route, navigation}: ReportScreenProps) {
322308
});
323309
const combinedReportActions = getCombinedReportActions(reportActions, transactionThreadReportID ?? null, Object.values(transactionThreadReportActions));
324310
const lastReportAction = [...combinedReportActions, parentReportAction].find((action) => canEditReportAction(action) && !isMoneyRequestAction(action));
325-
const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID ?? parentReport?.policyID}`];
311+
const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`];
326312
const isTopMostReportId = currentReportIDValue?.currentReportID === reportIDFromRoute;
327313
const didSubscribeToReportLeavingEvents = useRef(false);
328314
const isTransactionThreadView = isReportTransactionThread(report);
@@ -384,7 +370,6 @@ function ReportScreen({route, navigation}: ReportScreenProps) {
384370
<MoneyRequestHeader
385371
report={report}
386372
policy={policy}
387-
backTo={backTo}
388373
parentReportAction={parentReportAction}
389374
onBackButtonPress={onBackButtonPress}
390375
/>
@@ -832,12 +817,11 @@ function ReportScreen({route, navigation}: ReportScreenProps) {
832817
<ReportActionsView
833818
report={report}
834819
reportActions={reportActions}
835-
isLoadingInitialReportActions={reportMetadata?.isLoadingInitialReportActions && !isTransactionThreadView}
820+
isLoadingInitialReportActions={reportMetadata?.isLoadingInitialReportActions}
836821
hasNewerActions={hasNewerActions}
837822
hasOlderActions={hasOlderActions}
838823
parentReportAction={parentReportAction}
839824
transactionThreadReportID={transactionThreadReportID}
840-
isReportTransactionThread={isTransactionThreadView}
841825
/>
842826
) : null}
843827
{!!report && shouldDisplayMoneyRequestActionsList && !shouldWaitForTransactions ? (

0 commit comments

Comments
 (0)