diff --git a/src/components/Collections/index.tsx b/src/components/Collections/index.tsx index 79b346469..975ccd29f 100644 --- a/src/components/Collections/index.tsx +++ b/src/components/Collections/index.tsx @@ -69,7 +69,7 @@ export default function Collections(props: Iprops) { } /> ), - itemType: ITEM_TYPE.STATIC, + itemType: ITEM_TYPE.OTHER, height: 68, }), [collectionSummaries, activeCollectionID, shouldBeHidden] diff --git a/src/components/PhotoList.tsx b/src/components/PhotoList.tsx index 0382a3322..a13b4750e 100644 --- a/src/components/PhotoList.tsx +++ b/src/components/PhotoList.tsx @@ -30,7 +30,7 @@ export enum ITEM_TYPE { TIME = 'TIME', FILE = 'FILE', SIZE_AND_COUNT = 'SIZE_AND_COUNT', - STATIC = 'static', + OTHER = 'OTHER', } export interface TimeStampListItem { @@ -141,6 +141,7 @@ export function PhotoList({ resetFetching, }: Props) { const galleryContext = useContext(GalleryContext); + const timeStampListRef = useRef([]); const timeStampList = timeStampListRef?.current ?? []; const filteredDataCopyRef = useRef([]); @@ -170,7 +171,15 @@ export function PhotoList({ let timeStampList: TimeStampListItem[] = []; if (galleryContext.photoListHeader) { - timeStampList.push(getPhotoListHeader()); + timeStampList.push( + getPhotoListHeader(galleryContext.photoListHeader) + ); + } else if (publicCollectionGalleryContext.photoListHeader) { + timeStampList.push( + getPhotoListHeader( + publicCollectionGalleryContext.photoListHeader + ) + ); } if (deduplicateContext.isOnDeduplicatePage) { skipMerge = true; @@ -303,12 +312,12 @@ export function PhotoList({ first.getMonth() === second.getMonth() && first.getDate() === second.getDate(); - const getPhotoListHeader = () => { + const getPhotoListHeader = (photoListHeader) => { return { - ...galleryContext.photoListHeader, + ...photoListHeader, item: ( - {galleryContext.photoListHeader.item} + {photoListHeader.item} ), }; @@ -316,7 +325,7 @@ export function PhotoList({ const getEmptyListItem = () => { return { - itemType: ITEM_TYPE.STATIC, + itemType: ITEM_TYPE.OTHER, item: (
{constants.NOTHING_HERE}
@@ -339,7 +348,7 @@ export function PhotoList({ return sum; })(); return { - itemType: ITEM_TYPE.STATIC, + itemType: ITEM_TYPE.OTHER, item: <>, height: Math.max(height - photoFrameHeight - FOOTER_HEIGHT, 0), }; @@ -347,7 +356,7 @@ export function PhotoList({ const getAppDownloadFooter = () => { return { - itemType: ITEM_TYPE.STATIC, + itemType: ITEM_TYPE.OTHER, height: FOOTER_HEIGHT, item: ( @@ -359,7 +368,7 @@ export function PhotoList({ const getAlbumsFooter = () => { return { - itemType: ITEM_TYPE.STATIC, + itemType: ITEM_TYPE.OTHER, height: FOOTER_HEIGHT, item: ( diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index cb6ef76eb..39137469c 100644 --- a/src/pages/gallery/index.tsx +++ b/src/pages/gallery/index.tsx @@ -317,7 +317,7 @@ export default function Gallery() { searchResultSummary={searchResultSummary} /> ), - itemType: ITEM_TYPE.STATIC, + itemType: ITEM_TYPE.OTHER, }); } }, [isInSearchMode, searchResultSummary]); diff --git a/src/pages/shared-albums/index.tsx b/src/pages/shared-albums/index.tsx index 2d6789b9b..1cee89719 100644 --- a/src/pages/shared-albums/index.tsx +++ b/src/pages/shared-albums/index.tsx @@ -35,6 +35,7 @@ import { logError } from 'utils/sentry'; import SharedAlbumNavbar from 'components/pages/sharedAlbum/Navbar'; import { CollectionInfo } from 'components/Collections/CollectionInfo'; import { CollectionInfoBarWrapper } from 'components/Collections/styledComponents'; +import { ITEM_TYPE, TimeStampListItem } from 'components/PhotoList'; const Loader = () => ( @@ -61,6 +62,8 @@ export default function PublicCollectionGallery() { const router = useRouter(); const [isPasswordProtected, setIsPasswordProtected] = useState(false); + const [photoListHeader, setPhotoListHeader] = + useState(null); useEffect(() => { const currentURL = new URL(window.location.href); @@ -120,6 +123,25 @@ export default function PublicCollectionGallery() { main(); }, []); + useEffect( + () => + publicCollection && + publicFiles && + setPhotoListHeader({ + item: ( + + + + ), + itemType: ITEM_TYPE.OTHER, + height: 68, + }), + [publicCollection, publicFiles] + ); + const syncWithRemote = async () => { const collectionUID = getPublicCollectionUID(token.current); try { @@ -278,14 +300,9 @@ export default function PublicCollectionGallery() { passwordToken: passwordJWTToken.current, accessedThroughSharedURL: true, openReportForm, + photoListHeader, }}> - - - void; + photoListHeader: TimeStampListItem; } export interface LocalSavedPublicCollectionFiles { diff --git a/src/utils/publicCollectionGallery/index.ts b/src/utils/publicCollectionGallery/index.ts index 1468e3fcb..6d06413d8 100644 --- a/src/utils/publicCollectionGallery/index.ts +++ b/src/utils/publicCollectionGallery/index.ts @@ -7,6 +7,7 @@ export const defaultPublicCollectionGalleryContext: PublicCollectionGalleryConte passwordToken: null, accessedThroughSharedURL: false, openReportForm: () => null, + photoListHeader: null, }; export const PublicCollectionGalleryContext =