From 7183083a74444f5ba9c92220633f8cbb9c89423c Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Wed, 1 May 2024 09:47:04 +0530 Subject: [PATCH 1/8] fix: Android - Distance - Waypoint does not change position correctly by dragging. Signed-off-by: Krishna Gupta --- src/pages/iou/request/step/IOURequestStepDistance.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/request/step/IOURequestStepDistance.tsx b/src/pages/iou/request/step/IOURequestStepDistance.tsx index 50b53d0734c9..c30c1fd56910 100644 --- a/src/pages/iou/request/step/IOURequestStepDistance.tsx +++ b/src/pages/iou/request/step/IOURequestStepDistance.tsx @@ -426,7 +426,7 @@ function IOURequestStepDistance({ item} + keyExtractor={(item) => (waypoints[item]?.address ?? '') + item || item} shouldUsePortal onDragEnd={updateWaypoints} ref={scrollViewRef} From bbe32c45763efb33b843fc1f64ef1b57bd29bd2d Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Tue, 14 May 2024 12:49:12 +0530 Subject: [PATCH 2/8] add unique keys for waypoints. Signed-off-by: Krishna Gupta --- src/pages/iou/request/step/IOURequestStepDistance.tsx | 7 +++++-- src/pages/iou/request/step/IOURequestStepWaypoint.tsx | 1 + src/types/onyx/RecentWaypoint.ts | 3 +++ src/types/onyx/Transaction.ts | 3 +++ 4 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepDistance.tsx b/src/pages/iou/request/step/IOURequestStepDistance.tsx index 3a08eb880136..f3034ff8dee8 100644 --- a/src/pages/iou/request/step/IOURequestStepDistance.tsx +++ b/src/pages/iou/request/step/IOURequestStepDistance.tsx @@ -344,7 +344,10 @@ function IOURequestStepDistance({ const newWaypoints: WaypointCollection = {}; let emptyWaypointIndex = -1; data.forEach((waypoint, index) => { - newWaypoints[`waypoint${index}`] = waypoints[waypoint] ?? {}; + const newWaypointObj = waypoints[waypoint].keyForList + ? waypoints[waypoint] + : {...waypoints[waypoint], keyForList: `${new Date().getTime()}_${Math.random().toString(36).substring(2, 15)}`}; + newWaypoints[`waypoint${index}`] = newWaypointObj ?? {}; // Find waypoint that BECOMES empty after dragging if (isEmpty(newWaypoints[`waypoint${index}`]) && !isEmpty(waypoints[`waypoint${index}`] ?? {})) { emptyWaypointIndex = index; @@ -428,7 +431,7 @@ function IOURequestStepDistance({ (waypoints[item]?.address ?? '') + item || item} + keyExtractor={(item) => (waypoints[item]?.keyForList ?? waypoints[item]?.address ?? '') + item || item} shouldUsePortal onDragEnd={updateWaypoints} ref={scrollViewRef} diff --git a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx index 5576c3dedb8a..a82c334c1fa6 100644 --- a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx +++ b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx @@ -119,6 +119,7 @@ function IOURequestStepWaypoint({ name: values.name ?? '', lat: values.lat ?? 0, lng: values.lng ?? 0, + keyForList: `${new Date().getTime()}_${Math.random().toString(36).substring(2, 15)}`, }; saveWaypoint(waypoint); } diff --git a/src/types/onyx/RecentWaypoint.ts b/src/types/onyx/RecentWaypoint.ts index 55232f7ef71d..eefa5b7274db 100644 --- a/src/types/onyx/RecentWaypoint.ts +++ b/src/types/onyx/RecentWaypoint.ts @@ -10,6 +10,9 @@ type RecentWaypoint = { /** The longitude of the waypoint */ lng?: number; + + /** The longitude of the waypoint */ + keyForList?: string; }; export default RecentWaypoint; diff --git a/src/types/onyx/Transaction.ts b/src/types/onyx/Transaction.ts index 5ed318b21ce5..a698055d455b 100644 --- a/src/types/onyx/Transaction.ts +++ b/src/types/onyx/Transaction.ts @@ -38,6 +38,9 @@ type Waypoint = { /** Address street line 2 */ street2?: string; + + /** The longitude of the waypoint */ + keyForList?: string; }; type WaypointCollection = Record; From e76180b92bd99788d7f845e78a80e8ae4677ed66 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Sun, 19 May 2024 01:08:49 +0530 Subject: [PATCH 3/8] add keyForList when address is selected. Signed-off-by: Krishna Gupta --- src/pages/iou/request/step/IOURequestStepWaypoint.tsx | 1 + src/types/onyx/RecentWaypoint.ts | 2 +- src/types/onyx/Transaction.ts | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx index a82c334c1fa6..439537c13a9b 100644 --- a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx +++ b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx @@ -140,6 +140,7 @@ function IOURequestStepWaypoint({ lng: values.lng ?? 0, address: values.address ?? '', name: values.name ?? '', + keyForList: `${new Date().getTime()}_${Math.random().toString(36).substring(2, 15)}`, }; Transaction.saveWaypoint(transactionID, pageIndex, waypoint, action === CONST.IOU.ACTION.CREATE); diff --git a/src/types/onyx/RecentWaypoint.ts b/src/types/onyx/RecentWaypoint.ts index eefa5b7274db..cef6bb6b4fdb 100644 --- a/src/types/onyx/RecentWaypoint.ts +++ b/src/types/onyx/RecentWaypoint.ts @@ -11,7 +11,7 @@ type RecentWaypoint = { /** The longitude of the waypoint */ lng?: number; - /** The longitude of the waypoint */ + /** Key used internally by React */ keyForList?: string; }; diff --git a/src/types/onyx/Transaction.ts b/src/types/onyx/Transaction.ts index a698055d455b..e5ac9ff73cb8 100644 --- a/src/types/onyx/Transaction.ts +++ b/src/types/onyx/Transaction.ts @@ -39,7 +39,7 @@ type Waypoint = { /** Address street line 2 */ street2?: string; - /** The longitude of the waypoint */ + /** Key used internally by React */ keyForList?: string; }; From 111476d6a268a1b9b496f0e9fc7511e7c1bb10d3 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Sun, 19 May 2024 01:42:06 +0530 Subject: [PATCH 4/8] use Date.now() for keyForList. Signed-off-by: Krishna Gupta --- src/pages/iou/request/step/IOURequestStepDistance.tsx | 4 +--- src/pages/iou/request/step/IOURequestStepWaypoint.tsx | 4 ++-- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepDistance.tsx b/src/pages/iou/request/step/IOURequestStepDistance.tsx index f3034ff8dee8..7bf9dd6d60c0 100644 --- a/src/pages/iou/request/step/IOURequestStepDistance.tsx +++ b/src/pages/iou/request/step/IOURequestStepDistance.tsx @@ -344,9 +344,7 @@ function IOURequestStepDistance({ const newWaypoints: WaypointCollection = {}; let emptyWaypointIndex = -1; data.forEach((waypoint, index) => { - const newWaypointObj = waypoints[waypoint].keyForList - ? waypoints[waypoint] - : {...waypoints[waypoint], keyForList: `${new Date().getTime()}_${Math.random().toString(36).substring(2, 15)}`}; + const newWaypointObj = waypoints[waypoint]; newWaypoints[`waypoint${index}`] = newWaypointObj ?? {}; // Find waypoint that BECOMES empty after dragging if (isEmpty(newWaypoints[`waypoint${index}`]) && !isEmpty(waypoints[`waypoint${index}`] ?? {})) { diff --git a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx index 439537c13a9b..3e59fcfac361 100644 --- a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx +++ b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx @@ -119,7 +119,7 @@ function IOURequestStepWaypoint({ name: values.name ?? '', lat: values.lat ?? 0, lng: values.lng ?? 0, - keyForList: `${new Date().getTime()}_${Math.random().toString(36).substring(2, 15)}`, + keyForList: `${waypointValue as string}_${Date.now()}`, }; saveWaypoint(waypoint); } @@ -140,7 +140,7 @@ function IOURequestStepWaypoint({ lng: values.lng ?? 0, address: values.address ?? '', name: values.name ?? '', - keyForList: `${new Date().getTime()}_${Math.random().toString(36).substring(2, 15)}`, + keyForList: `${values.name}_${Date.now()}`, }; Transaction.saveWaypoint(transactionID, pageIndex, waypoint, action === CONST.IOU.ACTION.CREATE); From 800c12e7e26743c232dc54ca9c947277c6e0a6ce Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Fri, 24 May 2024 23:36:46 +0530 Subject: [PATCH 5/8] remove redundant code. Signed-off-by: Krishna Gupta --- src/pages/iou/request/step/IOURequestStepDistance.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepDistance.tsx b/src/pages/iou/request/step/IOURequestStepDistance.tsx index 7bf9dd6d60c0..c3a0b75da31b 100644 --- a/src/pages/iou/request/step/IOURequestStepDistance.tsx +++ b/src/pages/iou/request/step/IOURequestStepDistance.tsx @@ -344,8 +344,7 @@ function IOURequestStepDistance({ const newWaypoints: WaypointCollection = {}; let emptyWaypointIndex = -1; data.forEach((waypoint, index) => { - const newWaypointObj = waypoints[waypoint]; - newWaypoints[`waypoint${index}`] = newWaypointObj ?? {}; + newWaypoints[`waypoint${index}`] = waypoints[waypoint] ?? {}; // Find waypoint that BECOMES empty after dragging if (isEmpty(newWaypoints[`waypoint${index}`]) && !isEmpty(waypoints[`waypoint${index}`] ?? {})) { emptyWaypointIndex = index; From 56f13d80d18f878386d54786c0dcd77fb8215428 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Fri, 24 May 2024 23:41:31 +0530 Subject: [PATCH 6/8] minor update. Signed-off-by: Krishna Gupta --- src/pages/iou/request/step/IOURequestStepWaypoint.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx index 3e59fcfac361..d302a5d25761 100644 --- a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx +++ b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx @@ -119,7 +119,7 @@ function IOURequestStepWaypoint({ name: values.name ?? '', lat: values.lat ?? 0, lng: values.lng ?? 0, - keyForList: `${waypointValue as string}_${Date.now()}`, + keyForList: `${(waypointValue ?? 'waypoint') as string}_${Date.now()}`, }; saveWaypoint(waypoint); } @@ -140,7 +140,7 @@ function IOURequestStepWaypoint({ lng: values.lng ?? 0, address: values.address ?? '', name: values.name ?? '', - keyForList: `${values.name}_${Date.now()}`, + keyForList: `${values.name ?? 'waypoint'}_${Date.now()}`, }; Transaction.saveWaypoint(transactionID, pageIndex, waypoint, action === CONST.IOU.ACTION.CREATE); From a74c13d3ce6ecd885a927b17e1cacdc0c7bd4aa4 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Fri, 24 May 2024 23:53:18 +0530 Subject: [PATCH 7/8] minor update. Signed-off-by: Krishna Gupta --- src/pages/iou/request/step/IOURequestStepWaypoint.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx index d302a5d25761..6c0eae98fb85 100644 --- a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx +++ b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx @@ -119,7 +119,7 @@ function IOURequestStepWaypoint({ name: values.name ?? '', lat: values.lat ?? 0, lng: values.lng ?? 0, - keyForList: `${(waypointValue ?? 'waypoint') as string}_${Date.now()}`, + keyForList: `${(values.name ?? 'waypoint') as string}_${Date.now()}`, }; saveWaypoint(waypoint); } From 14f864f9b73bb5034b8e0401cfbad656de167501 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Mon, 27 May 2024 21:23:33 +0530 Subject: [PATCH 8/8] minor fixes. Signed-off-by: Krishna Gupta --- src/pages/iou/request/step/IOURequestStepDistance.tsx | 2 +- src/types/onyx/RecentWaypoint.ts | 2 +- src/types/onyx/Transaction.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepDistance.tsx b/src/pages/iou/request/step/IOURequestStepDistance.tsx index c3a0b75da31b..20bb33abc1ac 100644 --- a/src/pages/iou/request/step/IOURequestStepDistance.tsx +++ b/src/pages/iou/request/step/IOURequestStepDistance.tsx @@ -428,7 +428,7 @@ function IOURequestStepDistance({ (waypoints[item]?.keyForList ?? waypoints[item]?.address ?? '') + item || item} + keyExtractor={(item) => (waypoints[item]?.keyForList ?? waypoints[item]?.address ?? '') + item} shouldUsePortal onDragEnd={updateWaypoints} ref={scrollViewRef} diff --git a/src/types/onyx/RecentWaypoint.ts b/src/types/onyx/RecentWaypoint.ts index cef6bb6b4fdb..6ed55e080560 100644 --- a/src/types/onyx/RecentWaypoint.ts +++ b/src/types/onyx/RecentWaypoint.ts @@ -11,7 +11,7 @@ type RecentWaypoint = { /** The longitude of the waypoint */ lng?: number; - /** Key used internally by React */ + /** A unique key for waypoint is required for correct draggable list rendering */ keyForList?: string; }; diff --git a/src/types/onyx/Transaction.ts b/src/types/onyx/Transaction.ts index e5ac9ff73cb8..dd02c4ea4a07 100644 --- a/src/types/onyx/Transaction.ts +++ b/src/types/onyx/Transaction.ts @@ -39,7 +39,7 @@ type Waypoint = { /** Address street line 2 */ street2?: string; - /** Key used internally by React */ + /** A unique key for waypoint is required for correct draggable list rendering */ keyForList?: string; };