lint

Author: Ma-Golden

client/src/DisplayRoute.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-undef, no-use-before-define, react-hooks/exhaustive-deps, array-callback-return */
+
 import React, { useEffect, useState, useCallback } from 'react';
 import { View, Text, Alert, TouchableOpacity, Switch } from 'react-native';
 import MapView, { Polyline, Marker } from 'react-native-maps';
@@ -11,7 +13,8 @@ export default function DisplayRouteScreen({ navigation, route }) {
   const { origin, destination, routeData, polylineCoordinates } = route.params;
   const [location, setLocation] = useState(null);
   const [travelledPolyline, setTravelledPolyline] = useState([]);
-  const [remainingPolyline, setRemainingPolyline] = useState(polylineCoordinates);
+  const [remainingPolyline, setRemainingPolyline] =
+    useState(polylineCoordinates);
   const [devMode, setDevMode] = useState(false);
   const [detailedStepData, setDetailedStepData] = useState([]);
   const [currentInstruction, setCurrentInstruction] = useState(null);
@@ -20,7 +23,7 @@ export default function DisplayRouteScreen({ navigation, route }) {
     getStepData();
     setDetailedStepData([]);
     getDetailedStepData();
-  }, []);
+  }, [getDetailedStepData, routeData]);
 
   // Check proximity to the next coordinate in the polyline
 
@@ -29,12 +32,14 @@ export default function DisplayRouteScreen({ navigation, route }) {
     // Start tracking location
     const startTracking = async () => {
       try {
-        locationSubscription = await startLocationTracking((currentLocation) => {
-          if (!devMode) {
-            setLocation(currentLocation);
-            checkProximityAndUpdate(currentLocation);
-          }
-        });
+        locationSubscription = await startLocationTracking(
+          (currentLocation) => {
+            if (!devMode) {
+              setLocation(currentLocation);
+              checkProximityAndUpdate(currentLocation);
+            }
+          },
+        );
       } catch (error) {
         console.error('Error starting location tracking:', error);
       }
@@ -50,7 +55,7 @@ export default function DisplayRouteScreen({ navigation, route }) {
   }, [devMode, checkProximityAndUpdate]);
 
   function removeHtmlTags(instruction) {
-    return instruction.replace(/<\/?[^>]+(>|$)/g, "");
+    return instruction.replace(/<\/?[^>]+(>|$)/g, '');
   }
 
   // Creating a dictionary of step data for each step in the route
@@ -59,45 +64,51 @@ export default function DisplayRouteScreen({ navigation, route }) {
   const getDetailedStepData = () => {
     routeData.legs[0].steps.map((step) => {
       // Due to the complicated nature of the response some modes of transport have instructions in outer steps and other in inner
-      if (step.travel_mode !== 'TRANSIT' && step.steps) {  // For non-transit steps within a transit route
-        step.steps.map((detailedStep) => {
-          let temp = detailedStepData;
+      if (step.travel_mode !== 'TRANSIT' && step.steps) {
+        // For non-transit steps within a transit route
+        step.steps.foreach((detailedStep) => {
+          const temp = detailedStepData;
           temp.push({
             html_instructions: removeHtmlTags(detailedStep.html_instructions),
             start_location: detailedStep.start_location,
           });
           setDetailedStepData(temp);
-        })
-      } else if (step.travel_mode === 'TRANSIT') {  // If the step is a transit step, add the arrival stop to the instructions
-        let temp = detailedStepData;
+        });
+      } else if (step.travel_mode === 'TRANSIT') {
+        // If the step is a transit step, add the arrival stop to the instructions
+        const temp = detailedStepData;
         temp.push({
           html_instructions: `${removeHtmlTags(step.html_instructions)} until ${step.transit_details.arrival_stop.name}`,
           start_location: step.start_location,
         });
         setDetailedStepData(temp);
-      } else {  // For non transit routes
-        let temp = detailedStepData;
+      } else {
+        // For non transit routes
+        const temp = detailedStepData;
         temp.push({
           html_instructions: removeHtmlTags(step.html_instructions),
           start_location: step.start_location,
         });
         setDetailedStepData(temp);
       }
+      return null;
     });
   };
 
-
   const checkProximityAndUpdate = useCallback(
     (currentLocation) => {
-      for (let i = 0; i < remainingPolyline.length; i++) {
+      for (let i = 0; i < remainingPolyline.length; i += 1) {
         const distance = haversine(currentLocation, remainingPolyline[i]);
 
         // Assuming 50 meters as the proximity threshold
         if (distance < 50) {
-          setTravelledPolyline((prev) => [...prev, ...remainingPolyline.slice(0, i)]);
+          setTravelledPolyline((prev) => [
+            ...prev,
+            ...remainingPolyline.slice(0, i),
+          ]);
           setRemainingPolyline((prev) => prev.slice(i));
 
-          if (remainingPolyline.length == 1) {
+          if (remainingPolyline.length === 1) {
             Alert.alert(
               'Destination reached',
               'You have reached your destination.',
@@ -106,21 +117,26 @@ export default function DisplayRouteScreen({ navigation, route }) {
             navigation.navigate('Map');
           } else {
             // Update instruction if previous instruction complete
-            for (let i = 0; i < detailedStepData.length; i++) {
-              let instructionLocation = { latitude: detailedStepData[i].start_location.lat,
-                                          longitude: detailedStepData[i].start_location.lng};
-              const instructionDistance = haversine(currentLocation, instructionLocation);
+            for (let j = 0; j < detailedStepData.length; j += 1) {
+              const instructionLocation = {
+                latitude: detailedStepData[j].start_location.lat,
+                longitude: detailedStepData[j].start_location.lng,
+              };
+              const instructionDistance = haversine(
+                currentLocation,
+                instructionLocation,
+              );
               if (instructionDistance < 50) {
-                setCurrentInstruction(detailedStepData[i].html_instructions);
-                setDetailedStepData((prev) => prev.slice(i));
+                setCurrentInstruction(detailedStepData[j].html_instructions);
+                setDetailedStepData((prev) => prev.slice(j));
               }
             }
           }
           break;
         }
       }
     },
-    [remainingPolyline, navigation],
+    [remainingPolyline, navigation, detailedStepData],
   );
 
   // Call checkProximityAndUpdate and update setlocation on latitude / longitude button click
@@ -151,8 +167,9 @@ export default function DisplayRouteScreen({ navigation, route }) {
               {currentInstruction != null ? (
                 <Text style={displayRouteStyles.routeInfo}>
                   {currentInstruction}
-                </Text>) :
-                (<>
+                </Text>
+              ) : (
+                <>
                   <Text style={displayRouteStyles.routeInfo}>
                     Route from {origin} to {destination}
                   </Text>
@@ -162,7 +179,8 @@ export default function DisplayRouteScreen({ navigation, route }) {
                   <Text style={displayRouteStyles.routeInfo}>
                     Duration: {routeData.legs[0].duration.text}
                   </Text>
-                </>)}
+                </>
+              )}
             </View>
             <View style={displayRouteStyles.devModeContainer}>
               <Text style={displayRouteStyles.devModeText}>Dev Mode</Text>