Merge pull request #661 from isucon/post-message-client-ride

[FE] ISURIDEボタン押下時にpost-messageを飛ばす

frontend/app/contexts/owner-context.tsx

@@ -77,7 +77,6 @@ export const OwnerProvider = ({ children }: { children: ReactNode }) => {
     void (async () => {
       try {
         const sales = await fetchOwnerGetSales({
-          // TODO: 機能していない？
           queryParams: {
             since: timestamp(since),
             until: timestamp(until),

frontend/app/contexts/simulator-context.tsx

@@ -18,14 +18,16 @@ import {
   fetchChairGetNotification,
 } from "~/api/api-components";
 import { SimulatorChair } from "~/types";
-import { getSimulatorCurrentCoordinate } from "~/utils/storage";
 import { getCookieValue } from "~/utils/get-cookie-value";
+import { Message, MessageTypes } from "~/utils/post-message";
+import { getSimulatorCurrentCoordinate } from "~/utils/storage";
 
 type SimulatorContextProps = {
   chair?: SimulatorChair;
   data?: ChairGetNotificationResponse["data"];
   setCoordinate?: (coordinate: Coordinate) => void;
   setToken?: (token: string) => void;
+  isAnotherSimulatorBeingUsed?: boolean;
 };
 
 const SimulatorContext = createContext<SimulatorContextProps>({});
@@ -186,13 +188,34 @@ export const SimulatorProvider = ({ children }: { children: ReactNode }) => {
     return coordinate ?? { latitude: 0, longitude: 0 };
   });
 
+  const [clientRideId, setClientRideId] = useState<string>();
+  const isAnotherSimulatorBeingUsed = !clientRideId && !!data?.ride_id;
+
+  console.log(isAnotherSimulatorBeingUsed);
+
+  useEffect(() => {
+    const onMessage = ({
+      data,
+    }: MessageEvent<Message["ClientRideRequested"]>) => {
+      const isSameOrigin = origin == location.origin;
+      if (isSameOrigin && data.type === MessageTypes.ClientRideRequested) {
+        setClientRideId(data?.payload?.rideId);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => {
+      window.removeEventListener("message", onMessage);
+    };
+  }, []);
+
   return (
     <SimulatorContext.Provider
       value={{
         data,
         chair: simulateChair ? { ...simulateChair, coordinate } : undefined,
         setCoordinate,
         setToken,
+        isAnotherSimulatorBeingUsed,
       }}
     >
       {children}

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

@@ -16,8 +16,8 @@ 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, isClientApiError } from "~/types";
-import { sendClientReady } from "~/utils/post-message";
+import { NearByChair } from "~/types";
+import { sendClientReady, sendClientRideRequested } from "~/utils/post-message";
 import { Arrived } from "./driving-state/arrived";
 import { Carrying } from "./driving-state/carrying";
 import { Enroute } from "./driving-state/enroute";
@@ -36,6 +36,7 @@ type EstimatePrice = { fare: number; discount: number };
 
 export default function Index() {
   const { data } = useClientContext();
+  const emulateChairs = useGhostChairs();
   const [internalRideStatus, setInternalRideStatus] = useState<RideStatus>();
   const [currentLocation, setCurrentLocation] = useState<Coordinate>();
   const [destLocation, setDestLocation] = useState<Coordinate>();
@@ -44,28 +45,27 @@ export default function Index() {
   const [displayedChairs, setDisplayedChairs] = useState<NearByChair[]>([]);
   const [centerCoordinate, setCenterCoodirnate] = useState<Coordinate>();
   const onCenterMove = useCallback(
-    (coordinate: Coordinate) => {
-      setCenterCoodirnate(coordinate);
-    },
-    [setCenterCoodirnate],
+    (coordinate: Coordinate) => setCenterCoodirnate(coordinate),
+    [],
+  );
+  const onSelectMove = useCallback(
+    (coordinate: Coordinate) => setSelectedLocation(coordinate),
+    [],
   );
-  const onSelectMove = useCallback((coordinate: Coordinate) => {
-    setSelectedLocation(coordinate);
-  }, []);
   const [isLocationSelectorModalOpen, setLocationSelectorModalOpen] =
     useState(false);
   const locationSelectorModalRef = useRef<HTMLElement & { close: () => void }>(
     null,
   );
+  const statusModalRef = useRef<HTMLElement & { close: () => void }>(null);
+  const [estimatePrice, setEstimatePrice] = useState<EstimatePrice>();
   const handleConfirmLocation = useCallback(() => {
     if (direction === "from") {
       setCurrentLocation(selectedLocation);
     } else if (direction === "to") {
       setDestLocation(selectedLocation);
     }
-    if (locationSelectorModalRef.current) {
-      locationSelectorModalRef.current.close();
-    }
+    locationSelectorModalRef.current?.close();
   }, [direction, selectedLocation]);
 
   const isStatusModalOpen = useMemo(() => {
@@ -77,10 +77,6 @@ export default function Index() {
     );
   }, [internalRideStatus]);
 
-  const statusModalRef = useRef<HTMLElement & { close: () => void }>(null);
-  const [estimatePrice, setEstimatePrice] = useState<EstimatePrice>();
-  const emulateChairs = useGhostChairs();
-
   useEffect(() => {
     setInternalRideStatus(data?.status);
   }, [data?.status]);
@@ -110,16 +106,15 @@ export default function Index() {
     }
     setInternalRideStatus("MATCHING");
     try {
-      void (await fetchAppPostRides({
+      const { ride_id } = await fetchAppPostRides({
         body: {
           pickup_coordinate: currentLocation,
           destination_coordinate: destLocation,
         },
-      }));
+      });
+      sendClientRideRequested(window.parent, { rideId: ride_id });
     } catch (error) {
-      if (isClientApiError(error)) {
-        console.error(error);
-      }
+      console.error(error);
     }
   }, [currentLocation, destLocation]);
 
@@ -129,8 +124,7 @@ export default function Index() {
     let abortController: AbortController | undefined;
     let timeoutId: NodeJS.Timeout | undefined;
 
-    const updateNearByChairs = async (coordinate: Coordinate) => {
-      const { latitude, longitude } = coordinate;
+    const updateNearByChairs = async ({ latitude, longitude }: Coordinate) => {
       try {
         abortController?.abort();
         abortController = new AbortController();
@@ -227,7 +221,7 @@ export default function Index() {
           ref={locationSelectorModalRef}
           onClose={() => setLocationSelectorModalOpen(false)}
         >
-          <div className="flex flex-col items-center mt-4 h-full">
+          <div className="flex flex-col items-center h-full">
             <div className="flex-grow w-full max-h-[75%] mb-6">
               <Map
                 onMove={onSelectMove}

frontend/app/utils/post-message.ts

@@ -1,13 +1,18 @@
 export const MessageTypes = {
-  ClientReady: "isuride.client.ready",
-  SimulatorConfing: "isuride.simulator.config",
+  ClientReady: "isuride.client.ready", // クライアントの画面準備完了
+  ClientRideRequested: "isuride.client.running", // クライアントでISURIDEが実行中
+  SimulatorConfing: "isuride.simulator.config", // シミュレーターからの設定値変更
 } as const;
 
 export type Message = {
   ClientReady: {
     type: typeof MessageTypes.ClientReady;
     payload: { ready?: boolean };
   };
+  ClientRideRequested: {
+    type: typeof MessageTypes.ClientRideRequested;
+    payload: { rideId?: string };
+  };
   SimulatorConfing: {
     type: typeof MessageTypes.SimulatorConfing;
     payload: {
@@ -23,6 +28,13 @@ export const sendClientReady = (
   target.postMessage({ type: MessageTypes.ClientReady, payload }, "*");
 };
 
+export const sendClientRideRequested = (
+  target: Window,
+  payload: NonNullable<Message["ClientRideRequested"]["payload"]>,
+) => {
+  target.postMessage({ type: MessageTypes.ClientRideRequested, payload }, "*");
+};
+
 export const sendSimulatorConfig = (
   target: Window,
   payload: NonNullable<Message["SimulatorConfing"]["payload"]>,