Fix ESLint configuration, fix errors, add as GitHub action

.github/workflows/eslint.yml

@@ -0,0 +1,29 @@
+name: Lint Typescript
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      # Run build first to ensure all files exist
+      - name: Build frontend
+        run: npm ci && npm run build
+
+      # Run ESLint + TypeScript checks
+      - name: Run lint
+        run: npm run lint

client/src/App.tsx

@@ -10,8 +10,7 @@ import About from './pages/About';
 import Data from './pages/Data';
 import MapKitMap from './components/MapKitMap';
 import rawRouteData from './data/routes.json';
-import { useState, useEffect, use } from "react";
-import WarningBanner from './components/WarningBanner';
+import { useState, useEffect } from "react";
 import type { ShuttleRouteData } from './ts/types/route';
 import Navigation from './components/Navigation';
 import config from "./ts/config";

client/src/components/MapKitMap.tsx

@@ -1,13 +1,11 @@
-import { useEffect, useRef, useState } from "react";
+import { useMemo, useEffect, useRef, useState } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import '../styles/MapKitMap.css';
 import ShuttleIcon from "./ShuttleIcon";
 
 import type { ShuttleRouteData, ShuttleStopData } from "../ts/types/route";
 import '../styles/MapKitMap.css';
 import type { VehicleInformationMap } from "../ts/types/vehicleLocation";
-import type { Route } from "../ts/types/schedule";
-import { log } from "../ts/logger";
 
 async function generateRoutePolylines(updatedRouteData: ShuttleRouteData) {
   // Use MapKit Directions API to generate polylines for each route segment
@@ -108,14 +106,13 @@ type MapKitMapProps = {
 export default function MapKitMap({ routeData, vehicles, generateRoutes = false, selectedRoute, setSelectedRoute, isFullscreen = false }: MapKitMapProps) {
   const mapRef = useRef(null);
   const [mapLoaded, setMapLoaded] = useState(false);
-  const token = import.meta.env.VITE_MAPKIT_KEY;
+  const token = useMemo(() => { return (import.meta.env.VITE_MAPKIT_KEY || '') as string; }, []);
   const [map, setMap] = useState<(mapkit.Map | null)>(null);
   const vehicleOverlays = useRef<Record<string, mapkit.ShuttleAnnotation>>({});
-  
+
 
   const circleWidth = 15;
   const selectedMarkerRef = useRef<mapkit.MarkerAnnotation | null>(null);
-  const overlays: mapkit.Overlay[] = [];
 
   // source: https://developer.apple.com/documentation/mapkitjs/loading-the-latest-version-of-mapkit-js
   const setupMapKitJs = async () => {
@@ -138,7 +135,7 @@ export default function MapKitMap({ routeData, vehicles, generateRoutes = false,
       setMapLoaded(true);
     };
     mapkitScript();
-  }, []);
+  }, [token]);
 
   // create the map
   useEffect(() => {
@@ -298,13 +295,14 @@ export default function MapKitMap({ routeData, vehicles, generateRoutes = false,
         map._hoverCleanup();
       }
     };
-  }, [mapLoaded]);
+  }, [map, mapLoaded, setSelectedRoute]);
 
   // add fixed details to the map
   // includes routes and stops
   useEffect(() => {
     if (!map || !routeData) return;
 
+    const overlays: mapkit.Overlay[] = [];
 
     // display stop overlays
     for (const [route, thisRouteData] of Object.entries(routeData)) {
@@ -337,7 +335,7 @@ export default function MapKitMap({ routeData, vehicles, generateRoutes = false,
 
     function displayRouteOverlays(routeData: ShuttleRouteData) {
       // display route overlays
-      for (const [_route, thisRouteData] of Object.entries(routeData)) {
+      for (const [_, thisRouteData] of Object.entries(routeData)) {
         // for route (WEST, NORTH)
         const routePolylines = thisRouteData.ROUTES?.map(
           // for segment (STOP1 -> STOP2, STOP2 -> STOP3, ...)
@@ -360,7 +358,7 @@ export default function MapKitMap({ routeData, vehicles, generateRoutes = false,
 
     if (generateRoutes) {
       // generate polylines for routes
-      const routeDataCopy = JSON.parse(JSON.stringify(routeData)); // deep copy to avoid mutating original
+      const routeDataCopy = JSON.parse(JSON.stringify(routeData)) as ShuttleRouteData;
       generateRoutePolylines(routeDataCopy).then((updatedRouteData) => {
         displayRouteOverlays(updatedRouteData);
         map.addOverlays(overlays);
@@ -371,7 +369,7 @@ export default function MapKitMap({ routeData, vehicles, generateRoutes = false,
       map.addOverlays(overlays);
     }
 
-  }, [map, routeData]);
+  }, [map, routeData, generateRoutes]);
 
   // display vehicles on map
   useEffect(() => {
@@ -391,7 +389,7 @@ export default function MapKitMap({ routeData, vehicles, generateRoutes = false,
         const routeKey = vehicle.route_name as keyof typeof routeData;
         const info = routeData[routeKey] as { COLOR?: string };
         return info.COLOR ?? "#444444";
-        
+
       })();
 
       // Render ShuttleIcon JSX to a static SVG string
@@ -405,7 +403,7 @@ export default function MapKitMap({ routeData, vehicles, generateRoutes = false,
         existingAnnotation.subtitle = `${vehicle.speed_mph.toFixed(1)} mph`;
 
         // Handle route status updates
-        // If shuttle does not have a route null 
+        // If shuttle does not have a route null
         if (vehicle.route_name === null) {
           // shuttle off-route (exiting)
           if (existingAnnotation.lockedRoute) {

client/src/components/Navigation.tsx

@@ -60,7 +60,7 @@ export default function Navigation({ GIT_REV }: { GIT_REV: string }) {
         <div className='big'>
           <div className='big-footer'>
             <div className='git-copy'>
-              <a href='https://github.com/wtg/shubble' target='_blank'>
+              <a href='https://github.com/wtg/shubble' target='_blank' rel="noreferrer">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#000000" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" /></svg>
               </a>
               <p>&copy; 2025 SHUBBLE, an RCOS Project</p>

client/src/components/Schedule.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import '../styles/Schedule.css';
 import rawRouteData from '../data/routes.json';
 import rawAggregatedSchedule from '../data/aggregated_schedule.json';
@@ -20,18 +20,20 @@ export default function Schedule({ selectedRoute, setSelectedRoute }: SchedulePr
     throw new Error('setSelectedRoute must be a function');
   }
 
-  const now = new Date();
+  const now = useMemo(() => new Date(), []);
   const [selectedDay, setSelectedDay] = useState(now.getDay());
   const [routeNames, setRouteNames] = useState(Object.keys(aggregatedSchedule[selectedDay]));
-  const [stopNames, setStopNames] = useState<string[]>([]);
   const [schedule, setSchedule] = useState<AggregatedDaySchedule>(aggregatedSchedule[selectedDay]);
 
   // Define safe values to avoid repeated null checks
   const safeSelectedRoute = selectedRoute || routeNames[0];
 
-  // Update schedule and routeNames when selectedDay changes
   useEffect(() => {
     setSchedule(aggregatedSchedule[selectedDay]);
+  }, [selectedDay]);
+
+  // Update schedule and routeNames when selectedDay changes
+  useEffect(() => {
     setRouteNames(Object.keys(aggregatedSchedule[selectedDay]));
     // If parent hasn't provided a selectedRoute yet, pick the first available one
     const firstRoute = Object.keys(aggregatedSchedule[selectedDay])[0];
@@ -40,12 +42,6 @@ export default function Schedule({ selectedRoute, setSelectedRoute }: SchedulePr
     }
   }, [selectedDay, selectedRoute, setSelectedRoute]);
 
-  // Update stopNames when selectedRoute changes
-  useEffect(() => {
-    if (!safeSelectedRoute || !(safeSelectedRoute in routeData)) return;
-    setStopNames(routeData[safeSelectedRoute as keyof typeof routeData].STOPS);
-  }, [selectedRoute]);
-
   // Handle day change from dropdown
   const handleDayChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     setSelectedDay(parseInt(e.target.value));
@@ -54,7 +50,7 @@ export default function Schedule({ selectedRoute, setSelectedRoute }: SchedulePr
   const timeToDate = (timeStr: string): Date => {
     const [time, modifier] = timeStr.trim().split(" ");
 
-    // eslint-disable-next-line prefer-const
+
     let [hours, minutes] = time.split(":").map(Number);
     if (modifier.toUpperCase() === "PM" && hours !== 12) {
       hours += 12;
@@ -94,7 +90,7 @@ export default function Schedule({ selectedRoute, setSelectedRoute }: SchedulePr
     if (currentTimeRow) {
       currentTimeRow.scrollIntoView({ behavior: "auto" });
     }
-  }, [selectedRoute, selectedDay, schedule]);
+  }, [selectedRoute, selectedDay, schedule, now]);
 
 
   const daysOfTheWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

client/src/pages/About.tsx

@@ -19,7 +19,7 @@ export default function About() {
         return (prevIndex + 1) % words.length;
       });
     }, 2000);
-  }, []);
+  }, [words.length]);
 
   return (
     <div className='about'>
@@ -32,10 +32,10 @@ export default function About() {
         Shubble is an open source project under the Rensselaer Center for Open Source (RCOS).
       </p>
       <p>
-        Have an idea to improve it? Contributions are welcome. Visit our <a href='https://github.com/wtg/shubble' target='_blank'>Github Repository</a> to learn more.
+        Have an idea to improve it? Contributions are welcome. Visit our <a href='https://github.com/wtg/shubble' target='_blank' rel="noreferrer">Github Repository</a> to learn more.
       </p>
       <p>
-        Interested in Shubble's data? Take a look at our
+        Interested in Shubble &apos s data? Take a look at our
         <Link to='/data'>
           <span className = 'link1'>data page</span>
         </Link>.

client/src/pages/Data.tsx

@@ -18,7 +18,7 @@ export default function Data() {
       if (!response.ok) {
         throw new Error('Network response was not ok');
       }
-      const data = await response.json();
+      const data = await response.json() as VehicleInformationMap;
       setShuttleData(data);
     } catch (error) {
       console.error('Error fetching shuttleData:', error);
@@ -35,7 +35,7 @@ export default function Data() {
         setSelectedShuttleID(Object.keys(shuttleData)[0]);
       }
     }
-  }, [shuttleData]);
+  }, [shuttleData, selectedShuttleID]);
 
   return (
     <>

client/src/pages/LiveLocation.tsx

@@ -10,6 +10,8 @@ import routeData from '../data/routes.json';
 import type { VehicleInformationMap } from '../ts/types/vehicleLocation';
 import type { ShuttleRouteData } from '../ts/types/route';
 import aggregatedSchedule from '../data/aggregated_schedule.json';
+import type { AggregatedScheduleType } from '../ts/types/schedule';
+const typedAggregatedSchedule = aggregatedSchedule as AggregatedScheduleType;
 
 export default function LiveLocation() {
 
@@ -21,10 +23,10 @@ export default function LiveLocation() {
 
   // Filter routeData to only include routes present in aggregatedSchedule
   useEffect(() => {
-    // TODO: figure out how to make this type correct...
+    // TODO: figure out how to clean up this type...
     setFilteredRouteData(
       Object.fromEntries(
-        Object.entries(routeData).filter(([routeName]) => aggregatedSchedule.some(daySchedule => routeName in daySchedule))
+        Object.entries(routeData).filter(([routeName]) => typedAggregatedSchedule.some(daySchedule => routeName in daySchedule))
       ) as unknown as ShuttleRouteData
     );
   }, []);
@@ -37,7 +39,7 @@ export default function LiveLocation() {
         if (!response.ok) {
           throw new Error('Network response was not ok');
         }
-        const data = await response.json();
+        const data = await response.json() as VehicleInformationMap;
         setLocation(data);
       } catch (error) {
         console.error('Error fetching location:', error);

client/src/ts/types/mapkit.d.ts

@@ -102,8 +102,9 @@ declare namespace mapkit {
     // -------------------
     interface ShuttleAnnotation extends ImageAnnotation {
       lockedRoute?: string | null;
+      url: Record<number, string>;
     }
-  
+
     // -------------------
     // Directions
     // -------------------
@@ -121,7 +122,10 @@ declare namespace mapkit {
     }
 
     class Directions {
-      route(options: DirectionsOptions, callback: (error: any, data: DirectionsRouteData) => void): void;
+      route(
+        options: DirectionsOptions,
+        callback: (error: Error | null, data: DirectionsRouteData) => void
+      ): void;
     }
 
     // -------------------
@@ -144,7 +148,7 @@ declare namespace mapkit {
       overlay?: Overlay;
     }
 
-    type MapEventHandler = (event: MapSelectEvent | MapDeselectEvent | any) => void;
+    type MapEventHandler = (event: MapSelectEvent | MapDeselectEvent) => void;
 
     type MapEventName =
       | "select"

client/src/ts/types/route.ts

@@ -19,4 +19,4 @@ type RouteDirectionData = {
 }
 
 // route.json data type
-export type ShuttleRouteData = Record<Route, RouteDirectionData>
+export type ShuttleRouteData = Record<Route, RouteDirectionData>

eslint.config.js

@@ -1,26 +1,52 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
+// eslint.config.js
+import tsParser from "@typescript-eslint/parser";
+import tsPlugin from "@typescript-eslint/eslint-plugin";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import jsxA11yPlugin from "eslint-plugin-jsx-a11y";
 
-export default defineConfig([
-  globalIgnores(['dist']),
+export default [
   {
-    files: ['client/**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
+    // Ignore build and dependency folders
+    ignores: ["**/node_modules", "**/dist", "**/.vite"]
+  },
+  {
+    files: ["client/src/**/*.{ts,tsx}"],
     languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
+      parser: tsParser,
+      parserOptions: {
+        project: "./tsconfig.app.json",
+        ecmaFeatures: { jsx: true }
+      }
+    },
+    plugins: {
+      "@typescript-eslint": tsPlugin,
+      "react": reactPlugin,
+      "react-hooks": reactHooksPlugin,
+      "jsx-a11y": jsxA11yPlugin
     },
     rules: {
-      '@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: '^_' }],
+      ...tsPlugin.configs.recommended.rules,
+      ...reactPlugin.configs.recommended.rules,
+      ...reactHooksPlugin.configs.recommended.rules,
+      ...jsxA11yPlugin.configs.recommended.rules,
+      "react/react-in-jsx-scope": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_"
+        }
+      ],
+      "@typescript-eslint/no-unsafe-member-access": "error",
+      "@typescript-eslint/no-unsafe-assignment": "warn",
+      "@typescript-eslint/no-unsafe-call": "warn",
     },
-  },
-])
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  }
+];