Refactored public share manager

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

@@ -12,7 +12,6 @@ import { handleSharingErrors } from 'utils/error/ui';
 import { EnteMenuItem } from 'components/Menu/menuItem';
 import PublicIcon from '@mui/icons-material/Public';
 interface Iprops {
-    publicShareProp;
     collection: Collection;
     setPublicShareProp: (value: PublicURL) => void;
     setCopyLinkModalView: (value: boolean) => void;

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

@@ -3,16 +3,7 @@ import { Collection, PublicURL } from 'types/collection';
 import { appendCollectionKeyToShareURL } from 'utils/collection';
 import EnablePublicShareOptions from './EnablePublicShareOptions';
 import CopyLinkModal from './copyLinkModal';
-import PublicShareManage from './manage';
-import ContentCopyIcon from '@mui/icons-material/ContentCopyOutlined';
-import PublicIcon from '@mui/icons-material/Public';
-import EnteMenuItemDivider from 'components/Menu/menuItemDivider';
-import { Stack, Typography } from '@mui/material';
-import LinkIcon from '@mui/icons-material/Link';
-import { EnteMenuItem } from 'components/Menu/menuItem';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import { t } from 'i18next';
-import { EnteMenuItemGroup } from 'components/Menu/menuItemGroup';
+import ManagePublicShare from './managePublicShare';
 
 export default function PublicShare({
     collection,
@@ -24,7 +15,6 @@ export default function PublicShare({
     const [publicShareUrl, setPublicShareUrl] = useState<string>(null);
     const [publicShareProp, setPublicShareProp] = useState<PublicURL>(null);
     const [copyLinkModalView, setCopyLinkModalView] = useState(false);
-    const [manageShareView, setManageShareView] = useState(false);
 
     useEffect(() => {
         if (collection.publicURLs?.length) {
@@ -52,50 +42,19 @@ export default function PublicShare({
         setCopyLinkModalView(false);
     };
 
-    const closeManageShare = () => setManageShareView(false);
-    const openManageShare = () => setManageShareView(true);
     return (
         <>
             {publicShareProp ? (
-                <>
-                    <Stack>
-                        <Typography
-                            color="text.secondary"
-                            variant="body2"
-                            padding={1}>
-                            <PublicIcon
-                                style={{ fontSize: 17, marginRight: 8 }}
-                            />
-                            {t('PUBLIC_LINK_ENABLED')}
-                        </Typography>
-                        <EnteMenuItemGroup>
-                            <EnteMenuItem
-                                startIcon={<ContentCopyIcon />}
-                                onClick={copyToClipboardHelper}>
-                                {t('COPY_LINK')}
-                            </EnteMenuItem>
-                            <EnteMenuItemDivider />
-                            <EnteMenuItem
-                                startIcon={<LinkIcon />}
-                                endIcon={<ChevronRightIcon />}
-                                onClick={openManageShare}>
-                                {t('MANAGE_LINK')}
-                            </EnteMenuItem>
-                        </EnteMenuItemGroup>
-                    </Stack>
-                    <PublicShareManage
-                        open={manageShareView}
-                        onClose={closeManageShare}
-                        onRootClose={onRootClose}
-                        publicShareProp={publicShareProp}
-                        collection={collection}
-                        setPublicShareProp={setPublicShareProp}
-                        publicShareUrl={publicShareUrl}
-                    />
-                </>
+                <ManagePublicShare
+                    publicShareProp={publicShareProp}
+                    setPublicShareProp={setPublicShareProp}
+                    collection={collection}
+                    publicShareUrl={publicShareUrl}
+                    onRootClose={onRootClose}
+                    copyToClipboardHelper={copyToClipboardHelper}
+                />
             ) : (
                 <EnablePublicShareOptions
-                    publicShareProp={publicShareProp}
                     setPublicShareProp={setPublicShareProp}
                     collection={collection}
                     setCopyLinkModalView={setCopyLinkModalView}

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

@@ -29,23 +29,25 @@ export function ManageDeviceLimit({
             deviceLimit: newLimit,
         });
     };
-    const [changeDeviceLimitView, setChangeDeviceLimitView] = useState(false);
+    const [isChangeDeviceLimitVisible, setIsChangeDeviceLimitVisible] =
+        useState(false);
     const deviceLimitOptions = useMemo(() => getDeviceLimitOptions(), []);
 
-    const closeDeviceLimitChangeModalView = () =>
-        setChangeDeviceLimitView(false);
-    const openDeviceLimitChangeModalView = () => setChangeDeviceLimitView(true);
+    const closeDeviceLimitChangeModal = () =>
+        setIsChangeDeviceLimitVisible(false);
+    const openDeviceLimitChangeModalView = () =>
+        setIsChangeDeviceLimitVisible(true);
 
     const changeDeviceLimitValue = (value: number) => async () => {
         await updateDeviceLimit(value);
-        setChangeDeviceLimitView(false);
+        setIsChangeDeviceLimitVisible(false);
     };
 
     const handleDrawerClose: DialogProps['onClose'] = (_, reason) => {
         if (reason === 'backdropClick') {
             onRootClose();
         } else {
-            closeDeviceLimitChangeModalView();
+            closeDeviceLimitChangeModal();
         }
     };
 
@@ -60,11 +62,11 @@ export function ManageDeviceLimit({
 
             <EnteDrawer
                 anchor="right"
-                open={changeDeviceLimitView}
+                open={isChangeDeviceLimitVisible}
                 onClose={handleDrawerClose}>
                 <Stack spacing={'4px'} py={'12px'}>
                     <Titlebar
-                        onClose={closeDeviceLimitChangeModalView}
+                        onClose={closeDeviceLimitChangeModal}
                         title={t('LINK_DEVICE_LIMIT')}
                         onRootClose={onRootClose}
                     />

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

@@ -33,7 +33,7 @@ interface Iprops {
     publicShareUrl: string;
 }
 
-export default function PublicShareManage({
+export default function ManagePublicShareOptions({
     publicShareProp,
     collection,
     setPublicShareProp,

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

@@ -1,8 +1,9 @@
-import { Stack, Typography } from '@mui/material';
+import { Stack } from '@mui/material';
 import { EnteMenuItem } from 'components/Menu/menuItem';
 import React from 'react';
 import { t } from 'i18next';
 import { PublicURL, Collection, UpdatePublicURL } from 'types/collection';
+import MenuSectionTitle from 'components/Menu/MenuSectionTitle';
 
 interface Iprops {
     publicShareProp: PublicURL;
@@ -31,14 +32,7 @@ export function ManagePublicCollect({
                 checked={publicShareProp?.enableCollect}>
                 {t('PUBLIC_COLLECT')}
             </EnteMenuItem>
-            <Typography
-                color="text.secondary"
-                variant="body2"
-                paddingLeft={1.75}
-                paddingTop={0.75}
-                paddingBottom={0.75}>
-                {t('PUBLIC_COLLECT_SUBTEXT')}
-            </Typography>
+            <MenuSectionTitle title={t('PUBLIC_COLLECT_SUBTEXT')} />
         </Stack>
     );
 }

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

@@ -0,0 +1,67 @@
+import { Stack, Typography } from '@mui/material';
+import { EnteMenuItem } from 'components/Menu/menuItem';
+import EnteMenuItemDivider from 'components/Menu/menuItemDivider';
+import { EnteMenuItemGroup } from 'components/Menu/menuItemGroup';
+import { Collection, PublicURL } from 'types/collection';
+import ManagePublicShareOptions from './manage';
+import PublicIcon from '@mui/icons-material/Public';
+import ContentCopyIcon from '@mui/icons-material/ContentCopyOutlined';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { SetPublicShareProp } from 'types/publicCollection';
+import LinkIcon from '@mui/icons-material/Link';
+import { useState } from 'react';
+import { t } from 'i18next';
+
+interface Iprops {
+    publicShareProp: PublicURL;
+    collection: Collection;
+    setPublicShareProp: SetPublicShareProp;
+    onRootClose: () => void;
+    publicShareUrl: string;
+    copyToClipboardHelper: () => void;
+}
+export default function ManagePublicShare({
+    publicShareProp,
+    setPublicShareProp,
+    collection,
+    onRootClose,
+    publicShareUrl,
+    copyToClipboardHelper,
+}: Iprops) {
+    const [manageShareView, setManageShareView] = useState(false);
+    const closeManageShare = () => setManageShareView(false);
+    const openManageShare = () => setManageShareView(true);
+    return (
+        <>
+            <Stack>
+                <Typography color="text.secondary" variant="body2" padding={1}>
+                    <PublicIcon style={{ fontSize: 17, marginRight: 8 }} />
+                    {t('PUBLIC_LINK_ENABLED')}
+                </Typography>
+                <EnteMenuItemGroup>
+                    <EnteMenuItem
+                        startIcon={<ContentCopyIcon />}
+                        onClick={copyToClipboardHelper}>
+                        {t('COPY_LINK')}
+                    </EnteMenuItem>
+                    <EnteMenuItemDivider />
+                    <EnteMenuItem
+                        startIcon={<LinkIcon />}
+                        endIcon={<ChevronRightIcon />}
+                        onClick={openManageShare}>
+                        {t('MANAGE_LINK')}
+                    </EnteMenuItem>
+                </EnteMenuItemGroup>
+            </Stack>
+            <ManagePublicShareOptions
+                open={manageShareView}
+                onClose={closeManageShare}
+                onRootClose={onRootClose}
+                publicShareProp={publicShareProp}
+                collection={collection}
+                setPublicShareProp={setPublicShareProp}
+                publicShareUrl={publicShareUrl}
+            />
+        </>
+    );
+}