Merge pull request #598 from isucon/multi-simulator

[FE]シュミレーターの椅子を切り替えれない代わりに、3つの椅子をページとして用意する

frontend/app/components/hooks/use-emulator.ts

@@ -80,7 +80,6 @@ export const useEmulator = (targetChair?: SimulatorChair) => {
     ) {
       return;
     }
-
     const { coordinate, setter } = targetChair.coordinateState;
     const { pickup, destination } =
       targetChair.chairNotification.payload.coordinate;

frontend/app/components/icon/chair.tsx

@@ -78,7 +78,9 @@ export const ChairIcon: FC<{ model: string } & ComponentProps<"svg">> = ({
   ...props
 }) => {
   const chairType = useMemo(() => {
-    return ChairTypes[model ? model.charCodeAt(0) % ChairTypes.length : 0];
+    return ChairTypes[
+      model ? (model.charCodeAt(0) + model.length) % ChairTypes.length : 0
+    ];
   }, [model]);
   return <Chair chairType={chairType} {...props} />;
 };

frontend/app/contexts/simulator-context.tsx

@@ -7,7 +7,10 @@ import {
   useState,
 } from "react";
 import type { Coordinate } from "~/api/api-schemas";
-import { getSimulateChair } from "~/utils/get-initial-data";
+import {
+  getSimulateChair,
+  getSimulateChairFromToken,
+} from "~/utils/get-initial-data";
 
 import { apiBaseURL } from "~/api/api-base-url";
 import {
@@ -16,6 +19,7 @@ import {
 } from "~/api/api-components";
 import type { ClientChairRide, SimulatorChair } from "~/types";
 import { getSimulatorCurrentCoordinate } from "~/utils/storage";
+import { getCookieValue } from "~/utils/get-cookie-value";
 
 type ClientSimulatorContextProps = {
   targetChair?: SimulatorChair;
@@ -192,14 +196,24 @@ export const useClientChairNotification = (id?: string) => {
   return responseClientAppRequest;
 };
 
-const simulateChairData = getSimulateChair();
-
 export const SimulatorProvider = ({ children }: { children: ReactNode }) => {
+  const [token, setToken] = useState<string>();
+
+  const simulateChairData = useMemo(() => {
+    return token ? getSimulateChairFromToken(token) : getSimulateChair();
+  }, [token]);
+
   useEffect(() => {
+    const token = getCookieValue(document.cookie, "chair_session");
+    if (token) {
+      setToken(token);
+      return;
+    }
+    // TODO: tokenがなければUI上で選択させるようにする
     if (simulateChairData?.token) {
       document.cookie = `chair_session=${simulateChairData.token}; path=/`;
     }
-  }, []);
+  }, [simulateChairData]);
 
   const chairNotification = useClientChairNotification(simulateChairData?.id);
 
@@ -219,6 +233,7 @@ export const SimulatorProvider = ({ children }: { children: ReactNode }) => {
                 setter: setCurrentCoordinate,
                 coordinate: currentCoodinate,
               },
+              setToken,
             }
           : undefined,
       }}

frontend/app/globals.d.ts

@@ -3,19 +3,4 @@
  */
 declare const __API_BASE_URL__: string;
 
-declare const __INITIAL_OWNER_DATA__:
-  | {
-      owners: {
-        id: string;
-        name: string;
-        token: string;
-      }[];
-      targetSimulatorChair: {
-        id: string;
-        owner_id: string;
-        name: string;
-        model: string;
-        token: string;
-      };
-    }
-  | undefined;
+declare const __INITIAL_DATA__: object;

frontend/app/types.ts

@@ -56,6 +56,7 @@ export type SimulatorChair = {
   name: string;
   model: string;
   token: string;
+  setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
   coordinateState: {
     coordinate?: Coordinate;
     setter: (coordinate: Coordinate) => void;

frontend/app/utils/get-initial-data.ts

@@ -12,16 +12,41 @@ type InitialOwner = {
   token: string;
 };
 
-const initialOwnerData = __INITIAL_OWNER_DATA__;
+type initialDataType =
+  | {
+      owners: {
+        id: string;
+        name: string;
+        token: string;
+      }[];
+      simulatorChairs: {
+        id: string;
+        owner_id: string;
+        name: string;
+        model: string;
+        token: string;
+      }[];
+    }
+  | undefined;
+
+const initialData = __INITIAL_DATA__ as initialDataType;
 
 export const getOwners = (): InitialOwner[] => {
   return (
-    initialOwnerData?.owners?.map((owner) => ({
+    initialData?.owners?.map((owner) => ({
       ...owner,
     })) ?? []
   );
 };
 
-export const getSimulateChair = (): InitialChair | undefined => {
-  return initialOwnerData?.targetSimulatorChair;
+export const getSimulateChair = (index?: number): InitialChair | undefined => {
+  return index
+    ? initialData?.simulatorChairs[index]
+    : initialData?.simulatorChairs[0];
+};
+
+export const getSimulateChairFromToken = (
+  token: string,
+): InitialChair | undefined => {
+  return initialData?.simulatorChairs.find((c) => c.token === token);
 };

frontend/initial-owner-data.json → frontend/initial-data.json

@@ -26,11 +26,27 @@
       "token": "3585ccc78c507660a4802973d269849e"
     }
   ],
-  "targetSimulatorChair": {
-    "id": "01JDFEF7MGXXCJKW1MNJXPA77A",
-    "owner_id": "01JDFEDF008NTA922W12FS7800",
-    "name": "QC-L13-8361",
-    "model": "クエストチェア Lite",
-    "token": "3013d5ec84e1b230f913a17d71ef27c8"
-  }
+  "simulatorChairs": [
+    {
+      "id": "01JDFEF7MGXXCJKW1MNJXPA77A",
+      "owner_id": "01JDFEDF008NTA922W12FS7800",
+      "name": "QC-L13-8361",
+      "model": "クエストチェア Lite",
+      "token": "3013d5ec84e1b230f913a17d71ef27c8"
+    },
+    {
+      "id": "01JDFEXJM006PH4C1EVHJ31QMV",
+      "owner_id": "01JDFEDF008NTA922W12FS7800",
+      "name": "LC-48-2566",
+      "model": "Legacy Chair",
+      "token": "b63d4c58ded093013ea5a483e2184d91"
+    },
+    {
+      "id": "01JDFGTKR0586QH1QGXRACGB80",
+      "owner_id": "01JDFEDF008NTA922W12FS7800",
+      "name": "IS-33-8740",
+      "model": "Infinity Seat",
+      "token": "091cd034ce1ac4a9dd9fb1b5ec52c3dc"
+    }
+  ]
 }

frontend/vite.config.ts

@@ -20,10 +20,8 @@ const DEFAULT_URL = `http://${DEFAULT_HOSTNAME}:${DEFAULT_PORT}`;
 
 type APIResponse = Record<string, string>;
 
-const intialOwnerData = existsSync("./initial-owner-data.json")
-  ? (JSON.parse(
-      readFileSync("./initial-owner-data.json").toString(),
-    ) as unknown)
+const intialOwnerData = existsSync("./initial-data.json")
+  ? (JSON.parse(readFileSync("./initial-data.json").toString()) as unknown)
   : undefined;
 
 const getLoggedInURLForClient = async () => {
@@ -253,7 +251,7 @@ export const config = {
   ],
   define: {
     [alternativeURLExpression]: `"${process.env["API_BASE_URL"] ?? "."}"`,
-    __INITIAL_OWNER_DATA__: intialOwnerData,
+    __INITIAL_DATA__: intialOwnerData,
   },
   server: {
     proxy: {