207a2013f3
- Multi-step wizard for listing creation (basic info, location, details, pricing, images) - Listing detail page with image gallery, property specs, seller/agent info, stats - Listings index page with filters (transaction type, property type) and pagination - Edit page with tab-based form (read-only until backend PATCH endpoint available) - Drag & drop image upload component with preview and multi-file support - Dashboard layout with navigation bar - New UI primitives: textarea, select, badge, tabs - Listings API client with typed endpoints matching backend contract - Zod validation schemas for all form steps - Status badges with Vietnamese labels for all listing states - Responsive design across all pages Co-Authored-By: Paperclip <noreply@paperclip.ing>
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
const API_BASE_URL = process.env['NEXT_PUBLIC_API_URL'] || 'http://localhost:3001';
|
|
|
|
export class ApiError extends Error {
|
|
constructor(
|
|
public status: number,
|
|
message: string,
|
|
) {
|
|
super(message);
|
|
this.name = 'ApiError';
|
|
}
|
|
}
|
|
|
|
type RequestOptions = Omit<RequestInit, 'body'> & {
|
|
body?: unknown;
|
|
};
|
|
|
|
async function request<T>(endpoint: string, options: RequestOptions = {}): Promise<T> {
|
|
const { body, headers, ...rest } = options;
|
|
|
|
const res = await fetch(`${API_BASE_URL}${endpoint}`, {
|
|
...rest,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
...headers,
|
|
},
|
|
body: body ? JSON.stringify(body) : undefined,
|
|
});
|
|
|
|
if (!res.ok) {
|
|
const error = await res.json().catch(() => ({ message: res.statusText }));
|
|
throw new ApiError(res.status, error.message || 'Request failed');
|
|
}
|
|
|
|
return res.json();
|
|
}
|
|
|
|
function authHeaders(token: string): HeadersInit {
|
|
return { Authorization: `Bearer ${token}` };
|
|
}
|
|
|
|
export const apiClient = {
|
|
get: <T>(endpoint: string, headers?: HeadersInit) =>
|
|
request<T>(endpoint, { method: 'GET', headers }),
|
|
|
|
post: <T>(endpoint: string, body?: unknown, headers?: HeadersInit) =>
|
|
request<T>(endpoint, { method: 'POST', body, headers }),
|
|
|
|
patch: <T>(endpoint: string, body?: unknown, headers?: HeadersInit) =>
|
|
request<T>(endpoint, { method: 'PATCH', body, headers }),
|
|
|
|
authGet: <T>(endpoint: string, token: string) =>
|
|
request<T>(endpoint, { method: 'GET', headers: authHeaders(token) }),
|
|
|
|
authPost: <T>(endpoint: string, token: string, body?: unknown) =>
|
|
request<T>(endpoint, { method: 'POST', body, headers: authHeaders(token) }),
|
|
|
|
authPatch: <T>(endpoint: string, token: string, body?: unknown) =>
|
|
request<T>(endpoint, { method: 'PATCH', body, headers: authHeaders(token) }),
|
|
};
|