Identify and fix issue with API returning empty array

src/components/shared/Tray/TrayComponents/AutoComplete/TrainAutoComplete/TrainAutocomplete.js

@@ -22,7 +22,7 @@ const TrainAutoComplete = ({ to }) => {
   const selectedService = to ? autoCompleteState.selectedItemTo : autoCompleteState.selectedItem;
 
   const { loading, errorInfo, results, getAutoCompleteResults } = useAutoCompleteAPI(
-    `/rail/v2/station?q=${encodeURI(trainQuery)}`,
+    `/rail/v2/stations?q=${encodeURI(trainQuery)}`,
     'train',
     trainQuery,
     to

src/components/shared/Tray/TrayComponents/AutoComplete/TramAutoComplete/TramAutoCompleteResult/TramAutoCompleteResult.js

@@ -15,15 +15,15 @@ const TramAutoCompleteResult = (props) => {
     if (autoCompleteState.selectedItem.selectedByMap) {
       autoCompleteDispatch({ type: 'RESET_SELECTED_SERVICES' });
     }
-
     autoCompleteDispatch({
       type: 'UDPATE_SELECTED_ITEM',
       payload: {
-        id: result?.atcoCode,
+        id: result?.naPTAN,
         severity: result?.disruptionSeverity || 'success',
         stopName: result.name,
         operator: 'MML1',
         lines: [],
+        naPTAN: result.naPTAN,
         to,
       },
     });

src/components/shared/Tray/TrayComponents/AutoComplete/customHooks/useAutoCompleteAPI.js

@@ -60,7 +60,7 @@ const useAutoCompleteAPI = (apiPath, mode, query, to) => {
           )[0];
 
           payload = {
-            id: result.atcoCode,
+            id: result.naPTAN,
             severity: result.disruptionSeverity || 'none',
             stopName: result.name,
             operator: result.service,

src/components/shared/Tray/TrayComponents/SelectedService/InfoAboutSelectedService/TramInfoAboutSelectedService/customHooks/useGetTramStopByStop.js

@@ -39,7 +39,7 @@ const useGetTramStopByStop = () => {
     (response) => {
       setLoading(false);
       // Update selectedItem.lines with inbetween lines to match the user's input
-      const lines = response.data?.metroStopsBetween || [];
+      const lines = response.data || [];
 
       if (lines.length) {
         autoCompleteDispatch({
@@ -77,15 +77,18 @@ const useGetTramStopByStop = () => {
     setLoading(true); // Update loading state to true as we are hitting API
     startApiTimeout();
     axios
-      .get(`${REACT_APP_API_HOST}/Metro/v2/stopsbetween/${selectedItem.id}/${selectedItemTo.id}`, {
-        headers: {
-          'Ocp-Apim-Subscription-Key': REACT_APP_API_KEY,
-        },
-        cancelToken: source.current.token, // Set token with API call, so we can cancel this call on unmount
-      })
+      .get(
+        `${REACT_APP_API_HOST}/Metro/v2/stopsbetween/${selectedItem.naPTAN}/${selectedItemTo.naPTAN}`,
+        {
+          headers: {
+            'Ocp-Apim-Subscription-Key': REACT_APP_API_KEY,
+          },
+          cancelToken: source.current.token, // Set token with API call, so we can cancel this call on unmount
+        }
+      )
       .then(handleAutoCompleteApiResponse)
       .catch(handleAutoCompleteApiError);
-  }, [handleAutoCompleteApiResponse, selectedItem.id, selectedItemTo.id, startApiTimeout]);
+  }, [handleAutoCompleteApiResponse, selectedItem.naPTAN, selectedItemTo.naPTAN, startApiTimeout]);
 
   useEffect(() => {
     setErrorInfo(null);

src/customHooks/useFilterLogic.js

@@ -84,7 +84,7 @@ const useFilterLogic = () => {
               if (stopsAffected && stopsAffected.length > 0) {
                 const lineCodes =
                   selectedItem.lines && selectedItem.lines.length > 0
-                    ? selectedItem.lines.map((stop) => stop.atcoCode)
+                    ? selectedItem.lines.map((stop) => stop.naPTAN)
                     : [selectedItem.id, selectedItemTo.id];
 
                 return disrItem.stopsAffected.some((el) => lineCodes.indexOf(el.atcoCode) > -1);
@@ -151,6 +151,7 @@ const useFilterLogic = () => {
       }
     }
   }
+  console.log('filteredData3', filteredData);
 
   return filteredData;
 };

src/globalState/AutoCompleteContext.js

@@ -25,6 +25,7 @@ export const AutoCompleteProvider = (props) => {
       routeName: null,
       stopName: null,
       lines: [],
+      naPTAN: null,
       to: null,
     },
     selectedItemTo: {
@@ -35,6 +36,7 @@ export const AutoCompleteProvider = (props) => {
       stopName: null,
       routeName: null,
       lines: [],
+      naPTAN: null,
       to: null,
     },
     // The selected location is used to store selected roads address
@@ -43,6 +45,7 @@ export const AutoCompleteProvider = (props) => {
       radius: parseInt(getSearchParam('radius'), 10) || null,
       lat: getSearchParam('lat') || null,
       lon: getSearchParam('lon') || null,
+      naPTAN: getSearchParam('naPTAN') || '',
     },
   };
 
@@ -68,6 +71,7 @@ export const AutoCompleteProvider = (props) => {
           delSearchParam('selectedByMap'); // Delete URL
         }
 
+        console.log('action.payload12', action.payload);
         const item = action.payload.to ? 'selectedItemTo' : 'selectedItem'; // If 'to' exists in payload then make sure we set the correct field
         setSearchParam(item, action.payload.id); // Set URL
 
@@ -132,6 +136,7 @@ export const AutoCompleteProvider = (props) => {
         setSearchParam('lat', action.payload.lat);
         setSearchParam('lon', action.payload.lon);
         setSearchParam('radius', action.payload.radius);
+        setSearchParam('naPTAN', action.payload.naPTAN);
 
         return {
           ...state,