diff --git a/client/src/components/Journey/JourneyDetailPageGalleryView.tsx b/client/src/components/Journey/JourneyDetailPageGalleryView.tsx index d66347f76..0c9b79d6f 100644 --- a/client/src/components/Journey/JourneyDetailPageGalleryView.tsx +++ b/client/src/components/Journey/JourneyDetailPageGalleryView.tsx @@ -4,12 +4,13 @@ import { normalizeImageFiles } from '../../utils/convertHeic' import { isVideoFile } from '../../utils/videoPoster' import { useJourneyStore } from '../../store/journeyStore' import { useTranslation } from '../../i18n' -import { journeyApi, addonsApi, memoriesApi } from '../../api/client' +import { journeyApi } from '../../api/client' import { useToast } from '../shared/Toast' import { getApiErrorMessage } from '../../types' import type { JourneyEntry, GalleryPhoto, JourneyTrip } from '../../store/journeyStore' import { photoUrl, posterlessVideo } from '../../pages/journeyDetail/JourneyDetailPage.helpers' import { ProviderPicker, type ProviderPhotoGroup } from './JourneyDetailPageProviderPicker' +import { useConnectedPhotoProviders } from './useConnectedPhotoProviders' import { ScrollTrigger } from './JourneyDetailPageScrollTrigger' import EmptyState from '../shared/EmptyState' @@ -22,7 +23,7 @@ export function GalleryView({ entries, gallery, journeyId, userId, trips, onPhot onPhotoClick: (photos: GalleryPhoto[], index: number) => void onRefresh: () => void /** What the picker's Add does: the host's useProviderPhotoAdds, shared with the phone screen. */ - onAddProviderPhotos: (journeyId: number, provider: string, groups: ProviderPhotoGroup[], entryId: number | null) => Promise + onAddProviderPhotos: (journeyId: number, provider: string, groups: ProviderPhotoGroup[], entryId: number | null) => Promise onRegisterUpload?: (fn: () => void) => void onRegisterProviders?: (providers: { id: string; name: string }[], browse: (provider: string) => void) => void }) { @@ -33,26 +34,13 @@ export function GalleryView({ entries, gallery, journeyId, userId, trips, onPhot const galleryUploading = galleryProgress !== null const toast = useToast() - // check which providers are enabled AND connected for the current user, then - // hand them up: the page header renders the provider buttons next to Upload + // The providers enabled AND connected for the current user, handed up: the page + // header renders the provider buttons next to Upload. + const connectedProviders = useConnectedPhotoProviders() useEffect(() => { - (async () => { - try { - const addonsData = await addonsApi.enabled() - const enabledProviders = (addonsData.addons || []).filter( - (a: any) => a.type === 'photo_provider' && a.enabled - ) - const connected: { id: string; name: string }[] = [] - for (const p of enabledProviders) { - try { - const status = await memoriesApi.status(p.id) - if (status.connected) connected.push({ id: p.id, name: p.name }) - } catch { } - } - onRegisterProviders?.(connected, browseProvider) - } catch { } - })() - }, []) + onRegisterProviders?.(connectedProviders, browseProvider) + // browseProvider only sets state; registering on the list alone is the old behaviour. + }, [connectedProviders]) const allPhotos = gallery // A long trip's gallery is hundreds of tiles, and rendering them all at once is @@ -174,7 +162,7 @@ export function GalleryView({ entries, gallery, journeyId, userId, trips, onPhot )} {/* Delete button */} )} + {canEdit && onBrowseProvider && providers.map(p => ( + + ))} {photos.map(p => (