Refactored public share manager
This commit is contained in:
parent
aecc1dd202
commit
df55b2a420
|
@ -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;
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
@ -33,7 +33,7 @@ interface Iprops {
|
|||
publicShareUrl: string;
|
||||
}
|
||||
|
||||
export default function PublicShareManage({
|
||||
export default function ManagePublicShareOptions({
|
||||
publicShareProp,
|
||||
collection,
|
||||
setPublicShareProp,
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
Loading…
Reference in a new issue