Adding a bottom border to MTR and Light Rail

src/CollectionContext.tsx

@@ -2,6 +2,7 @@ import React, { useState, useCallback, useEffect } from "react";
 import {
   DEFAULT_DAY_SCHEDULE,
   DEFAULT_ROUTE_COLLECTION,
+  DaySchedule,
   RouteCollection,
 } from "./typing";
 import { isStrings } from "./utils";
@@ -24,10 +25,10 @@ interface CollectionContextValue extends CollectionState {
   addNewCollection: () => void;
   removeCollection: (idx: number) => void;
   toggleCollectionDialog: (idx: number | null) => void;
-  updateCollectionName: (v: any) => void;
+  updateCollectionName: (v: string) => void;
   addCollectionSchedule: () => void;
   removeCollectionSchedule: (idx: number) => void;
-  updateCollectionSchedule: (idx: number, field: string, value: any) => void;
+  updateCollectionSchedule: <T extends keyof DaySchedule>(idx: number, field: T, value: DaySchedule[T]) => void;
   toggleCollectionEta: (eta: string, idx: number | null) => void;
   setCollectionEtas: (etas: string[]) => void;
   setCollections: (collections: RouteCollection[]) => void;
@@ -164,7 +165,7 @@ export const CollectionContextProvider = ({ children }) => {
     );
   }, []);
 
-  const updateCollectionName = useCallback((v: any) => {
+  const updateCollectionName = useCallback((v: string) => {
     setStateRaw(
       produce((state: State) => {
         const idx = state.collectionIdx;
@@ -175,8 +176,8 @@ export const CollectionContextProvider = ({ children }) => {
     );
   }, []);
 
-  const updateCollectionSchedule = useCallback(
-    (idx: number, field: string, value: any) => {
+  const updateCollectionSchedule = useCallback<CollectionContextValue['updateCollectionSchedule']>(
+    (idx, field, value) => {
       setStateRaw(
         produce((state: State) => {
           const collectionIdx = state.collectionIdx;

src/SearchContext.tsx

@@ -1,32 +1,26 @@
-import React, { useState } from "react";
-import { Location as GeoLocation } from "hk-bus-eta";
+import React, { Dispatch, ReactNode, SetStateAction, useState } from "react";
+import { Locations, SearchResultIdx, SearchResultType, StatusType } from './typing';
 
 interface SearchContextProps {
-  locations: {
-    start: { location: GeoLocation } | null;
-    end: { location: GeoLocation } | null;
-  };
+  locations: Locations;
   status: "ready" | "rendering" | "waiting";
-  result: any[];
-  resultIdx: {
-    resultIdx: number;
-    stopIdx: number[];
-  };
-  setLocations: any;
-  setStatus: any;
-  setResult: any;
-  setResultIdx: any;
+  result: SearchResultType[];
+  resultIdx: SearchResultIdx;
+  setLocations: (loctions: Locations) => void;
+  setStatus: (status: StatusType) => void;
+  setResult: Dispatch<SetStateAction<SearchResultType[]>>;
+  setResultIdx: Dispatch<SetStateAction<SearchResultIdx>>;
 }
 
 const SearchContext = React.createContext({} as SearchContextProps);
 
-export const SearchContextProvider = (props) => {
-  const [locations, setLocations] = useState({ start: null, end: null });
-  const [status, setStatus] = useState<"ready" | "rendering" | "waiting">(
+export const SearchContextProvider = (props: { children: ReactNode }) => {
+  const [locations, setLocations] = useState<Locations>({ start: null, end: null });
+  const [status, setStatus] = useState<StatusType>(
     "ready"
   );
-  const [result, setResult] = useState([]);
-  const [resultIdx, setResultIdx] = useState({ resultIdx: 0, stopIdx: [0, 0] });
+  const [result, setResult] = useState<SearchResultType[]>([]);
+  const [resultIdx, setResultIdx] = useState<SearchResultIdx>({ resultIdx: 0, stopIdx: [0, 0] });
 
   return (
     <SearchContext.Provider

src/components/home/SuccinctTimeReport.tsx

@@ -160,6 +160,7 @@ const SuccinctTimeReport = ({
         <ListItemText
           primary={
             <RouteNo
+              entry={routeList[routeKey]}
               routeNo={language === "zh" ? t(routeNo) : routeNo}
               fontSize={co[0] === "mtr" ? "1.1rem" : null}
             />

src/components/layout/collections/CollectionSchedule.tsx

@@ -17,7 +17,7 @@ import {
   AddCircle as AddIcon,
   RemoveCircleOutline as RemoveCircleOutlineIcon,
 } from "@mui/icons-material";
-import dayjs from "dayjs";
+import dayjs, { Dayjs } from "dayjs";
 
 const CollectionSchedule = () => {
   const { t } = useTranslation();
@@ -68,10 +68,10 @@ const CollectionSchedule = () => {
               value={dayjs(
                 `1991-12-02${daySchedule.start.hour}:${daySchedule.start.minute}`
               )}
-              onChange={(v: any) =>
+              onChange={(v: Dayjs) =>
                 updateCollectionSchedule(idx, "start", {
-                  hour: v.$H,
-                  minute: v.$m,
+                  hour: v.hour(),
+                  minute: v.minute(),
                 })
               }
             />
@@ -87,10 +87,10 @@ const CollectionSchedule = () => {
               value={dayjs(
                 `1991-12-02T${daySchedule.end.hour}:${daySchedule.end.minute}`
               )}
-              onChange={(v: any) =>
+              onChange={(v: Dayjs) =>
                 updateCollectionSchedule(idx, "end", {
-                  hour: v.$H,
-                  minute: v.$m,
+                  hour: v.hour(),
+                  minute: v.minute(),
                 })
               }
             />

src/components/map/CompassControl.tsx

@@ -8,7 +8,6 @@ const CompassControl = () => {
   const { compassPermission, setCompassPermission } = useContext(AppContext);
   const handleClick = useCallback(() => {
     requestPermission().then((r) => {
-      // @ts-ignore
       setCompassPermission(r);
     });
   }, [setCompassPermission]);

src/components/route-board/RouteNo.tsx

@@ -1,14 +1,17 @@
 import React from "react";
 import { SxProps, Theme, Typography } from "@mui/material";
+import { RouteListEntry } from 'hk-bus-eta';
+import { getLineColor } from '../../utils';
 
 interface RouteNoProps {
   routeNo: string;
-  component?: any;
+  entry?: RouteListEntry;
+  component?: React.ElementType;
   align?: "right" | "left" | "inherit" | "center" | "justify";
   fontSize?: string;
 }
 
-const RouteNo = ({ routeNo, component, align, fontSize }: RouteNoProps) => {
+const RouteNo = ({ routeNo, component, align, fontSize, entry }: RouteNoProps) => {
   // Suffix Examples: 962X=> X, 44A1 => A1, 25MS => MS, AEL => "", NA29 => ""
   let splitIdx = routeNo.length;
   for (let i = 1; i < routeNo.length; ++i) {
@@ -27,12 +30,16 @@ const RouteNo = ({ routeNo, component, align, fontSize }: RouteNoProps) => {
 
   return (
     <Typography
-      // @ts-ignore
       component={component || "h2"}
       align={align}
       variant="caption"
       color="textPrimary"
-      sx={rootSx(fontSize)}
+      sx={{
+        ...rootSx(fontSize),
+        borderBottom: entry?.co?.[0] === 'mtr' || entry?.co?.includes('lightRail') ?
+          `3px ${getLineColor(entry.co, entry.route)} solid` :
+          undefined
+      }}
     >
       <span>{prefix}</span>
       <span>{suffix}</span>

src/components/route-board/RouteNoCompany.tsx

@@ -2,15 +2,21 @@ import i18n from "i18next";
 import { useTranslation } from "react-i18next";
 import { Box, SxProps, Theme, Typography } from "@mui/material";
 import RouteNo from "./RouteNo";
+import { RouteListEntry } from 'hk-bus-eta';
 
-const RouteNoCompany = ({ route }) => {
+interface RouteNoCompanyProps {
+  route: [string, RouteListEntry];
+}
+
+const RouteNoCompany = ({ route }: RouteNoCompanyProps) => {
   const { t } = useTranslation();
   const [routeNo, serviceType] = route[0].split("-").slice(0, 2);
 
   return (
     <Box>
       <div>
         <RouteNo
+          entry={route[1]}
           routeNo={i18n.language === "zh" ? t(routeNo) : routeNo}
           fontSize={route[1].co[0] === "mtr" ? "1.2rem" : null}
         />

src/components/route-eta/RouteHeader.tsx

@@ -17,7 +17,7 @@ const RouteHeader = ({ routeId }: { routeId: string }) => {
 
   return (
     <Paper id="route-eta-header" sx={PaperSx} elevation={0}>
-      <RouteNo routeNo={t(route)} component="h1" align="center" />
+      <RouteNo entry={routeList[routeId]} routeNo={t(route)} component="h1" align="center" />
       <Typography component="h2" variant="caption" align="center">
         {t("往")} {toProperCase(dest[i18n.language])}{" "}
         {nlbId ? t("由") + " " + toProperCase(orig[i18n.language]) : ""}

src/components/route-search/AddressInput.tsx

@@ -1,16 +1,18 @@
 import React, { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import debounce from "lodash.debounce";
+import { Props as ReactSelectProps } from 'react-select';
 import AsyncSelect from "react-select/async";
 import { styled } from "@mui/material/styles";
 import proj4 from "proj4";
 import { StopList } from "hk-bus-eta";
+import { CustomLocation } from '../../typing';
 
 interface AddressInputProps {
   placeholder?: string;
-  onChange: any;
+  onChange: ReactSelectProps<CustomLocation>['onChange'];
   stopList: StopList;
-  value: any;
+  value: CustomLocation;
 }
 
 const AddressInput = ({
@@ -114,70 +116,59 @@ export default AddressInput;
 
 const AddressAsyncSelect = styled(AsyncSelect)(({ theme }) => ({
   ".react-select__control": {
-    background: `${
-      theme.palette.mode === "dark" ? theme.palette.background.default : "white"
-    } !important`,
+    background: `${theme.palette.mode === "dark" ? theme.palette.background.default : "white"
+      } !important`,
     border: "none !important",
     borderRadius: "unset !important",
     borderBottom: "1px hsl(0, 0%, 80%) solid !important",
   },
   ".react-select__input": {
-    color: `${
-      theme.palette.mode === "dark"
-        ? theme.palette.primary.main
-        : theme.palette.text.primary
-    } !important`,
+    color: `${theme.palette.mode === "dark"
+      ? theme.palette.primary.main
+      : theme.palette.text.primary
+      } !important`,
   },
   ".react-select__valueContainer": {
-    color: `${
-      theme.palette.mode === "dark"
-        ? theme.palette.primary.main
-        : theme.palette.text.primary
-    } !important`,
+    color: `${theme.palette.mode === "dark"
+      ? theme.palette.primary.main
+      : theme.palette.text.primary
+      } !important`,
   },
   ".react-select__single-value": {
-    color: `${
-      theme.palette.mode === "dark"
-        ? theme.palette.primary.main
-        : theme.palette.text.primary
-    } !important`,
+    color: `${theme.palette.mode === "dark"
+      ? theme.palette.primary.main
+      : theme.palette.text.primary
+      } !important`,
   },
   ".react-select__option:hover": {
     filter: "grayscale(1) !important",
   },
   ".react-select__option--is-focused": {
-    background: `${
-      theme.palette.mode === "dark" ? theme.palette.background.default : "white"
-    } !important`,
+    background: `${theme.palette.mode === "dark" ? theme.palette.background.default : "white"
+      } !important`,
   },
   ".react-select__option--is-selected": {
-    background: `${
-      theme.palette.mode === "dark" ? theme.palette.background.default : "white"
-    } !important`,
-    color: `${
-      theme.palette.mode === "dark"
-        ? theme.palette.primary.main
-        : theme.palette.text.primary
-    } !important`,
+    background: `${theme.palette.mode === "dark" ? theme.palette.background.default : "white"
+      } !important`,
+    color: `${theme.palette.mode === "dark"
+      ? theme.palette.primary.main
+      : theme.palette.text.primary
+      } !important`,
   },
   ".react-select__menu": {
-    background: `${
-      theme.palette.mode === "dark" ? theme.palette.background.default : "white"
-    } !important`,
-    color: `${
-      theme.palette.mode === "dark"
-        ? theme.palette.primary.main
-        : theme.palette.text.primary
-    } !important`,
+    background: `${theme.palette.mode === "dark" ? theme.palette.background.default : "white"
+      } !important`,
+    color: `${theme.palette.mode === "dark"
+      ? theme.palette.primary.main
+      : theme.palette.text.primary
+      } !important`,
   },
   ".react-select__meauList": {
-    background: `${
-      theme.palette.mode === "dark" ? theme.palette.background.default : "white"
-    } !important`,
-    color: `${
-      theme.palette.mode === "dark"
-        ? theme.palette.primary.main
-        : theme.palette.text.primary
-    } !important`,
+    background: `${theme.palette.mode === "dark" ? theme.palette.background.default : "white"
+      } !important`,
+    color: `${theme.palette.mode === "dark"
+      ? theme.palette.primary.main
+      : theme.palette.text.primary
+      } !important`,
   },
 }));

src/components/route-search/SearchResult.tsx

@@ -56,7 +56,7 @@ const SearchResult = ({ routes, idx, handleRouteClick, expanded, stopIdx }) => {
 
             return (
               <span key={`search-${idx}-${routeIdx}`}>
-                <RouteNo routeNo={route} />
+                <RouteNo entry={routes[routeIdx]} routeNo={route} />
                 {parseInt(serviceType, 10) >= 2 && (
                   <Typography variant="caption">{t("特別班")}</Typography>
                 )}