-
Notifications
You must be signed in to change notification settings - Fork 2.8k
/
IOURequestStepDistance.js
240 lines (215 loc) · 10.4 KB
/
IOURequestStepDistance.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
import lodashGet from 'lodash/get';
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import {View} from 'react-native';
import _ from 'underscore';
import Button from '@components/Button';
import DistanceRequestFooter from '@components/DistanceRequest/DistanceRequestFooter';
import DistanceRequestRenderItem from '@components/DistanceRequest/DistanceRequestRenderItem';
import DotIndicatorMessage from '@components/DotIndicatorMessage';
import DraggableList from '@components/DraggableList';
import transactionPropTypes from '@components/transactionPropTypes';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import usePrevious from '@hooks/usePrevious';
import useThemeStyles from '@hooks/useThemeStyles';
import compose from '@libs/compose';
import * as ErrorUtils from '@libs/ErrorUtils';
import Navigation from '@libs/Navigation/Navigation';
import * as TransactionUtils from '@libs/TransactionUtils';
import reportPropTypes from '@pages/reportPropTypes';
import variables from '@styles/variables';
import * as IOU from '@userActions/IOU';
import * as MapboxToken from '@userActions/MapboxToken';
import * as Transaction from '@userActions/Transaction';
import CONST from '@src/CONST';
import ROUTES from '@src/ROUTES';
import IOURequestStepRoutePropTypes from './IOURequestStepRoutePropTypes';
import StepScreenWrapper from './StepScreenWrapper';
import withFullTransactionOrNotFound from './withFullTransactionOrNotFound';
import withWritableReportOrNotFound from './withWritableReportOrNotFound';
const propTypes = {
/** Navigation route context info provided by react navigation */
route: IOURequestStepRoutePropTypes.isRequired,
/* Onyx Props */
/** The report that the transaction belongs to */
report: reportPropTypes,
/** The transaction object being modified in Onyx */
transaction: transactionPropTypes,
};
const defaultProps = {
report: {},
transaction: {},
};
function IOURequestStepDistance({
report,
route: {
params: {iouType, reportID, transactionID, backTo},
},
transaction,
}) {
const styles = useThemeStyles();
const {isOffline} = useNetwork();
const {translate} = useLocalize();
const [optimisticWaypoints, setOptimisticWaypoints] = useState(null);
const [hasError, setHasError] = useState(false);
const waypoints = useMemo(() => optimisticWaypoints || lodashGet(transaction, 'comment.waypoints', {waypoint0: {}, waypoint1: {}}), [optimisticWaypoints, transaction]);
const waypointsList = _.keys(waypoints);
const previousWaypoints = usePrevious(waypoints);
const numberOfWaypoints = _.size(waypoints);
const numberOfPreviousWaypoints = _.size(previousWaypoints);
const scrollViewRef = useRef(null);
const isLoadingRoute = lodashGet(transaction, 'comment.isLoading', false);
const isLoading = lodashGet(transaction, 'isLoading', false);
const hasRouteError = !!lodashGet(transaction, 'errorFields.route');
const hasRoute = TransactionUtils.hasRoute(transaction);
const validatedWaypoints = TransactionUtils.getValidWaypoints(waypoints);
const previousValidatedWaypoints = usePrevious(validatedWaypoints);
const haveValidatedWaypointsChanged = !_.isEqual(previousValidatedWaypoints, validatedWaypoints);
const isRouteAbsentWithoutErrors = !hasRoute && !hasRouteError;
const shouldFetchRoute = (isRouteAbsentWithoutErrors || haveValidatedWaypointsChanged) && !isLoadingRoute && _.size(validatedWaypoints) > 1;
useEffect(() => {
MapboxToken.init();
return MapboxToken.stop;
}, []);
useEffect(() => {
if (isOffline || !shouldFetchRoute) {
return;
}
Transaction.getRouteForDraft(transactionID, validatedWaypoints);
}, [shouldFetchRoute, transactionID, validatedWaypoints, isOffline]);
useEffect(() => {
if (numberOfWaypoints <= numberOfPreviousWaypoints) {
return;
}
scrollViewRef.current.scrollToEnd({animated: true});
}, [numberOfPreviousWaypoints, numberOfWaypoints]);
const navigateBack = () => {
Navigation.goBack(backTo || ROUTES.HOME);
};
/**
* Takes the user to the page for editing a specific waypoint
* @param {Number} index of the waypoint to edit
*/
const navigateToWaypointEditPage = (index) => {
Navigation.navigate(
ROUTES.MONEY_REQUEST_STEP_WAYPOINT.getRoute(CONST.IOU.ACTION.CREATE, CONST.IOU.TYPE.REQUEST, transactionID, report.reportID, index, Navigation.getActiveRouteWithoutParams()),
);
};
const navigateToNextStep = useCallback(() => {
if (backTo) {
Navigation.goBack(backTo);
return;
}
// If a reportID exists in the report object, it's because the user started this flow from using the + button in the composer
// inside a report. In this case, the participants can be automatically assigned from the report and the user can skip the participants step and go straight
// to the confirm step.
if (report.reportID) {
IOU.setMoneyRequestParticipantsFromReport(transactionID, report);
Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(iouType, transactionID, reportID));
return;
}
// If there was no reportID, then that means the user started this flow from the global + menu
// and an optimistic reportID was generated. In that case, the next step is to select the participants for this request.
Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_PARTICIPANTS.getRoute(iouType, transactionID, reportID));
}, [report, iouType, reportID, transactionID, backTo]);
const getError = () => {
// Get route error if available else show the invalid number of waypoints error.
if (hasRouteError) {
return ErrorUtils.getLatestErrorField(transaction, 'route');
}
if (_.keys(waypoints).length > 2 && _.size(validatedWaypoints) !== _.keys(waypoints).length) {
return {0: translate('iou.error.duplicateWaypointsErrorMessage')};
}
if (_.size(validatedWaypoints) < 2) {
return {0: translate('iou.error.atLeastTwoDifferentWaypoints')};
}
};
const updateWaypoints = useCallback(
({data}) => {
if (_.isEqual(waypointsList, data)) {
return;
}
const newWaypoints = {};
_.each(data, (waypoint, index) => {
newWaypoints[`waypoint${index}`] = lodashGet(waypoints, waypoint, {});
});
setOptimisticWaypoints(newWaypoints);
// eslint-disable-next-line rulesdir/no-thenable-actions-in-views
Transaction.updateWaypoints(transactionID, newWaypoints, true).then(() => {
setOptimisticWaypoints(null);
});
},
[transactionID, waypoints, waypointsList],
);
const submitWaypoints = useCallback(() => {
// If there is any error or loading state, don't let user go to next page.
if (_.size(validatedWaypoints) < 2 || (_.keys(waypoints).length > 2 && _.size(validatedWaypoints) !== _.keys(waypoints).length) || hasRouteError || isLoadingRoute || isLoading) {
setHasError(true);
return;
}
navigateToNextStep();
}, [setHasError, waypoints, hasRouteError, isLoadingRoute, isLoading, validatedWaypoints, navigateToNextStep]);
return (
<StepScreenWrapper
headerTitle={translate('common.distance')}
onBackButtonPress={navigateBack}
testID={IOURequestStepDistance.displayName}
shouldShowWrapper={Boolean(backTo)}
>
<>
<View style={styles.flex1}>
<DraggableList
data={waypointsList}
keyExtractor={(item) => item}
shouldUsePortal
onDragEnd={updateWaypoints}
scrollEventThrottle={variables.distanceScrollEventThrottle}
ref={scrollViewRef}
renderItem={({item, drag, isActive, getIndex}) => (
<DistanceRequestRenderItem
waypoints={waypoints}
item={item}
onSecondaryInteraction={drag}
isActive={isActive}
getIndex={getIndex}
onPress={navigateToWaypointEditPage}
disabled={isLoadingRoute}
/>
)}
ListFooterComponent={
<DistanceRequestFooter
waypoints={waypoints}
hasRouteError={hasRouteError}
navigateToWaypointEditPage={navigateToWaypointEditPage}
transaction={transaction}
/>
}
/>
</View>
<View style={[styles.w100, styles.pt2]}>
{/* Show error message if there is route error or there are less than 2 routes and user has tried submitting, */}
{((hasError && _.size(validatedWaypoints) < 2) || (_.keys(waypoints).length > 2 && _.size(validatedWaypoints) !== _.keys(waypoints).length) || hasRouteError) && (
<DotIndicatorMessage
style={[styles.mh4, styles.mv3]}
messages={getError()}
type="error"
/>
)}
<Button
success
allowBubble
pressOnEnter
style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
onPress={submitWaypoints}
text={translate('common.next')}
isLoading={!isOffline && (isLoadingRoute || shouldFetchRoute || isLoading)}
/>
</View>
</>
</StepScreenWrapper>
);
}
IOURequestStepDistance.displayName = 'IOURequestStepDistance';
IOURequestStepDistance.propTypes = propTypes;
IOURequestStepDistance.defaultProps = defaultProps;
export default compose(withWritableReportOrNotFound, withFullTransactionOrNotFound)(IOURequestStepDistance);