Code refactoring for reducing data usage

src/AppContext.tsx

@@ -9,7 +9,7 @@ import React, {
 import type { ReactNode } from "react";
 import {
   DEFAULT_GEOLOCATION,
-  DEFAULT_SEARCH_RANGE_OPTIONS,
+  DEFAULT_SEARCH_RANGE,
   iOSRNWebView,
   iOSTracking,
   isStrings,
@@ -260,8 +260,7 @@ export const AppContextProvider = ({
         JSON.parse(localStorage.getItem("annotateScheduled")) ?? false,
       fontSize: JSON.parse(localStorage.getItem("fontSize")) ?? 14,
       searchRange:
-        JSON.parse(localStorage.getItem("searchRange")) ??
-        DEFAULT_SEARCH_RANGE_OPTIONS.slice(-1)[0],
+        JSON.parse(localStorage.getItem("searchRange")) ?? DEFAULT_SEARCH_RANGE,
       isRangeController: false, // always hide the controller by default
     };
   };

src/DbContext.tsx

@@ -4,6 +4,7 @@ import { isEmptyObj } from "./utils";
 import { fetchDbFunc } from "./db";
 import { compress as compressJson } from "lzutf8-light";
 import type { DatabaseType } from "./db";
+import { isHoliday } from "./timetable";
 
 interface DatabaseContextState {
   db: DatabaseType;
@@ -12,6 +13,7 @@ interface DatabaseContextState {
 
 interface DatabaseContextValue extends DatabaseContextState {
   AppTitle: string;
+  isTodayHoliday: boolean;
   renewDb: () => Promise<void>;
   toggleAutoDbRenew: () => void;
 }
@@ -72,13 +74,24 @@ export const DbProvider = ({ initialDb, children }: DbProviderProps) => {
     }
   }, [db]);
 
-  const contextValue = useMemo(
-    () => ({ AppTitle, db, autoRenew, renewDb, toggleAutoDbRenew }),
-    [db, autoRenew, renewDb, toggleAutoDbRenew]
+  const isTodayHoliday = useMemo(
+    () => isHoliday(db.holidays, new Date()),
+    [db.holidays]
   );
 
   return (
-    <DbContext.Provider value={contextValue}>{children}</DbContext.Provider>
+    <DbContext.Provider
+      value={{
+        AppTitle,
+        db,
+        autoRenew,
+        isTodayHoliday,
+        renewDb,
+        toggleAutoDbRenew,
+      }}
+    >
+      {children}
+    </DbContext.Provider>
   );
 };
 

src/components/home/RangeMapDialog.tsx

@@ -3,16 +3,17 @@ import {
   Dialog,
   DialogContent,
   DialogTitle,
+  IconButton,
   Slider,
   SxProps,
   Theme,
 } from "@mui/material";
-
 import RangeMap from "./RangeMap";
 import { useTranslation } from "react-i18next";
 import { useCallback, useContext, useState } from "react";
 import AppContext from "../../AppContext";
 import { Location } from "hk-bus-eta";
+import { Close as CloseIcon } from "@mui/icons-material";
 
 interface RangeMapDialogProps {
   open: boolean;
@@ -62,7 +63,12 @@ const RangeMapDialog = ({ open, onClose }: RangeMapDialogProps) => {
 
   return (
     <Dialog open={open} onClose={handleClose} sx={rootSx}>
-      <DialogTitle sx={titleSx}>{t("自訂搜尋範圍（米）")}</DialogTitle>
+      <DialogTitle sx={titleSx}>
+        {t("自訂搜尋範圍（米）")}
+        <IconButton onClick={handleClose}>
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
       <DialogContent>
         <RangeMap
           range={state.searchRange}
@@ -117,6 +123,8 @@ const titleSx: SxProps<Theme> = {
     theme.palette.mode === "dark"
       ? theme.palette.primary.main
       : theme.palette.text.primary,
+  display: "flex",
+  justifyContent: "space-between",
 };
 
 const sliderSx: SxProps<Theme> = {