From df55b2a420eac0c3e120d8251577429c78cf6843 Mon Sep 17 00:00:00 2001
From: Ananddubey01 <kr.anand619@gmail.com>
Date: Wed, 29 Mar 2023 07:34:14 +0530
Subject: [PATCH] Refactored public share manager

---
 .../publicShare/EnablePublicShareOptions.tsx  |  1 -
 .../CollectionShare/publicShare/index.tsx     | 59 +++-------------
 .../publicShare/manage/deviceLimit.tsx        | 18 ++---
 .../publicShare/manage/index.tsx              |  2 +-
 .../publicShare/manage/publicCollect.tsx      | 12 +---
 .../publicShare/managePublicShare.tsx         | 67 +++++++++++++++++++
 6 files changed, 90 insertions(+), 69 deletions(-)
 create mode 100644 src/components/Collections/CollectionShare/publicShare/managePublicShare.tsx

diff --git a/src/components/Collections/CollectionShare/publicShare/EnablePublicShareOptions.tsx b/src/components/Collections/CollectionShare/publicShare/EnablePublicShareOptions.tsx
index 94a5c26e8..ab57174db 100644
--- a/src/components/Collections/CollectionShare/publicShare/EnablePublicShareOptions.tsx
+++ b/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;
diff --git a/src/components/Collections/CollectionShare/publicShare/index.tsx b/src/components/Collections/CollectionShare/publicShare/index.tsx
index 613022456..d8bad6939 100644
--- a/src/components/Collections/CollectionShare/publicShare/index.tsx
+++ b/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}
diff --git a/src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx b/src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx
index 0c8c35f2e..9a6c11886 100644
--- a/src/components/Collections/CollectionShare/publicShare/manage/deviceLimit.tsx
+++ b/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}
                     />
diff --git a/src/components/Collections/CollectionShare/publicShare/manage/index.tsx b/src/components/Collections/CollectionShare/publicShare/manage/index.tsx
index 63c348321..46cf45eba 100644
--- a/src/components/Collections/CollectionShare/publicShare/manage/index.tsx
+++ b/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,
diff --git a/src/components/Collections/CollectionShare/publicShare/manage/publicCollect.tsx b/src/components/Collections/CollectionShare/publicShare/manage/publicCollect.tsx
index e014ca0be..7a0ca51d1 100644
--- a/src/components/Collections/CollectionShare/publicShare/manage/publicCollect.tsx
+++ b/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>
     );
 }
diff --git a/src/components/Collections/CollectionShare/publicShare/managePublicShare.tsx b/src/components/Collections/CollectionShare/publicShare/managePublicShare.tsx
new file mode 100644
index 000000000..dfcb01cea
--- /dev/null
+++ b/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}
+            />
+        </>
+    );
+}