[$500] Display route line when the device comes back online #26596

hayata-suenaga · 2023-09-03T05:53:12Z

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:

Go to a workspace chat
Click the "+" button next to the text composer
Click "Request money"
Click "Distance"

We're going to create the history of recent searches so that we can test this flow offline

Type and choose any addresses for "Start" and "Finish"
Confirm that a route is displayed
Close the Distance Request page (i.e. Right Hand Panel)
Make the device offline
Go through steps 1 ~ 4 again
For "Start" and "Finish", choose addresses from the suggestion (because we have the history of recent searches, we have address suggestions even when the device is offline)
Bring the device back to online
Check that the route is not displayed on the map
Refresh the screen and check the route is still not displayed

Expected Result:

A route should be displayed if two or more valid waypoints are present when the device comes back online

Actual Result:

A route is not present on the map.

Workaround:

N/A

Platforms:

Which of our officially supported platforms is this issue occurring on?

Version Number:
Reproducible in staging?: Yes
Reproducible in production?: No (the feature is not deployed to production yet)
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
Expensify/Expensify Issue URL:
Issue reported by: @shubham1206agra
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1693712953909809?thread_ts=1693667520.672399&cid=C01GTK53T8Q

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01b325474ece1a7595
Upwork Job ID: 1698212538923118592
Last Price Increase: 2023-09-03

melvin-bot · 2023-09-03T05:53:16Z

Job added to Upwork: https://www.upwork.com/jobs/~01b325474ece1a7595

melvin-bot · 2023-09-03T05:53:17Z

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

melvin-bot · 2023-09-03T05:53:19Z

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

melvin-bot · 2023-09-03T05:53:20Z

Triggered auto assignment to @dylanexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

melvin-bot · 2023-09-03T05:53:26Z

Triggered auto assignment to Contributor-plus team member for initial proposal review - @0xmiroslav (External)

b4s36t4 · 2023-09-03T05:54:34Z

Hey, @hayata-suenaga my proposal for issue #26537 solves this issue as well.

b4s36t4 · 2023-09-03T05:55:33Z

But as that is linked to other issue, not sure what I can do. Shall I post the solution specific to this issue?

studentofcoding · 2023-09-03T06:15:34Z

Proposal

Please re-state the problem that we are trying to solve in this issue

Display route line when the device comes back online

What is the root cause of that problem?

The bug appears because the application does not re-fetch the MapBox route when transitioning from offline to online. This means that if the user goes offline and then comes back online, the MapBox route is not updated, causing it not to appear correctly.

What changes do you think we should make in order to solve the problem?

Add a mechanism to

App/src/components/DistanceRequest.js

Line 76 in d0b2772

    
           function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken}) {

using useEffect to listens for changes in the network status and triggers a re-fetch of the MapBox route when the application goes from offline to online.

function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken}) {
    const previousIsOffline = usePrevious(isOffline); // Add this line to store the previous network status

    // ... (rest of the code)


    // Add this useEffect hook
    useEffect(() => {
        if (!previousIsOffline || isOffline || !iou.transactionID) {
            return;
        }
    
        Transaction.getRoute(iou.transactionID, waypoints);
    }, [isOffline, previousIsOffline, iou.transactionID, waypoints]);

    // ... (rest of the code)
}

What alternative solutions did you explore? (Optional)

None

Result

cropped_mapbox_fixed.mp4

studentofcoding · 2023-09-03T06:15:54Z

Proposal

Please re-state the problem that we are trying to solve in this issue

Display route line when the device comes back online

What is the root cause of that problem?

The bug appears because the application does not re-fetch the MapBox route when transitioning from offline to online. This means that if the user goes offline and then comes back online, the MapBox route is not updated, causing it not to appear correctly.

What changes do you think we should make in order to solve the problem?

Add a mechanism to

App/src/components/DistanceRequest.js

Line 76 in d0b2772

function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken}) {

using useEffect to listens for changes in the network status and triggers a re-fetch of the MapBox route when the application goes from offline to online.
function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken}) {
    const previousIsOffline = usePrevious(isOffline); // Add this line to store the previous network status

    // ... (rest of the code)


    // Add this useEffect hook
    useEffect(() => {
        if (!previousIsOffline || isOffline || !iou.transactionID) {
            return;
        }
    
        Transaction.getRoute(iou.transactionID, waypoints);
    }, [isOffline, previousIsOffline, iou.transactionID, waypoints]);

    // ... (rest of the code)
}
What alternative solutions did you explore? (Optional)

None

Result

cropped_mapbox_fixed.mp4

cc @hayata-suenaga

pradeepmdk · 2023-09-03T06:27:07Z

Proposal

Please re-state the problem that we are trying to solve in this issue.

Display route line when the device comes back online

What is the root cause of that problem?

App/src/components/DistanceRequest.js

Line 92 in d0b2772

    
           const doesRouteExist = lodashHas(transaction, 'routes.route0.geometry.coordinates');

here we are checking the coordinates key or not so its will be always true
because coordinates we are setting as null every every waypoint save

App/src/libs/actions/Transaction.js

Line 63 in d0b2772

coordinates: null,

but its have null value so that when come back online

App/src/components/DistanceRequest.js

Line 158 in d0b2772

Transaction.getRoute(iou.transactionID, waypoints);

not triggering this one

What changes do you think we should make in order to solve the problem?

we should update the logic

    const doesRouteExist = lodashHas(transaction, 'routes.route0.geometry.coordinates') && transaction.routes.route0.geometry.coordinates && transaction. routes.route0.geometry.type;

token init as well we should update

    useEffect(() => {
        if(isOffline) {
            return;
        }
        MapboxToken.init();
        return MapboxToken.stop;
    }, [isOffline]);

when refresh as well working fine

hoangzinh · 2023-09-03T06:34:03Z

@hayata-suenaga dup with this issue, and I had a proposal to fix this issue here #26589 (comment)

hayata-suenaga · 2023-09-04T04:11:06Z

#26589 was created earlier, so I'll close this one in favor of #26589

hayata-suenaga · 2023-09-04T04:15:10Z

I'm evaluating proposals from both PRs right now

hayata-suenaga · 2023-09-04T04:25:27Z

@pradeepmdk I'll assign you to this issue. Please see the comment there

hayata-suenaga added External Added to denote the issue can be worked on by a contributor Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Sep 3, 2023

hayata-suenaga self-assigned this Sep 3, 2023

melvin-bot bot changed the title ~~Display route line when the device comes back online~~ [$500] Display route line when the device comes back online Sep 3, 2023

melvin-bot bot assigned mallenexpensify Sep 3, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 3, 2023

melvin-bot bot assigned dylanexpensify and 0xmiros Sep 3, 2023

pradeepmdk mentioned this issue Sep 3, 2023

26558-App crashes while using distance feature #26622

Merged

59 tasks

hayata-suenaga closed this as completed Sep 4, 2023

hayata-suenaga mentioned this issue Sep 4, 2023

[HOLD for payment 2023-10-09] [$500] [Distance] - Route is generated without green line connecting the points after going online #26589

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[$500] Display route line when the device comes back online #26596

[$500] Display route line when the device comes back online #26596

hayata-suenaga commented Sep 3, 2023 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Sep 3, 2023

melvin-bot bot commented Sep 3, 2023

melvin-bot bot commented Sep 3, 2023

melvin-bot bot commented Sep 3, 2023

melvin-bot bot commented Sep 3, 2023

b4s36t4 commented Sep 3, 2023

b4s36t4 commented Sep 3, 2023

studentofcoding commented Sep 3, 2023

studentofcoding commented Sep 3, 2023

Proposal

Please re-state the problem that we are trying to solve in this issue

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

Result

pradeepmdk commented Sep 3, 2023 •

edited

Loading

hoangzinh commented Sep 3, 2023

hayata-suenaga commented Sep 4, 2023

hayata-suenaga commented Sep 4, 2023

hayata-suenaga commented Sep 4, 2023

[$500] Display route line when the device comes back online #26596

[$500] Display route line when the device comes back online #26596

Comments

hayata-suenaga commented Sep 3, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

melvin-bot bot commented Sep 3, 2023

melvin-bot bot commented Sep 3, 2023

melvin-bot bot commented Sep 3, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot bot commented Sep 3, 2023

melvin-bot bot commented Sep 3, 2023

b4s36t4 commented Sep 3, 2023

b4s36t4 commented Sep 3, 2023

studentofcoding commented Sep 3, 2023

Proposal

Please re-state the problem that we are trying to solve in this issue

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

Result

studentofcoding commented Sep 3, 2023

Proposal

Please re-state the problem that we are trying to solve in this issue

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

Result

pradeepmdk commented Sep 3, 2023 • edited Loading

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

hoangzinh commented Sep 3, 2023

hayata-suenaga commented Sep 4, 2023

hayata-suenaga commented Sep 4, 2023

hayata-suenaga commented Sep 4, 2023

hayata-suenaga commented Sep 3, 2023 •

edited by melvin-bot bot

Loading

pradeepmdk commented Sep 3, 2023 •

edited

Loading