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 { 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;
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -33,7 +33,7 @@ interface Iprops {
|
||||||
publicShareUrl: string;
|
publicShareUrl: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function PublicShareManage({
|
export default function ManagePublicShareOptions({
|
||||||
publicShareProp,
|
publicShareProp,
|
||||||
collection,
|
collection,
|
||||||
setPublicShareProp,
|
setPublicShareProp,
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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