Backend: - user roles (DB + JWT + first-user-is-admin) - volume-aware file resolver (multi-volume asset serving) - directory scanner uses volume URI directly - date-summary endpoint (capture date from EXIF) - timeline ordered by capture date - list endpoints: volumes, plugins, pipelines, library paths - delete endpoints: volumes, library paths - configurable upload body limit (MAX_UPLOAD_BYTES) Frontend: - auth: login/register, token refresh, role-based admin gate - timeline: date-grouped grid, infinite scroll, date scrubber - image viewer: fullscreen zoom/pan/pinch, metadata sidebar - upload: drag-drop, sequential upload, progress tracking - albums: create, add/remove photos, asset picker dialog - admin: storage (import library), jobs (pagination, error details), plugins (list + toggle), pipelines, sidecars, duplicates - multi-select mode with add-to-album action - TanStack Query for all data fetching
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { useInfiniteQuery, useQuery } from "@tanstack/react-query"
|
|
import api from "@/lib/api"
|
|
import type { TimelineResponse, DateSummaryResponse } from "@/lib/types"
|
|
|
|
const PAGE_SIZE = 40
|
|
|
|
export function useTimeline() {
|
|
const query = useInfiniteQuery({
|
|
queryKey: ["timeline"],
|
|
queryFn: async ({ pageParam = 0 }) => {
|
|
const { data } = await api.get<TimelineResponse>("/assets/timeline", {
|
|
params: { limit: PAGE_SIZE, offset: pageParam },
|
|
})
|
|
return data
|
|
},
|
|
initialPageParam: 0,
|
|
getNextPageParam: (lastPage, allPages) => {
|
|
const loaded = allPages.reduce((n, p) => n + p.assets.length, 0)
|
|
return loaded < lastPage.total ? loaded : undefined
|
|
},
|
|
})
|
|
|
|
const assets = query.data?.pages.flatMap((p) => p.assets) ?? []
|
|
const total = query.data?.pages[0]?.total ?? 0
|
|
|
|
return {
|
|
assets,
|
|
total,
|
|
isLoading: query.isLoading,
|
|
hasMore: query.hasNextPage,
|
|
loadMore: query.fetchNextPage,
|
|
isFetchingMore: query.isFetchingNextPage,
|
|
}
|
|
}
|
|
|
|
export function useDateSummary() {
|
|
return useQuery({
|
|
queryKey: ["date-summary"],
|
|
queryFn: async () => {
|
|
const { data } = await api.get<DateSummaryResponse>("/assets/date-summary")
|
|
return data.dates
|
|
},
|
|
})
|
|
}
|