Moving to using useSWR for the ServicesAPI

src/components/ServicesMap.tsx

@@ -14,7 +14,7 @@ import {
 } from "react-leaflet";
 
 interface ServiceMapProps {
-  services: ServiceContainer;
+  services?: ServiceContainer;
   city: string;
 }
 
@@ -124,7 +124,7 @@ const ServicesMap: React.FC<ServiceMapProps> = ({
       />
       <ZoomControl position="topright" />
       <ChangeMapView coords={centerLatLong!} />
-      {services.allServices.map((service: Service, index) =>
+      {services?.allServices.map((service: Service, index) =>
         getMapMarker(service, index)
       )}
     </MapContainer>

src/components/Timetable.tsx

@@ -5,7 +5,7 @@ import convertSecondsToMinutes from "@/helpers/convertors";
 import { useTable, useSortBy, usePagination } from "react-table";
 
 interface TimetableProps {
-  serviceDataToDisplay: Service[];
+  serviceDataToDisplay?: Service[];
 }
 
 interface DisplayServiceData {
@@ -17,15 +17,17 @@ interface DisplayServiceData {
 export const Timetable: React.FC<TimetableProps> = ({
   serviceDataToDisplay,
 }) => {
-  const data: DisplayServiceData[] = React.useMemo(
-    () =>
-      serviceDataToDisplay.map((service) => ({
+  const data: DisplayServiceData[] = React.useMemo(() => {
+    if (serviceDataToDisplay) {
+      return serviceDataToDisplay.map((service) => ({
         delay: convertSecondsToMinutes(service.delay, true),
         routeLongName: service.routeLongName,
         routeShortName: service.routeShortName,
-      })),
-    [serviceDataToDisplay]
-  );
+      }));
+    } else {
+      return [];
+    }
+  }, [serviceDataToDisplay]);
 
   const columns = React.useMemo(
     () => [

src/components/Toast.tsx

@@ -1,16 +1,16 @@
-import { Action } from "@/hooks/useServiceApi";
-import React from "react";
+import React, { useRef } from "react";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
 interface ToastProps {
   error?: boolean;
-  dispatch: React.Dispatch<Action>;
 }
 
-export const Toast: React.FC<ToastProps> = ({ error, dispatch }) => {
-  if (error) {
-    toast.info(
+export const Toast: React.FC<ToastProps> = ({ error }) => {
+  const shownToast = useRef(false);
+
+  if (error && !shownToast.current) {
+    toast.error(
       "There's an error with either my API or Metlink's, please try again later",
       {
         position: "top-center",
@@ -22,7 +22,7 @@ export const Toast: React.FC<ToastProps> = ({ error, dispatch }) => {
         progress: undefined,
       }
     );
-    dispatch({ type: "REJECTED", error: false });
+    shownToast.current = true;
   }
 
   return <ToastContainer limit={1} style={{ fontSize: "1.8rem" }} />;

src/helpers/sorters.ts

@@ -0,0 +1,59 @@
+import { ServiceContainer, Service } from "@/types/ServiceTypes";
+
+export const sortServicesByRoute = (
+  service: ServiceContainer
+): ServiceContainer => {
+  const sort = (serviceArray: Service[]) => {
+    serviceArray.sort((a, b) => {
+      if (!a.routeShortName || !b.routeShortName) {
+        return Number.MAX_VALUE;
+      }
+      return a.routeShortName.localeCompare(b.routeShortName, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      });
+    });
+  };
+  sort(service.allServices);
+  sort(service.cancelledServices);
+  sort(service.earlyServices);
+  sort(service.lateServices);
+  sort(service.onTimeServices);
+  sort(service.unknownServices);
+
+  return service;
+};
+
+export const sortServicesResponseByStatus = (data: Service[]) => {
+  const serviceHolder: ServiceContainer = {
+    cancelledServices: [],
+    earlyServices: [],
+    onTimeServices: [],
+    unknownServices: [],
+    allServices: [],
+    lateServices: [],
+  };
+
+  for (let i = 0; i < data.length; i += 1) {
+    const service = data[i];
+    service.vehicleId = service.vehicle_id;
+    if (service.status === "EARLY") {
+      serviceHolder.earlyServices.push(service);
+    } else if (service.status === "LATE") {
+      serviceHolder.lateServices.push(service);
+    } else if (service.status === "ONTIME") {
+      serviceHolder.onTimeServices.push(service);
+    } else if (service.status === "UNKNOWN") {
+      serviceHolder.unknownServices.push(service);
+    } else if (service.status === "CANCELLED") {
+      serviceHolder.cancelledServices.push(service);
+    }
+
+    if (service.status !== "CANCELLED") {
+      serviceHolder.allServices.push(service);
+    }
+  }
+
+  const sortedServices = sortServicesByRoute(serviceHolder);
+  return sortedServices;
+};