From 6265a5612896d06baaf9fd38475646aa05f3d836 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Sat, 9 Nov 2024 16:34:05 +0530 Subject: [PATCH] Inline --- .../CollectionShare/publicShare/index.tsx | 2 +- .../publicShare/manage/index.tsx | 266 ----------------- .../publicShare/managePublicShare.tsx | 276 +++++++++++++++++- 3 files changed, 269 insertions(+), 275 deletions(-) diff --git a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/index.tsx b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/index.tsx index 78168783e7..0b62b2d8b1 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/index.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/index.tsx @@ -4,7 +4,7 @@ import { PublicLinkCreated } from "@/new/photos/components/share/PublicLinkCreat import { useEffect, useState } from "react"; import { appendCollectionKeyToShareURL } from "utils/collection"; import EnablePublicShareOptions from "./EnablePublicShareOptions"; -import ManagePublicShare from "./managePublicShare"; +import { ManagePublicShare } from "./managePublicShare"; export default function PublicShare({ collection, diff --git a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/index.tsx b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/index.tsx index 7f15cd33c3..e69de29bb2 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/index.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/manage/index.tsx @@ -1,266 +0,0 @@ -import { MenuItemDivider, MenuItemGroup } from "@/base/components/Menu"; -import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer"; -import { Titlebar } from "@/base/components/Titlebar"; -import type { - Collection, - PublicURL, - UpdatePublicURL, -} from "@/media/collection"; -import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; -import ChevronRight from "@mui/icons-material/ChevronRight"; -import ContentCopyIcon from "@mui/icons-material/ContentCopy"; -import RemoveCircleOutline from "@mui/icons-material/RemoveCircleOutline"; -import { DialogProps, Stack, Typography } from "@mui/material"; -import { t } from "i18next"; -import { GalleryContext } from "pages/gallery"; -import { useContext, useMemo, useState } from "react"; -import { - deleteShareableURL, - updateShareableURL, -} from "services/collectionService"; -import { SetPublicShareProp } from "types/publicCollection"; -import { getDeviceLimitOptions } from "utils/collection"; -import { handleSharingErrors } from "utils/error/ui"; -import { ManageDownloadAccess } from "./downloadAccess"; -import { ManageLinkExpiry } from "./linkExpiry"; -import { ManageLinkPassword } from "./linkPassword"; -import { ManagePublicCollect } from "./publicCollect"; - -interface ManagePublicShareOptionsProps { - publicShareProp: PublicURL; - collection: Collection; - setPublicShareProp: SetPublicShareProp; - open: boolean; - onClose: () => void; - onRootClose: () => void; - publicShareUrl: string; -} - -export const ManagePublicShareOptions: React.FC< - ManagePublicShareOptionsProps -> = ({ - publicShareProp, - collection, - setPublicShareProp, - open, - onClose, - onRootClose, - publicShareUrl, -}) => { - const handleDrawerClose: DialogProps["onClose"] = (_, reason) => { - if (reason === "backdropClick") { - onRootClose(); - } else { - onClose(); - } - }; - const galleryContext = useContext(GalleryContext); - - const [sharableLinkError, setSharableLinkError] = useState(null); - - const updatePublicShareURLHelper = async (req: UpdatePublicURL) => { - try { - galleryContext.setBlockingLoad(true); - const response = await updateShareableURL(req); - setPublicShareProp(response); - galleryContext.syncWithRemote(false, true); - } catch (e) { - const errorMessage = handleSharingErrors(e); - setSharableLinkError(errorMessage); - } finally { - galleryContext.setBlockingLoad(false); - } - }; - const disablePublicSharing = async () => { - try { - galleryContext.setBlockingLoad(true); - await deleteShareableURL(collection); - setPublicShareProp(null); - galleryContext.syncWithRemote(false, true); - onClose(); - } catch (e) { - const errorMessage = handleSharingErrors(e); - setSharableLinkError(errorMessage); - } finally { - galleryContext.setBlockingLoad(false); - } - }; - const copyToClipboardHelper = (text: string) => () => { - navigator.clipboard.writeText(text); - }; - return ( - - - - - - - - - - - - - - - - } - onClick={copyToClipboardHelper(publicShareUrl)} - label={t("copy_link")} - /> - - - } - onClick={disablePublicSharing} - label={t("REMOVE_LINK")} - /> - - - {sharableLinkError && ( - theme.colors.danger.A700, - mt: 0.5, - }} - > - {sharableLinkError} - - )} - - - - ); -}; - -interface ManageDeviceLimitProps { - publicShareProp: PublicURL; - collection: Collection; - updatePublicShareURLHelper: (req: UpdatePublicURL) => Promise; - onRootClose: () => void; -} - -export const ManageDeviceLimit: React.FC = ({ - collection, - publicShareProp, - updatePublicShareURLHelper, - onRootClose, -}) => { - const updateDeviceLimit = async (newLimit: number) => { - return updatePublicShareURLHelper({ - collectionID: collection.id, - deviceLimit: newLimit, - }); - }; - const [isChangeDeviceLimitVisible, setIsChangeDeviceLimitVisible] = - useState(false); - const deviceLimitOptions = useMemo(() => getDeviceLimitOptions(), []); - - const closeDeviceLimitChangeModal = () => - setIsChangeDeviceLimitVisible(false); - const openDeviceLimitChangeModalView = () => - setIsChangeDeviceLimitVisible(true); - - const changeDeviceLimitValue = (value: number) => async () => { - await updateDeviceLimit(value); - setIsChangeDeviceLimitVisible(false); - }; - - const handleDrawerClose: DialogProps["onClose"] = (_, reason) => { - if (reason === "backdropClick") { - onRootClose(); - } else { - closeDeviceLimitChangeModal(); - } - }; - - return ( - <> - } - /> - - - - - - - {deviceLimitOptions.map((item, index) => ( - <> - - {index !== - deviceLimitOptions.length - 1 && ( - - )} - - ))} - - - - - - ); -}; diff --git a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/managePublicShare.tsx b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/managePublicShare.tsx index 414196e061..a8d9ab2e8d 100644 --- a/web/apps/photos/src/components/Collections/CollectionShare/publicShare/managePublicShare.tsx +++ b/web/apps/photos/src/components/Collections/CollectionShare/publicShare/managePublicShare.tsx @@ -1,22 +1,42 @@ import { MenuItemDivider, MenuItemGroup } from "@/base/components/Menu"; -import type { Collection, PublicURL } from "@/media/collection"; +import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer"; +import { Titlebar } from "@/base/components/Titlebar"; +import type { + Collection, + PublicURL, + UpdatePublicURL, +} from "@/media/collection"; import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; -import ChevronRightIcon from "@mui/icons-material/ChevronRight"; +import { + default as ChevronRight, + default as ChevronRightIcon, +} from "@mui/icons-material/ChevronRight"; import ContentCopyIcon from "@mui/icons-material/ContentCopyOutlined"; import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; import LinkIcon from "@mui/icons-material/Link"; import PublicIcon from "@mui/icons-material/Public"; -import { Stack, Typography } from "@mui/material"; +import RemoveCircleOutline from "@mui/icons-material/RemoveCircleOutline"; +import { DialogProps, Stack, Typography } from "@mui/material"; import { t } from "i18next"; -import { useState } from "react"; +import { GalleryContext } from "pages/gallery"; +import { useContext, useMemo, useState } from "react"; +import { + deleteShareableURL, + updateShareableURL, +} from "services/collectionService"; import { SetPublicShareProp } from "types/publicCollection"; -import {ManagePublicShareOptions} from "./manage"; +import { getDeviceLimitOptions } from "utils/collection"; +import { handleSharingErrors } from "utils/error/ui"; +import { ManageDownloadAccess } from "./manage/downloadAccess"; +import { ManageLinkExpiry } from "./manage/linkExpiry"; +import { ManageLinkPassword } from "./manage/linkPassword"; +import { ManagePublicCollect } from "./manage/publicCollect"; export const isLinkExpired = (validTill: number) => { return validTill && validTill < Date.now() * 1000; }; -interface Iprops { +interface ManagePublicShareProps { publicShareProp: PublicURL; collection: Collection; setPublicShareProp: SetPublicShareProp; @@ -24,14 +44,15 @@ interface Iprops { publicShareUrl: string; copyToClipboardHelper: () => void; } -export default function ManagePublicShare({ + +export const ManagePublicShare: React.FC = ({ publicShareProp, setPublicShareProp, collection, onRootClose, publicShareUrl, copyToClipboardHelper, -}: Iprops) { +}) => { const [manageShareView, setManageShareView] = useState(false); const closeManageShare = () => setManageShareView(false); const openManageShare = () => setManageShareView(true); @@ -80,4 +101,243 @@ export default function ManagePublicShare({ /> ); +}; + +interface ManagePublicShareOptionsProps { + publicShareProp: PublicURL; + collection: Collection; + setPublicShareProp: SetPublicShareProp; + open: boolean; + onClose: () => void; + onRootClose: () => void; + publicShareUrl: string; } + +export const ManagePublicShareOptions: React.FC< + ManagePublicShareOptionsProps +> = ({ + publicShareProp, + collection, + setPublicShareProp, + open, + onClose, + onRootClose, + publicShareUrl, +}) => { + const handleDrawerClose: DialogProps["onClose"] = (_, reason) => { + if (reason === "backdropClick") { + onRootClose(); + } else { + onClose(); + } + }; + const galleryContext = useContext(GalleryContext); + + const [sharableLinkError, setSharableLinkError] = useState(null); + + const updatePublicShareURLHelper = async (req: UpdatePublicURL) => { + try { + galleryContext.setBlockingLoad(true); + const response = await updateShareableURL(req); + setPublicShareProp(response); + galleryContext.syncWithRemote(false, true); + } catch (e) { + const errorMessage = handleSharingErrors(e); + setSharableLinkError(errorMessage); + } finally { + galleryContext.setBlockingLoad(false); + } + }; + const disablePublicSharing = async () => { + try { + galleryContext.setBlockingLoad(true); + await deleteShareableURL(collection); + setPublicShareProp(null); + galleryContext.syncWithRemote(false, true); + onClose(); + } catch (e) { + const errorMessage = handleSharingErrors(e); + setSharableLinkError(errorMessage); + } finally { + galleryContext.setBlockingLoad(false); + } + }; + const copyToClipboardHelper = (text: string) => () => { + navigator.clipboard.writeText(text); + }; + return ( + + + + + + + + + + + + + + + + } + onClick={copyToClipboardHelper(publicShareUrl)} + label={t("copy_link")} + /> + + + } + onClick={disablePublicSharing} + label={t("REMOVE_LINK")} + /> + + + {sharableLinkError && ( + theme.colors.danger.A700, + mt: 0.5, + }} + > + {sharableLinkError} + + )} + + + + ); +}; + +interface ManageDeviceLimitProps { + publicShareProp: PublicURL; + collection: Collection; + updatePublicShareURLHelper: (req: UpdatePublicURL) => Promise; + onRootClose: () => void; +} + +export const ManageDeviceLimit: React.FC = ({ + collection, + publicShareProp, + updatePublicShareURLHelper, + onRootClose, +}) => { + const updateDeviceLimit = async (newLimit: number) => { + return updatePublicShareURLHelper({ + collectionID: collection.id, + deviceLimit: newLimit, + }); + }; + const [isChangeDeviceLimitVisible, setIsChangeDeviceLimitVisible] = + useState(false); + const deviceLimitOptions = useMemo(() => getDeviceLimitOptions(), []); + + const closeDeviceLimitChangeModal = () => + setIsChangeDeviceLimitVisible(false); + const openDeviceLimitChangeModalView = () => + setIsChangeDeviceLimitVisible(true); + + const changeDeviceLimitValue = (value: number) => async () => { + await updateDeviceLimit(value); + setIsChangeDeviceLimitVisible(false); + }; + + const handleDrawerClose: DialogProps["onClose"] = (_, reason) => { + if (reason === "backdropClick") { + onRootClose(); + } else { + closeDeviceLimitChangeModal(); + } + }; + + return ( + <> + } + /> + + + + + + + {deviceLimitOptions.map((item, index) => ( + <> + + {index !== + deviceLimitOptions.length - 1 && ( + + )} + + ))} + + + + + + ); +};