feat: share heaps and folders with other users, fix auth and vision pipeline
Sharing:
- New HeapShare and FolderShare models with read/write permissions
- Sharing API router (CRUD for heap and folder shares)
- Heap endpoints accept shared access (photo_ids, add/remove with write)
- Photo list drops user_id filter in shared context, adds owner_username
- Media serving (thumb/original/proxy) falls back to share check on 404
- ShareDialog component for managing shares from kebab menus
- HeapsPanel shows "Shared with me" section for shared heaps
- LeftSidebar shows "Shared with me" section for shared folders
- Owner badge on PhotoThumbnail for photos from other users
Auth:
- Access token default bumped to 1 year, refresh to 10 years
- Refresh token persisted in localStorage (survives page reload)
- Timer-based refresh replaced with 401 axios interceptor
Vision pipeline fixes:
- Bootstrap sets Redis ready key even on partial export failure
- Export functions run conditionally (only for actually missing models)
- _load_thumb handles multi-user path (/data/thumbs/{user_id}/{photo_id}/)
- can_access_photo_via_share uses single subquery instead of N+1 loop
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -10,15 +10,18 @@ import {
|
||||
Pencil,
|
||||
Copy,
|
||||
Trash2,
|
||||
Users,
|
||||
} from 'lucide-react'
|
||||
import clsx from 'clsx'
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { useHeapsQuery, HEAPS_QUERY_KEY } from '../../hooks/useHeapsQuery'
|
||||
import { useSharedHeapsQuery } from '../../hooks/useSharingQueries'
|
||||
import { heaps as heapsApi, type Heap } from '../../services/api'
|
||||
import { useFilterStore } from '../../store/filterStore'
|
||||
import { toast } from '../ToastContainer'
|
||||
import { PHOTO_DRAG_MIME } from '../timeline/PhotoThumbnail'
|
||||
import { HeapConvertDialog } from './HeapConvertDialog'
|
||||
import { ShareDialog } from '../sharing/ShareDialog'
|
||||
|
||||
/**
|
||||
* Heaps panel for the left sidebar. Renders the list of heaps with the
|
||||
@@ -43,6 +46,8 @@ export function HeapsPanel() {
|
||||
// the drop highlight ring. Only one heap can be the target at a time.
|
||||
const [dropTargetId, setDropTargetId] = useState<string | null>(null)
|
||||
const [convertingHeap, setConvertingHeap] = useState<Heap | null>(null)
|
||||
const [sharingHeap, setSharingHeap] = useState<Heap | null>(null)
|
||||
const { data: sharedHeaps = [] } = useSharedHeapsQuery()
|
||||
// Inline rename state for heap rows: stores the heap id being edited and
|
||||
// the draft name. Mirrors the folder rename pattern in LeftSidebar.
|
||||
const [renamingId, setRenamingId] = useState<string | null>(null)
|
||||
@@ -435,6 +440,14 @@ export function HeapsPanel() {
|
||||
setConvertingHeap(heap)
|
||||
}}
|
||||
/>
|
||||
<MenuItem
|
||||
icon={<Users className="h-3.5 w-3.5" />}
|
||||
label="Share…"
|
||||
onClick={() => {
|
||||
setOpenMenuId(null)
|
||||
setSharingHeap(heap)
|
||||
}}
|
||||
/>
|
||||
<div className="my-1 h-px bg-border" />
|
||||
<MenuItem
|
||||
icon={<Trash2 className="h-3.5 w-3.5" />}
|
||||
@@ -460,10 +473,63 @@ export function HeapsPanel() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Shared with me */}
|
||||
{sharedHeaps.length > 0 && expanded && (
|
||||
<div className="mt-1">
|
||||
<div className="px-3 py-0.5 text-[9px] font-semibold uppercase tracking-[0.14em] text-text-faint">
|
||||
Shared with me
|
||||
</div>
|
||||
{sharedHeaps.map((sh) => {
|
||||
const isFiltered = currentSection === `heap-${sh.id}`
|
||||
return (
|
||||
<div
|
||||
key={sh.id}
|
||||
className={clsx(
|
||||
'group flex h-[24px] cursor-pointer items-center gap-1 rounded px-2 text-[12px] leading-none',
|
||||
isFiltered ? 'bg-primary/20 text-primary' : 'text-text hover:bg-surface-2',
|
||||
)}
|
||||
style={{ paddingLeft: '20px' }}
|
||||
onClick={() =>
|
||||
navigateToSection(`heap-${sh.id}`, { heapId: sh.id })
|
||||
}
|
||||
>
|
||||
<Users
|
||||
className={clsx(
|
||||
'h-3.5 w-3.5 flex-shrink-0',
|
||||
isFiltered ? 'text-primary' : 'text-text-muted'
|
||||
)}
|
||||
/>
|
||||
<span className="truncate" title={sh.name}>
|
||||
{sh.name}
|
||||
</span>
|
||||
<span className="ml-0.5 truncate text-[10px] text-text-faint">
|
||||
{sh.owner_username}
|
||||
</span>
|
||||
<span className="ml-auto rounded bg-surface-offset px-1 text-[9px] uppercase text-text-faint">
|
||||
{sh.permission}
|
||||
</span>
|
||||
{sh.photo_count > 0 && (
|
||||
<span className="flex h-4 min-w-[20px] flex-shrink-0 items-center justify-center rounded bg-surface-offset px-1 text-[10px] tabular-nums text-text-muted">
|
||||
{sh.photo_count}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<HeapConvertDialog
|
||||
heap={convertingHeap}
|
||||
onClose={() => setConvertingHeap(null)}
|
||||
/>
|
||||
<ShareDialog
|
||||
isOpen={!!sharingHeap}
|
||||
type="heap"
|
||||
targetId={sharingHeap?.id ?? ''}
|
||||
targetName={sharingHeap?.name ?? ''}
|
||||
onClose={() => setSharingHeap(null)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -44,6 +44,8 @@ import {
|
||||
import { registerUndoable } from '../../store/undoStore'
|
||||
import type { Photo } from '../../types/photo'
|
||||
import { DeleteFolderDialog } from '../dialogs/DeleteFolderDialog'
|
||||
import { ShareDialog } from '../sharing/ShareDialog'
|
||||
import { useSharedFoldersQuery } from '../../hooks/useSharingQueries'
|
||||
import { useAuth } from '../../contexts/AuthContext'
|
||||
|
||||
interface TreeItem {
|
||||
@@ -111,6 +113,11 @@ export function LeftSidebar({ onCollapse }: LeftSidebarProps) {
|
||||
name: string
|
||||
photoCount?: number
|
||||
} | null>(null)
|
||||
const [sharingFolder, setSharingFolder] = useState<{
|
||||
id: string
|
||||
name: string
|
||||
} | null>(null)
|
||||
const { data: sharedFolders = [] } = useSharedFoldersQuery()
|
||||
|
||||
// Bulk discard mutation for the drag-onto-Discarded interaction.
|
||||
const discardDropMutation = useMutation({
|
||||
@@ -703,6 +710,14 @@ export function LeftSidebar({ onCollapse }: LeftSidebarProps) {
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<FolderMenuItem
|
||||
icon={<Users className="h-3.5 w-3.5" />}
|
||||
label="Share…"
|
||||
onClick={() => {
|
||||
setOpenMenuId(null)
|
||||
setSharingFolder({ id: folderId, name: item.label })
|
||||
}}
|
||||
/>
|
||||
<div className="my-1 h-px bg-border" />
|
||||
<FolderMenuItem
|
||||
icon={<Trash2 className="h-3.5 w-3.5" />}
|
||||
@@ -803,6 +818,53 @@ export function LeftSidebar({ onCollapse }: LeftSidebarProps) {
|
||||
{/* Tree View */}
|
||||
<div className="flex-1 overflow-y-auto pb-2">
|
||||
{libraryTree.map((item) => renderTreeItem(item))}
|
||||
|
||||
{/* Shared with me — folders shared by other users */}
|
||||
{sharedFolders.length > 0 && (
|
||||
<div className="mt-1">
|
||||
<div className="px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-text-muted">
|
||||
Shared with me
|
||||
</div>
|
||||
{sharedFolders.map((sf) => {
|
||||
const isSelected = currentSection === `folder-${sf.id}`
|
||||
return (
|
||||
<div
|
||||
key={sf.id}
|
||||
className={clsx(
|
||||
'flex h-[24px] cursor-pointer items-center gap-1 rounded px-2 text-[12px] leading-none',
|
||||
isSelected ? 'bg-primary/20 text-primary' : 'text-text hover:bg-surface-2',
|
||||
)}
|
||||
style={{ paddingLeft: '20px' }}
|
||||
onClick={() =>
|
||||
navigateToSection(`folder-${sf.id}`, { folderId: sf.id })
|
||||
}
|
||||
>
|
||||
<Users
|
||||
className={clsx(
|
||||
'h-3.5 w-3.5 flex-shrink-0',
|
||||
isSelected ? 'text-primary' : 'text-text-muted'
|
||||
)}
|
||||
/>
|
||||
<span className="truncate" title={sf.name}>
|
||||
{sf.name}
|
||||
</span>
|
||||
<span className="ml-0.5 truncate text-[10px] text-text-faint">
|
||||
{sf.owner_username}
|
||||
</span>
|
||||
<span className="ml-auto rounded bg-surface-offset px-1 text-[9px] uppercase text-text-faint">
|
||||
{sf.permission}
|
||||
</span>
|
||||
{sf.photo_count > 0 && (
|
||||
<span className="flex h-4 min-w-[20px] flex-shrink-0 items-center justify-center rounded bg-surface-offset px-1 text-[10px] tabular-nums text-text-muted">
|
||||
{sf.photo_count}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<HeapsPanel />
|
||||
</div>
|
||||
|
||||
@@ -853,6 +915,13 @@ export function LeftSidebar({ onCollapse }: LeftSidebarProps) {
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<ShareDialog
|
||||
isOpen={!!sharingFolder}
|
||||
type="folder"
|
||||
targetId={sharingFolder?.id ?? ''}
|
||||
targetName={sharingFolder?.name ?? ''}
|
||||
onClose={() => setSharingFolder(null)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
177
frontend/src/components/sharing/ShareDialog.tsx
Normal file
177
frontend/src/components/sharing/ShareDialog.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { Users, Trash2, X } from 'lucide-react'
|
||||
import clsx from 'clsx'
|
||||
import { sharing, type ShareInfo } from '../../services/api'
|
||||
import { SHARED_HEAPS_KEY, SHARED_FOLDERS_KEY } from '../../hooks/useSharingQueries'
|
||||
|
||||
interface ShareDialogProps {
|
||||
isOpen: boolean
|
||||
type: 'heap' | 'folder'
|
||||
targetId: string
|
||||
targetName: string
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function ShareDialog({ isOpen, type, targetId, targetName, onClose }: ShareDialogProps) {
|
||||
const [username, setUsername] = useState('')
|
||||
const [permission, setPermission] = useState<'read' | 'write'>('read')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const sharesQueryKey = [type, 'shares', targetId]
|
||||
|
||||
const { data: shares = [], isLoading } = useQuery<ShareInfo[]>({
|
||||
queryKey: sharesQueryKey,
|
||||
queryFn: () =>
|
||||
type === 'heap'
|
||||
? sharing.heapShares(targetId)
|
||||
: sharing.folderShares(targetId),
|
||||
enabled: isOpen,
|
||||
})
|
||||
|
||||
const addMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
type === 'heap'
|
||||
? sharing.shareHeap(targetId, username, permission)
|
||||
: sharing.shareFolder(targetId, username, permission),
|
||||
onSuccess: () => {
|
||||
setUsername('')
|
||||
setPermission('read')
|
||||
setError(null)
|
||||
queryClient.invalidateQueries({ queryKey: sharesQueryKey })
|
||||
queryClient.invalidateQueries({ queryKey: type === 'heap' ? SHARED_HEAPS_KEY : SHARED_FOLDERS_KEY })
|
||||
},
|
||||
onError: (err: any) => {
|
||||
setError(err?.response?.data?.detail || 'Failed to share')
|
||||
},
|
||||
})
|
||||
|
||||
const revokeMutation = useMutation({
|
||||
mutationFn: (shareId: string) =>
|
||||
type === 'heap'
|
||||
? sharing.revokeHeapShare(targetId, shareId)
|
||||
: sharing.revokeFolderShare(targetId, shareId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: sharesQueryKey })
|
||||
queryClient.invalidateQueries({ queryKey: type === 'heap' ? SHARED_HEAPS_KEY : SHARED_FOLDERS_KEY })
|
||||
},
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose()
|
||||
}
|
||||
window.addEventListener('keydown', handler)
|
||||
return () => window.removeEventListener('keydown', handler)
|
||||
}, [isOpen, onClose])
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setUsername('')
|
||||
setPermission('read')
|
||||
setError(null)
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50">
|
||||
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
|
||||
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<div className="relative z-10 w-[420px] rounded-lg border border-border bg-surface p-5 shadow-2xl">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-4 w-4 text-text-muted" />
|
||||
<h2 className="text-base font-semibold text-text">
|
||||
Share {type === 'heap' ? 'heap' : 'folder'}
|
||||
</h2>
|
||||
</div>
|
||||
<button onClick={onClose} className="text-text-muted hover:text-text">
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mb-3 text-sm text-text-muted">
|
||||
Sharing <span className="font-medium text-text">{targetName}</span>
|
||||
</div>
|
||||
|
||||
{/* Existing shares */}
|
||||
{shares.length > 0 && (
|
||||
<div className="mb-4 space-y-1.5">
|
||||
{shares.map((share) => (
|
||||
<div
|
||||
key={share.id}
|
||||
className="flex items-center justify-between rounded border border-border bg-surface-2 px-3 py-1.5 text-sm"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-text">{share.shared_with_username}</span>
|
||||
<span className="rounded bg-surface px-1.5 py-0.5 text-[10px] font-medium uppercase text-text-muted">
|
||||
{share.permission}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => revokeMutation.mutate(share.id)}
|
||||
className="text-text-muted hover:text-reject"
|
||||
title="Revoke access"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{isLoading && <div className="mb-4 text-xs text-text-muted">Loading shares...</div>}
|
||||
|
||||
{/* Add new share */}
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
if (username.trim()) addMutation.mutate()
|
||||
}}
|
||||
className="space-y-3"
|
||||
>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => {
|
||||
setUsername(e.target.value)
|
||||
setError(null)
|
||||
}}
|
||||
placeholder="Username"
|
||||
className="flex-1 rounded border border-border bg-surface-2 px-3 py-1.5 text-sm text-text placeholder:text-text-muted focus:border-primary focus:outline-none"
|
||||
autoFocus
|
||||
/>
|
||||
<select
|
||||
value={permission}
|
||||
onChange={(e) => setPermission(e.target.value as 'read' | 'write')}
|
||||
className="rounded border border-border bg-surface-2 px-2 py-1.5 text-sm text-text"
|
||||
>
|
||||
<option value="read">Read</option>
|
||||
<option value="write">Read + Write</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{error && <div className="text-xs text-reject">{error}</div>}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!username.trim() || addMutation.isPending}
|
||||
className={clsx(
|
||||
'rounded px-3 py-1.5 text-sm font-medium text-white',
|
||||
'bg-primary hover:bg-primary/80 disabled:opacity-50'
|
||||
)}
|
||||
>
|
||||
{addMutation.isPending ? 'Sharing...' : 'Share'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
Check,
|
||||
Copy,
|
||||
AlertTriangle,
|
||||
Users,
|
||||
} from 'lucide-react'
|
||||
import clsx from 'clsx'
|
||||
import { photos as photosApi } from '../../services/api'
|
||||
@@ -328,6 +329,24 @@ export function PhotoThumbnail({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TL offset — owner badge for shared photos. Sits below the
|
||||
* selection check so both can show simultaneously. */}
|
||||
{photo.owner_username && (
|
||||
<div
|
||||
className={clsx(
|
||||
'absolute left-1',
|
||||
isSelected ? 'top-7' : 'top-1',
|
||||
THUMB_BADGE_BASE,
|
||||
THUMB_BADGE_NEUTRAL,
|
||||
'max-w-[90px]'
|
||||
)}
|
||||
title={`Photo owned by ${photo.owner_username}`}
|
||||
>
|
||||
<Users className={THUMB_BADGE_ICON} strokeWidth={2.5} />
|
||||
<span className="truncate">{photo.owner_username}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* BL — color label + rating. Color comes first (left of rating)
|
||||
* so the swatch reads as a "category dot" prefixing the stars. */}
|
||||
{(photo.color_label || photo.rating > 0) && (
|
||||
|
||||
@@ -4,7 +4,6 @@ import {
|
||||
useState,
|
||||
useEffect,
|
||||
useCallback,
|
||||
useRef,
|
||||
type ReactNode,
|
||||
} from 'react'
|
||||
import api from '../services/api'
|
||||
@@ -47,8 +46,17 @@ function storeToken(token: string) {
|
||||
localStorage.setItem('access_token', token)
|
||||
}
|
||||
|
||||
function clearToken() {
|
||||
function getStoredRefreshToken(): string | null {
|
||||
return localStorage.getItem('refresh_token')
|
||||
}
|
||||
|
||||
function storeRefreshToken(token: string) {
|
||||
localStorage.setItem('refresh_token', token)
|
||||
}
|
||||
|
||||
function clearTokens() {
|
||||
localStorage.removeItem('access_token')
|
||||
localStorage.removeItem('refresh_token')
|
||||
}
|
||||
|
||||
// ── Provider ───────────────────────────────────────────────────────────
|
||||
@@ -57,48 +65,15 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const [user, setUser] = useState<AuthUser | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [needsSetup, setNeedsSetup] = useState(false)
|
||||
// Keep refresh token in memory only (not localStorage).
|
||||
const refreshTokenRef = useRef<string | null>(null)
|
||||
const refreshTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
const isAdmin = user?.role === 'admin'
|
||||
|
||||
// Schedule a token refresh ~5 min before expiry.
|
||||
const scheduleRefresh = useCallback((accessToken: string) => {
|
||||
try {
|
||||
const payload = JSON.parse(atob(accessToken.split('.')[1]))
|
||||
const expiresAt = payload.exp * 1000
|
||||
const refreshIn = Math.max(expiresAt - Date.now() - 5 * 60 * 1000, 10_000)
|
||||
|
||||
if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current)
|
||||
refreshTimerRef.current = setTimeout(async () => {
|
||||
if (!refreshTokenRef.current) return
|
||||
try {
|
||||
const res = await api.post('/auth/refresh', {
|
||||
refresh_token: refreshTokenRef.current,
|
||||
})
|
||||
const { access_token, refresh_token } = res.data
|
||||
storeToken(access_token)
|
||||
refreshTokenRef.current = refresh_token
|
||||
scheduleRefresh(access_token)
|
||||
} catch {
|
||||
// Refresh failed — force re-login.
|
||||
clearToken()
|
||||
refreshTokenRef.current = null
|
||||
setUser(null)
|
||||
}
|
||||
}, refreshIn)
|
||||
} catch {
|
||||
// Malformed token — ignore.
|
||||
}
|
||||
}, [])
|
||||
|
||||
const fetchMe = useCallback(async () => {
|
||||
try {
|
||||
const res = await api.get('/auth/me')
|
||||
setUser(res.data)
|
||||
} catch {
|
||||
clearToken()
|
||||
clearTokens()
|
||||
setUser(null)
|
||||
}
|
||||
}, [])
|
||||
@@ -120,46 +95,71 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const token = getStoredToken()
|
||||
if (token) {
|
||||
await fetchMe()
|
||||
scheduleRefresh(token)
|
||||
}
|
||||
setIsLoading(false)
|
||||
})()
|
||||
|
||||
return () => {
|
||||
if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current)
|
||||
}
|
||||
}, [fetchMe, scheduleRefresh])
|
||||
}, [fetchMe])
|
||||
|
||||
const login = useCallback(
|
||||
async (username: string, password: string) => {
|
||||
const res = await api.post('/auth/login', { username, password })
|
||||
const { access_token, refresh_token } = res.data
|
||||
storeToken(access_token)
|
||||
refreshTokenRef.current = refresh_token
|
||||
scheduleRefresh(access_token)
|
||||
storeRefreshToken(refresh_token)
|
||||
await fetchMe()
|
||||
},
|
||||
[fetchMe, scheduleRefresh],
|
||||
[fetchMe],
|
||||
)
|
||||
|
||||
const logout = useCallback(() => {
|
||||
clearToken()
|
||||
refreshTokenRef.current = null
|
||||
if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current)
|
||||
clearTokens()
|
||||
setUser(null)
|
||||
}, [])
|
||||
|
||||
const onSetupComplete = useCallback(
|
||||
async (accessToken: string, refreshToken: string) => {
|
||||
storeToken(accessToken)
|
||||
refreshTokenRef.current = refreshToken
|
||||
storeRefreshToken(refreshToken)
|
||||
setNeedsSetup(false)
|
||||
scheduleRefresh(accessToken)
|
||||
await fetchMe()
|
||||
},
|
||||
[fetchMe, scheduleRefresh],
|
||||
[fetchMe],
|
||||
)
|
||||
|
||||
// Axios interceptor: on 401, try to refresh once using the stored
|
||||
// refresh token. If that fails, sign out.
|
||||
useEffect(() => {
|
||||
const interceptor = api.interceptors.response.use(
|
||||
(res) => res,
|
||||
async (error) => {
|
||||
const original = error.config
|
||||
if (
|
||||
error.response?.status === 401 &&
|
||||
!original._retry &&
|
||||
!original.url?.includes('/auth/')
|
||||
) {
|
||||
original._retry = true
|
||||
const rt = getStoredRefreshToken()
|
||||
if (rt) {
|
||||
try {
|
||||
const res = await api.post('/auth/refresh', { refresh_token: rt })
|
||||
const { access_token, refresh_token } = res.data
|
||||
storeToken(access_token)
|
||||
storeRefreshToken(refresh_token)
|
||||
original.headers['Authorization'] = `Bearer ${access_token}`
|
||||
return api(original)
|
||||
} catch {
|
||||
clearTokens()
|
||||
setUser(null)
|
||||
}
|
||||
}
|
||||
}
|
||||
return Promise.reject(error)
|
||||
},
|
||||
)
|
||||
return () => api.interceptors.response.eject(interceptor)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<AuthContext.Provider
|
||||
value={{ user, isAdmin, isLoading, needsSetup, login, logout, onSetupComplete }}
|
||||
|
||||
21
frontend/src/hooks/useSharingQueries.ts
Normal file
21
frontend/src/hooks/useSharingQueries.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { sharing, type SharedHeap, type SharedFolder } from '../services/api'
|
||||
|
||||
export const SHARED_HEAPS_KEY = ['sharing', 'heaps'] as const
|
||||
export const SHARED_FOLDERS_KEY = ['sharing', 'folders'] as const
|
||||
|
||||
export function useSharedHeapsQuery() {
|
||||
return useQuery<SharedHeap[]>({
|
||||
queryKey: SHARED_HEAPS_KEY,
|
||||
queryFn: sharing.sharedHeaps,
|
||||
staleTime: 30_000,
|
||||
})
|
||||
}
|
||||
|
||||
export function useSharedFoldersQuery() {
|
||||
return useQuery<SharedFolder[]>({
|
||||
queryKey: SHARED_FOLDERS_KEY,
|
||||
queryFn: sharing.sharedFolders,
|
||||
staleTime: 30_000,
|
||||
})
|
||||
}
|
||||
@@ -713,6 +713,69 @@ export const heaps = {
|
||||
},
|
||||
}
|
||||
|
||||
// Sharing API
|
||||
|
||||
export interface SharedHeap {
|
||||
id: string
|
||||
name: string
|
||||
owner_username: string
|
||||
permission: 'read' | 'write'
|
||||
photo_count: number
|
||||
}
|
||||
|
||||
export interface SharedFolder {
|
||||
id: string
|
||||
name: string
|
||||
folder_type: 'folder' | 'source_root'
|
||||
owner_username: string
|
||||
permission: 'read' | 'write'
|
||||
photo_count: number
|
||||
}
|
||||
|
||||
export interface ShareInfo {
|
||||
id: string
|
||||
shared_with_id: string
|
||||
shared_with_username: string
|
||||
permission: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export const sharing = {
|
||||
// Heap shares
|
||||
shareHeap: async (heapId: string, username: string, permission: 'read' | 'write' = 'read') => {
|
||||
const response = await api.post(`/sharing/heaps/${heapId}`, { username, permission })
|
||||
return response.data
|
||||
},
|
||||
heapShares: async (heapId: string): Promise<ShareInfo[]> => {
|
||||
const response = await api.get(`/sharing/heaps/${heapId}`)
|
||||
return response.data
|
||||
},
|
||||
revokeHeapShare: async (heapId: string, shareId: string) => {
|
||||
await api.delete(`/sharing/heaps/${heapId}/${shareId}`)
|
||||
},
|
||||
sharedHeaps: async (): Promise<SharedHeap[]> => {
|
||||
const response = await api.get('/sharing/heaps/shared-with-me')
|
||||
return response.data
|
||||
},
|
||||
|
||||
// Folder shares
|
||||
shareFolder: async (folderId: string, username: string, permission: 'read' | 'write' = 'read') => {
|
||||
const response = await api.post(`/sharing/folders/${folderId}`, { username, permission })
|
||||
return response.data
|
||||
},
|
||||
folderShares: async (folderId: string): Promise<ShareInfo[]> => {
|
||||
const response = await api.get(`/sharing/folders/${folderId}`)
|
||||
return response.data
|
||||
},
|
||||
revokeFolderShare: async (folderId: string, shareId: string) => {
|
||||
await api.delete(`/sharing/folders/${folderId}/${shareId}`)
|
||||
},
|
||||
sharedFolders: async (): Promise<SharedFolder[]> => {
|
||||
const response = await api.get('/sharing/folders/shared-with-me')
|
||||
return response.data
|
||||
},
|
||||
}
|
||||
|
||||
// Tags API
|
||||
export type TagKind = 'user' | 'object' | 'scene' | 'face_cluster'
|
||||
|
||||
|
||||
@@ -27,6 +27,8 @@ export interface Photo {
|
||||
latitude?: number | null
|
||||
longitude?: number | null
|
||||
tags?: PhotoTagSummary[]
|
||||
/** Present when viewing shared content — the username of the photo owner. */
|
||||
owner_username?: string | null
|
||||
}
|
||||
|
||||
/** Minimal payload returned by GET /api/v1/photos/map — only what the
|
||||
|
||||
Reference in New Issue
Block a user