add some keyboard support

Signed-off-by: Vu Van Dung <[email protected]>
joulev · Apr 16, 2024 · ece8299 · ece8299
1 parent c4b4f48
commit ece8299
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 42 deletions.
diff --git a/src/app/blogs/walking-on-singapore-mrt-lines/map.tsx b/src/app/blogs/walking-on-singapore-mrt-lines/map.tsx
@@ -64,17 +64,11 @@ function MapPolyline({
   sessionIndex: number;
 }) {
   const polylineRef = useRef<google.maps.Polyline | null>(null);
-  const thinFillAreaPolylineRef = useRef<google.maps.Polyline | null>(null);
 
   const { activeSession, setActiveSession, setPanelIsExpanded } = useActiveSession();
 
-  const session = useMemo(() => data[lineIndex].sessions[sessionIndex], [lineIndex, sessionIndex]);
-
   const lineIsActive = activeSession.lineIndex === lineIndex;
   const isActive = lineIsActive && activeSession.sessionIndex === sessionIndex;
-  const isOutlined =
-    (lineIndex === 4 && sessionIndex === 6) || // Changi Airport branch
-    (lineIndex === 7 && sessionIndex === 3); // JRL East branch
   const [isHover, setIsHover] = useState(false);
 
   const onHoverEnter = useCallback(() => setIsHover(true), []);
@@ -100,46 +94,23 @@ function MapPolyline({
             ? 9997
             : lineZIndex[data[lineIndex].lineCode as keyof typeof lineZIndex],
       strokeOpacity: 1,
-      strokeWeight: 3,
-    });
-    if (!thinFillAreaPolylineRef.current) return;
-    thinFillAreaPolylineRef.current.setOptions({
-      strokeColor: "black",
-      zIndex: lineIsActive
-        ? 9998
-        : lineZIndex[data[lineIndex].lineCode as keyof typeof lineZIndex] + 1,
-      strokeOpacity: 1,
-      strokeWeight: 1,
+      strokeWeight: 2,
     });
   }, [isActive, isHover, lineIsActive, activeSession.lineIndex, lineIndex]);
 
   useEffect(() => refreshStyling(), [refreshStyling]);
 
   return (
-    <>
-      <Polyline
-        onLoad={polyline => {
-          polylineRef.current = polyline;
-          refreshStyling();
-        }}
-        path={coordinates}
-        onMouseOver={onHoverEnter}
-        onMouseOut={onHoverLeave}
-        onClick={onClick}
-      />
-      {isOutlined ? (
-        <Polyline
-          onLoad={polyline => {
-            thinFillAreaPolylineRef.current = polyline;
-            refreshStyling();
-          }}
-          path={coordinates}
-          onMouseOver={onHoverEnter}
-          onMouseOut={onHoverLeave}
-          onClick={onClick}
-        />
-      ) : null}
-    </>
+    <Polyline
+      onLoad={polyline => {
+        polylineRef.current = polyline;
+        refreshStyling();
+      }}
+      path={coordinates}
+      onMouseOver={onHoverEnter}
+      onMouseOut={onHoverLeave}
+      onClick={onClick}
+    />
   );
 }
 
@@ -209,7 +180,7 @@ export const WalkingMap = memo(function WalkingMap() {
         disableDefaultUI: true,
         styles: mapStyles,
         backgroundColor: "#161b2c",
-        // backgroundColor: "transparent",
+        keyboardShortcuts: false,
       }}
       onClick={onClick}
       onZoomChanged={collapsePanel}

diff --git a/src/app/blogs/walking-on-singapore-mrt-lines/panel.tsx b/src/app/blogs/walking-on-singapore-mrt-lines/panel.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Image from "next/image";
-import { Fragment, memo, useMemo } from "react";
+import { Fragment, memo, useEffect, useMemo } from "react";
 
 import { ChevronDown, ChevronLeft, ChevronRight, Construction, Home } from "~/components/icons";
 import { Button, LinkButton } from "~/components/ui/button";
@@ -491,6 +491,18 @@ function SessionPrevNextButton({ next }: { next?: boolean }) {
     if (newIndex > max) return 0;
     return newIndex;
   }, [activeSession.lineIndex, activeSession.sessionIndex, next]);
+
+  useEffect(() => {
+    function handleKeyPress(event: KeyboardEvent) {
+      if ((event.key === "ArrowLeft" && !next) || (event.key === "ArrowRight" && next)) {
+        event.preventDefault();
+        setActiveSession({ sessionIndex: targetSessionIndex });
+      }
+    }
+    document.addEventListener("keydown", handleKeyPress);
+    return () => document.removeEventListener("keydown", handleKeyPress);
+  }, [next, setActiveSession, targetSessionIndex]);
+
   return (
     <button
       type="button"