feat: refactor project API interactions to use ProjectApiClient for improved consistency and error handling

Author: Marvin Zhang

packages/web/app/lib/api/project-api-client.ts

@@ -6,7 +6,7 @@
  * and response format processing.
  */
 
-import { ApiClient, ApiError } from './api-client.js';
+import { ApiClient, ApiError } from './api-client';
 import type { Project } from '@codervisor/devlog-core';
 
 /**

packages/web/app/projects/ProjectListPage.tsx

@@ -28,6 +28,7 @@ import {
 } from 'lucide-react';
 import { toast } from 'sonner';
 import { RealtimeEventType } from '@/lib';
+import { projectApiClient } from '@/lib/api';
 
 interface ProjectFormData {
   name: string;
@@ -67,19 +68,7 @@ export function ProjectListPage() {
     try {
       setCreating(true);
 
-      const response = await fetch('/api/projects', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(formData),
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to create project');
-      }
-
-      const newProject = await response.json();
+      const newProject = await projectApiClient.create(formData);
       toast.success(`Project "${newProject.name}" created successfully`);
 
       setIsModalVisible(false);

packages/web/app/stores/project-store.ts

@@ -2,7 +2,8 @@
 
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
-import { apiClient, debounce, handleApiError } from '@/lib';
+import { debounce, handleApiError } from '@/lib';
+import { projectApiClient } from '@/lib/api';
 import { Project } from '@codervisor/devlog-core';
 import { DataContext, getDefaultDataContext } from '@/stores/base';
 
@@ -46,7 +47,7 @@ export const useProjectStore = create<ProjectState>()(
             error: null,
           },
         }));
-        const currentProject = await apiClient.get<Project>(`/api/projects/${currentProjectName}`);
+        const currentProject = await projectApiClient.get(currentProjectName);
         set((state) => ({
           currentProjectContext: {
             ...state.currentProjectContext,
@@ -99,7 +100,7 @@ export const useProjectStore = create<ProjectState>()(
               error: null,
             },
           }));
-          const projectsList = await apiClient.get<Project[]>('/api/projects');
+          const projectsList = await projectApiClient.list();
           set((state) => ({
             projectsContext: {
               ...state.projectsContext,
@@ -141,7 +142,7 @@ export const useProjectStore = create<ProjectState>()(
 
       updateProject: async (name: string, updates: Partial<Project>) => {
         try {
-          const updatedProject = await apiClient.put<Project>(`/api/projects/${name}`, updates);
+          const updatedProject = await projectApiClient.update(name, updates);
 
           // Update current project if it's the one being updated
           const currentProjectName = get().currentProjectName;
@@ -184,7 +185,7 @@ export const useProjectStore = create<ProjectState>()(
 
       deleteProject: async (name: string) => {
         try {
-          await apiClient.delete(`/api/projects/${name}`);
+          await projectApiClient.delete(name);
 
           // Clear current project if it's the one being deleted
           const currentProjectName = get().currentProjectName;