mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-21 14:21:46 +00:00
Maurice
fc7d8b5d12
Brownfield strangler migration of the backend onto NestJS modules (auth, trips, days, places, assignments, packing, todo, budget, reservations, collab, files, photos, journey, share, settings, backup, oidc, oauth, admin, atlas, vacay, weather, airports, maps, categories, tags, notifications, system-notices) served through a per-prefix dispatcher, keeping the existing SQLite/better-sqlite3 DB and JWT httpOnly cookie auth, with behavioural parity for every route. Client: React 19 upgrade, "page = wiring container + data hook" pattern across all pages, per-domain Zustand stores bound to @trek/shared contracts, and decomposition of the large components (DayPlanSidebar, PackingListPanel, CollabNotes, FileManager, MemoriesPanel, PlacesSidebar, CollabChat, SystemNoticeModal, BudgetPanel, PlaceFormModal, ...) into focused render units backed by in-file hooks. Apply the shared global request pipeline (helmet/CSP, CORS, HSTS, forced HTTPS, the global MFA policy and request logging) to the NestJS instance as well, so a migrated route is protected identically to the legacy fallback rather than bypassing it.
58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
import React from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import PageShell from '../components/Layout/PageShell'
|
|
import { PageSpinner } from '../components/shared/Spinner'
|
|
import PhotoGallery from '../components/Photos/PhotoGallery'
|
|
import { ArrowLeft } from 'lucide-react'
|
|
import { useTranslation } from '../i18n'
|
|
import { usePhotos } from './photos/usePhotos'
|
|
|
|
export default function PhotosPage(): React.ReactElement {
|
|
const { t } = useTranslation()
|
|
// Page = wiring container: trip/days/places load, photo sync + handlers live in the hook.
|
|
const { tripId, navigate, trip, days, places, photos, isLoading, handleUpload, handleDelete, handleUpdate } = usePhotos()
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<PageSpinner
|
|
wrapperClassName="min-h-screen flex items-center justify-center bg-slate-50"
|
|
className="w-10 h-10 border-4 border-slate-200 border-t-slate-700"
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<PageShell className="bg-slate-50" navbar={{ tripTitle: trip?.name, tripId, showBack: true, onBack: () => navigate(`/trips/${tripId}`) }}>
|
|
<div className="max-w-7xl mx-auto px-4 py-6">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Link
|
|
to={`/trips/${tripId}`}
|
|
className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
{t('common.backToPlanning')}
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">{t('photos.title')}</h1>
|
|
<p className="text-gray-500 text-sm">{t('photos.subtitle', { count: photos.length, trip: trip?.name })}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<PhotoGallery
|
|
photos={photos}
|
|
onUpload={handleUpload}
|
|
onDelete={handleDelete}
|
|
onUpdate={handleUpdate}
|
|
places={places}
|
|
days={days}
|
|
tripId={tripId}
|
|
/>
|
|
</div>
|
|
</PageShell>
|
|
)
|
|
}
|