Refactored public share manager

This commit is contained in:
Ananddubey01 2023-03-29 07:34:14 +05:30
parent aecc1dd202
commit df55b2a420
6 changed files with 90 additions and 69 deletions

View file

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

View file

@ -3,16 +3,7 @@ import { Collection, PublicURL } from 'types/collection';
import { appendCollectionKeyToShareURL } from 'utils/collection'; import { appendCollectionKeyToShareURL } from 'utils/collection';
import EnablePublicShareOptions from './EnablePublicShareOptions'; import EnablePublicShareOptions from './EnablePublicShareOptions';
import CopyLinkModal from './copyLinkModal'; import CopyLinkModal from './copyLinkModal';
import PublicShareManage from './manage'; import ManagePublicShare from './managePublicShare';
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';
export default function PublicShare({ export default function PublicShare({
collection, collection,
@ -24,7 +15,6 @@ export default function PublicShare({
const [publicShareUrl, setPublicShareUrl] = useState<string>(null); const [publicShareUrl, setPublicShareUrl] = useState<string>(null);
const [publicShareProp, setPublicShareProp] = useState<PublicURL>(null); const [publicShareProp, setPublicShareProp] = useState<PublicURL>(null);
const [copyLinkModalView, setCopyLinkModalView] = useState(false); const [copyLinkModalView, setCopyLinkModalView] = useState(false);
const [manageShareView, setManageShareView] = useState(false);
useEffect(() => { useEffect(() => {
if (collection.publicURLs?.length) { if (collection.publicURLs?.length) {
@ -52,50 +42,19 @@ export default function PublicShare({
setCopyLinkModalView(false); setCopyLinkModalView(false);
}; };
const closeManageShare = () => setManageShareView(false);
const openManageShare = () => setManageShareView(true);
return ( return (
<> <>
{publicShareProp ? ( {publicShareProp ? (
<> <ManagePublicShare
<Stack> publicShareProp={publicShareProp}
<Typography setPublicShareProp={setPublicShareProp}
color="text.secondary" collection={collection}
variant="body2" publicShareUrl={publicShareUrl}
padding={1}> onRootClose={onRootClose}
<PublicIcon copyToClipboardHelper={copyToClipboardHelper}
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}
/>
</>
) : ( ) : (
<EnablePublicShareOptions <EnablePublicShareOptions
publicShareProp={publicShareProp}
setPublicShareProp={setPublicShareProp} setPublicShareProp={setPublicShareProp}
collection={collection} collection={collection}
setCopyLinkModalView={setCopyLinkModalView} setCopyLinkModalView={setCopyLinkModalView}

View file

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

View file

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

View file

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

View file

@ -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}
/>
</>
);
}