Files
k-photos/k-photos-frontend/hooks/use-timeline.ts
Gabriel Kaszewski 957737ac9b feat: frontend MVP — auth, timeline, upload, albums, admin, image viewer
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
2026-06-01 01:35:43 +02:00

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
},
})
}