fix delay of manage option

src/components/Collections/CollectionShare/publicShare/control.tsx

@@ -1,37 +1,36 @@
 import { Box, Typography } from '@mui/material';
 import { FlexWrapper } from 'components/Container';
 import { ButtonVariant } from 'components/pages/gallery/LinkButton';
-import { GalleryContext } from 'pages/gallery';
 import { AppContext } from 'pages/_app';
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import {
     createShareableURL,
     deleteShareableURL,
 } from 'services/collectionService';
-import { appendCollectionKeyToShareURL } from 'utils/collection';
+import { Collection, PublicURL } from 'types/collection';
 import { handleSharingErrors } from 'utils/error';
 import constants from 'utils/strings/constants';
 import PublicShareSwitch from './switch';
+interface Iprops {
+    collection: Collection;
+    publicShareActive: boolean;
+    setPublicShareProp: (value: PublicURL) => void;
+}
+
 export default function PublicShareControl({
-    publicShareUrl,
-    sharableLinkError,
     collection,
-    setPublicShareUrl,
-    setSharableLinkError,
-}) {
+    publicShareActive,
+    setPublicShareProp,
+}: Iprops) {
     const appContext = useContext(AppContext);
-    const galleryContext = useContext(GalleryContext);
+
+    const [sharableLinkError, setSharableLinkError] = useState(null);
 
     const createSharableURLHelper = async () => {
         try {
             appContext.startLoading();
             const publicURL = await createShareableURL(collection);
-            const sharableURL = await appendCollectionKeyToShareURL(
-                publicURL.url,
-                collection.key
-            );
-            setPublicShareUrl(sharableURL);
-            galleryContext.syncWithRemote(false, true);
+            setPublicShareProp(publicURL);
         } catch (e) {
             const errorMessage = handleSharingErrors(e);
             setSharableLinkError(errorMessage);
@@ -44,8 +43,7 @@ export default function PublicShareControl({
         try {
             appContext.startLoading();
             await deleteShareableURL(collection);
-            setPublicShareUrl(null);
-            galleryContext.syncWithRemote(false, true);
+            setPublicShareProp(null);
         } catch (e) {
             const errorMessage = handleSharingErrors(e);
             setSharableLinkError(errorMessage);
@@ -69,8 +67,7 @@ export default function PublicShareControl({
 
     const handleCollectionPublicSharing = () => {
         setSharableLinkError(null);
-
-        if (publicShareUrl) {
+        if (publicShareActive) {
             confirmDisablePublicSharing();
         } else {
             createSharableURLHelper();
@@ -86,7 +83,7 @@ export default function PublicShareControl({
                     sx={{
                         ml: 2,
                     }}
-                    checked={!!publicShareUrl}
+                    checked={publicShareActive}
                     onChange={handleCollectionPublicSharing}
                 />
             </FlexWrapper>

src/components/Collections/CollectionShare/publicShare/index.tsx

@@ -1,51 +1,53 @@
 import React, { useEffect, useState } from 'react';
-import { PublicURL } from 'types/collection';
+import { Collection, PublicURL } from 'types/collection';
 import { appendCollectionKeyToShareURL } from 'utils/collection';
 import PublicShareControl from './control';
 import PublicShareLink from './link';
 import PublicShareManage from './manage';
 
-export default function PublicShare({ collection }) {
-    const [sharableLinkError, setSharableLinkError] = useState(null);
+export default function PublicShare({
+    collection,
+}: {
+    collection: Collection;
+}) {
     const [publicShareUrl, setPublicShareUrl] = useState<string>(null);
     const [publicShareProp, setPublicShareProp] = useState<PublicURL>(null);
 
     useEffect(() => {
-        const main = async () => {
-            if (collection?.publicURLs?.[0]?.url) {
-                const t = await appendCollectionKeyToShareURL(
-                    collection?.publicURLs?.[0]?.url,
-                    collection.key
-                );
-                setPublicShareUrl(t);
-                setPublicShareProp(collection?.publicURLs?.[0] as PublicURL);
-            } else {
-                setPublicShareUrl(null);
-                setPublicShareProp(null);
-            }
-        };
-        main();
+        if (collection.publicURLs?.length) {
+            setPublicShareProp(collection.publicURLs[0]);
+        }
     }, [collection]);
 
+    useEffect(() => {
+        if (publicShareProp) {
+            const url = appendCollectionKeyToShareURL(
+                publicShareProp.url,
+                collection.key
+            );
+            setPublicShareUrl(url);
+        } else {
+            setPublicShareUrl(null);
+        }
+    }, [publicShareProp]);
+
     return (
         <>
             <PublicShareControl
-                setPublicShareUrl={setPublicShareUrl}
+                setPublicShareProp={setPublicShareProp}
                 collection={collection}
-                publicShareUrl={publicShareUrl}
-                sharableLinkError={sharableLinkError}
-                setSharableLinkError={setSharableLinkError}
+                publicShareActive={!!publicShareProp}
             />
-            {publicShareUrl && (
-                <PublicShareLink publicShareUrl={publicShareUrl} />
-            )}
             {publicShareProp && (
-                <PublicShareManage
-                    publicShareProp={publicShareProp}
-                    collection={collection}
-                    setPublicShareProp={setPublicShareProp}
-                    setSharableLinkError={setSharableLinkError}
-                />
+                <>
+                    <PublicShareLink publicShareUrl={publicShareUrl} />
+
+                    <PublicShareManage
+                        publicShareProp={publicShareProp}
+                        collection={collection}
+                        setPublicShareProp={setPublicShareProp}
+                    />
+                </>
             )}
         </>
     );

src/components/Collections/CollectionShare/publicShare/manage/index.tsx

@@ -2,7 +2,7 @@ import { ManageLinkPassword } from './linkPassword';
 import { ManageDeviceLimit } from './deviceLimit';
 import { ManageLinkExpiry } from './linkExpiry';
 import { PublicLinkSetPassword } from '../setPassword';
-import { Stack } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
 import { GalleryContext } from 'pages/gallery';
 import React, { useContext, useState } from 'react';
 import { updateShareableURL } from 'services/collectionService';
@@ -20,11 +20,11 @@ export default function PublicShareManage({
     publicShareProp,
     collection,
     setPublicShareProp,
-    setSharableLinkError,
 }) {
     const galleryContext = useContext(GalleryContext);
 
     const [changePasswordView, setChangePasswordView] = useState(false);
+    const [sharableLinkError, setSharableLinkError] = useState(null);
 
     const closeConfigurePassword = () => setChangePasswordView(false);
 
@@ -58,6 +58,16 @@ export default function PublicShareManage({
                 <ManageSectionLabel onClick={scrollToEnd}>
                     {constants.MANAGE_LINK}
                 </ManageSectionLabel>
+                {sharableLinkError && (
+                    <Typography
+                        variant="body2"
+                        sx={{
+                            color: (theme) => theme.palette.danger.main,
+                            mt: 0.5,
+                        }}>
+                        {sharableLinkError}
+                    </Typography>
+                )}
                 <ManageSectionOptions>
                     <Stack spacing={1}>
                         <ManageLinkExpiry

src/pages/_document.tsx

@@ -43,7 +43,7 @@ export default class MyDocument extends Document {
                         type="image/png"
                     />
                     <link rel="manifest" href="manifest.json" />
-                    <link rel="apple-touch-icon" href="/images/ente-512.png" />
+                    <link rel="apple-touch-icon" href="/images/ente/512.png" />
                     <meta name="theme-color" content="#111" />
                     <link
                         rel="icon"

src/utils/collection/index.ts

@@ -111,7 +111,7 @@ export async function downloadAllCollectionFiles(collectionID: number) {
     }
 }
 
-export async function appendCollectionKeyToShareURL(
+export function appendCollectionKeyToShareURL(
     url: string,
     collectionKey: string
 ) {