mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-22 23:01:48 +00:00
fix(offline): cache accommodations, trip members, tags, and categories for full offline support
This commit is contained in:
@@ -1,5 +1,10 @@
|
|||||||
import Dexie, { type Table } from 'dexie';
|
import Dexie, { type Table } from 'dexie';
|
||||||
import type { Trip, Day, Place, PackingItem, TodoItem, BudgetItem, Reservation, TripFile } from '../types';
|
import type { Trip, Day, Place, PackingItem, TodoItem, BudgetItem, Reservation, TripFile, Accommodation, TripMember, Tag, Category } from '../types';
|
||||||
|
|
||||||
|
/** TripMember enriched with tripId so we can index by trip. */
|
||||||
|
export interface CachedTripMember extends TripMember {
|
||||||
|
tripId: number;
|
||||||
|
}
|
||||||
|
|
||||||
// ── Queue + sync types ────────────────────────────────────────────────────────
|
// ── Queue + sync types ────────────────────────────────────────────────────────
|
||||||
|
|
||||||
@@ -52,6 +57,10 @@ class TrekOfflineDb extends Dexie {
|
|||||||
budgetItems!: Table<BudgetItem, number>;
|
budgetItems!: Table<BudgetItem, number>;
|
||||||
reservations!: Table<Reservation, number>;
|
reservations!: Table<Reservation, number>;
|
||||||
tripFiles!: Table<TripFile, number>;
|
tripFiles!: Table<TripFile, number>;
|
||||||
|
accommodations!: Table<Accommodation, number>;
|
||||||
|
tripMembers!: Table<CachedTripMember, [number, number]>;
|
||||||
|
tags!: Table<Tag, number>;
|
||||||
|
categories!: Table<Category, number>;
|
||||||
mutationQueue!: Table<QueuedMutation, string>;
|
mutationQueue!: Table<QueuedMutation, string>;
|
||||||
syncMeta!: Table<SyncMeta, number>;
|
syncMeta!: Table<SyncMeta, number>;
|
||||||
blobCache!: Table<BlobCacheEntry, string>;
|
blobCache!: Table<BlobCacheEntry, string>;
|
||||||
@@ -72,6 +81,13 @@ class TrekOfflineDb extends Dexie {
|
|||||||
syncMeta: 'tripId',
|
syncMeta: 'tripId',
|
||||||
blobCache: 'url, cachedAt',
|
blobCache: 'url, cachedAt',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.version(2).stores({
|
||||||
|
accommodations: 'id, trip_id',
|
||||||
|
tripMembers: '[tripId+id], tripId',
|
||||||
|
tags: 'id',
|
||||||
|
categories: 'id',
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -111,6 +127,23 @@ export async function upsertTripFiles(files: TripFile[]): Promise<void> {
|
|||||||
await offlineDb.tripFiles.bulkPut(files);
|
await offlineDb.tripFiles.bulkPut(files);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function upsertAccommodations(items: Accommodation[]): Promise<void> {
|
||||||
|
await offlineDb.accommodations.bulkPut(items);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function upsertTripMembers(tripId: number, members: TripMember[]): Promise<void> {
|
||||||
|
const rows: CachedTripMember[] = members.map(m => ({ ...m, tripId }));
|
||||||
|
await offlineDb.tripMembers.bulkPut(rows);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function upsertTags(tags: Tag[]): Promise<void> {
|
||||||
|
await offlineDb.tags.bulkPut(tags);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function upsertCategories(categories: Category[]): Promise<void> {
|
||||||
|
await offlineDb.categories.bulkPut(categories);
|
||||||
|
}
|
||||||
|
|
||||||
export async function upsertSyncMeta(meta: SyncMeta): Promise<void> {
|
export async function upsertSyncMeta(meta: SyncMeta): Promise<void> {
|
||||||
await offlineDb.syncMeta.put(meta);
|
await offlineDb.syncMeta.put(meta);
|
||||||
}
|
}
|
||||||
@@ -129,6 +162,8 @@ export async function clearTripData(tripId: number): Promise<void> {
|
|||||||
offlineDb.budgetItems,
|
offlineDb.budgetItems,
|
||||||
offlineDb.reservations,
|
offlineDb.reservations,
|
||||||
offlineDb.tripFiles,
|
offlineDb.tripFiles,
|
||||||
|
offlineDb.accommodations,
|
||||||
|
offlineDb.tripMembers,
|
||||||
offlineDb.mutationQueue,
|
offlineDb.mutationQueue,
|
||||||
offlineDb.syncMeta,
|
offlineDb.syncMeta,
|
||||||
],
|
],
|
||||||
@@ -140,6 +175,8 @@ export async function clearTripData(tripId: number): Promise<void> {
|
|||||||
await offlineDb.budgetItems.where('trip_id').equals(tripId).delete();
|
await offlineDb.budgetItems.where('trip_id').equals(tripId).delete();
|
||||||
await offlineDb.reservations.where('trip_id').equals(tripId).delete();
|
await offlineDb.reservations.where('trip_id').equals(tripId).delete();
|
||||||
await offlineDb.tripFiles.where('trip_id').equals(tripId).delete();
|
await offlineDb.tripFiles.where('trip_id').equals(tripId).delete();
|
||||||
|
await offlineDb.accommodations.where('trip_id').equals(tripId).delete();
|
||||||
|
await offlineDb.tripMembers.where('tripId').equals(tripId).delete();
|
||||||
await offlineDb.mutationQueue.where('tripId').equals(tripId).delete();
|
await offlineDb.mutationQueue.where('tripId').equals(tripId).delete();
|
||||||
await offlineDb.syncMeta.where('tripId').equals(tripId).delete();
|
await offlineDb.syncMeta.where('tripId').equals(tripId).delete();
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -26,6 +26,8 @@ import { useToast } from '../components/shared/Toast'
|
|||||||
import { Map, X, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Ticket, PackageCheck, Wallet, FolderOpen, Users } from 'lucide-react'
|
import { Map, X, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Ticket, PackageCheck, Wallet, FolderOpen, Users } from 'lucide-react'
|
||||||
import { useTranslation } from '../i18n'
|
import { useTranslation } from '../i18n'
|
||||||
import { addonsApi, accommodationsApi, authApi, tripsApi, assignmentsApi, mapsApi } from '../api/client'
|
import { addonsApi, accommodationsApi, authApi, tripsApi, assignmentsApi, mapsApi } from '../api/client'
|
||||||
|
import { accommodationRepo } from '../repo/accommodationRepo'
|
||||||
|
import { offlineDb } from '../db/offlineDb'
|
||||||
import ConfirmDialog from '../components/shared/ConfirmDialog'
|
import ConfirmDialog from '../components/shared/ConfirmDialog'
|
||||||
import { useResizablePanels } from '../hooks/useResizablePanels'
|
import { useResizablePanels } from '../hooks/useResizablePanels'
|
||||||
import { useTripWebSocket } from '../hooks/useTripWebSocket'
|
import { useTripWebSocket } from '../hooks/useTripWebSocket'
|
||||||
@@ -104,7 +106,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
|
|||||||
|
|
||||||
const loadAccommodations = useCallback(() => {
|
const loadAccommodations = useCallback(() => {
|
||||||
if (tripId) {
|
if (tripId) {
|
||||||
accommodationsApi.list(tripId).then(d => setTripAccommodations(d.accommodations || [])).catch(() => {})
|
accommodationRepo.list(tripId).then(d => setTripAccommodations(d.accommodations || [])).catch(() => {})
|
||||||
tripActions.loadReservations(tripId)
|
tripActions.loadReservations(tripId)
|
||||||
}
|
}
|
||||||
}, [tripId])
|
}, [tripId])
|
||||||
@@ -192,11 +194,16 @@ export default function TripPlannerPage(): React.ReactElement | null {
|
|||||||
tripActions.loadTrip(tripId).catch(() => { toast.error(t('trip.toast.loadError')); navigate('/dashboard') })
|
tripActions.loadTrip(tripId).catch(() => { toast.error(t('trip.toast.loadError')); navigate('/dashboard') })
|
||||||
tripActions.loadFiles(tripId)
|
tripActions.loadFiles(tripId)
|
||||||
loadAccommodations()
|
loadAccommodations()
|
||||||
tripsApi.getMembers(tripId).then(d => {
|
if (!navigator.onLine) {
|
||||||
// Combine owner + members into one list
|
offlineDb.tripMembers.where('tripId').equals(Number(tripId)).toArray()
|
||||||
const all = [d.owner, ...(d.members || [])].filter(Boolean)
|
.then(rows => setTripMembers(rows))
|
||||||
setTripMembers(all)
|
.catch(() => {})
|
||||||
}).catch(() => {})
|
} else {
|
||||||
|
tripsApi.getMembers(tripId).then(d => {
|
||||||
|
const all = [d.owner, ...(d.members || [])].filter(Boolean)
|
||||||
|
setTripMembers(all)
|
||||||
|
}).catch(() => {})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, [tripId])
|
}, [tripId])
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import { accommodationsApi } from '../api/client'
|
||||||
|
import { offlineDb, upsertAccommodations } from '../db/offlineDb'
|
||||||
|
import type { Accommodation } from '../types'
|
||||||
|
|
||||||
|
export const accommodationRepo = {
|
||||||
|
async list(tripId: number | string): Promise<{ accommodations: Accommodation[] }> {
|
||||||
|
if (!navigator.onLine) {
|
||||||
|
const accommodations = await offlineDb.accommodations
|
||||||
|
.where('trip_id').equals(Number(tripId)).toArray()
|
||||||
|
return { accommodations }
|
||||||
|
}
|
||||||
|
const result = await accommodationsApi.list(tripId)
|
||||||
|
upsertAccommodations(result.accommodations || []).catch(() => {})
|
||||||
|
return result
|
||||||
|
},
|
||||||
|
}
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
import { create } from 'zustand'
|
import { create } from 'zustand'
|
||||||
import type { StoreApi } from 'zustand'
|
import type { StoreApi } from 'zustand'
|
||||||
import { tripsApi, tagsApi, categoriesApi } from '../api/client'
|
import { tripsApi, tagsApi, categoriesApi } from '../api/client'
|
||||||
|
import { offlineDb } from '../db/offlineDb'
|
||||||
import { tripRepo } from '../repo/tripRepo'
|
import { tripRepo } from '../repo/tripRepo'
|
||||||
import { dayRepo } from '../repo/dayRepo'
|
import { dayRepo } from '../repo/dayRepo'
|
||||||
import { placeRepo } from '../repo/placeRepo'
|
import { placeRepo } from '../repo/placeRepo'
|
||||||
@@ -94,8 +95,12 @@ export const useTripStore = create<TripStoreState>((set, get) => ({
|
|||||||
placeRepo.list(tripId),
|
placeRepo.list(tripId),
|
||||||
packingRepo.list(tripId),
|
packingRepo.list(tripId),
|
||||||
todoRepo.list(tripId),
|
todoRepo.list(tripId),
|
||||||
tagsApi.list().catch(() => ({ tags: [] })),
|
navigator.onLine
|
||||||
categoriesApi.list().catch(() => ({ categories: [] })),
|
? tagsApi.list().catch(() => offlineDb.tags.toArray().then(tags => ({ tags })))
|
||||||
|
: offlineDb.tags.toArray().then(tags => ({ tags })),
|
||||||
|
navigator.onLine
|
||||||
|
? categoriesApi.list().catch(() => offlineDb.categories.toArray().then(categories => ({ categories })))
|
||||||
|
: offlineDb.categories.toArray().then(categories => ({ categories })),
|
||||||
])
|
])
|
||||||
|
|
||||||
const assignmentsMap: AssignmentsMap = {}
|
const assignmentsMap: AssignmentsMap = {}
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
* - trip list refresh (DashboardPage)
|
* - trip list refresh (DashboardPage)
|
||||||
* - WS reconnect (phase 7)
|
* - WS reconnect (phase 7)
|
||||||
*/
|
*/
|
||||||
import { tripsApi } from '../api/client'
|
import { tripsApi, tagsApi, categoriesApi } from '../api/client'
|
||||||
import {
|
import {
|
||||||
offlineDb,
|
offlineDb,
|
||||||
upsertTrip,
|
upsertTrip,
|
||||||
@@ -21,12 +21,16 @@ import {
|
|||||||
upsertBudgetItems,
|
upsertBudgetItems,
|
||||||
upsertReservations,
|
upsertReservations,
|
||||||
upsertTripFiles,
|
upsertTripFiles,
|
||||||
|
upsertAccommodations,
|
||||||
|
upsertTripMembers,
|
||||||
|
upsertTags,
|
||||||
|
upsertCategories,
|
||||||
upsertSyncMeta,
|
upsertSyncMeta,
|
||||||
clearTripData,
|
clearTripData,
|
||||||
} from '../db/offlineDb'
|
} from '../db/offlineDb'
|
||||||
import { prefetchTilesForTrip } from './tilePrefetcher'
|
import { prefetchTilesForTrip } from './tilePrefetcher'
|
||||||
import { useSettingsStore } from '../store/settingsStore'
|
import { useSettingsStore } from '../store/settingsStore'
|
||||||
import type { Trip, Day, Place, PackingItem, TodoItem, BudgetItem, Reservation, TripFile } from '../types'
|
import type { Trip, Day, Place, PackingItem, TodoItem, BudgetItem, Reservation, TripFile, Accommodation, TripMember } from '../types'
|
||||||
|
|
||||||
// ── Types ─────────────────────────────────────────────────────────────────────
|
// ── Types ─────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
@@ -39,6 +43,8 @@ interface TripBundle {
|
|||||||
budgetItems: BudgetItem[]
|
budgetItems: BudgetItem[]
|
||||||
reservations: Reservation[]
|
reservations: Reservation[]
|
||||||
files: TripFile[]
|
files: TripFile[]
|
||||||
|
accommodations: Accommodation[]
|
||||||
|
members: TripMember[]
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── Helpers ───────────────────────────────────────────────────────────────────
|
// ── Helpers ───────────────────────────────────────────────────────────────────
|
||||||
@@ -77,6 +83,8 @@ async function syncTrip(tripId: number): Promise<void> {
|
|||||||
await upsertBudgetItems(bundle.budgetItems)
|
await upsertBudgetItems(bundle.budgetItems)
|
||||||
await upsertReservations(bundle.reservations)
|
await upsertReservations(bundle.reservations)
|
||||||
await upsertTripFiles(bundle.files)
|
await upsertTripFiles(bundle.files)
|
||||||
|
await upsertAccommodations(bundle.accommodations || [])
|
||||||
|
await upsertTripMembers(tripId, bundle.members || [])
|
||||||
await upsertSyncMeta({
|
await upsertSyncMeta({
|
||||||
tripId,
|
tripId,
|
||||||
lastSyncedAt: Date.now(),
|
lastSyncedAt: Date.now(),
|
||||||
@@ -145,6 +153,10 @@ export const tripSyncManager = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Cache global user data (tags + categories) — fire-and-forget
|
||||||
|
tagsApi.list().then(d => upsertTags(d.tags)).catch(() => {})
|
||||||
|
categoriesApi.list().then(d => upsertCategories(d.categories)).catch(() => {})
|
||||||
|
|
||||||
// Cache file blobs + map tiles in background (don't block syncAll)
|
// Cache file blobs + map tiles in background (don't block syncAll)
|
||||||
const tileUrl = useSettingsStore.getState().settings.map_tile_url || undefined
|
const tileUrl = useSettingsStore.getState().settings.map_tile_url || undefined
|
||||||
for (const trip of toSync) {
|
for (const trip of toSync) {
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ import {
|
|||||||
ValidationError,
|
ValidationError,
|
||||||
TRIP_SELECT,
|
TRIP_SELECT,
|
||||||
} from '../services/tripService';
|
} from '../services/tripService';
|
||||||
import { listDays } from '../services/dayService';
|
import { listDays, listAccommodations } from '../services/dayService';
|
||||||
import { listPlaces } from '../services/placeService';
|
import { listPlaces } from '../services/placeService';
|
||||||
import { listItems as listPackingItems } from '../services/packingService';
|
import { listItems as listPackingItems } from '../services/packingService';
|
||||||
import { listItems as listTodoItems } from '../services/todoService';
|
import { listItems as listTodoItems } from '../services/todoService';
|
||||||
@@ -318,6 +318,9 @@ router.get('/:id/bundle', authenticate, (req: Request, res: Response) => {
|
|||||||
const budgetItems = listBudgetItems(tripId);
|
const budgetItems = listBudgetItems(tripId);
|
||||||
const reservations = listReservations(tripId);
|
const reservations = listReservations(tripId);
|
||||||
const files = listFiles(tripId, false);
|
const files = listFiles(tripId, false);
|
||||||
|
const accommodations = listAccommodations(tripId);
|
||||||
|
const { owner, members } = listMembers(tripId, trip.user_id);
|
||||||
|
const allMembers = [owner, ...(members || [])].filter(Boolean);
|
||||||
|
|
||||||
res.json({
|
res.json({
|
||||||
trip,
|
trip,
|
||||||
@@ -328,6 +331,8 @@ router.get('/:id/bundle', authenticate, (req: Request, res: Response) => {
|
|||||||
budgetItems,
|
budgetItems,
|
||||||
reservations,
|
reservations,
|
||||||
files,
|
files,
|
||||||
|
accommodations,
|
||||||
|
members: allMembers,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user