Files
TREK/client/src/store/inAppNotificationStore.ts
T
Maurice 31859651d7 feat(help): rewrite the help center for v5 with a Tours section, new pictures in every language, and fix the tour planner bugs it surfaced
Every help screen checked against the v5 redesign. Tours is documented for
the first time, as a screen of its own with twelve screens under it, and
notifications get help of their own. All pictures are taken again on a
realistic demo trip, with short loops where a still cannot show the motion.
The English is plain and every language is written naturally rather than
word for word.

The switcher shows two levels at most, a screen's overview lists its
sub-screens as cards above its guides, each wiki page is linked once, and
the help sidebar is wider.

Fixes found along the way: Save to Collection keeps a tour's route, a track
dropped on the places column opens the Tours import, tour Share on desktop,
the unsaved tour draft lives on the account, a route click no longer adds
an end point, Trip places leaves the trip's tours out, Escape closes a
stage's day menu, confirms before destructive deletes, DWD warnings sharing
one id kept apart, a booking's date moves with it, and smaller fixes across
notifications, bookings, the day plan, stays, Atlas, Collections, Vacay and
the admin screens.
2026-10-22 22:29:35 +02:00

215 lines
7.2 KiB
TypeScript

import { create } from 'zustand'
import { inAppNotificationsApi } from '../api/client'
// The server contract (@trek/shared `inAppListResultSchema`) deliberately keeps
// each notification row as an open record — the registry-derived shape varies by
// type. This is the client's structured view of that row; the list/unread-count
// responses themselves are now typed + DEV-validated via inAppNotificationsApi.
export interface InAppNotification {
id: number
type: 'simple' | 'boolean' | 'navigate'
scope: 'trip' | 'user' | 'admin'
target: number
sender_id: number | null
sender_username: string | null
sender_avatar: string | null
recipient_id: number
title_key: string
title_params: Record<string, string>
text_key: string
text_params: Record<string, string>
positive_text_key: string | null
negative_text_key: string | null
response: 'positive' | 'negative' | null
navigate_text_key: string | null
navigate_target: string | null
is_read: boolean
created_at: string
}
interface RawNotification extends Omit<InAppNotification, 'title_params' | 'text_params' | 'is_read'> {
title_params: string | Record<string, string>
text_params: string | Record<string, string>
is_read: number | boolean
}
function normalizeNotification(raw: RawNotification): InAppNotification {
return {
...raw,
title_params: typeof raw.title_params === 'string' ? JSON.parse(raw.title_params || '{}') : raw.title_params,
text_params: typeof raw.text_params === 'string' ? JSON.parse(raw.text_params || '{}') : raw.text_params,
is_read: Boolean(raw.is_read),
}
}
interface NotificationState {
notifications: InAppNotification[]
unreadCount: number
total: number
isLoading: boolean
hasMore: boolean
/** The filter the loaded pages were fetched with, so the next page continues the same list. */
unreadOnly: boolean
/**
* Loads a page. A reset starts the list over with the given filter (default: all) and always
* runs, replacing a load that is still in flight; a following page keeps the current filter.
*/
fetchNotifications: (reset?: boolean, unreadOnly?: boolean) => Promise<void>
fetchUnreadCount: () => Promise<void>
markRead: (id: number) => Promise<void>
markUnread: (id: number) => Promise<void>
markAllRead: () => Promise<void>
deleteNotification: (id: number) => Promise<void>
deleteAll: () => Promise<void>
respondToBoolean: (id: number, response: 'positive' | 'negative') => Promise<void>
handleNewNotification: (notification: RawNotification) => void
handleUpdatedNotification: (notification: RawNotification) => void
}
const PAGE_SIZE = 20
// Newest reset wins: a slower, older response must not overwrite the list of a filter the user has left.
let fetchSeq = 0
export const useInAppNotificationStore = create<NotificationState>((set, get) => ({
notifications: [],
unreadCount: 0,
total: 0,
isLoading: false,
hasMore: false,
unreadOnly: false,
fetchNotifications: async (reset = false, unreadOnly) => {
const { notifications, isLoading } = get()
if (isLoading && !reset) return
const filter = reset ? (unreadOnly ?? false) : get().unreadOnly
const seq = ++fetchSeq
set({ isLoading: true })
try {
// The server pages the filtered list. Rows marked read since they were loaded are still held
// here but have left that list, so an unread-only page continues after the rows still unread.
const offset = reset ? 0 : (filter ? notifications.filter(n => !n.is_read).length : notifications.length)
const data = await inAppNotificationsApi.list({ limit: PAGE_SIZE, offset, ...(filter ? { unread_only: true } : {}) })
if (seq !== fetchSeq) return
const normalized = (data.notifications as unknown as RawNotification[]).map(normalizeNotification)
const known = new Set(notifications.map(n => n.id))
const merged = reset ? normalized : [...notifications, ...normalized.filter(n => !known.has(n.id))]
set({
notifications: merged,
total: data.total,
unreadCount: data.unread_count,
hasMore: offset + normalized.length < data.total,
unreadOnly: filter,
isLoading: false,
})
} catch {
if (seq === fetchSeq) set({ isLoading: false })
}
},
fetchUnreadCount: async () => {
try {
const data = await inAppNotificationsApi.unreadCount()
set({ unreadCount: data.count })
} catch {
// best-effort
}
},
markRead: async (id: number) => {
try {
await inAppNotificationsApi.markRead(id)
set(state => ({
notifications: state.notifications.map(n => n.id === id ? { ...n, is_read: true } : n),
unreadCount: Math.max(0, state.unreadCount - (state.notifications.find(n => n.id === id)?.is_read ? 0 : 1)),
}))
} catch {
// best-effort
}
},
markUnread: async (id: number) => {
try {
await inAppNotificationsApi.markUnread(id)
set(state => ({
notifications: state.notifications.map(n => n.id === id ? { ...n, is_read: false } : n),
unreadCount: state.unreadCount + (state.notifications.find(n => n.id === id)?.is_read ? 1 : 0),
}))
} catch {
// best-effort
}
},
markAllRead: async () => {
try {
await inAppNotificationsApi.markAllRead()
set(state => ({
notifications: state.notifications.map(n => ({ ...n, is_read: true })),
unreadCount: 0,
}))
} catch {
// best-effort
}
},
deleteNotification: async (id: number) => {
const notification = get().notifications.find(n => n.id === id)
try {
await inAppNotificationsApi.delete(id)
set(state => ({
notifications: state.notifications.filter(n => n.id !== id),
total: Math.max(0, state.total - 1),
unreadCount: notification && !notification.is_read ? Math.max(0, state.unreadCount - 1) : state.unreadCount,
}))
} catch {
// best-effort
}
},
deleteAll: async () => {
try {
await inAppNotificationsApi.deleteAll()
set({ notifications: [], total: 0, unreadCount: 0, hasMore: false })
} catch {
// best-effort
}
},
respondToBoolean: async (id: number, response: 'positive' | 'negative') => {
try {
const data = await inAppNotificationsApi.respond(id, response)
if (data.notification) {
const normalized = normalizeNotification(data.notification as RawNotification)
set(state => ({
notifications: state.notifications.map(n => n.id === id ? normalized : n),
unreadCount: !state.notifications.find(n => n.id === id)?.is_read
? Math.max(0, state.unreadCount - 1)
: state.unreadCount,
}))
}
} catch {
// best-effort
}
},
handleNewNotification: (raw: RawNotification) => {
const notification = normalizeNotification(raw)
set(state => ({
notifications: [notification, ...state.notifications],
total: state.total + 1,
unreadCount: state.unreadCount + 1,
}))
},
handleUpdatedNotification: (raw: RawNotification) => {
const notification = normalizeNotification(raw)
set(state => ({
notifications: state.notifications.map(n => n.id === notification.id ? notification : n),
}))
},
}))