update to hadle new URL format

src/components/PhotoFrame.tsx

@@ -24,7 +24,7 @@ import PublicCollectionDownloadManager from 'services/publicCollectionDownloadMa
 import {
     defaultPublicCollectionGalleryContext,
     PublicCollectionGalleryContext,
-} from 'pages/shared-album';
+} from 'utils/publicCollectionGallery';
 
 const Container = styled.div`
     display: block;

src/components/pages/gallery/PreviewCard.tsx

@@ -9,7 +9,7 @@ import { GAP_BTW_TILES } from 'constants/gallery';
 import {
     defaultPublicCollectionGalleryContext,
     PublicCollectionGalleryContext,
-} from 'pages/shared-album';
+} from 'utils/publicCollectionGallery';
 import PublicCollectionDownloadManager from 'services/publicCollectionDownloadManager';
 
 interface IProps {

src/components/pages/sharedAlbum/AbuseReportForm.tsx

@@ -2,7 +2,7 @@ import MessageDialog from 'components/MessageDialog';
 import SubmitButton from 'components/SubmitButton';
 import { REPORT_REASON } from 'constants/publicCollection';
 import { Formik, FormikHelpers } from 'formik';
-import { PublicCollectionGalleryContext } from 'pages/shared-album';
+import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
 import React, { useContext, useState } from 'react';
 import { Form, FormControl } from 'react-bootstrap';
 import { reportAbuse } from 'services/publicCollectionService';

src/pages/shared-album/[[...token]]/index.tsx

@@ -1,13 +1,6 @@
 import { ALL_SECTION } from 'constants/collection';
 import PhotoFrame from 'components/PhotoFrame';
-import React, {
+import React, { useContext, useEffect, useRef, useState } from 'react';
-    createContext,
-    useContext,
-    useEffect,
-    useRef,
-    useState,
-} from 'react';
-import { PublicCollectionGalleryContextType } from 'types/publicCollection';
 import {
     getLocalPublicCollection,
     getLocalPublicFiles,
@@ -23,18 +16,11 @@ import ReportAbuse from 'components/pages/sharedAlbum/ReportAbuse';
 import { AbuseReportForm } from 'components/pages/sharedAlbum/AbuseReportForm';
 import MessageDialog, { MessageAttributes } from 'components/MessageDialog';
 import GoToEnte from 'components/pages/sharedAlbum/GoToEnte';
-
+import {
-export const defaultPublicCollectionGalleryContext: PublicCollectionGalleryContextType =
+    defaultPublicCollectionGalleryContext,
-    {
+    PublicCollectionGalleryContext,
-        token: null,
+} from 'utils/publicCollectionGallery';
-        accessedThroughSharedURL: false,
+import { useRouter } from 'next/router';
-        setDialogMessage: () => null,
-    };
-
-export const PublicCollectionGalleryContext =
-    createContext<PublicCollectionGalleryContextType>(
-        defaultPublicCollectionGalleryContext
-    );
 
 export default function PublicCollectionGallery() {
     const token = useRef<string>(null);
@@ -52,15 +38,16 @@ export default function PublicCollectionGallery() {
 
     const openMessageDialog = () => setMessageDialogView(true);
     const closeMessageDialog = () => setMessageDialogView(false);
-
+    const router = useRouter();
     useEffect(() => {
         const main = async () => {
-            url.current = window.location.href;
+            const eToken = (router.query.token?.[0] ?? '') as string;
-            const urlParams = new URLSearchParams(window.location.search);
-            const eToken = urlParams.get('accessToken');
             const eCollectionKey = decodeURIComponent(
-                urlParams.get('collectionKey')
+                window.location.hash.slice(1)
             );
+            if (!eToken || !eCollectionKey) {
+                return;
+            }
             token.current = eToken;
             collectionKey.current = eCollectionKey;
             const localCollection = await getLocalPublicCollection(

src/utils/collection/index.ts

@@ -110,7 +110,7 @@ export async function downloadCollection(
 
 export function transformShareURLForHost(url: string, collectionKey: string) {
     const host = window.location.host;
-    return `${url}&collectionKey=${encodeURIComponent(collectionKey)}`.replace(
+    return `${url}#${encodeURIComponent(collectionKey)}`.replace(
         'https://albums.ente.io',
         `http://${host}/shared-album`
     );

src/utils/publicCollectionGallery/index.ts

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+import { PublicCollectionGalleryContextType } from 'types/publicCollection';
+
+export const defaultPublicCollectionGalleryContext: PublicCollectionGalleryContextType =
+    {
+        token: null,
+        accessedThroughSharedURL: false,
+        setDialogMessage: () => null,
+    };
+
+export const PublicCollectionGalleryContext =
+    createContext<PublicCollectionGalleryContextType>(
+        defaultPublicCollectionGalleryContext
+    );