diff --git a/apps/photos/src/components/Chip.tsx b/apps/photos/src/components/Chip.tsx index 3982333d2..4061927e8 100644 --- a/apps/photos/src/components/Chip.tsx +++ b/apps/photos/src/components/Chip.tsx @@ -1,10 +1,6 @@ -import { Box, styled } from '@mui/material'; +import { Button, styled } from '@mui/material'; import { CSSProperties } from '@mui/material/styles/createTypography'; -export const Chip = styled(Box)(({ theme }) => ({ +export const Chip = styled(Button)(({ theme }) => ({ ...(theme.typography.small as CSSProperties), - padding: '8px 12px', - borderRadius: '4px', - backgroundColor: theme.colors.fill.faint, - fontWeight: 'bold', })); diff --git a/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx b/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx index b76fbf5cd..b0cf025e9 100644 --- a/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx +++ b/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx @@ -4,7 +4,6 @@ import { RenderCreationTime } from './RenderCreationTime'; import { Box, DialogProps, Link, Stack, styled } from '@mui/material'; import { getEXIFLocation } from 'services/upload/exifService'; import { RenderCaption } from './RenderCaption'; -import { useRouter } from 'next/router'; import CopyButton from 'components/CodeBlock/CopyButton'; import { formatDate, formatTime } from 'utils/time/format'; import Titlebar from 'components/Titlebar'; @@ -32,6 +31,7 @@ import { ObjectLabelList } from 'components/MachineLearning/ObjectList'; // import MLServiceFileInfoButton from 'components/MachineLearning/MLServiceFileInfoButton'; import { AppContext } from 'pages/_app'; import { t } from 'i18next'; +import { GalleryContext } from 'pages/gallery'; export const FileInfoSidebar = styled((props: DialogProps) => ( @@ -53,6 +53,7 @@ interface Iprops { fileToCollectionsMap?: Map; collectionNameMap?: Map; showCollectionChips: boolean; + closePhotoViewer: () => void; } function BasicDeviceCamera({ @@ -87,14 +88,15 @@ export function FileInfo({ fileToCollectionsMap, collectionNameMap, showCollectionChips, + closePhotoViewer, }: Iprops) { - const router = useRouter(); const appContext = useContext(AppContext); + const galleryContext = useContext(GalleryContext); + const [parsedExifData, setParsedExifData] = useState>(); const [showExif, setShowExif] = useState(false); // eslint-disable-next-line @typescript-eslint/no-unused-vars const [updateMLDataIndex, setUpdateMLDataIndex] = useState(0); - const [getCollectionID, setCollectionID] = useState(undefined); const openExif = () => setShowExif(true); const closeExif = () => setShowExif(false); @@ -123,16 +125,16 @@ export function FileInfo({ return null; }, [file, exif]); - useEffect(() => { - let collectionURL = ''; - if (getCollectionID) { - console.log('id:', getCollectionID); - collectionURL += '?collection='; - collectionURL += getCollectionID; - const href = `/gallery${collectionURL}`; - router.push(href, undefined, { shallow: true }); - } - }, [getCollectionID]); + // useEffect(() => { + // let collectionURL = ''; + // if (getCollectionID) { + // console.log('id:', getCollectionID); + // collectionURL += '?collection='; + // collectionURL += getCollectionID; + // const href = `/gallery${collectionURL}`; + // router.push(href, undefined, { shallow: false }); + // } + // }, [getCollectionID]); useEffect(() => { if (!exif) { @@ -172,14 +174,6 @@ export function FileInfo({ parsedExifData['ISO'] = `ISO${exif['ISO']}`; } setParsedExifData(parsedExifData); - - if (getCollectionID) { - console.log('id:', getCollectionID); - let collectionURL = ''; - collectionURL += '?collection='; - const href = `/gallery${collectionURL}`; - router.push(href, undefined, { shallow: true }); - } }, [exif]); if (!file) { @@ -317,9 +311,13 @@ export function FileInfo({ ?.map((collectionID) => ( - setCollectionID(collectionID) - }> + onClick={() => { + galleryContext.setActiveCollection( + collectionID + ); + console.log(closePhotoViewer); + closePhotoViewer(); + }}> {collectionNameMap.get(collectionID)} ))} diff --git a/apps/photos/src/components/PhotoViewer/index.tsx b/apps/photos/src/components/PhotoViewer/index.tsx index 5358e2f7e..1296fcd9d 100644 --- a/apps/photos/src/components/PhotoViewer/index.tsx +++ b/apps/photos/src/components/PhotoViewer/index.tsx @@ -692,6 +692,7 @@ function PhotoViewer(props: Iprops) { refreshPhotoswipe={refreshPhotoswipe} fileToCollectionsMap={props.fileToCollectionsMap} collectionNameMap={props.collectionNameMap} + closePhotoViewer={handleClose} /> ); diff --git a/apps/photos/src/pages/gallery/index.tsx b/apps/photos/src/pages/gallery/index.tsx index 08cf29b89..dfdc84a62 100644 --- a/apps/photos/src/pages/gallery/index.tsx +++ b/apps/photos/src/pages/gallery/index.tsx @@ -342,6 +342,8 @@ export default function Gallery() { collectionURL += activeCollection; } } + console.log('Testing ablum selection'); + console.log(activeCollection); const href = `/gallery${collectionURL}`; router.push(href, undefined, { shallow: true }); }, [activeCollection]);