Nearby beta (#148)

* cleaned up FetchSubwayStop (#146) * package-update (#147) * [Feature] Nearby bus stops (#143) --------- Co-authored-by: Isaac McAuley <[email protected]>
thomassth · Sep 14, 2024 · 965ee9f · 965ee9f
1 parent d41bc79
commit 965ee9f
Show file tree

Hide file tree

Showing 26 changed files with 2,832 additions and 2,151 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,24 +5,21 @@
   "homepage": "https://thomassth.github.io/ttc-eta/",
   "type": "module",
   "dependencies": {
-    "@fluentui/react-components": "^9.54.2",
-    "@fluentui/react-icons": "^2.0.245",
-    "@reduxjs/toolkit": "^2.2.5",
-    "@types/node": "^20.14.5",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "i18next": "^23.11.5",
+    "@fluentui/react-components": "^9.54.15",
+    "@fluentui/react-icons": "^2.0.258",
+    "@reduxjs/toolkit": "^2.2.7",
+    "i18next": "^23.15.1",
     "i18next-browser-languagedetector": "^8.0.0",
     "idb": "^8.0.0",
-    "ol": "^9.1.0",
+    "ol": "^10.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-i18next": "^14.1.2",
+    "react-i18next": "^15.0.1",
     "react-redux": "^9.1.2",
-    "react-router-dom": "^6.23.1",
-    "rlayers": "^2.3.2",
-    "typescript": "^5.4.5",
-    "web-vitals": "^4.1.1"
+    "react-router-dom": "^6.26.2",
+    "rlayers": "^3.1.0",
+    "typescript": "^5.6.2",
+    "web-vitals": "^4.2.3"
   },
   "scripts": {
     "start": "vite",
@@ -55,34 +52,37 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/node": "^22.5.4",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
     "@types/react-test-renderer": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
+    "@typescript-eslint/eslint-plugin": "^8.5.0",
+    "@typescript-eslint/parser": "^8.5.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/ui": "^1.2.1",
-    "autoprefixer": "^10.4.19",
+    "@vitest/ui": "^2.1.0",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-promise": "^6.2.0",
-    "eslint-plugin-react": "^7.34.3",
-    "jsdom": "^24.1.0",
-    "postcss": "^8.4.38",
-    "postcss-nesting": "^12.1.5",
-    "prettier": "^3.3.2",
+    "eslint-plugin-promise": "^6.6.0",
+    "eslint-plugin-react": "^7.36.1",
+    "jsdom": "^25.0.0",
+    "postcss": "^8.4.45",
+    "postcss-nesting": "^13.0.0",
+    "prettier": "^3.3.3",
     "react-test-renderer": "^18.3.1",
-    "stylelint": "^16.6.1",
+    "stylelint": "^16.9.0",
     "stylelint-config-css-modules": "^4.4.0",
-    "stylelint-config-standard": "^36.0.0",
+    "stylelint-config-standard": "^36.0.1",
     "ts-node": "^10.9.2",
-    "vite": "^5.3.1",
-    "vite-plugin-pwa": "^0.20.0",
-    "vitest": "^1.2.1"
+    "vite": "^5.4.4",
+    "vite-plugin-pwa": "^0.20.5",
+    "vitest": "^2.1.0"
   }
 }
diff --git a/src/components/accordions/StopAccordions.tsx b/src/components/accordions/StopAccordions.tsx
@@ -118,7 +118,9 @@ export function ETAButton(props: {
   return (
     <Link
       to={link}
-      title={props.name ? props.name : t("buttons.busIcon") ?? "View stop ETA"}
+      title={
+        props.name ? props.name : (t("buttons.busIcon") ?? "View stop ETA")
+      }
     >
       <Button
         icon={props.name ? undefined : <VehicleBus16Filled />}

diff --git a/src/components/bookmarks/BookmarkButton.tsx b/src/components/bookmarks/BookmarkButton.tsx
@@ -3,8 +3,8 @@ import {
   BookmarkAdd24Regular,
   BookmarkOff24Filled,
 } from "@fluentui/react-icons";
-import { t } from "i18next";
 import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
 
 import { StopBookmark, stopBookmarksRedux } from "../../models/etaObjects.js";
 import {
@@ -14,6 +14,7 @@ import {
 import { useAppDispatch, useAppSelector } from "../../store/index.js";
 
 export function BookmarkButton(props: StopBookmark) {
+  const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const stopBookmarks: stopBookmarksRedux = useAppSelector(
     (state) => state.stopBookmarks
@@ -34,8 +35,8 @@ export function BookmarkButton(props: StopBookmark) {
     <Button
       title={
         isBookmarked()
-          ? t("buttons.bookmarkDelete") ?? "Remove bookmark"
-          : t("buttons.bookmarkAdd") ?? "Add to bookmark"
+          ? (t("buttons.bookmarkDelete") ?? "Remove bookmark")
+          : (t("buttons.bookmarkAdd") ?? "Add to bookmark")
       }
       icon={isBookmarked() ? <BookmarkOff24Filled /> : <BookmarkAdd24Regular />}
       onClick={checkBookmarkStatus}

diff --git a/src/components/bookmarks/BookmarkCard.tsx b/src/components/bookmarks/BookmarkCard.tsx
@@ -21,8 +21,8 @@ export function BookmarkCard(props: { id: number }) {
 
   const name =
     item.type === "ttc-subway" && id
-      ? subwayDbSelectors.selectById(store.getState().subwayDb, id)?.stop
-          ?.name ?? item.name
+      ? (subwayDbSelectors.selectById(store.getState().subwayDb, id)?.stop
+          ?.name ?? item.name)
       : item.name;
   return (
     <EtaCard

diff --git a/src/components/display/VehicleLocation.tsx b/src/components/display/VehicleLocation.tsx
@@ -8,6 +8,7 @@ import { RView } from "rlayers/RMap";
 
 import arrow from "../../../public/arrow.svg";
 import { parsedVehicleLocation } from "../../models/ttc.js";
+import RawDisplay from "../rawDisplay/RawDisplay.js";
 import styles from "./VehicleLoaction.module.css";
 
 export default function VehicleLocation(props: {
@@ -82,6 +83,7 @@ export default function VehicleLocation(props: {
         <Text>Speed: {data.vehicle?.speedKmHr}km/h</Text>
         <Text>Heading: {data.vehicle?.heading}</Text>
       </div>
+      <RawDisplay data={data} />
     </div>
   );
 }
diff --git a/src/components/eta/BookmarkCardEta.tsx b/src/components/eta/BookmarkCardEta.tsx
@@ -25,10 +25,10 @@ export function BookmarkCardEta(props: { item: LineStopEta }) {
 
   const name =
     item.type === "ttc-subway" && props.item.stopTag
-      ? subwayDbSelectors.selectById(
+      ? (subwayDbSelectors.selectById(
           store.getState().subwayDb,
           props.item.stopTag
-        )?.stop?.name ?? props.item.routeName
+        )?.stop?.name ?? props.item.routeName)
       : Array.isArray(props.item.line)
         ? props.item.stopName
         : `${props.item.routeName}

diff --git a/src/components/eta/FavouriteEta.module.css b/src/components/eta/FavouriteEta.module.css
@@ -2,19 +2,16 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-}
-
-ul {
-  padding-left: 0;
-  list-style-type: none;
-  margin: 0.5em 0;
-}
 
-.favorite-eta ul {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, 1fr);
-  gap: 24px;
-  margin: 20px 0;
+  ul {
+    display: grid;
+    padding-left: 0;
+    margin: 0.5em 0;
+    list-style-type: none;
+    grid-template-columns: repeat(auto-fit, 1fr);
+    gap: 24px;
+    margin: 20px 0;
+  }
 }
 
 @media (width <= 800px) {

diff --git a/src/components/eta/FavouriteEta.tsx b/src/components/eta/FavouriteEta.tsx
@@ -111,8 +111,8 @@ export default function FavouriteEta() {
 
         const name =
           item.type === "ttc-subway" && id
-            ? subwayDbSelectors.selectById(store.getState().subwayDb, id)?.stop
-                ?.name ?? item.name
+            ? (subwayDbSelectors.selectById(store.getState().subwayDb, id)?.stop
+                ?.name ?? item.name)
             : item.name;
 
         EtaCards.push(

diff --git a/src/components/etaCard/EtaCard.tsx b/src/components/etaCard/EtaCard.tsx
@@ -10,8 +10,8 @@ import {
   DialogTrigger,
 } from "@fluentui/react-components";
 import { Dismiss12Filled, Edit12Filled } from "@fluentui/react-icons";
-import { t } from "i18next";
 import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 import { EtaBusWithID } from "../../models/etaObjects.js";
@@ -115,6 +115,8 @@ function FavouriteEditor(props: {
   enabled?: string[];
   onDelete?: () => void;
 }) {
+  const { t } = useTranslation();
+
   const dispatch = useAppDispatch();
 
   const onChangeFunction = useCallback(

diff --git a/src/components/fetch/FetchSubwayStop.tsx b/src/components/fetch/FetchSubwayStop.tsx
@@ -32,89 +32,72 @@ function SubwayStopPredictionInfo(props: {
     fetchPredictions();
   }, []);
 
-  function RefreshButton() {
-    return (
-      <Button onClick={fetchPredictionClick} icon={<ArrowClockwise24Regular />}>
-        {t("buttons.refresh")}
-      </Button>
-    );
-  }
-
   const stationName = subwayDbSelectors.selectById(
     store.getState().subwayDb,
     props.stopNum
   );
 
-  if (data) {
-    if (data.Error) {
-      return <LargeTitle>{t("reminder.failToLocate")}</LargeTitle>;
-    } else {
-      if (data.nextTrains.length > 0) {
-        const nextTrains = data.nextTrains.split(",");
-
-        const listGroup = nextTrains.map((minute, index) => {
-          return (
-            <div key={`${index}-${minute}`}>
-              <CountdownSec second={Number.parseInt(minute) * 60} />
-            </div>
-          );
-        });
-        return (
-          <div className="directionsList list">
-            {stationName && (
-              <>
-                <Title1>{stationName.stop.name.split(" - ")[0]}</Title1>
-                <br />
-              </>
-            )}
-            <Title1>{data.directionText}</Title1>
-            <div className="countdown-row">
-              <RefreshButton />
-              <BookmarkButton
-                stopId={props.stopNum}
-                name={data.directionText}
-                ttcId={props.stopNum}
-                lines={[props.line.toString()]}
-                type="ttc-subway"
-              />
-            </div>
-            {listGroup}
-            <RawDisplay data={data} />
-          </div>
-        );
-      } else {
-        return (
-          <div className="directionsList list">
-            {stationName && (
-              <>
-                <Title1>{stationName.stop.name.split(" - ")[0]}</Title1>
-                <br />
-              </>
-            )}
-            <Title1>{data.directionText}</Title1>
-            <div className="countdown-row">
-              <RefreshButton />
-              <BookmarkButton
-                stopId={props.stopNum}
-                name={data.directionText}
-                ttcId={props.stopNum}
-                lines={[props.line.toString()]}
-                type="ttc-subway"
-              />
-            </div>
-            <Text> {t("reminder.noEta")}</Text>
-            <RawDisplay data={data} />
-          </div>
-        );
-      }
+  const trainETAs = (nextTrainsData: string) => {
+    if (nextTrainsData.length <= 0) {
+      return <Text> {t("reminder.noEta")}</Text>;
     }
-  } else {
+
+    const nextTrains = nextTrainsData.split(",");
+
+    return nextTrains.map((minute: string, index: number) => {
+      return (
+        <div key={`${index}-${minute}`}>
+          <CountdownSec second={Number.parseInt(minute) * 60} />
+        </div>
+      );
+    });
+  };
+
+  if (!data) {
     return (
       <div className="directionsList list">
         <LargeTitle>{t("reminder.loading")}</LargeTitle>
-        <RefreshButton />
+        <RefreshButton onRefresh={fetchPredictionClick} />
       </div>
     );
   }
+
+  if (data.Error) {
+    return <LargeTitle>{t("reminder.failToLocate")}</LargeTitle>;
+  }
+
+  return (
+    <div className="directionsList list">
+      {stationName && (
+        <>
+          <Title1>{stationName.stop.name.split(" - ")[0]}</Title1>
+          <br />
+        </>
+      )}
+      <Title1>{data.directionText}</Title1>
+      <div className="countdown-row">
+        <RefreshButton onRefresh={fetchPredictionClick} />
+        <BookmarkButton
+          stopId={props.stopNum}
+          name={data.directionText}
+          ttcId={props.stopNum}
+          lines={[props.line.toString()]}
+          type="ttc-subway"
+        />
+      </div>
+      {trainETAs(data.nextTrains)}
+      <RawDisplay data={data} />
+    </div>
+  );
+}
+
+function RefreshButton(props: { onRefresh: () => void }) {
+  const { t } = useTranslation();
+
+  return (
+    <Button onClick={props.onRefresh} icon={<ArrowClockwise24Regular />}>
+      {t("buttons.refresh")}
+    </Button>
+  );
 }
 export default SubwayStopPredictionInfo;