dukenv0307
commented
6 months ago Proposal
Please re-state the problem that we are trying to solve in this issue.
In online, in IOU report for request money, the page keeps on loading
What is the root cause of that problem?
This is a feature request, I understand that we're trying to achieve 3 things below:
- We have the report total loaded in the iouReport data, so we should show the report total in the report where possible when offline.
- The iouActions we can't load would still show with a skeleton UI as we do today (we agreed just the one request preview component appearing as a skeleton is fine).
- When a new request is added to the request when offline and appears at 50% opacity in the pending create state, so should the report total in the expanded header area.
What changes do you think we should make in order to solve the problem?
- Since
MoneyReportViewis rendered base onCREATEDaction, we can generate aCREATEaction if the report is IOU report and the created actionn doesn't exist inReportActionList
- This is existing behavior
- Fix here so that it will additionally check if there's any pending money request, if yes there'll be
pendingActionthere as well and it will display at 50% opacity - If we only want to display report total at 50% opacity, in
MoneyReportViewwe can check if at least once transaction is pending we will set opacity for report total to 50%.
What alternative solutions did you explore? (Optional)
For 1, an alternative is if there's no CREATED report action, we can append it ourselves from the front-end, and later when we open the iou report and the real CREATED report action comes, we can replace the appended one. But fixing from the back-end to additionally return CREATED report action is more straight-forward and clean.
- In
ReportActionsView,- we can create a new variable to add
CREATEDaction if the report is MoneyRequestReport and the last report action isn't the created action.
- we can create a new variable to add
- Get report preview action by using
getReportPreviewAction(props.report.chatReportID, props.report.reportID). Get the total request of IOU report viareportPreviewAction.childMoneyRequestCountand filterreportActionsto get the number of IOU action inreportActions. If it's equal do nothing. Otherwise, generates an amount of IOU actions equal to the total number of requests minus the number of IOU create actions currently inreportActionsby usingbuildOptimisticIOUReportActionwith randomtransactionID. With randomtransactionID, transaction data will be undefined, and thenMoneyRequestPreviewwill show skeleton as it is.
const reportActionsToDisplay = useMemo(() => {
if (!ReportUtils.isMoneyRequestReport(props.report) || !_.size(props.reportActions) || !ReportActionsUtils.isCreatedAction(_.last(props.reportActions))) {
return props.reportActions;
}
const optimisticCreatedAction = ReportUtils.buildOptimisticCreatedReportAction(report.ownerAccountID, DateUtils.subtractMillisecondsFromDateTime(_.last(props.reportActions).created, 1));
return [...props.reportActions, optimisticCreatedAction];
}, [props.reportActions, props.report])OPTIONAL: when generate the created action, we can add a flag to know this action is optimistic or not
- Pass
reportActionsToDisplayassortedReportActionsprop here
trjExpensify
abdulrahuman5196
melvin-bot[bot]
mvtglobally
mountiny
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Action Performed:
Expected Result:
Output of @mountiny & I discussing this one here for reference.
Actual Result:
In online, in IOU report for request money, the page keeps on loading
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Version Number: 1.3.60-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
https://github.com/Expensify/App/assets/78819774/b3257238-8c59-4e60-a84b-8dce2d6bc3cf
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal team
Slack conversation:
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @trjExpensify