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]);