diff --git a/frontend/src/pages/Album/AlbumDetail.tsx b/frontend/src/pages/Album/AlbumDetail.tsx index c65e1e856..bd6a52c92 100644 --- a/frontend/src/pages/Album/AlbumDetail.tsx +++ b/frontend/src/pages/Album/AlbumDetail.tsx @@ -2,17 +2,24 @@ import { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useParams, useNavigate, useLocation } from 'react-router'; import { Button } from '@/components/ui/button'; -import { ArrowLeft, Plus, Trash2 } from 'lucide-react'; +import { ArrowLeft, Plus, Share2, Trash2 } from 'lucide-react'; import { ImageCard } from '@/components/Media/ImageCard'; import { MediaView } from '@/components/Media/MediaView'; import { AddImagesToAlbumDialog } from '@/components/Albums/AddImagesToAlbumDialog'; -import { usePictoQuery, usePictoMutation } from '@/hooks/useQueryExtension'; +import { ShareAlbumDialog } from '@/components/Albums/ShareAlbumDialog'; +import { + usePictoQuery, + usePictoMutation, + type BackendRes, +} from '@/hooks/useQueryExtension'; import { getAlbumById, getAlbumImages, + getShares, removeMultipleImagesFromAlbum, fetchAllImages, } from '@/api/api-functions'; +import { Share } from '@/types/Share'; import { setSelectedAlbum, setAlbumImages, @@ -52,6 +59,7 @@ export const AlbumDetail = () => { const isImageViewOpen = useSelector(selectIsImageViewOpen); const [isAddImagesDialogOpen, setIsAddImagesDialogOpen] = useState(false); + const [isShareDialogOpen, setIsShareDialogOpen] = useState(false); const [selectedImages, setSelectedImages] = useState>(new Set()); const [isSelectionMode, setIsSelectionMode] = useState(false); @@ -88,6 +96,22 @@ export const AlbumDetail = () => { // carries their details. const isLoadingContent = isLoadingImages || isLoadingAllImages; + // Shares are held in memory on the backend, so this is the source of truth + // for whether this album is currently being served on the local network. + const { + successData: allShares, + isLoading: isLoadingShares, + isError: isSharesError, + refetch: refetchShares, + } = usePictoQuery, unknown, Share[]>({ + queryKey: ['shares'], + queryFn: () => getShares(), + }); + + const albumShares = (allShares ?? []).filter( + (share) => share.album_id === albumId, + ); + const removeImagesMutation = usePictoMutation({ mutationFn: ({ albumId, @@ -286,6 +310,15 @@ export const AlbumDetail = () => { Select Images )} +