Files
goodgo-platform/apps/web/lib/du-an-server.ts
Ho Ngoc Hai 0fc6516880
Some checks failed
Security Scanning / Trivy Filesystem Scan (push) Failing after 31s
Security Scanning / Security Gate (push) Failing after 2s
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 13s
Deploy / Build API Image (push) Failing after 36s
Deploy / Build Web Image (push) Failing after 12s
Deploy / Build AI Services Image (push) Failing after 12s
Security Scanning / Trivy Scan — API Image (push) Failing after 1m5s
CI / E2E Tests (push) Has been skipped
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 1m24s
E2E Tests / Playwright E2E (push) Failing after 20s
Security Scanning / Dependency Audit (pnpm) (push) Failing after 3s
Deploy / Deploy to Production (push) Has been cancelled
Deploy / Deploy to Staging (push) Has been cancelled
Deploy / Smoke Test Staging (push) Has been cancelled
Deploy / Rollback Staging (push) Has been cancelled
Deploy / Smoke Test Production (push) Has been cancelled
Deploy / Rollback Production (push) Has been cancelled
Security Scanning / Trivy Scan — AI Services Image (push) Has been cancelled
Security Scanning / Trivy Scan — Web Image (push) Has been cancelled
feat(maps): dark/light Mapbox theme + fix empty Image src & missing keys
Mapbox theming
--------------
- New hook `lib/mapbox-style.ts` returning streets-v12 (light) or
  dark-v11 (dark) from the app's useTheme().
- Six map components now initialise with the themed style and
  `map.setStyle(...)` on theme change: project-map, park-map,
  listing-map, district-heatmap (plus re-adding its heatmap source
  after style.load), neighborhood-poi-map, valuation/comparables-map.
- Marker / popup DOM styles swapped from hard-coded white/#666/#green
  to shadcn CSS tokens (--card, --card-foreground, --muted-foreground,
  --primary, --border). Global Mapbox popup + control + attribution
  skins added in app/globals.css.
- POI filter pills on neighborhood-poi-map were hard-coded `bg-white`
  which rendered same-colour text on white in dark mode — switched to
  `bg-card`/`bg-card/60` for proper contrast.
- Extend the MockMap in comparables-map.spec.tsx with setStyle/on
  so the new theme-sync effect doesn't blow up in tests.

Detail client normaliser (du-an-server)
---------------------------------------
- Project media from the backend is a `string[]` (raw URLs) or richer
  `{url,...}` objects. Handle both shapes and drop entries without
  a URL so we never feed "" to <Image src>.
- Amenities are `string[]` in the DB but the frontend type expects
  `{id,name,icon,category}`; normalise strings into objects so the
  AmenitiesTab has stable keys and a displayable name.

Resolves three classes of runtime warnings on /du-an/<slug>:
"Image is missing required 'src' property", "ReactDOM.preload ...
empty href", and "Each child in a list should have a unique 'key'
prop" (AmenitiesTab).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-19 14:12:28 +07:00

184 lines
7.1 KiB
TypeScript

/**
* Server-side project data fetching for Next.js Server Components.
*
* Uses `fetch` directly (no browser-only helpers) so it can run
* inside `generateMetadata`, `generateStaticParams`, `sitemap()`, etc.
*/
import type {
ProjectDetail,
ProjectMedia,
ProjectSummary,
PaginatedResult,
} from './du-an-api';
const API_BASE_URL = process.env['NEXT_PUBLIC_API_URL'] || 'http://localhost:3001/api/v1';
/**
* The backend detail endpoint currently returns a thin projection: the
* repository's raw row run through `shapeProject`, which strips `media` and
* omits the richer fields (`blocks`, `amenities`, `priceRanges`, …) that the
* frontend detail page consumes.
*
* Until the backend detail endpoint is enriched, normalize the payload here
* so the UI never crashes on missing arrays or mis-keyed developer fields.
*/
function normalizeProjectDetail(raw: unknown): ProjectDetail | null {
if (!raw || typeof raw !== 'object') return null;
const r = raw as Record<string, unknown>;
// Developer: backend currently returns `{ id, name, logo }`; frontend expects
// `{ id, name, logoUrl, totalProjects }`.
const rawDeveloper = (r['developer'] ?? {}) as Record<string, unknown>;
const developer = {
id: typeof rawDeveloper['id'] === 'string' ? rawDeveloper['id'] : '',
name: typeof rawDeveloper['name'] === 'string' ? rawDeveloper['name'] : '',
logoUrl:
(rawDeveloper['logoUrl'] as string | null | undefined) ??
(rawDeveloper['logo'] as string | null | undefined) ??
null,
totalProjects:
typeof rawDeveloper['totalProjects'] === 'number' ? rawDeveloper['totalProjects'] : 0,
};
// Media: may be absent (stripped by backend), or present as a raw JSON array.
// Backend returns media as either `string[]` (raw URLs from the seed JSON
// column) or `{ id, url, type, order, caption }[]` once richer data lands.
// Handle both shapes and drop entries without a resolvable URL so we never
// feed an empty string to `<Image src>`.
const rawMediaArr = Array.isArray(r['media']) ? (r['media'] as unknown[]) : [];
const media: ProjectMedia[] = rawMediaArr
.map((entry, idx): ProjectMedia | null => {
if (typeof entry === 'string') {
if (!entry) return null;
return { id: `media-${idx}`, url: entry, type: 'image', order: idx, caption: null };
}
if (entry && typeof entry === 'object') {
const m = entry as Record<string, unknown>;
const url = typeof m['url'] === 'string' ? m['url'] : '';
if (!url) return null;
return {
id: typeof m['id'] === 'string' ? m['id'] : `media-${idx}`,
url,
type:
m['type'] === 'video' ||
m['type'] === 'master_plan' ||
m['type'] === 'document' ||
m['type'] === 'image'
? (m['type'] as ProjectMedia['type'])
: 'image',
order: typeof m['order'] === 'number' ? m['order'] : idx,
caption: typeof m['caption'] === 'string' ? m['caption'] : null,
};
}
return null;
})
.filter((m): m is ProjectMedia => m !== null);
const asArray = <T>(v: unknown): T[] => (Array.isArray(v) ? (v as T[]) : []);
// Amenities in the DB are a JSON string[]; the frontend type expects
// `{ id, name, icon, category }`. Normalize strings into objects so the
// AmenitiesTab render has stable keys + a displayable name.
const rawAmenities = Array.isArray(r['amenities']) ? (r['amenities'] as unknown[]) : [];
const amenities = rawAmenities.map((a, idx) => {
if (typeof a === 'string') {
return { id: `amenity-${idx}`, name: a, icon: '', category: 'Tiện ích' };
}
if (a && typeof a === 'object') {
const o = a as Record<string, unknown>;
return {
id: typeof o['id'] === 'string' ? o['id'] : `amenity-${idx}`,
name: typeof o['name'] === 'string' ? o['name'] : '',
icon: typeof o['icon'] === 'string' ? o['icon'] : '',
category: typeof o['category'] === 'string' ? o['category'] : 'Tiện ích',
};
}
return { id: `amenity-${idx}`, name: '', icon: '', category: 'Tiện ích' };
});
return {
id: String(r['id'] ?? ''),
slug: String(r['slug'] ?? ''),
name: String(r['name'] ?? ''),
status: (r['status'] as ProjectDetail['status']) ?? 'PLANNING',
developer,
city: String(r['city'] ?? ''),
district: String(r['district'] ?? ''),
address: String(r['address'] ?? ''),
latitude: typeof r['latitude'] === 'number' ? (r['latitude'] as number) : null,
longitude: typeof r['longitude'] === 'number' ? (r['longitude'] as number) : null,
thumbnailUrl:
(r['thumbnailUrl'] as string | null | undefined) ??
media[0]?.url ??
null,
totalArea: typeof r['totalArea'] === 'number' ? (r['totalArea'] as number) : 0,
totalUnits: typeof r['totalUnits'] === 'number' ? (r['totalUnits'] as number) : 0,
propertyTypes: asArray<ProjectDetail['propertyTypes'][number]>(r['propertyTypes']),
minPrice: (r['minPrice'] as string | null | undefined) ?? null,
maxPrice: (r['maxPrice'] as string | null | undefined) ?? null,
completionDate: (r['completionDate'] as string | null | undefined) ?? null,
createdAt: String(r['createdAt'] ?? new Date().toISOString()),
description: typeof r['description'] === 'string' ? (r['description'] as string) : '',
media,
blocks: asArray(r['blocks']),
amenities,
priceRanges: asArray(r['priceRanges']),
priceHistory: asArray(r['priceHistory']),
neighborhoodScores: asArray(r['neighborhoodScores']),
pois: asArray(r['pois']),
documents: asArray(r['documents']),
linkedListingCount:
typeof r['linkedListingCount'] === 'number' ? (r['linkedListingCount'] as number) : 0,
};
}
/**
* Fetch a single project by slug — server-only.
* Returns `null` when the project is not found (404) so callers can `notFound()`.
*/
export async function fetchProjectBySlug(slug: string): Promise<ProjectDetail | null> {
try {
const res = await fetch(`${API_BASE_URL}/projects/${slug}`, {
next: { revalidate: 300 }, // ISR: re-validate every 5 min
});
if (!res.ok) return null;
const raw = (await res.json()) as unknown;
return normalizeProjectDetail(raw);
} catch {
return null;
}
}
/**
* Fetch active projects — server-only, used by the dynamic sitemap.
*/
export async function fetchProjects(params: {
page?: number;
limit?: number;
city?: string;
status?: string;
}): Promise<PaginatedResult<ProjectSummary>> {
const query = new URLSearchParams({
page: String(params.page ?? 1),
limit: String(params.limit ?? 100),
});
if (params.city) query.append('city', params.city);
if (params.status) query.append('status', params.status);
try {
const res = await fetch(`${API_BASE_URL}/projects?${query}`, {
next: { revalidate: 3600 }, // re-validate every hour for sitemap
});
if (!res.ok) {
return { data: [], total: 0, page: 1, limit: 100, totalPages: 0 };
}
return (await res.json()) as PaginatedResult<ProjectSummary>;
} catch {
return { data: [], total: 0, page: 1, limit: 100, totalPages: 0 };
}
}