Merge pull request #771 from isucon/fix-near-by-chair-distance

[FE] nearByChairで表示するdistance領域を画面幅から正確に計算する

Author: imamiya-masaki

frontend/app/components/modules/map/map.tsx

@@ -17,7 +17,7 @@ import { ChairIcon } from "~/components/icon/chair";
 import { PinIcon } from "~/components/icon/pin";
 import { Button } from "~/components/primitives/button/button";
 import { Text } from "~/components/primitives/text/text";
-import type { Coordinate, DisplayPos, NearByChair } from "~/types";
+import type { Coordinate, DisplayPos, Distance, NearByChair } from "~/types";
 import { CityObjects, TownList } from "./map-data";
 
 const GridDistance = 20;
@@ -51,6 +51,15 @@ const centerPosFrom = (pos: DisplayPos, outerRect: DOMRect): DisplayPos => {
   };
 };
 
+const displaySizeToDistance = (rect: DOMRect): Distance => {
+  const startPos = posToCoordinate({ x: 0, y: 0 });
+  const endPos = posToCoordinate({ x: rect.right, y: rect.bottom });
+  return {
+    horizontalDistance: startPos.latitude - endPos.latitude,
+    verticalDistance: startPos.longitude - endPos.longitude,
+  };
+};
+
 const draw = (
   ctx: CanvasRenderingContext2D,
   option: { from?: Coordinate; to?: Coordinate },
@@ -334,6 +343,7 @@ const TownLayer = memo(function TownLayer() {
 
 type MapProps = ComponentProps<"div"> & {
   onMove?: (coordinate: Coordinate) => void;
+  onUpdateViewSize?: (distance: Distance) => void;
   selectable?: boolean;
   selectorPinColor?: `#${string}`;
   from?: Coordinate;
@@ -346,13 +356,15 @@ export const Map: FC<MapProps> = ({
   selectable,
   selectorPinColor,
   onMove,
+  onUpdateViewSize,
   from,
   to,
   chairs,
   initialCoordinate,
   className,
 }) => {
   const onMoveRef = useRef(onMove);
+  const onUpdateViewSizeRef = useRef(onUpdateViewSize);
   const outerRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [isDrag, setIsDrag] = useState(false);
@@ -387,6 +399,12 @@ export const Map: FC<MapProps> = ({
     }
   }, []);
 
+  useEffect(() => {
+    if (!outerRect) return;
+    const distance = displaySizeToDistance(outerRect);
+    onUpdateViewSizeRef.current?.(distance);
+  }, [outerRect]);
+
   useLayoutEffect(() => {
     updateViewLocation(initialCoordinate);
   }, [initialCoordinate, updateViewLocation]);

frontend/app/routes/client._index/route.tsx

@@ -16,7 +16,7 @@ import { Button } from "~/components/primitives/button/button";
 import { Modal } from "~/components/primitives/modal/modal";
 import { Text } from "~/components/primitives/text/text";
 import { useClientContext } from "~/contexts/client-context";
-import { NearByChair } from "~/types";
+import type { Distance, NearByChair } from "~/types";
 import { sendClientReady, sendClientRideRequested } from "~/utils/post-message";
 import { Arrived } from "./driving-state/arrived";
 import { Carrying } from "./driving-state/carrying";
@@ -44,14 +44,19 @@ export default function Index() {
   const [selectedLocation, setSelectedLocation] = useState<Coordinate>();
   const [displayedChairs, setDisplayedChairs] = useState<NearByChair[]>([]);
   const [centerCoordinate, setCenterCoodirnate] = useState<Coordinate>();
-  const onCenterMove = useCallback(
+  const [distance, setDistance] = useState<Distance>();
+  const onMove = useCallback(
     (coordinate: Coordinate) => setCenterCoodirnate(coordinate),
     [],
   );
   const onSelectMove = useCallback(
     (coordinate: Coordinate) => setSelectedLocation(coordinate),
     [],
   );
+  const onUpdateViewSize = useCallback(
+    (distance: Distance) => setDistance(distance),
+    [],
+  );
   const [isLocationSelectorModalOpen, setLocationSelectorModalOpen] =
     useState(false);
   const locationSelectorModalRef = useRef<HTMLElement & { close: () => void }>(
@@ -132,7 +137,12 @@ export default function Index() {
           queryParams: {
             latitude,
             longitude,
-            distance: 150,
+            distance: distance
+              ? Math.max(
+                  distance.horizontalDistance + 10,
+                  distance.verticalDistance + 10,
+                )
+              : 150,
           },
         });
         setDisplayedChairs(chairs);
@@ -155,7 +165,7 @@ export default function Index() {
       clearTimeout(timeoutId);
       abortController?.abort();
     };
-  }, [centerCoordinate, isStatusModalOpen]);
+  }, [centerCoordinate, isStatusModalOpen, distance]);
 
   useEffect(() => {
     sendClientReady(window.parent, { ready: true });
@@ -170,7 +180,8 @@ export default function Index() {
       <Map
         from={currentLocation}
         to={destLocation}
-        onMove={onCenterMove}
+        onMove={onMove}
+        onUpdateViewSize={onUpdateViewSize}
         initialCoordinate={selectedLocation}
         chairs={[...displayedChairs, ...emulateChairs]}
         className="flex-1"

frontend/app/types.ts

@@ -2,7 +2,6 @@ import type {
   OwnerGetChairsResponse,
   OwnerGetSalesResponse,
 } from "./api/api-components";
-import type { Coordinate as ApiCoodinate } from "./api/api-schemas";
 
 export type AccessToken = string;
 
@@ -16,10 +15,11 @@ export type ClientAppChair = {
   }>;
 };
 
-export type DisplayPos = {
-  x: number;
-  y: number;
-};
+export type Coordinate = { latitude: number; longitude: number };
+
+export type DisplayPos = { x: number; y: number };
+
+export type Distance = { horizontalDistance: number; verticalDistance: number };
 
 export type NearByChair = {
   id: string;
@@ -28,8 +28,6 @@ export type NearByChair = {
   current_coordinate: Coordinate;
 };
 
-export type Coordinate = ApiCoodinate;
-
 export type CampaignData = {
   invitationCode: string;
   registedAt: string;