Merge pull request #605 from isucon/frontend/refactor/apiContext-toapi

[FE] リファクタリング：`apiContext` → `api`

frontend/.eslintrc.cjs

@@ -13,7 +13,7 @@ module.exports = {
     commonjs: true,
     es6: true,
   },
-  ignorePatterns: ["!**/.server", "!**/.client", "app/apiClient/"],
+  ignorePatterns: ["!**/.server", "!**/.client", "app/api/"],
   extends: ["eslint:recommended"],
   overrides: [
     // React

frontend/.prettierignore

@@ -1 +1 @@
-app/apiClient/
+app/api/

frontend/app/apiClient/apiComponents.ts → frontend/app/api/api-components.ts

@@ -4,10 +4,10 @@
  * @version 1.0
  */
 import * as reactQuery from "@tanstack/react-query";
-import { useApiContext, ApiContext } from "./apiContext";
-import type * as Fetcher from "./apiFetcher";
-import { apiFetch } from "./apiFetcher";
-import type * as Schemas from "./apiSchemas";
+import { useApiContext, ApiContext } from "./api-context";
+import type * as Fetcher from "./api-fetcher";
+import { apiFetch } from "./api-fetcher";
+import type * as Schemas from "./api-schemas";
 
 export type PostInitializeError = Fetcher.ErrorWrapper<undefined>;
 

frontend/app/apiClient/apiContext.ts → frontend/app/api/api-context.ts

@@ -1,5 +1,5 @@
 import type { QueryKey, UseQueryOptions } from "@tanstack/react-query";
-import { QueryOperation } from "./apiComponents";
+import { QueryOperation } from "./api-components";
 
 export type ApiContext = {
   fetcherOptions: {

frontend/app/apiClient/apiFetcher.ts → frontend/app/api/api-fetcher.ts

@@ -1,4 +1,4 @@
-import { ApiContext } from "./apiContext";
+import { ApiContext } from "./api-context";
 
 const baseUrl = __API_BASE_URL__;
 

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

@@ -2,8 +2,8 @@ import { useEffect } from "react";
 import {
   fetchChairPostCoordinate,
   fetchChairPostRideStatus,
-} from "~/apiClient/apiComponents";
-import { Coordinate } from "~/apiClient/apiSchemas";
+} from "~/api/api-components";
+import { Coordinate } from "~/api/api-schemas";
 import type { SimulatorChair } from "~/types";
 import {
   setSimulatorCurrentCoordinate,

frontend/app/components/modules/location-button/location-button.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps, FC } from "react";
 import { twMerge } from "tailwind-merge";
-import { Coordinate } from "~/apiClient/apiSchemas";
+import { Coordinate } from "~/api/api-schemas";
 import { PinIcon } from "~/components/icon/pin";
 import { Button } from "~/components/primitives/button/button";
 

frontend/app/components/modules/simulator-chair-status/simulator-chair-status.tsx

@@ -1,6 +1,6 @@
 import { ComponentProps, FC } from "react";
 import { twMerge } from "tailwind-merge";
-import { RideStatus } from "~/apiClient/apiSchemas";
+import { RideStatus } from "~/api/api-schemas";
 import { Text } from "~/components/primitives/text/text";
 
 const StatusList = {

frontend/app/components/modules/simulator-display/simulator-chair-display.tsx

@@ -1,7 +1,7 @@
 import { FC, memo, useCallback, useMemo, useRef, useState } from "react";
 import colors from "tailwindcss/colors";
-import { fetchChairPostActivity } from "~/apiClient/apiComponents";
-import { RideStatus } from "~/apiClient/apiSchemas";
+import { fetchChairPostActivity } from "~/api/api-components";
+import { RideStatus } from "~/api/api-schemas";
 import { useEmulator } from "~/components/hooks/use-emulate";
 import { ChairIcon } from "~/components/icon/chair";
 import { PinIcon } from "~/components/icon/pin";

frontend/app/contexts/owner-context.tsx

@@ -12,7 +12,7 @@ import {
   OwnerGetSalesResponse,
   fetchOwnerGetChairs,
   fetchOwnerGetSales,
-} from "~/apiClient/apiComponents";
+} from "~/api/api-components";
 import { isClientApiError } from "~/types";
 import { getCookieValue } from "~/utils/get-cookie-value";
 

frontend/app/contexts/simulator-context.tsx

@@ -6,14 +6,14 @@ import {
   useMemo,
   useState,
 } from "react";
-import type { Coordinate } from "~/apiClient/apiSchemas";
+import type { Coordinate } from "~/api/api-schemas";
 import { getSimulateChair } from "~/utils/get-initial-data";
 
-import { apiBaseURL } from "~/apiClient/APIBaseURL";
+import { apiBaseURL } from "~/api/api-base-url";
 import {
   ChairGetNotificationResponse,
   fetchChairGetNotification,
-} from "~/apiClient/apiComponents";
+} from "~/api/api-components";
 import type { ClientChairRide, SimulatorChair } from "~/types";
 import { getSimulatorCurrentCoordinate } from "~/utils/storage";
 

frontend/app/contexts/user-context.tsx

@@ -7,12 +7,12 @@ import {
   useState,
   type ReactNode,
 } from "react";
-import { apiBaseURL } from "~/apiClient/APIBaseURL";
+import { apiBaseURL } from "~/api/api-base-url";
 import {
   AppGetNotificationResponse,
   fetchAppGetNotification,
-} from "~/apiClient/apiComponents";
-import type { Coordinate, RideStatus } from "~/apiClient/apiSchemas";
+} from "~/api/api-components";
+import type { Coordinate, RideStatus } from "~/api/api-schemas";
 import { isClientApiError, type ClientAppRide } from "~/types";
 import { getCookieValue } from "~/utils/get-cookie-value";
 import {

frontend/app/routes/client._index/driving-state/arrived.tsx

@@ -1,7 +1,7 @@
 import { Form } from "@remix-run/react";
 import { MouseEventHandler, useCallback, useEffect, useState } from "react";
 import colors from "tailwindcss/colors";
-import { fetchAppPostRideEvaluation } from "~/apiClient/apiComponents";
+import { fetchAppPostRideEvaluation } from "~/api/api-components";
 import { PinIcon } from "~/components/icon/pin";
 import { Price } from "~/components/modules/price/price";
 import { Button } from "~/components/primitives/button/button";

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

@@ -5,8 +5,8 @@ import {
   fetchAppGetNearbyChairs,
   fetchAppPostRides,
   fetchAppPostRidesEstimatedFare,
-} from "~/apiClient/apiComponents";
-import { Coordinate, RideStatus } from "~/apiClient/apiSchemas";
+} from "~/api/api-components";
+import { Coordinate, RideStatus } from "~/api/api-schemas";
 import { useGhostChairs } from "~/components/hooks/use-ghost-chairs";
 import { CampaignBanner } from "~/components/modules/campaign-banner/campaign-banner";
 import { LocationButton } from "~/components/modules/location-button/location-button";

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

@@ -1,9 +1,6 @@
 import type { MetaFunction } from "@remix-run/node";
 import { useEffect, useState } from "react";
-import {
-  AppGetRidesResponse,
-  fetchAppGetRides,
-} from "~/apiClient/apiComponents";
+import { AppGetRidesResponse, fetchAppGetRides } from "~/api/api-components";
 import { ChairIcon } from "~/components/icon/chair";
 import { DateText } from "~/components/modules/date-text/date-text";
 import { Price } from "~/components/modules/price/price";

frontend/app/routes/client_.register-payment/route.tsx

@@ -1,6 +1,6 @@
 import type { MetaFunction } from "@remix-run/node";
 import { ClientActionFunctionArgs, Form, redirect } from "@remix-run/react";
-import { fetchAppPostPaymentMethods } from "~/apiClient/apiComponents";
+import { fetchAppPostPaymentMethods } from "~/api/api-components";
 import { Button } from "~/components/primitives/button/button";
 import { TextInput } from "~/components/primitives/form/text";
 import { FormFrame } from "~/components/primitives/frame/form-frame";

frontend/app/routes/client_.register/route.tsx

@@ -6,7 +6,7 @@ import {
   redirect,
   useActionData,
 } from "@remix-run/react";
-import { fetchAppPostUsers } from "~/apiClient/apiComponents";
+import { fetchAppPostUsers } from "~/api/api-components";
 import { Button } from "~/components/primitives/button/button";
 import { DateInput } from "~/components/primitives/form/date";
 import { TextInput } from "~/components/primitives/form/text";

frontend/app/routes/owner.sales/route.tsx

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from "react";
 import {
   OwnerGetSalesResponse as OwnerSalesType,
   fetchOwnerGetSales,
-} from "~/apiClient/apiComponents";
+} from "~/api/api-components";
 import { ChairIcon } from "~/components/icon/chair";
 import { PriceText } from "~/components/modules/price-text/price-text";
 import { Price } from "~/components/modules/price/price";

frontend/app/routes/owner_.register/route.tsx

@@ -1,7 +1,7 @@
 import type { MetaFunction } from "@remix-run/node";
 import { Link, useNavigate } from "@remix-run/react";
 import { useState } from "react";
-import { fetchOwnerPostOwners } from "~/apiClient/apiComponents";
+import { fetchOwnerPostOwners } from "~/api/api-components";
 import { Button } from "~/components/primitives/button/button";
 import { TextInput } from "~/components/primitives/form/text";
 import { FormFrame } from "~/components/primitives/frame/form-frame";

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

@@ -1,6 +1,6 @@
 import type { MetaFunction } from "@remix-run/react";
 import { useEffect, useRef } from "react";
-import { fetchChairPostActivity } from "~/apiClient/apiComponents";
+import { fetchChairPostActivity } from "~/api/api-components";
 import { SimulatorChairDisplay } from "~/components/modules/simulator-display/simulator-chair-display";
 import { SimulatorConfigDisplay } from "~/components/modules/simulator-display/simulator-config-display";
 import { SmartPhone } from "~/components/primitives/smartphone/smartphone";

frontend/app/types.ts

@@ -1,9 +1,9 @@
-import { RideId } from "./apiClient/apiParameters";
+import { RideId } from "./api/api-parameters";
 import {
   Coordinate as ApiCoodinate,
   RideStatus,
   User,
-} from "./apiClient/apiSchemas";
+} from "./api/api-schemas";
 
 export type AccessToken = string;
 

frontend/openapi-codegen.config.ts

@@ -9,8 +9,9 @@ import {
   alternativeAPIURLString,
   alternativeURLExpression,
 } from "./api-url.mjs";
+import { ConfigBase } from "@openapi-codegen/typescript/lib/generators/types";
 
-const outputDir = "./app/apiClient";
+const outputDir = "./app/api";
 
 export default defineConfig({
   isucon: {
@@ -36,26 +37,28 @@ export default defineConfig({
         throw Error("he servers.url must have only one entry.");
       }
 
-      const filenamePrefix = "API";
       const contextServers = context.openAPIDocument.servers;
       context.openAPIDocument.servers = contextServers?.map((serverObject) => {
         return {
           ...serverObject,
           url: alternativeAPIURLString,
         };
       });
-      const { schemasFiles } = await generateSchemaTypes(context, {
-        filenamePrefix,
-      });
+
+      const configBase: ConfigBase = {
+        filenamePrefix: "api",
+        filenameCase: "kebab",
+      };
+      const { schemasFiles } = await generateSchemaTypes(context, configBase);
       await generateReactQueryComponents(context, {
-        filenamePrefix,
+        ...configBase,
         schemasFiles,
       });
 
       /**
        * fetch.responseのstatusを内包させる
        */
-      await rewriteFile("./app/apiClient/apiFetcher.ts", (content) => {
+      await rewriteFile("./app/api/api-fetcher.ts", (content) => {
         return content
           .replace(
             "return await response.json();",
@@ -84,7 +87,7 @@ export default defineConfig({
        * SSE通信などでは、自動生成のfetcherを利用しないため
        */
       await writeFile(
-        `${outputDir}/${filenamePrefix}BaseURL.ts`,
+        `${outputDir}/${configBase.filenamePrefix}-base-url.ts`,
         `export const apiBaseURL = ${alternativeURLExpression};\n`,
       );
     },

frontend/package.json

@@ -12,7 +12,7 @@
     "typecheck": "tsc",
     "fmtcheck": "prettier ./*.{cjs,ts,js} ./app --check",
     "fmt": "prettier ./*.{cjs,ts,js} ./app --write",
-    "codegen": "rm -rf ./app/apiClient && npx openapi-codegen gen isucon"
+    "codegen": "rm -rf ./app/api && npx openapi-codegen gen isucon"
   },
   "dependencies": {
     "@remix-run/node": "^2.11.1",

frontend/vite.config.ts

@@ -10,7 +10,7 @@ import {
   AppPostUsersRequestBody,
   ChairPostChairsRequestBody,
   OwnerPostOwnersRequestBody,
-} from "~/apiClient/apiComponents";
+} from "~/api/api-components";
 import { alternativeURLExpression } from "./api-url.mjs";
 
 const DEFAULT_HOSTNAME = "localhost";