Release 2024-05-25 (#102)

* always show location tracking page for 1st upcoming bus (#96)
thomassth · May 26, 2024 · 33ba409 · 33ba409
1 parent af390b0
commit 33ba409
Show file tree

Hide file tree

Showing 12 changed files with 47 additions and 71 deletions.
diff --git a/src/components/countdown/CountdownGroup.tsx b/src/components/countdown/CountdownGroup.tsx
@@ -1,13 +1,13 @@
 import { Link as LinkFluent, Text, Title2 } from "@fluentui/react-components";
 import { Link } from "react-router-dom";
 
-import { LineStopEta } from "../../models/etaObjects";
+import { LineStopEta } from "../../models/etaObjects.js";
 import style from "./CountdownGroup.module.css";
-import { CountdownRow } from "./CountdownRow";
+import { CountdownRow } from "./CountdownRow.js";
 
 export default function CountdownGroup(props: { detail: LineStopEta }) {
-  const countdownRowList = props.detail.etas.map((item) => (
-    <CountdownRow item={item} key={item.tripTag} />
+  const countdownRowList = props.detail.etas.map((item, index) => (
+    <CountdownRow item={item} key={item.tripTag} index={index} />
   ));
 
   if (props.detail.etas.length === 0) {

diff --git a/src/components/countdown/CountdownRow.tsx b/src/components/countdown/CountdownRow.tsx
@@ -1,15 +1,15 @@
 import { Link } from "react-router-dom";
 
-import { EtaBusWithID } from "../../models/etaObjects";
-import { TtcBadge } from "../badges";
+import { EtaBusWithID } from "../../models/etaObjects.js";
+import { TtcBadge } from "../badges.js";
 import style from "./CountdownRow.module.css";
-import { CountdownSec } from "./CountdownSec";
+import { CountdownSec } from "./CountdownSec.js";
 
 function CountdownBranch(props: { branch: string }) {
   return <TtcBadge key={props.branch} lineNum={props.branch} />;
 }
 
-export function CountdownRow(props: { item: EtaBusWithID }) {
+export function CountdownRow(props: { item: EtaBusWithID; index: number }) {
   return (
     <div className={style["countdown-row"]}>
       <Link to={`/lines/${props.item.branch}`}>
@@ -19,6 +19,7 @@ export function CountdownRow(props: { item: EtaBusWithID }) {
         second={props.item.seconds}
         epochTime={props.item.epochTime}
         vehicle={props.item.vehicle}
+        index={props.index}
       />
     </div>
   );

diff --git a/src/components/countdown/CountdownSec.module.css b/src/components/countdown/CountdownSec.module.css
@@ -9,3 +9,9 @@
   align-self: center;
   min-width: 3.5rem;
 }
+
+.number {
+  margin: 0;
+  font-family: "PT Mono", monospace !important;
+  white-space: nowrap !important;
+}
diff --git a/src/components/countdown/CountdownSec.tsx b/src/components/countdown/CountdownSec.tsx
@@ -3,17 +3,16 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
-import { fluentStyles } from "../../styles/fluent";
 import style from "./CountdownSec.module.css";
 
 export function CountdownSec(props: {
   second: number;
   epochTime?: number;
   vehicle?: number;
+  index?: number;
 }) {
   const [epochTime, setEpochTime] = useState(props.epochTime);
   const [sec, setSec] = useState(props.second ?? 0);
-  const fluentStyle = fluentStyles();
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -36,29 +35,31 @@ export function CountdownSec(props: {
   }, [sec]);
   return (
     <div className={style["countdown-sec"]}>
-      {sec < 180 && <ArrivingBadge vehicle={props.vehicle} />}
+      {(sec < 180 || props.index === 0) && (
+        <ArrivingBadge vehicle={props.vehicle} />
+      )}
 
       {sec >= 60 * 60 && (
         <>
-          <Title2 className={fluentStyle.number}>
+          <Title2 className={style.number}>
             {`${Math.floor(sec / 3600)}h`}
           </Title2>
-          <Text className={fluentStyle.number}>
+          <Text className={style.number}>
             {`${Math.floor((sec % 3600) / 60)}${t("eta.minuteShort")}`}
           </Text>
         </>
       )}
 
       {sec > 0 && sec < 60 * 60 && (
-        <Title2 className={fluentStyle.number}>
+        <Title2 className={style.number}>
           {Math.floor(sec / 60) >= 1
             ? `${Math.floor(sec / 60)}${t("eta.minuteShort")}`
             : `${sec % 60}${t("eta.secondShort")}`}
         </Title2>
       )}
 
       {sec % 60 !== 0 && Math.floor(sec / 60) >= 1 && (
-        <Text className={fluentStyle.number}>
+        <Text className={style.number}>
           {`${sec % 60}${t("eta.secondShort")}`}
         </Text>
       )}
@@ -73,9 +74,7 @@ function ArrivingBadge({ vehicle }: { vehicle?: number }) {
     <div className={style.arriving}>
       {vehicle ? (
         <Link to={`${vehicle}`}>
-          <Badge color="danger" shape="rounded">
-            {t("badge.arriving")}
-          </Badge>
+          <Badge shape="rounded">Track location</Badge>
         </Link>
       ) : (
         <Badge color="danger" shape="rounded">

diff --git a/src/components/eta/SMSButton.tsx b/src/components/eta/SMSButton.tsx
@@ -2,15 +2,10 @@ import { Button } from "@fluentui/react-components";
 import { Comment24Filled } from "@fluentui/react-icons";
 import { Link } from "react-router-dom";
 
-import { fluentStyles } from "../../styles/fluent";
-
 export default function SMSButton(props: { stopId: number }) {
-  const fluentStyle = fluentStyles();
   return (
     <Link to={`sms://+1898882;?&body=${props.stopId}`} title="SMS">
-      <Button className={fluentStyle.refreshButton} icon={<Comment24Filled />}>
-        use TTC SMS
-      </Button>
+      <Button icon={<Comment24Filled />}>check via SMS</Button>
     </Link>
   );
 }
diff --git a/src/components/fetch/FetchLineStop.tsx b/src/components/fetch/FetchLineStop.tsx
@@ -5,7 +5,6 @@ import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { EtaPredictionJson } from "../../models/etaJson.js";
-import { fluentStyles } from "../../styles/fluent.js";
 import { CountdownSec } from "../countdown/CountdownSec.js";
 import RawDisplay from "../rawDisplay/RawDisplay.js";
 import { getLineStopPredictions } from "./fetchUtils.js";
@@ -16,7 +15,6 @@ function LineStopPredictionInfo(props: {
 }): JSX.Element {
   const [data, setData] = useState<EtaPredictionJson>();
   const { t } = useTranslation();
-  const fluentStyle = fluentStyles();
 
   const fetchPredictions = async (
     line = props.line,
@@ -37,11 +35,7 @@ function LineStopPredictionInfo(props: {
 
   function RefreshButton() {
     return (
-      <Button
-        className={fluentStyle.refreshButton}
-        onClick={fetchPredictionClick}
-        icon={<ArrowClockwise24Regular />}
-      >
+      <Button onClick={fetchPredictionClick} icon={<ArrowClockwise24Regular />}>
         {t("buttons.refresh")}
       </Button>
     );

diff --git a/src/components/fetch/FetchStop.tsx b/src/components/fetch/FetchStop.tsx
@@ -7,7 +7,6 @@ import { EtaPredictionJson } from "../../models/etaJson.js";
 import { EtaBusWithID, LineStopEta } from "../../models/etaObjects.js";
 import { store } from "../../store/index.js";
 import { settingsSelectors } from "../../store/settings/slice.js";
-import { fluentStyles } from "../../styles/fluent.js";
 import { BookmarkButton } from "../bookmarks/BookmarkButton.js";
 import CountdownGroup from "../countdown/CountdownGroup.js";
 import { CountdownRow } from "../countdown/CountdownRow.js";
@@ -22,7 +21,6 @@ function StopPredictionInfo(props: { stopId: number }): JSX.Element {
   const [etaDb, setEtaDb] = useState<LineStopEta[]>([]);
   const [lastUpdatedAt, setLastUpdatedAt] = useState<number>(Date.now());
   const { t } = useTranslation();
-  const fluentStyle = fluentStyles();
   const [unifiedEta, setUnifiedEta] = useState<EtaBusWithID[]>([]);
 
   const handleRefreshClick = useCallback(() => {
@@ -35,11 +33,7 @@ function StopPredictionInfo(props: { stopId: number }): JSX.Element {
 
   function RefreshButton() {
     return (
-      <Button
-        className={fluentStyle.refreshButton}
-        onClick={handleRefreshClick}
-        icon={<ArrowClockwise24Regular />}
-      >
+      <Button onClick={handleRefreshClick} icon={<ArrowClockwise24Regular />}>
         {t("buttons.refresh")}
       </Button>
     );
@@ -73,10 +67,10 @@ function StopPredictionInfo(props: { stopId: number }): JSX.Element {
     if (data.Error === undefined) {
       let listContent: JSX.Element[] = [];
       if (unifiedEtaValue) {
-        listContent = unifiedEta.map((element) => {
+        listContent = unifiedEta.map((element, index) => {
           return (
             <li key={element.tripTag}>
-              <CountdownRow item={element} />
+              <CountdownRow item={element} index={index} />
             </li>
           );
         });

diff --git a/src/components/fetch/FetchSubwayStop.tsx b/src/components/fetch/FetchSubwayStop.tsx
@@ -4,7 +4,6 @@ import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { SubwayStop } from "../../models/ttc.js";
-import { fluentStyles } from "../../styles/fluent.js";
 import { CountdownSec } from "../countdown/CountdownSec.js";
 import RawDisplay from "../rawDisplay/RawDisplay.js";
 import { getTTCSubwayPredictions } from "./fetchUtils.js";
@@ -15,7 +14,6 @@ function LineStopPredictionInfo(props: {
 }): JSX.Element {
   const [data, setData] = useState<SubwayStop>();
   const { t } = useTranslation();
-  const fluentStyle = fluentStyles();
 
   const fetchPredictions = (stopNum = props.stopNum) => {
     getTTCSubwayPredictions(stopNum, {}).then((dataJson) => {
@@ -33,11 +31,7 @@ function LineStopPredictionInfo(props: {
 
   function RefreshButton() {
     return (
-      <Button
-        className={fluentStyle.refreshButton}
-        onClick={fetchPredictionClick}
-        icon={<ArrowClockwise24Regular />}
-      >
+      <Button onClick={fetchPredictionClick} icon={<ArrowClockwise24Regular />}>
         {t("buttons.refresh")}
       </Button>
     );

diff --git a/src/routes/RelativeVehiclePosition.tsx b/src/routes/RelativeVehiclePosition.tsx
@@ -1,11 +1,10 @@
 import { Button, Title1 } from "@fluentui/react-components";
 import { ArrowClockwise24Regular } from "@fluentui/react-icons";
-import { Suspense, lazy, useEffect, useState } from "react";
+import { Suspense, lazy, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
 
 import { getVehicleLocation } from "../components/fetch/fetchUtils.js";
-import { fluentStyles } from "../styles/fluent.js";
 import styles from "./RelativeVehiclePosition.module.css";
 
 const VehicleLocation = lazy(
@@ -31,10 +30,16 @@ export default function RelativeVehiclePosition() {
     });
   };
 
+  const onRefreshClick = useCallback(() => {
+    updateData();
+  }, []);
+
   return (
     <main className={styles["relative-vehicle-position"]}>
       <Title1>Vehicle {vehicleId}</Title1>
-      <RefreshButton onClick={() => updateData()} />
+      <div className="buttons-row">
+        <RefreshButton onClick={onRefreshClick} />
+      </div>
       <Suspense>
         <VehicleLocation stopId={stopNum} vehicleId={vehicleId} data={data} />
       </Suspense>
@@ -43,19 +48,14 @@ export default function RelativeVehiclePosition() {
 }
 
 function RefreshButton({ onClick }: { onClick: () => void }) {
-  const fluentStyle = fluentStyles();
   const { t } = useTranslation();
 
-  const useOnClick = () => {
+  const useOnClick = useCallback(() => {
     onClick();
-  };
+  }, []);
 
   return (
-    <Button
-      className={fluentStyle.refreshButton}
-      onClick={useOnClick}
-      icon={<ArrowClockwise24Regular />}
-    >
+    <Button onClick={useOnClick} icon={<ArrowClockwise24Regular />}>
       {t("buttons.refresh")}
     </Button>
   );

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -1,8 +1,8 @@
 import { configureStore } from "@reduxjs/toolkit";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 
-import { stopBookmarksSlice } from "./bookmarks/slice";
-import { settingsSlice } from "./settings/slice";
+import { stopBookmarksSlice } from "./bookmarks/slice.js";
+import { settingsSlice } from "./settings/slice.js";
 
 export const store = configureStore({
   reducer: {

diff --git a/src/styles/fluent.ts b/src/styles/fluent.ts
@@ -23,13 +23,6 @@ export const fluentStyles = makeStyles({
       paddingLeft: "0px",
     },
   },
-  number: {
-    fontFamily: ["monospace", "PT Mono"],
-    whiteSpace: "nowrap",
-  },
-  refreshButton: {
-    width: "max-content",
-  },
   bottomNav: {
     backgroundColor: tokens.colorNeutralBackground1,
   },

diff --git a/tsconfig.json b/tsconfig.json
@@ -10,12 +10,12 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
   },
-  "include": ["src", "vite.config.ts", "@testing-library/jest-dom"]
+  "include": ["src", "vite.config.ts", "@testing-library/jest-dom"],
 }