Feat(web): Extracting public APIs

Author: Minsecrus

apps/web/src/auth/authApi.ts

@@ -1,9 +1,6 @@
-export type ApiErrorPayload = {
-  error?: string;
-  code?: string;
-  message?: string;
-  details?: unknown;
-};
+import { apiRequest, type ApiErrorPayload, ApiError } from '@/infra/api';
+
+export { ApiError, type ApiErrorPayload };
 
 export type PublicUser = {
   id: string;
@@ -19,63 +16,10 @@ export type AuthResponse = {
   expiresAt: string;
 };
 
-export class ApiError extends Error {
-  status: number;
-  code?: string;
-  details?: unknown;
-
-  constructor(
-    message: string,
-    status: number,
-    code?: string,
-    details?: unknown
-  ) {
-    super(message);
-    this.name = 'ApiError';
-    this.status = status;
-    this.code = code;
-    this.details = details;
-  }
-}
-
-const resolveBaseUrl = () => {
-  const base = (import.meta as ImportMeta & { env?: Record<string, string> })
-    .env?.VITE_API_BASE;
-  if (base && base.trim()) {
-    return base.replace(/\/+$/, '');
-  }
-  return 'http://localhost:8080';
-};
-
-const API_ROOT = `${resolveBaseUrl()}/api`;
-
 const request = async <T>(
   path: string,
   options: RequestInit = {}
-): Promise<T> => {
-  const response = await fetch(`${API_ROOT}${path}`, options);
-  if (response.status === 204) {
-    return undefined as T;
-  }
-  const contentType = response.headers.get('content-type') || '';
-  const isJson = contentType.includes('application/json');
-  const payload = isJson ? await response.json() : await response.text();
-  if (!response.ok) {
-    const apiPayload = payload as ApiErrorPayload;
-    const message =
-      (typeof apiPayload === 'object' && apiPayload?.message) ||
-      response.statusText ||
-      'Request failed.';
-    const code = typeof apiPayload === 'object' ? apiPayload?.error : undefined;
-    throw new ApiError(
-      message,
-      response.status,
-      apiPayload?.code || code,
-      apiPayload?.details
-    );
-  }
-  return payload as T;
-};
+): Promise<T> => apiRequest<T>(path, options);
 
 export const authApi = {
   register: async (data: {

apps/web/src/community/communityApi.ts

@@ -1,4 +1,4 @@
-import { ApiError } from '@/auth/authApi';
+import { apiRequest } from '@/infra/api';
 
 export type CommunityResourceType = 'project' | 'component' | 'nodegraph';
 
@@ -36,53 +36,12 @@ type ListProjectsOptions = {
   pageSize?: number;
 };
 
-const resolveBaseUrl = () => {
-  const base = (import.meta as ImportMeta & { env?: Record<string, string> })
-    .env?.VITE_API_BASE;
-  if (base && base.trim()) {
-    return base.replace(/\/+$/, '');
-  }
-  return 'http://localhost:8080';
-};
-
-const API_ROOT = `${resolveBaseUrl()}/api`;
+const JSON_HEADERS = {
+  'Content-Type': 'application/json',
+} as const;
 
-const request = async <T>(path: string): Promise<T> => {
-  const response = await fetch(`${API_ROOT}${path}`, {
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-  if (response.status === 204) {
-    return undefined as T;
-  }
-  const contentType = response.headers.get('content-type') || '';
-  const isJson = contentType.includes('application/json');
-  const payload = isJson ? await response.json() : await response.text();
-  if (!response.ok) {
-    const message =
-      typeof payload === 'object' && payload && 'message' in payload
-        ? String((payload as { message?: string }).message || '')
-        : response.statusText || 'Request failed.';
-    const code =
-      typeof payload === 'object' && payload && 'code' in payload
-        ? String((payload as { code?: string }).code || '')
-        : typeof payload === 'object' && payload && 'error' in payload
-          ? String((payload as { error?: string }).error || '')
-          : undefined;
-    const details =
-      typeof payload === 'object' && payload && 'details' in payload
-        ? (payload as { details?: unknown }).details
-        : undefined;
-    throw new ApiError(
-      message || 'Request failed.',
-      response.status,
-      code,
-      details
-    );
-  }
-  return payload as T;
-};
+const request = async <T>(path: string): Promise<T> =>
+  apiRequest<T>(path, { defaultHeaders: JSON_HEADERS });
 
 const buildListQuery = (options: ListProjectsOptions) => {
   const params = new URLSearchParams();

apps/web/src/editor/Editor.tsx

@@ -7,6 +7,7 @@ import { mountGraphExecutionBridge } from '@/core/executor/executor';
 import { editorApi } from './editorApi';
 import { useEditorStore } from './store/useEditorStore';
 import { useSettingsStore } from './store/useSettingsStore';
+import { isEditableTarget, useWindowKeydown } from '@/shortcuts';
 
 function Editor() {
   const { projectId } = useParams();
@@ -96,46 +97,33 @@ function Editor() {
 
   useEffect(() => mountGraphExecutionBridge(), []);
 
-  useEffect(() => {
-    if (!projectId) return;
-
-    const isEditableTarget = (target: EventTarget | null) => {
-      if (!(target instanceof HTMLElement)) return false;
-      if (target.isContentEditable) return true;
-      const tagName = target.tagName.toLowerCase();
-      return (
-        tagName === 'input' || tagName === 'textarea' || tagName === 'select'
-      );
-    };
-
-    const routeByDigit: Record<string, string> = {
-      '1': `/editor/project/${projectId}`,
-      '2': `/editor/project/${projectId}/blueprint`,
-      '3': `/editor/project/${projectId}/nodegraph`,
-      '4': `/editor/project/${projectId}/animation`,
-      '5': `/editor/project/${projectId}/component`,
-      '6': `/editor/project/${projectId}/resources`,
-      '7': `/editor/project/${projectId}/test`,
-      '8': `/editor/project/${projectId}/export`,
-      '9': `/editor/project/${projectId}/deployment`,
-    };
-
-    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+  useWindowKeydown(
+    (event) => {
+      if (!projectId) return;
       if (event.defaultPrevented) return;
       if (isEditableTarget(event.target)) return;
       if (!event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
         return;
       }
+      const routeByDigit: Record<string, string> = {
+        '1': `/editor/project/${projectId}`,
+        '2': `/editor/project/${projectId}/blueprint`,
+        '3': `/editor/project/${projectId}/nodegraph`,
+        '4': `/editor/project/${projectId}/animation`,
+        '5': `/editor/project/${projectId}/component`,
+        '6': `/editor/project/${projectId}/resources`,
+        '7': `/editor/project/${projectId}/test`,
+        '8': `/editor/project/${projectId}/export`,
+        '9': `/editor/project/${projectId}/deployment`,
+      };
       const nextPath = routeByDigit[event.key];
       if (!nextPath) return;
       if (location.pathname === nextPath) return;
       event.preventDefault();
       navigate(nextPath);
-    };
-
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [location.pathname, navigate, projectId]);
+    },
+    { enabled: Boolean(projectId) }
+  );
 
   return (
     <div className="flex min-h-screen max-h-screen flex-row bg-[linear-gradient(120deg,var(--color-0)_20%,var(--color-1)_100%)]">

apps/web/src/editor/EditorBar/EditorBar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdrIcon, MdrIconLink } from '@mdr/ui';
 import { useLocation, useNavigate, useParams } from 'react-router';
@@ -17,6 +17,7 @@ import {
   Home,
 } from 'lucide-react';
 import { EditorBarExitModal } from './EditorBarExitModal';
+import { hasModifierKey, useWindowKeydown } from '@/shortcuts';
 
 function EditorBar() {
   const { t } = useTranslation(['editor', 'routes']);
@@ -37,19 +38,15 @@ function EditorBar() {
     'flex flex-col items-center gap-[14px] [&_.MdrIconLink]:!text-[var(--color-9)] [&_.MdrIconLink:hover]:!text-[var(--color-10)]';
   const isBlueprintRoute = location.pathname.includes('/blueprint');
 
-  useEffect(() => {
-    if (!isBlueprintRoute) return;
-    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+  useWindowKeydown(
+    (event) => {
       if (event.defaultPrevented) return;
       if (event.key !== 'Escape') return;
-      if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
-        return;
-      }
+      if (hasModifierKey(event)) return;
       setExitOpen(true);
-    };
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [isBlueprintRoute]);
+    },
+    { enabled: isBlueprintRoute }
+  );
 
   return (
     <>

apps/web/src/editor/EditorBar/EditorBarExitModal.tsx

@@ -1,6 +1,6 @@
-import { useEffect } from 'react';
 import { CornerDownLeft, Delete } from 'lucide-react';
 import { MdrButton } from '@mdr/ui';
+import { hasModifierKey, useWindowKeydown } from '@/shortcuts';
 
 type EditorBarExitModalProps = {
   isOpen: boolean;
@@ -21,13 +21,10 @@ export function EditorBarExitModal({
   onClose,
   onConfirm,
 }: EditorBarExitModalProps) {
-  useEffect(() => {
-    if (!isOpen) return;
-    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+  useWindowKeydown(
+    (event) => {
       if (event.defaultPrevented) return;
-      if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
-        return;
-      }
+      if (hasModifierKey(event)) return;
       if (event.key === 'Backspace' || event.key === 'Escape') {
         event.preventDefault();
         onClose();
@@ -37,10 +34,9 @@ export function EditorBarExitModal({
         event.preventDefault();
         onConfirm();
       }
-    };
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [isOpen, onClose, onConfirm]);
+    },
+    { enabled: isOpen }
+  );
 
   if (!isOpen) return null;
 

apps/web/src/editor/EditorHome.tsx

@@ -20,6 +20,7 @@ import NewResourceModal from './features/newfile/NewResourceModal';
 import { editorApi, type ProjectSummary } from './editorApi';
 import { useAuthStore } from '@/auth/useAuthStore';
 import { useEditorStore } from './store/useEditorStore';
+import { hasModifierKey, useWindowKeydown } from '@/shortcuts';
 
 function EditorTipsRandom() {
   const { t } = useTranslation('editor');
@@ -315,20 +316,16 @@ function EditorHome() {
   const setProjectInStore = useEditorStore((state) => state.setProject);
   const removeProjectInStore = useEditorStore((state) => state.removeProject);
 
-  useEffect(() => {
-    if (isResourceModalOpen || isExitModalOpen) return;
-    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+  useWindowKeydown(
+    (event) => {
       if (event.defaultPrevented) return;
       if (event.key !== 'Escape') return;
-      if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
-        return;
-      }
+      if (hasModifierKey(event)) return;
       event.preventDefault();
       setExitModalOpen(true);
-    };
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [isResourceModalOpen, isExitModalOpen]);
+    },
+    { enabled: !isResourceModalOpen && !isExitModalOpen }
+  );
 
   useEffect(() => {
     if (!token) {