From 56a71c2cd8aa0c8987770abd3b2c0274b82d57b4 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 21 May 2024 18:31:55 +0530 Subject: [PATCH 01/16] Inline --- .../src/components/Sidebar/DebugSection.tsx | 69 ------------------ .../photos/src/components/Sidebar/index.tsx | 70 ++++++++++++++++++- 2 files changed, 69 insertions(+), 70 deletions(-) diff --git a/web/apps/photos/src/components/Sidebar/DebugSection.tsx b/web/apps/photos/src/components/Sidebar/DebugSection.tsx index e336374030..e69de29bb2 100644 --- a/web/apps/photos/src/components/Sidebar/DebugSection.tsx +++ b/web/apps/photos/src/components/Sidebar/DebugSection.tsx @@ -1,69 +0,0 @@ -import log from "@/next/log"; -import { savedLogs } from "@/next/log-web"; -import { downloadAsFile } from "@ente/shared/utils"; -import Typography from "@mui/material/Typography"; -import { EnteMenuItem } from "components/Menu/EnteMenuItem"; -import { t } from "i18next"; -import { AppContext } from "pages/_app"; -import { useContext, useEffect, useState } from "react"; -import { Trans } from "react-i18next"; -import { isInternalUser } from "utils/user"; -import { testUpload } from "../../../tests/upload.test"; - -export default function DebugSection() { - const appContext = useContext(AppContext); - const [appVersion, setAppVersion] = useState(); - - const electron = globalThis.electron; - - useEffect(() => { - electron?.appVersion().then((v) => setAppVersion(v)); - }); - - const confirmLogDownload = () => - appContext.setDialogMessage({ - title: t("DOWNLOAD_LOGS"), - content: , - proceed: { - text: t("DOWNLOAD"), - variant: "accent", - action: downloadLogs, - }, - close: { - text: t("CANCEL"), - }, - }); - - const downloadLogs = () => { - log.info("Downloading logs"); - if (electron) electron.openLogDirectory(); - else downloadAsFile(`debug_logs_${Date.now()}.txt`, savedLogs()); - }; - - return ( - <> - - {appVersion && ( - - {appVersion} - - )} - {isInternalUser() && ( - - )} - - ); -} diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx index a93eb23876..b3b672b47d 100644 --- a/web/apps/photos/src/components/Sidebar/index.tsx +++ b/web/apps/photos/src/components/Sidebar/index.tsx @@ -1,6 +1,5 @@ import { Divider, Stack } from "@mui/material"; import { CollectionSummaries } from "types/collection"; -import DebugSection from "./DebugSection"; import ExitSection from "./ExitSection"; import HeaderSection from "./Header"; import HelpSection from "./HelpSection"; @@ -8,6 +7,17 @@ import ShortcutSection from "./ShortcutSection"; import UtilitySection from "./UtilitySection"; import { DrawerSidebar } from "./styledComponents"; import UserDetailsSection from "./userDetailsSection"; +import log from "@/next/log"; +import { savedLogs } from "@/next/log-web"; +import { downloadAsFile } from "@ente/shared/utils"; +import Typography from "@mui/material/Typography"; +import { EnteMenuItem } from "components/Menu/EnteMenuItem"; +import { t } from "i18next"; +import { AppContext } from "pages/_app"; +import { useContext, useEffect, useState } from "react"; +import { Trans } from "react-i18next"; +import { isInternalUser } from "utils/user"; +import { testUpload } from "../../../tests/upload.test"; interface Iprops { collectionSummaries: CollectionSummaries; @@ -40,3 +50,61 @@ export default function Sidebar({ ); } + +const DebugSection: React.FC = () => { + const appContext = useContext(AppContext); + const [appVersion, setAppVersion] = useState(); + + const electron = globalThis.electron; + + useEffect(() => { + electron?.appVersion().then((v) => setAppVersion(v)); + }); + + const confirmLogDownload = () => + appContext.setDialogMessage({ + title: t("DOWNLOAD_LOGS"), + content: , + proceed: { + text: t("DOWNLOAD"), + variant: "accent", + action: downloadLogs, + }, + close: { + text: t("CANCEL"), + }, + }); + + const downloadLogs = () => { + log.info("Downloading logs"); + if (electron) electron.openLogDirectory(); + else downloadAsFile(`debug_logs_${Date.now()}.txt`, savedLogs()); + }; + + return ( + <> + + {appVersion && ( + + {appVersion} + + )} + {isInternalUser() && ( + + )} + + ); +} From 9db1197c19eade3c623ccc555f488ffd44a49e39 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 21 May 2024 18:33:08 +0530 Subject: [PATCH 02/16] Inline --- .../src/components/Sidebar/DebugSection.tsx | 0 .../src/components/Sidebar/ExitSection.tsx | 47 ------------- .../photos/src/components/Sidebar/index.tsx | 68 +++++++++++++++---- 3 files changed, 55 insertions(+), 60 deletions(-) delete mode 100644 web/apps/photos/src/components/Sidebar/DebugSection.tsx delete mode 100644 web/apps/photos/src/components/Sidebar/ExitSection.tsx diff --git a/web/apps/photos/src/components/Sidebar/DebugSection.tsx b/web/apps/photos/src/components/Sidebar/DebugSection.tsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/web/apps/photos/src/components/Sidebar/ExitSection.tsx b/web/apps/photos/src/components/Sidebar/ExitSection.tsx deleted file mode 100644 index 272f2c572a..0000000000 --- a/web/apps/photos/src/components/Sidebar/ExitSection.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import DeleteAccountModal from "components/DeleteAccountModal"; -import { EnteMenuItem } from "components/Menu/EnteMenuItem"; -import { t } from "i18next"; -import { AppContext } from "pages/_app"; -import { useContext, useState } from "react"; - -export default function ExitSection() { - const { setDialogMessage, logout } = useContext(AppContext); - - const [deleteAccountModalView, setDeleteAccountModalView] = useState(false); - - const closeDeleteAccountModal = () => setDeleteAccountModalView(false); - const openDeleteAccountModal = () => setDeleteAccountModalView(true); - - const confirmLogout = () => { - setDialogMessage({ - title: t("LOGOUT_MESSAGE"), - proceed: { - text: t("LOGOUT"), - action: logout, - variant: "critical", - }, - close: { text: t("CANCEL") }, - }); - }; - - return ( - <> - - - - - ); -} diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx index b3b672b47d..b076bd6bc0 100644 --- a/web/apps/photos/src/components/Sidebar/index.tsx +++ b/web/apps/photos/src/components/Sidebar/index.tsx @@ -1,23 +1,23 @@ +import log from "@/next/log"; +import { savedLogs } from "@/next/log-web"; +import { downloadAsFile } from "@ente/shared/utils"; import { Divider, Stack } from "@mui/material"; +import Typography from "@mui/material/Typography"; +import DeleteAccountModal from "components/DeleteAccountModal"; +import { EnteMenuItem } from "components/Menu/EnteMenuItem"; +import { t } from "i18next"; +import { AppContext } from "pages/_app"; +import { useContext, useEffect, useState } from "react"; +import { Trans } from "react-i18next"; import { CollectionSummaries } from "types/collection"; -import ExitSection from "./ExitSection"; +import { isInternalUser } from "utils/user"; +import { testUpload } from "../../../tests/upload.test"; import HeaderSection from "./Header"; import HelpSection from "./HelpSection"; import ShortcutSection from "./ShortcutSection"; import UtilitySection from "./UtilitySection"; import { DrawerSidebar } from "./styledComponents"; import UserDetailsSection from "./userDetailsSection"; -import log from "@/next/log"; -import { savedLogs } from "@/next/log-web"; -import { downloadAsFile } from "@ente/shared/utils"; -import Typography from "@mui/material/Typography"; -import { EnteMenuItem } from "components/Menu/EnteMenuItem"; -import { t } from "i18next"; -import { AppContext } from "pages/_app"; -import { useContext, useEffect, useState } from "react"; -import { Trans } from "react-i18next"; -import { isInternalUser } from "utils/user"; -import { testUpload } from "../../../tests/upload.test"; interface Iprops { collectionSummaries: CollectionSummaries; @@ -51,6 +51,48 @@ export default function Sidebar({ ); } +const ExitSection: React.FC = () => { + const { setDialogMessage, logout } = useContext(AppContext); + + const [deleteAccountModalView, setDeleteAccountModalView] = useState(false); + + const closeDeleteAccountModal = () => setDeleteAccountModalView(false); + const openDeleteAccountModal = () => setDeleteAccountModalView(true); + + const confirmLogout = () => { + setDialogMessage({ + title: t("LOGOUT_MESSAGE"), + proceed: { + text: t("LOGOUT"), + action: logout, + variant: "critical", + }, + close: { text: t("CANCEL") }, + }); + }; + + return ( + <> + + + + + ); +}; + const DebugSection: React.FC = () => { const appContext = useContext(AppContext); const [appVersion, setAppVersion] = useState(); @@ -107,4 +149,4 @@ const DebugSection: React.FC = () => { )} ); -} +}; From 789783a370fee25ff1486942b3c9e1906d2f4493 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 21 May 2024 18:34:06 +0530 Subject: [PATCH 03/16] Inline --- .../src/components/Sidebar/HelpSection.tsx | 62 ------------------- .../photos/src/components/Sidebar/index.tsx | 57 ++++++++++++++++- 2 files changed, 56 insertions(+), 63 deletions(-) delete mode 100644 web/apps/photos/src/components/Sidebar/HelpSection.tsx diff --git a/web/apps/photos/src/components/Sidebar/HelpSection.tsx b/web/apps/photos/src/components/Sidebar/HelpSection.tsx deleted file mode 100644 index 4cc97c414a..0000000000 --- a/web/apps/photos/src/components/Sidebar/HelpSection.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { t } from "i18next"; -import { useContext } from "react"; - -import EnteSpinner from "@ente/shared/components/EnteSpinner"; -import { Typography } from "@mui/material"; -import { EnteMenuItem } from "components/Menu/EnteMenuItem"; -import { NoStyleAnchor } from "components/pages/sharedAlbum/GoToEnte"; -import isElectron from "is-electron"; -import { AppContext } from "pages/_app"; -import { GalleryContext } from "pages/gallery"; -import exportService from "services/export"; -import { openLink } from "utils/common"; -import { getDownloadAppMessage } from "utils/ui"; - -export default function HelpSection() { - const { setDialogMessage } = useContext(AppContext); - const { openExportModal } = useContext(GalleryContext); - - const openRoadmap = () => - openLink("https://github.com/ente-io/ente/discussions", true); - - const contactSupport = () => openLink("mailto:support@ente.io", true); - - function openExport() { - if (isElectron()) { - openExportModal(); - } else { - setDialogMessage(getDownloadAppMessage()); - } - } - - return ( - <> - - - - {t("SUPPORT")} - - - } - variant="secondary" - /> - - ) - } - variant="secondary" - /> - - ); -} diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx index b076bd6bc0..efa10a4b0b 100644 --- a/web/apps/photos/src/components/Sidebar/index.tsx +++ b/web/apps/photos/src/components/Sidebar/index.tsx @@ -1,19 +1,25 @@ import log from "@/next/log"; import { savedLogs } from "@/next/log-web"; +import EnteSpinner from "@ente/shared/components/EnteSpinner"; import { downloadAsFile } from "@ente/shared/utils"; import { Divider, Stack } from "@mui/material"; import Typography from "@mui/material/Typography"; import DeleteAccountModal from "components/DeleteAccountModal"; import { EnteMenuItem } from "components/Menu/EnteMenuItem"; +import { NoStyleAnchor } from "components/pages/sharedAlbum/GoToEnte"; import { t } from "i18next"; +import isElectron from "is-electron"; import { AppContext } from "pages/_app"; +import { GalleryContext } from "pages/gallery"; import { useContext, useEffect, useState } from "react"; import { Trans } from "react-i18next"; +import exportService from "services/export"; import { CollectionSummaries } from "types/collection"; +import { openLink } from "utils/common"; +import { getDownloadAppMessage } from "utils/ui"; import { isInternalUser } from "utils/user"; import { testUpload } from "../../../tests/upload.test"; import HeaderSection from "./Header"; -import HelpSection from "./HelpSection"; import ShortcutSection from "./ShortcutSection"; import UtilitySection from "./UtilitySection"; import { DrawerSidebar } from "./styledComponents"; @@ -51,6 +57,55 @@ export default function Sidebar({ ); } +const HelpSection: React.FC = () => { + const { setDialogMessage } = useContext(AppContext); + const { openExportModal } = useContext(GalleryContext); + + const openRoadmap = () => + openLink("https://github.com/ente-io/ente/discussions", true); + + const contactSupport = () => openLink("mailto:support@ente.io", true); + + function openExport() { + if (isElectron()) { + openExportModal(); + } else { + setDialogMessage(getDownloadAppMessage()); + } + } + + return ( + <> + + + + {t("SUPPORT")} + + + } + variant="secondary" + /> + + ) + } + variant="secondary" + /> + + ); +}; + const ExitSection: React.FC = () => { const { setDialogMessage, logout } = useContext(AppContext); From 43064b617a2a6d5ce392ca45f8bc7c19a37a96d8 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 21 May 2024 18:36:26 +0530 Subject: [PATCH 04/16] Inline --- .../src/components/Sidebar/UtilitySection.tsx | 222 ------------------ .../photos/src/components/Sidebar/index.tsx | 218 ++++++++++++++++- 2 files changed, 217 insertions(+), 223 deletions(-) delete mode 100644 web/apps/photos/src/components/Sidebar/UtilitySection.tsx diff --git a/web/apps/photos/src/components/Sidebar/UtilitySection.tsx b/web/apps/photos/src/components/Sidebar/UtilitySection.tsx deleted file mode 100644 index 32f61d9764..0000000000 --- a/web/apps/photos/src/components/Sidebar/UtilitySection.tsx +++ /dev/null @@ -1,222 +0,0 @@ -import log from "@/next/log"; -import RecoveryKey from "@ente/shared/components/RecoveryKey"; -import { - ACCOUNTS_PAGES, - PHOTOS_PAGES as PAGES, -} from "@ente/shared/constants/pages"; -import TwoFactorModal from "components/TwoFactor/Modal"; -import { t } from "i18next"; -import { useRouter } from "next/router"; -import { AppContext } from "pages/_app"; -import { useContext, useState } from "react"; -// import mlIDbStorage from 'services/ml/db'; -import { - configurePasskeyRecovery, - isPasskeyRecoveryEnabled, -} from "@ente/accounts/services/passkey"; -import { APPS, CLIENT_PACKAGE_NAMES } from "@ente/shared/apps/constants"; -import ThemeSwitcher from "@ente/shared/components/ThemeSwitcher"; -import { getRecoveryKey } from "@ente/shared/crypto/helpers"; -import { - encryptToB64, - generateEncryptionKey, -} from "@ente/shared/crypto/internal/libsodium"; -import { getAccountsURL } from "@ente/shared/network/api"; -import { THEME_COLOR } from "@ente/shared/themes/constants"; -import { EnteMenuItem } from "components/Menu/EnteMenuItem"; -import { WatchFolder } from "components/WatchFolder"; -import isElectron from "is-electron"; -import { getAccountsToken } from "services/userService"; -import { getDownloadAppMessage } from "utils/ui"; -import { isInternalUser } from "utils/user"; -import Preferences from "./Preferences"; - -export default function UtilitySection({ closeSidebar }) { - const router = useRouter(); - const appContext = useContext(AppContext); - const { - setDialogMessage, - startLoading, - watchFolderView, - setWatchFolderView, - themeColor, - setThemeColor, - } = appContext; - - const [recoverModalView, setRecoveryModalView] = useState(false); - const [twoFactorModalView, setTwoFactorModalView] = useState(false); - const [preferencesView, setPreferencesView] = useState(false); - - const openPreferencesOptions = () => setPreferencesView(true); - const closePreferencesOptions = () => setPreferencesView(false); - - const openRecoveryKeyModal = () => setRecoveryModalView(true); - const closeRecoveryKeyModal = () => setRecoveryModalView(false); - - const openTwoFactorModal = () => setTwoFactorModalView(true); - const closeTwoFactorModal = () => setTwoFactorModalView(false); - - const openWatchFolder = () => { - if (isElectron()) { - setWatchFolderView(true); - } else { - setDialogMessage(getDownloadAppMessage()); - } - }; - const closeWatchFolder = () => setWatchFolderView(false); - - const redirectToChangePasswordPage = () => { - closeSidebar(); - router.push(PAGES.CHANGE_PASSWORD); - }; - - const redirectToChangeEmailPage = () => { - closeSidebar(); - router.push(PAGES.CHANGE_EMAIL); - }; - - const redirectToAccountsPage = async () => { - closeSidebar(); - - try { - // check if the user has passkey recovery enabled - const recoveryEnabled = await isPasskeyRecoveryEnabled(); - if (!recoveryEnabled) { - // let's create the necessary recovery information - const recoveryKey = await getRecoveryKey(); - - const resetSecret = await generateEncryptionKey(); - - const encryptionResult = await encryptToB64( - resetSecret, - recoveryKey, - ); - - await configurePasskeyRecovery( - resetSecret, - encryptionResult.encryptedData, - encryptionResult.nonce, - ); - } - - const accountsToken = await getAccountsToken(); - - window.open( - `${getAccountsURL()}${ - ACCOUNTS_PAGES.ACCOUNT_HANDOFF - }?package=${CLIENT_PACKAGE_NAMES.get( - APPS.PHOTOS, - )}&token=${accountsToken}`, - ); - } catch (e) { - log.error("failed to redirect to accounts page", e); - } - }; - - const redirectToDeduplicatePage = () => router.push(PAGES.DEDUPLICATE); - - const somethingWentWrong = () => - setDialogMessage({ - title: t("ERROR"), - content: t("RECOVER_KEY_GENERATION_FAILED"), - close: { variant: "critical" }, - }); - - const toggleTheme = () => { - setThemeColor((themeColor) => - themeColor === THEME_COLOR.DARK - ? THEME_COLOR.LIGHT - : THEME_COLOR.DARK, - ); - }; - - return ( - <> - {isElectron() && ( - - )} - - {isInternalUser() && ( - - } - /> - )} - - - {isInternalUser() && ( - - )} - - - - - - - - - - - {isElectron() && ( - - )} - - - ); -} diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx index efa10a4b0b..0d048645d8 100644 --- a/web/apps/photos/src/components/Sidebar/index.tsx +++ b/web/apps/photos/src/components/Sidebar/index.tsx @@ -1,27 +1,49 @@ import log from "@/next/log"; import { savedLogs } from "@/next/log-web"; +import { + configurePasskeyRecovery, + isPasskeyRecoveryEnabled, +} from "@ente/accounts/services/passkey"; +import { APPS, CLIENT_PACKAGE_NAMES } from "@ente/shared/apps/constants"; import EnteSpinner from "@ente/shared/components/EnteSpinner"; +import RecoveryKey from "@ente/shared/components/RecoveryKey"; +import ThemeSwitcher from "@ente/shared/components/ThemeSwitcher"; +import { + ACCOUNTS_PAGES, + PHOTOS_PAGES as PAGES, +} from "@ente/shared/constants/pages"; +import { getRecoveryKey } from "@ente/shared/crypto/helpers"; +import { + encryptToB64, + generateEncryptionKey, +} from "@ente/shared/crypto/internal/libsodium"; +import { getAccountsURL } from "@ente/shared/network/api"; +import { THEME_COLOR } from "@ente/shared/themes/constants"; import { downloadAsFile } from "@ente/shared/utils"; import { Divider, Stack } from "@mui/material"; import Typography from "@mui/material/Typography"; import DeleteAccountModal from "components/DeleteAccountModal"; import { EnteMenuItem } from "components/Menu/EnteMenuItem"; +import TwoFactorModal from "components/TwoFactor/Modal"; +import { WatchFolder } from "components/WatchFolder"; import { NoStyleAnchor } from "components/pages/sharedAlbum/GoToEnte"; import { t } from "i18next"; import isElectron from "is-electron"; +import { useRouter } from "next/router"; import { AppContext } from "pages/_app"; import { GalleryContext } from "pages/gallery"; import { useContext, useEffect, useState } from "react"; import { Trans } from "react-i18next"; import exportService from "services/export"; +import { getAccountsToken } from "services/userService"; import { CollectionSummaries } from "types/collection"; import { openLink } from "utils/common"; import { getDownloadAppMessage } from "utils/ui"; import { isInternalUser } from "utils/user"; import { testUpload } from "../../../tests/upload.test"; import HeaderSection from "./Header"; +import Preferences from "./Preferences"; import ShortcutSection from "./ShortcutSection"; -import UtilitySection from "./UtilitySection"; import { DrawerSidebar } from "./styledComponents"; import UserDetailsSection from "./userDetailsSection"; @@ -57,6 +79,200 @@ export default function Sidebar({ ); } +interface UtilitySectionProps { + closeSidebar: () => void; +} + +const UtilitySection: React.FC = ({ closeSidebar }) => { + const router = useRouter(); + const appContext = useContext(AppContext); + const { + setDialogMessage, + startLoading, + watchFolderView, + setWatchFolderView, + themeColor, + setThemeColor, + } = appContext; + + const [recoverModalView, setRecoveryModalView] = useState(false); + const [twoFactorModalView, setTwoFactorModalView] = useState(false); + const [preferencesView, setPreferencesView] = useState(false); + + const openPreferencesOptions = () => setPreferencesView(true); + const closePreferencesOptions = () => setPreferencesView(false); + + const openRecoveryKeyModal = () => setRecoveryModalView(true); + const closeRecoveryKeyModal = () => setRecoveryModalView(false); + + const openTwoFactorModal = () => setTwoFactorModalView(true); + const closeTwoFactorModal = () => setTwoFactorModalView(false); + + const openWatchFolder = () => { + if (isElectron()) { + setWatchFolderView(true); + } else { + setDialogMessage(getDownloadAppMessage()); + } + }; + const closeWatchFolder = () => setWatchFolderView(false); + + const redirectToChangePasswordPage = () => { + closeSidebar(); + router.push(PAGES.CHANGE_PASSWORD); + }; + + const redirectToChangeEmailPage = () => { + closeSidebar(); + router.push(PAGES.CHANGE_EMAIL); + }; + + const redirectToAccountsPage = async () => { + closeSidebar(); + + try { + // check if the user has passkey recovery enabled + const recoveryEnabled = await isPasskeyRecoveryEnabled(); + if (!recoveryEnabled) { + // let's create the necessary recovery information + const recoveryKey = await getRecoveryKey(); + + const resetSecret = await generateEncryptionKey(); + + const encryptionResult = await encryptToB64( + resetSecret, + recoveryKey, + ); + + await configurePasskeyRecovery( + resetSecret, + encryptionResult.encryptedData, + encryptionResult.nonce, + ); + } + + const accountsToken = await getAccountsToken(); + + window.open( + `${getAccountsURL()}${ + ACCOUNTS_PAGES.ACCOUNT_HANDOFF + }?package=${CLIENT_PACKAGE_NAMES.get( + APPS.PHOTOS, + )}&token=${accountsToken}`, + ); + } catch (e) { + log.error("failed to redirect to accounts page", e); + } + }; + + const redirectToDeduplicatePage = () => router.push(PAGES.DEDUPLICATE); + + const somethingWentWrong = () => + setDialogMessage({ + title: t("ERROR"), + content: t("RECOVER_KEY_GENERATION_FAILED"), + close: { variant: "critical" }, + }); + + const toggleTheme = () => { + setThemeColor((themeColor) => + themeColor === THEME_COLOR.DARK + ? THEME_COLOR.LIGHT + : THEME_COLOR.DARK, + ); + }; + + return ( + <> + {isElectron() && ( + + )} + + {isInternalUser() && ( + + } + /> + )} + + + {isInternalUser() && ( + + )} + + + + + + + + + + + {isElectron() && ( + + )} + + + ); +}; + const HelpSection: React.FC = () => { const { setDialogMessage } = useContext(AppContext); const { openExportModal } = useContext(GalleryContext); From d6398bd8fc94ba1ce9c38aaeb4ba55d967906f72 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 21 May 2024 18:39:42 +0530 Subject: [PATCH 05/16] Inline --- .../components/Sidebar/ShortcutSection.tsx | 102 ------------------ .../photos/src/components/Sidebar/index.tsx | 98 ++++++++++++++++- 2 files changed, 97 insertions(+), 103 deletions(-) delete mode 100644 web/apps/photos/src/components/Sidebar/ShortcutSection.tsx diff --git a/web/apps/photos/src/components/Sidebar/ShortcutSection.tsx b/web/apps/photos/src/components/Sidebar/ShortcutSection.tsx deleted file mode 100644 index dce298844e..0000000000 --- a/web/apps/photos/src/components/Sidebar/ShortcutSection.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { t } from "i18next"; -import { useContext, useEffect, useState } from "react"; - -import ArchiveOutlined from "@mui/icons-material/ArchiveOutlined"; -import CategoryIcon from "@mui/icons-material/Category"; -import DeleteOutline from "@mui/icons-material/DeleteOutline"; -import LockOutlined from "@mui/icons-material/LockOutlined"; -import VisibilityOff from "@mui/icons-material/VisibilityOff"; -import { EnteMenuItem } from "components/Menu/EnteMenuItem"; -import { - ARCHIVE_SECTION, - DUMMY_UNCATEGORIZED_COLLECTION, - TRASH_SECTION, -} from "constants/collection"; -import { GalleryContext } from "pages/gallery"; -import { getUncategorizedCollection } from "services/collectionService"; -import { CollectionSummaries } from "types/collection"; -interface Iprops { - closeSidebar: () => void; - collectionSummaries: CollectionSummaries; -} - -export default function ShortcutSection({ - closeSidebar, - collectionSummaries, -}: Iprops) { - const galleryContext = useContext(GalleryContext); - const [uncategorizedCollectionId, setUncategorizedCollectionID] = - useState(); - - useEffect(() => { - const main = async () => { - const unCategorizedCollection = await getUncategorizedCollection(); - if (unCategorizedCollection) { - setUncategorizedCollectionID(unCategorizedCollection.id); - } else { - setUncategorizedCollectionID(DUMMY_UNCATEGORIZED_COLLECTION); - } - }; - main(); - }, []); - - const openUncategorizedSection = () => { - galleryContext.setActiveCollectionID(uncategorizedCollectionId); - closeSidebar(); - }; - - const openTrashSection = () => { - galleryContext.setActiveCollectionID(TRASH_SECTION); - closeSidebar(); - }; - - const openArchiveSection = () => { - galleryContext.setActiveCollectionID(ARCHIVE_SECTION); - closeSidebar(); - }; - - const openHiddenSection = () => { - galleryContext.openHiddenSection(() => { - closeSidebar(); - }); - }; - - return ( - <> - } - onClick={openUncategorizedSection} - variant="captioned" - label={t("UNCATEGORIZED")} - subText={collectionSummaries - .get(uncategorizedCollectionId) - ?.fileCount.toString()} - /> - } - onClick={openArchiveSection} - variant="captioned" - label={t("ARCHIVE_SECTION_NAME")} - subText={collectionSummaries - .get(ARCHIVE_SECTION) - ?.fileCount.toString()} - /> - } - onClick={openHiddenSection} - variant="captioned" - label={t("HIDDEN")} - subIcon={} - /> - } - onClick={openTrashSection} - variant="captioned" - label={t("TRASH")} - subText={collectionSummaries - .get(TRASH_SECTION) - ?.fileCount.toString()} - /> - - ); -} diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx index 0d048645d8..05a1e78432 100644 --- a/web/apps/photos/src/components/Sidebar/index.tsx +++ b/web/apps/photos/src/components/Sidebar/index.tsx @@ -20,6 +20,11 @@ import { import { getAccountsURL } from "@ente/shared/network/api"; import { THEME_COLOR } from "@ente/shared/themes/constants"; import { downloadAsFile } from "@ente/shared/utils"; +import ArchiveOutlined from "@mui/icons-material/ArchiveOutlined"; +import CategoryIcon from "@mui/icons-material/Category"; +import DeleteOutline from "@mui/icons-material/DeleteOutline"; +import LockOutlined from "@mui/icons-material/LockOutlined"; +import VisibilityOff from "@mui/icons-material/VisibilityOff"; import { Divider, Stack } from "@mui/material"; import Typography from "@mui/material/Typography"; import DeleteAccountModal from "components/DeleteAccountModal"; @@ -27,6 +32,11 @@ import { EnteMenuItem } from "components/Menu/EnteMenuItem"; import TwoFactorModal from "components/TwoFactor/Modal"; import { WatchFolder } from "components/WatchFolder"; import { NoStyleAnchor } from "components/pages/sharedAlbum/GoToEnte"; +import { + ARCHIVE_SECTION, + DUMMY_UNCATEGORIZED_COLLECTION, + TRASH_SECTION, +} from "constants/collection"; import { t } from "i18next"; import isElectron from "is-electron"; import { useRouter } from "next/router"; @@ -34,6 +44,7 @@ import { AppContext } from "pages/_app"; import { GalleryContext } from "pages/gallery"; import { useContext, useEffect, useState } from "react"; import { Trans } from "react-i18next"; +import { getUncategorizedCollection } from "services/collectionService"; import exportService from "services/export"; import { getAccountsToken } from "services/userService"; import { CollectionSummaries } from "types/collection"; @@ -43,7 +54,6 @@ import { isInternalUser } from "utils/user"; import { testUpload } from "../../../tests/upload.test"; import HeaderSection from "./Header"; import Preferences from "./Preferences"; -import ShortcutSection from "./ShortcutSection"; import { DrawerSidebar } from "./styledComponents"; import UserDetailsSection from "./userDetailsSection"; @@ -79,6 +89,92 @@ export default function Sidebar({ ); } +interface ShortcutSectionProps { + closeSidebar: () => void; + collectionSummaries: CollectionSummaries; +} + +const ShortcutSection: React.FC = ({ + closeSidebar, + collectionSummaries, +}) => { + const galleryContext = useContext(GalleryContext); + const [uncategorizedCollectionId, setUncategorizedCollectionID] = + useState(); + + useEffect(() => { + const main = async () => { + const unCategorizedCollection = await getUncategorizedCollection(); + if (unCategorizedCollection) { + setUncategorizedCollectionID(unCategorizedCollection.id); + } else { + setUncategorizedCollectionID(DUMMY_UNCATEGORIZED_COLLECTION); + } + }; + main(); + }, []); + + const openUncategorizedSection = () => { + galleryContext.setActiveCollectionID(uncategorizedCollectionId); + closeSidebar(); + }; + + const openTrashSection = () => { + galleryContext.setActiveCollectionID(TRASH_SECTION); + closeSidebar(); + }; + + const openArchiveSection = () => { + galleryContext.setActiveCollectionID(ARCHIVE_SECTION); + closeSidebar(); + }; + + const openHiddenSection = () => { + galleryContext.openHiddenSection(() => { + closeSidebar(); + }); + }; + + return ( + <> + } + onClick={openUncategorizedSection} + variant="captioned" + label={t("UNCATEGORIZED")} + subText={collectionSummaries + .get(uncategorizedCollectionId) + ?.fileCount.toString()} + /> + } + onClick={openArchiveSection} + variant="captioned" + label={t("ARCHIVE_SECTION_NAME")} + subText={collectionSummaries + .get(ARCHIVE_SECTION) + ?.fileCount.toString()} + /> + } + onClick={openHiddenSection} + variant="captioned" + label={t("HIDDEN")} + subIcon={} + /> + } + onClick={openTrashSection} + variant="captioned" + label={t("TRASH")} + subText={collectionSummaries + .get(TRASH_SECTION) + ?.fileCount.toString()} + /> + + ); +}; + interface UtilitySectionProps { closeSidebar: () => void; } From 994876911a505e059c5a73ebd3150dbd8e7a2f65 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 21 May 2024 18:42:42 +0530 Subject: [PATCH 06/16] Inline --- .../photos/src/components/Sidebar/index.tsx | 104 +++++++++++++++++- .../components/Sidebar/userDetailsSection.tsx | 96 ---------------- 2 files changed, 100 insertions(+), 100 deletions(-) delete mode 100644 web/apps/photos/src/components/Sidebar/userDetailsSection.tsx diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx index 05a1e78432..bddba3a4cb 100644 --- a/web/apps/photos/src/components/Sidebar/index.tsx +++ b/web/apps/photos/src/components/Sidebar/index.tsx @@ -17,7 +17,9 @@ import { encryptToB64, generateEncryptionKey, } from "@ente/shared/crypto/internal/libsodium"; +import { useLocalState } from "@ente/shared/hooks/useLocalState"; import { getAccountsURL } from "@ente/shared/network/api"; +import { LS_KEYS, getData, setData } from "@ente/shared/storage/localStorage"; import { THEME_COLOR } from "@ente/shared/themes/constants"; import { downloadAsFile } from "@ente/shared/utils"; import ArchiveOutlined from "@mui/icons-material/ArchiveOutlined"; @@ -25,7 +27,7 @@ import CategoryIcon from "@mui/icons-material/Category"; import DeleteOutline from "@mui/icons-material/DeleteOutline"; import LockOutlined from "@mui/icons-material/LockOutlined"; import VisibilityOff from "@mui/icons-material/VisibilityOff"; -import { Divider, Stack } from "@mui/material"; +import { Box, Divider, Skeleton, Stack } from "@mui/material"; import Typography from "@mui/material/Typography"; import DeleteAccountModal from "components/DeleteAccountModal"; import { EnteMenuItem } from "components/Menu/EnteMenuItem"; @@ -42,20 +44,26 @@ import isElectron from "is-electron"; import { useRouter } from "next/router"; import { AppContext } from "pages/_app"; import { GalleryContext } from "pages/gallery"; -import { useContext, useEffect, useState } from "react"; +import { useContext, useEffect, useMemo, useState } from "react"; import { Trans } from "react-i18next"; +import billingService from "services/billingService"; import { getUncategorizedCollection } from "services/collectionService"; import exportService from "services/export"; -import { getAccountsToken } from "services/userService"; +import { getAccountsToken, getUserDetailsV2 } from "services/userService"; import { CollectionSummaries } from "types/collection"; +import { UserDetails } from "types/user"; +import { hasStripeSubscription, isSubscriptionPastDue } from "utils/billing"; import { openLink } from "utils/common"; import { getDownloadAppMessage } from "utils/ui"; import { isInternalUser } from "utils/user"; +import { isFamilyAdmin, isPartOfFamily } from "utils/user/family"; import { testUpload } from "../../../tests/upload.test"; +import { MemberSubscriptionManage } from "../MemberSubscriptionManage"; import HeaderSection from "./Header"; import Preferences from "./Preferences"; +import SubscriptionCard from "./SubscriptionCard"; +import SubscriptionStatus from "./SubscriptionStatus"; import { DrawerSidebar } from "./styledComponents"; -import UserDetailsSection from "./userDetailsSection"; interface Iprops { collectionSummaries: CollectionSummaries; @@ -89,6 +97,94 @@ export default function Sidebar({ ); } +interface UserDetailsSectionProps { + sidebarView: boolean; +} + +const UserDetailsSection: React.FC = ({ + sidebarView, +}) => { + const galleryContext = useContext(GalleryContext); + + const [userDetails, setUserDetails] = useLocalState( + LS_KEYS.USER_DETAILS, + ); + const [memberSubscriptionManageView, setMemberSubscriptionManageView] = + useState(false); + + const openMemberSubscriptionManage = () => + setMemberSubscriptionManageView(true); + const closeMemberSubscriptionManage = () => + setMemberSubscriptionManageView(false); + + useEffect(() => { + if (!sidebarView) { + return; + } + const main = async () => { + const userDetails = await getUserDetailsV2(); + setUserDetails(userDetails); + setData(LS_KEYS.SUBSCRIPTION, userDetails.subscription); + setData(LS_KEYS.FAMILY_DATA, userDetails.familyData); + setData(LS_KEYS.USER, { + ...getData(LS_KEYS.USER), + email: userDetails.email, + }); + }; + main(); + }, [sidebarView]); + + const isMemberSubscription = useMemo( + () => + userDetails && + isPartOfFamily(userDetails.familyData) && + !isFamilyAdmin(userDetails.familyData), + [userDetails], + ); + + const handleSubscriptionCardClick = () => { + if (isMemberSubscription) { + openMemberSubscriptionManage(); + } else { + if ( + hasStripeSubscription(userDetails.subscription) && + isSubscriptionPastDue(userDetails.subscription) + ) { + billingService.redirectToCustomerPortal(); + } else { + galleryContext.showPlanSelectorModal(); + } + } + }; + + return ( + <> + + + {userDetails ? ( + userDetails.email + ) : ( + + )} + + + + + + {isMemberSubscription && ( + + )} + + ); +}; + interface ShortcutSectionProps { closeSidebar: () => void; collectionSummaries: CollectionSummaries; diff --git a/web/apps/photos/src/components/Sidebar/userDetailsSection.tsx b/web/apps/photos/src/components/Sidebar/userDetailsSection.tsx deleted file mode 100644 index 4d1bf3cb15..0000000000 --- a/web/apps/photos/src/components/Sidebar/userDetailsSection.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { useLocalState } from "@ente/shared/hooks/useLocalState"; -import { LS_KEYS, getData, setData } from "@ente/shared/storage/localStorage"; -import { Box, Skeleton } from "@mui/material"; -import Typography from "@mui/material/Typography"; -import { GalleryContext } from "pages/gallery"; -import { useContext, useEffect, useMemo, useState } from "react"; -import billingService from "services/billingService"; -import { getUserDetailsV2 } from "services/userService"; -import { UserDetails } from "types/user"; -import { hasStripeSubscription, isSubscriptionPastDue } from "utils/billing"; -import { isFamilyAdmin, isPartOfFamily } from "utils/user/family"; -import { MemberSubscriptionManage } from "../MemberSubscriptionManage"; -import SubscriptionCard from "./SubscriptionCard"; -import SubscriptionStatus from "./SubscriptionStatus"; - -export default function UserDetailsSection({ sidebarView }) { - const galleryContext = useContext(GalleryContext); - - const [userDetails, setUserDetails] = useLocalState( - LS_KEYS.USER_DETAILS, - ); - const [memberSubscriptionManageView, setMemberSubscriptionManageView] = - useState(false); - - const openMemberSubscriptionManage = () => - setMemberSubscriptionManageView(true); - const closeMemberSubscriptionManage = () => - setMemberSubscriptionManageView(false); - - useEffect(() => { - if (!sidebarView) { - return; - } - const main = async () => { - const userDetails = await getUserDetailsV2(); - setUserDetails(userDetails); - setData(LS_KEYS.SUBSCRIPTION, userDetails.subscription); - setData(LS_KEYS.FAMILY_DATA, userDetails.familyData); - setData(LS_KEYS.USER, { - ...getData(LS_KEYS.USER), - email: userDetails.email, - }); - }; - main(); - }, [sidebarView]); - - const isMemberSubscription = useMemo( - () => - userDetails && - isPartOfFamily(userDetails.familyData) && - !isFamilyAdmin(userDetails.familyData), - [userDetails], - ); - - const handleSubscriptionCardClick = () => { - if (isMemberSubscription) { - openMemberSubscriptionManage(); - } else { - if ( - hasStripeSubscription(userDetails.subscription) && - isSubscriptionPastDue(userDetails.subscription) - ) { - billingService.redirectToCustomerPortal(); - } else { - galleryContext.showPlanSelectorModal(); - } - } - }; - - return ( - <> - - - {userDetails ? ( - userDetails.email - ) : ( - - )} - - - - - - {isMemberSubscription && ( - - )} - - ); -} From 4feb8fd1f186119e482d80aece94d2dc3625a003 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 21 May 2024 18:44:12 +0530 Subject: [PATCH 07/16] Inline --- .../SubscriptionCard/styledComponents.tsx | 8 +++++++- .../photos/src/components/Sidebar/index.tsx | 12 ++++++++++-- .../src/components/Sidebar/styledComponents.tsx | 17 ----------------- 3 files changed, 17 insertions(+), 20 deletions(-) delete mode 100644 web/apps/photos/src/components/Sidebar/styledComponents.tsx diff --git a/web/apps/photos/src/components/Sidebar/SubscriptionCard/styledComponents.tsx b/web/apps/photos/src/components/Sidebar/SubscriptionCard/styledComponents.tsx index 4d0a15e9d6..90bea72ce7 100644 --- a/web/apps/photos/src/components/Sidebar/SubscriptionCard/styledComponents.tsx +++ b/web/apps/photos/src/components/Sidebar/SubscriptionCard/styledComponents.tsx @@ -1,5 +1,5 @@ +import CircleIcon from "@mui/icons-material/Circle"; import { LinearProgress, styled } from "@mui/material"; -import { DotSeparator } from "../styledComponents"; export const Progressbar = styled(LinearProgress)(() => ({ ".MuiLinearProgress-bar": { @@ -13,6 +13,12 @@ Progressbar.defaultProps = { variant: "determinate", }; +const DotSeparator = styled(CircleIcon)` + font-size: 4px; + margin: 0 ${({ theme }) => theme.spacing(1)}; + color: inherit; +`; + export const LegendIndicator = styled(DotSeparator)` font-size: 8.71px; margin: 0; diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx index bddba3a4cb..4f2228f101 100644 --- a/web/apps/photos/src/components/Sidebar/index.tsx +++ b/web/apps/photos/src/components/Sidebar/index.tsx @@ -27,9 +27,10 @@ import CategoryIcon from "@mui/icons-material/Category"; import DeleteOutline from "@mui/icons-material/DeleteOutline"; import LockOutlined from "@mui/icons-material/LockOutlined"; import VisibilityOff from "@mui/icons-material/VisibilityOff"; -import { Box, Divider, Skeleton, Stack } from "@mui/material"; +import { Box, Divider, Skeleton, Stack, styled } from "@mui/material"; import Typography from "@mui/material/Typography"; import DeleteAccountModal from "components/DeleteAccountModal"; +import { EnteDrawer } from "components/EnteDrawer"; import { EnteMenuItem } from "components/Menu/EnteMenuItem"; import TwoFactorModal from "components/TwoFactor/Modal"; import { WatchFolder } from "components/WatchFolder"; @@ -63,7 +64,6 @@ import HeaderSection from "./Header"; import Preferences from "./Preferences"; import SubscriptionCard from "./SubscriptionCard"; import SubscriptionStatus from "./SubscriptionStatus"; -import { DrawerSidebar } from "./styledComponents"; interface Iprops { collectionSummaries: CollectionSummaries; @@ -97,6 +97,14 @@ export default function Sidebar({ ); } +const DrawerSidebar = styled(EnteDrawer)(({ theme }) => ({ + "& .MuiPaper-root": { + padding: theme.spacing(1.5), + }, +})); + +DrawerSidebar.defaultProps = { anchor: "left" }; + interface UserDetailsSectionProps { sidebarView: boolean; } diff --git a/web/apps/photos/src/components/Sidebar/styledComponents.tsx b/web/apps/photos/src/components/Sidebar/styledComponents.tsx deleted file mode 100644 index d2b2f6b2b9..0000000000 --- a/web/apps/photos/src/components/Sidebar/styledComponents.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import CircleIcon from "@mui/icons-material/Circle"; -import { styled } from "@mui/material"; -import { EnteDrawer } from "components/EnteDrawer"; - -export const DrawerSidebar = styled(EnteDrawer)(({ theme }) => ({ - "& .MuiPaper-root": { - padding: theme.spacing(1.5), - }, -})); - -DrawerSidebar.defaultProps = { anchor: "left" }; - -export const DotSeparator = styled(CircleIcon)` - font-size: 4px; - margin: 0 ${({ theme }) => theme.spacing(1)}; - color: inherit; -`; From 7712a8bd1081458825a7cf744942fbf42e18b5c1 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 21 May 2024 18:45:53 +0530 Subject: [PATCH 08/16] Inline --- .../photos/src/components/Sidebar/Header.tsx | 23 ------------- .../photos/src/components/Sidebar/index.tsx | 32 +++++++++++++++++-- 2 files changed, 30 insertions(+), 25 deletions(-) delete mode 100644 web/apps/photos/src/components/Sidebar/Header.tsx diff --git a/web/apps/photos/src/components/Sidebar/Header.tsx b/web/apps/photos/src/components/Sidebar/Header.tsx deleted file mode 100644 index 4adb12fe7c..0000000000 --- a/web/apps/photos/src/components/Sidebar/Header.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { SpaceBetweenFlex } from "@ente/shared/components/Container"; -import { EnteLogo } from "@ente/shared/components/EnteLogo"; -import CloseIcon from "@mui/icons-material/Close"; -import { IconButton } from "@mui/material"; - -interface IProps { - closeSidebar: () => void; -} - -export default function HeaderSection({ closeSidebar }: IProps) { - return ( - - - - - - - ); -} diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx index 4f2228f101..2ff694490c 100644 --- a/web/apps/photos/src/components/Sidebar/index.tsx +++ b/web/apps/photos/src/components/Sidebar/index.tsx @@ -5,6 +5,8 @@ import { isPasskeyRecoveryEnabled, } from "@ente/accounts/services/passkey"; import { APPS, CLIENT_PACKAGE_NAMES } from "@ente/shared/apps/constants"; +import { SpaceBetweenFlex } from "@ente/shared/components/Container"; +import { EnteLogo } from "@ente/shared/components/EnteLogo"; import EnteSpinner from "@ente/shared/components/EnteSpinner"; import RecoveryKey from "@ente/shared/components/RecoveryKey"; import ThemeSwitcher from "@ente/shared/components/ThemeSwitcher"; @@ -24,10 +26,18 @@ import { THEME_COLOR } from "@ente/shared/themes/constants"; import { downloadAsFile } from "@ente/shared/utils"; import ArchiveOutlined from "@mui/icons-material/ArchiveOutlined"; import CategoryIcon from "@mui/icons-material/Category"; +import CloseIcon from "@mui/icons-material/Close"; import DeleteOutline from "@mui/icons-material/DeleteOutline"; import LockOutlined from "@mui/icons-material/LockOutlined"; import VisibilityOff from "@mui/icons-material/VisibilityOff"; -import { Box, Divider, Skeleton, Stack, styled } from "@mui/material"; +import { + Box, + Divider, + IconButton, + Skeleton, + Stack, + styled, +} from "@mui/material"; import Typography from "@mui/material/Typography"; import DeleteAccountModal from "components/DeleteAccountModal"; import { EnteDrawer } from "components/EnteDrawer"; @@ -60,7 +70,6 @@ import { isInternalUser } from "utils/user"; import { isFamilyAdmin, isPartOfFamily } from "utils/user/family"; import { testUpload } from "../../../tests/upload.test"; import { MemberSubscriptionManage } from "../MemberSubscriptionManage"; -import HeaderSection from "./Header"; import Preferences from "./Preferences"; import SubscriptionCard from "./SubscriptionCard"; import SubscriptionStatus from "./SubscriptionStatus"; @@ -105,6 +114,25 @@ const DrawerSidebar = styled(EnteDrawer)(({ theme }) => ({ DrawerSidebar.defaultProps = { anchor: "left" }; +interface HeaderSectionProps { + closeSidebar: () => void; +} + +const HeaderSection: React.FC = ({ closeSidebar }) => { + return ( + + + + + + + ); +}; + interface UserDetailsSectionProps { sidebarView: boolean; } From 6a8fa727a99782375be1e83ec021ba5ab1688c86 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 21 May 2024 19:06:30 +0530 Subject: [PATCH 09/16] Inline --- .../Sidebar/MapSetting/ModifyMapEnabled.tsx | 76 ------------------- .../components/Sidebar/MapSetting/index.tsx | 71 ++++++++++++++++- 2 files changed, 70 insertions(+), 77 deletions(-) diff --git a/web/apps/photos/src/components/Sidebar/MapSetting/ModifyMapEnabled.tsx b/web/apps/photos/src/components/Sidebar/MapSetting/ModifyMapEnabled.tsx index 0a4c0b9dcc..e69de29bb2 100644 --- a/web/apps/photos/src/components/Sidebar/MapSetting/ModifyMapEnabled.tsx +++ b/web/apps/photos/src/components/Sidebar/MapSetting/ModifyMapEnabled.tsx @@ -1,76 +0,0 @@ -import log from "@/next/log"; -import { Box, DialogProps } from "@mui/material"; -import { EnteDrawer } from "components/EnteDrawer"; -import { AppContext } from "pages/_app"; -import { useContext } from "react"; -import DisableMap from "../DisableMap"; -import EnableMap from "../EnableMap"; - -const ModifyMapEnabled = ({ open, onClose, onRootClose, mapEnabled }) => { - const { somethingWentWrong, updateMapEnabled } = useContext(AppContext); - - const disableMap = async () => { - try { - await updateMapEnabled(false); - onClose(); - } catch (e) { - log.error("Disable Map failed", e); - somethingWentWrong(); - } - }; - - const enableMap = async () => { - try { - await updateMapEnabled(true); - onClose(); - } catch (e) { - log.error("Enable Map failed", e); - somethingWentWrong(); - } - }; - - const handleRootClose = () => { - onClose(); - onRootClose(); - }; - - const handleDrawerClose: DialogProps["onClose"] = (_, reason) => { - if (reason === "backdropClick") { - handleRootClose(); - } else { - onClose(); - } - }; - - return ( - - - {mapEnabled ? ( - - ) : ( - - )} - - - ); -}; - -export default ModifyMapEnabled; diff --git a/web/apps/photos/src/components/Sidebar/MapSetting/index.tsx b/web/apps/photos/src/components/Sidebar/MapSetting/index.tsx index 5832baca55..e5fbe952ae 100644 --- a/web/apps/photos/src/components/Sidebar/MapSetting/index.tsx +++ b/web/apps/photos/src/components/Sidebar/MapSetting/index.tsx @@ -1,3 +1,4 @@ +import log from "@/next/log"; import { Box, DialogProps, Stack } from "@mui/material"; import { EnteDrawer } from "components/EnteDrawer"; import { EnteMenuItem } from "components/Menu/EnteMenuItem"; @@ -7,7 +8,8 @@ import { t } from "i18next"; import { AppContext } from "pages/_app"; import { useContext, useEffect, useState } from "react"; import { getMapEnabledStatus } from "services/userService"; -import ModifyMapEnabled from "./ModifyMapEnabled"; +import DisableMap from "../DisableMap"; +import EnableMap from "../EnableMap"; export default function MapSettings({ open, onClose, onRootClose }) { const { mapEnabled, updateMapEnabled } = useContext(AppContext); @@ -80,3 +82,70 @@ export default function MapSettings({ open, onClose, onRootClose }) { ); } + +const ModifyMapEnabled = ({ open, onClose, onRootClose, mapEnabled }) => { + const { somethingWentWrong, updateMapEnabled } = useContext(AppContext); + + const disableMap = async () => { + try { + await updateMapEnabled(false); + onClose(); + } catch (e) { + log.error("Disable Map failed", e); + somethingWentWrong(); + } + }; + + const enableMap = async () => { + try { + await updateMapEnabled(true); + onClose(); + } catch (e) { + log.error("Enable Map failed", e); + somethingWentWrong(); + } + }; + + const handleRootClose = () => { + onClose(); + onRootClose(); + }; + + const handleDrawerClose: DialogProps["onClose"] = (_, reason) => { + if (reason === "backdropClick") { + handleRootClose(); + } else { + onClose(); + } + }; + + return ( + + + {mapEnabled ? ( + + ) : ( + + )} + + + ); +}; From c20b9fa5faa1c7aaa00e9b3f6e5df6c6c452a972 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 21 May 2024 19:07:04 +0530 Subject: [PATCH 10/16] Rename --- .../Sidebar/{MapSetting/index.tsx => MapSetting.tsx} | 4 ++-- .../src/components/Sidebar/MapSetting/ModifyMapEnabled.tsx | 0 2 files changed, 2 insertions(+), 2 deletions(-) rename web/apps/photos/src/components/Sidebar/{MapSetting/index.tsx => MapSetting.tsx} (98%) delete mode 100644 web/apps/photos/src/components/Sidebar/MapSetting/ModifyMapEnabled.tsx diff --git a/web/apps/photos/src/components/Sidebar/MapSetting/index.tsx b/web/apps/photos/src/components/Sidebar/MapSetting.tsx similarity index 98% rename from web/apps/photos/src/components/Sidebar/MapSetting/index.tsx rename to web/apps/photos/src/components/Sidebar/MapSetting.tsx index e5fbe952ae..5b2a5c5267 100644 --- a/web/apps/photos/src/components/Sidebar/MapSetting/index.tsx +++ b/web/apps/photos/src/components/Sidebar/MapSetting.tsx @@ -8,8 +8,8 @@ import { t } from "i18next"; import { AppContext } from "pages/_app"; import { useContext, useEffect, useState } from "react"; import { getMapEnabledStatus } from "services/userService"; -import DisableMap from "../DisableMap"; -import EnableMap from "../EnableMap"; +import DisableMap from "./DisableMap"; +import EnableMap from "./EnableMap"; export default function MapSettings({ open, onClose, onRootClose }) { const { mapEnabled, updateMapEnabled } = useContext(AppContext); diff --git a/web/apps/photos/src/components/Sidebar/MapSetting/ModifyMapEnabled.tsx b/web/apps/photos/src/components/Sidebar/MapSetting/ModifyMapEnabled.tsx deleted file mode 100644 index e69de29bb2..0000000000 From f8d35c3dcfe0bb159ead97910f5a9f412d79d9d9 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 21 May 2024 19:08:33 +0530 Subject: [PATCH 11/16] Inline --- .../src/components/Sidebar/DisableMap.tsx | 35 -------- .../src/components/Sidebar/EnableMap.tsx | 43 ---------- .../src/components/Sidebar/MapSetting.tsx | 81 ++++++++++++++++++- web/apps/photos/src/utils/ui/index.tsx | 8 +- 4 files changed, 84 insertions(+), 83 deletions(-) delete mode 100644 web/apps/photos/src/components/Sidebar/DisableMap.tsx delete mode 100644 web/apps/photos/src/components/Sidebar/EnableMap.tsx diff --git a/web/apps/photos/src/components/Sidebar/DisableMap.tsx b/web/apps/photos/src/components/Sidebar/DisableMap.tsx deleted file mode 100644 index ef793166e7..0000000000 --- a/web/apps/photos/src/components/Sidebar/DisableMap.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Box, Button, Stack, Typography } from "@mui/material"; -import Titlebar from "components/Titlebar"; -import { t } from "i18next"; -import { Trans } from "react-i18next"; - -export default function EnableMap({ onClose, disableMap, onRootClose }) { - return ( - - - - - - - - - - - - - - - ); -} diff --git a/web/apps/photos/src/components/Sidebar/EnableMap.tsx b/web/apps/photos/src/components/Sidebar/EnableMap.tsx deleted file mode 100644 index 868485af0e..0000000000 --- a/web/apps/photos/src/components/Sidebar/EnableMap.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Box, Button, Link, Stack, Typography } from "@mui/material"; -import Titlebar from "components/Titlebar"; -import { t } from "i18next"; -import { Trans } from "react-i18next"; - -export const OPEN_STREET_MAP_LINK = "https://www.openstreetmap.org/"; -export default function EnableMap({ onClose, enableMap, onRootClose }) { - return ( - - - - - {" "} - - - ), - }} - /> - - - - - - - - - ); -} diff --git a/web/apps/photos/src/components/Sidebar/MapSetting.tsx b/web/apps/photos/src/components/Sidebar/MapSetting.tsx index 5b2a5c5267..430f7667f5 100644 --- a/web/apps/photos/src/components/Sidebar/MapSetting.tsx +++ b/web/apps/photos/src/components/Sidebar/MapSetting.tsx @@ -1,5 +1,12 @@ import log from "@/next/log"; -import { Box, DialogProps, Stack } from "@mui/material"; +import { + Box, + Button, + DialogProps, + Link, + Stack, + Typography, +} from "@mui/material"; import { EnteDrawer } from "components/EnteDrawer"; import { EnteMenuItem } from "components/Menu/EnteMenuItem"; import { MenuItemGroup } from "components/Menu/MenuItemGroup"; @@ -7,9 +14,8 @@ import Titlebar from "components/Titlebar"; import { t } from "i18next"; import { AppContext } from "pages/_app"; import { useContext, useEffect, useState } from "react"; +import { Trans } from "react-i18next"; import { getMapEnabledStatus } from "services/userService"; -import DisableMap from "./DisableMap"; -import EnableMap from "./EnableMap"; export default function MapSettings({ open, onClose, onRootClose }) { const { mapEnabled, updateMapEnabled } = useContext(AppContext); @@ -149,3 +155,72 @@ const ModifyMapEnabled = ({ open, onClose, onRootClose, mapEnabled }) => { ); }; + +function EnableMap({ onClose, enableMap, onRootClose }) { + return ( + + + + + {" "} + + + ), + }} + /> + + + + + + + + + ); +} + +function DisableMap({ onClose, disableMap, onRootClose }) { + return ( + + + + + + + + + + + + + + + ); +} diff --git a/web/apps/photos/src/utils/ui/index.tsx b/web/apps/photos/src/utils/ui/index.tsx index 8ac5f94bfe..c930f47c8c 100644 --- a/web/apps/photos/src/utils/ui/index.tsx +++ b/web/apps/photos/src/utils/ui/index.tsx @@ -4,7 +4,6 @@ import { DialogBoxAttributes } from "@ente/shared/components/DialogBox/types"; import AutoAwesomeOutlinedIcon from "@mui/icons-material/AutoAwesomeOutlined"; import InfoOutlined from "@mui/icons-material/InfoRounded"; import { Link } from "@mui/material"; -import { OPEN_STREET_MAP_LINK } from "components/Sidebar/EnableMap"; import { t } from "i18next"; import { Trans } from "react-i18next"; import { Subscription } from "types/billing"; @@ -143,7 +142,12 @@ export const getMapEnableConfirmationDialog = ( , + a: ( + + ), }} /> ), From d4dc0802318f6e48eabb7fc76b41092b5a5eb012 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 21 May 2024 19:14:50 +0530 Subject: [PATCH 12/16] Inline --- .../index.tsx => Preferences.tsx} | 63 ++++++++++++++++++- .../Sidebar/Preferences/LanguageSelector.tsx | 61 ------------------ 2 files changed, 60 insertions(+), 64 deletions(-) rename web/apps/photos/src/components/Sidebar/{Preferences/index.tsx => Preferences.tsx} (62%) delete mode 100644 web/apps/photos/src/components/Sidebar/Preferences/LanguageSelector.tsx diff --git a/web/apps/photos/src/components/Sidebar/Preferences/index.tsx b/web/apps/photos/src/components/Sidebar/Preferences.tsx similarity index 62% rename from web/apps/photos/src/components/Sidebar/Preferences/index.tsx rename to web/apps/photos/src/components/Sidebar/Preferences.tsx index 04dc79a13c..8d4ae10588 100644 --- a/web/apps/photos/src/components/Sidebar/Preferences/index.tsx +++ b/web/apps/photos/src/components/Sidebar/Preferences.tsx @@ -1,13 +1,20 @@ +import { + getLocaleInUse, + setLocaleInUse, + supportedLocales, + type SupportedLocale, +} from "@/next/i18n"; import ChevronRight from "@mui/icons-material/ChevronRight"; import { Box, DialogProps, Stack } from "@mui/material"; +import DropdownInput from "components/DropdownInput"; import { EnteDrawer } from "components/EnteDrawer"; import { EnteMenuItem } from "components/Menu/EnteMenuItem"; import Titlebar from "components/Titlebar"; import { t } from "i18next"; +import { useRouter } from "next/router"; import { useState } from "react"; -import AdvancedSettings from "../AdvancedSettings"; -import MapSettings from "../MapSetting"; -import { LanguageSelector } from "./LanguageSelector"; +import AdvancedSettings from "./AdvancedSettings"; +import MapSettings from "./MapSetting"; export default function Preferences({ open, onClose, onRootClose }) { const [advancedSettingsView, setAdvancedSettingsView] = useState(false); @@ -76,3 +83,53 @@ export default function Preferences({ open, onClose, onRootClose }) { ); } + +const LanguageSelector = () => { + const locale = getLocaleInUse(); + // Enhancement: Is this full reload needed? + const router = useRouter(); + + const updateCurrentLocale = (newLocale: SupportedLocale) => { + setLocaleInUse(newLocale); + router.reload(); + }; + + const options = supportedLocales.map((locale) => ({ + label: localeName(locale), + value: locale, + })); + + return ( + + ); +}; + +/** + * Human readable name for each supported locale. + */ +const localeName = (locale: SupportedLocale) => { + switch (locale) { + case "en-US": + return "English"; + case "fr-FR": + return "Français"; + case "de-DE": + return "Deutsch"; + case "zh-CN": + return "中文"; + case "nl-NL": + return "Nederlands"; + case "es-ES": + return "Español"; + case "pt-BR": + return "Brazilian Portuguese"; + case "ru-RU": + return "Russian"; + } +}; diff --git a/web/apps/photos/src/components/Sidebar/Preferences/LanguageSelector.tsx b/web/apps/photos/src/components/Sidebar/Preferences/LanguageSelector.tsx deleted file mode 100644 index 4c4a13a500..0000000000 --- a/web/apps/photos/src/components/Sidebar/Preferences/LanguageSelector.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { - getLocaleInUse, - setLocaleInUse, - supportedLocales, - type SupportedLocale, -} from "@/next/i18n"; -import DropdownInput, { DropdownOption } from "components/DropdownInput"; -import { t } from "i18next"; -import { useRouter } from "next/router"; - -/** - * Human readable name for each supported locale. - */ -export const localeName = (locale: SupportedLocale) => { - switch (locale) { - case "en-US": - return "English"; - case "fr-FR": - return "Français"; - case "de-DE": - return "Deutsch"; - case "zh-CN": - return "中文"; - case "nl-NL": - return "Nederlands"; - case "es-ES": - return "Español"; - case "pt-BR": - return "Brazilian Portuguese"; - case "ru-RU": - return "Russian"; - } -}; - -const getLanguageOptions = (): DropdownOption[] => { - return supportedLocales.map((locale) => ({ - label: localeName(locale), - value: locale, - })); -}; - -export const LanguageSelector = () => { - const locale = getLocaleInUse(); - // Enhancement: Is this full reload needed? - const router = useRouter(); - - const updateCurrentLocale = (newLocale: SupportedLocale) => { - setLocaleInUse(newLocale); - router.reload(); - }; - - return ( - - ); -}; From 0d52737c496c3f83ae48dca784fdb69b4535c19a Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 21 May 2024 19:18:54 +0530 Subject: [PATCH 13/16] Inline --- .../Sidebar/SubscriptionStatus/index.tsx | 130 ----------------- .../photos/src/components/Sidebar/index.tsx | 132 +++++++++++++++++- 2 files changed, 129 insertions(+), 133 deletions(-) diff --git a/web/apps/photos/src/components/Sidebar/SubscriptionStatus/index.tsx b/web/apps/photos/src/components/Sidebar/SubscriptionStatus/index.tsx index 9ae19f640f..e69de29bb2 100644 --- a/web/apps/photos/src/components/Sidebar/SubscriptionStatus/index.tsx +++ b/web/apps/photos/src/components/Sidebar/SubscriptionStatus/index.tsx @@ -1,130 +0,0 @@ -import Box from "@mui/material/Box"; -import { t } from "i18next"; -import { GalleryContext } from "pages/gallery"; -import { MouseEventHandler, useContext, useMemo } from "react"; -import { Trans } from "react-i18next"; -import { UserDetails } from "types/user"; -import { - hasAddOnBonus, - hasExceededStorageQuota, - hasPaidSubscription, - hasStripeSubscription, - isOnFreePlan, - isSubscriptionActive, - isSubscriptionCancelled, - isSubscriptionPastDue, -} from "utils/billing"; - -import { Typography } from "@mui/material"; -import LinkButton from "components/pages/gallery/LinkButton"; -import billingService from "services/billingService"; -import { isFamilyAdmin, isPartOfFamily } from "utils/user/family"; - -export default function SubscriptionStatus({ - userDetails, -}: { - userDetails: UserDetails; -}) { - const { showPlanSelectorModal } = useContext(GalleryContext); - - const hasAMessage = useMemo(() => { - if (!userDetails) { - return false; - } - if ( - isPartOfFamily(userDetails.familyData) && - !isFamilyAdmin(userDetails.familyData) - ) { - return false; - } - if ( - hasPaidSubscription(userDetails.subscription) && - !isSubscriptionCancelled(userDetails.subscription) - ) { - return false; - } - return true; - }, [userDetails]); - - const handleClick = useMemo(() => { - const eventHandler: MouseEventHandler = (e) => { - e.stopPropagation(); - if (userDetails) { - if (isSubscriptionActive(userDetails.subscription)) { - if (hasExceededStorageQuota(userDetails)) { - showPlanSelectorModal(); - } - } else { - if ( - hasStripeSubscription(userDetails.subscription) && - isSubscriptionPastDue(userDetails.subscription) - ) { - billingService.redirectToCustomerPortal(); - } else { - showPlanSelectorModal(); - } - } - } - }; - return eventHandler; - }, [userDetails]); - - if (!hasAMessage) { - return <>; - } - - const messages = []; - if (!hasAddOnBonus(userDetails.bonusData)) { - if (isSubscriptionActive(userDetails.subscription)) { - if (isOnFreePlan(userDetails.subscription)) { - messages.push( - , - ); - } else if (isSubscriptionCancelled(userDetails.subscription)) { - messages.push( - t("RENEWAL_CANCELLED_SUBSCRIPTION_INFO", { - date: userDetails.subscription?.expiryTime, - }), - ); - } - } else { - messages.push( - , - }} - />, - ); - } - } - - if (hasExceededStorageQuota(userDetails) && messages.length === 0) { - messages.push( - , - }} - />, - ); - } - - return ( - - - {messages} - - - ); -} diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx index 2ff694490c..6c6a57adf7 100644 --- a/web/apps/photos/src/components/Sidebar/index.tsx +++ b/web/apps/photos/src/components/Sidebar/index.tsx @@ -44,6 +44,7 @@ import { EnteDrawer } from "components/EnteDrawer"; import { EnteMenuItem } from "components/Menu/EnteMenuItem"; import TwoFactorModal from "components/TwoFactor/Modal"; import { WatchFolder } from "components/WatchFolder"; +import LinkButton from "components/pages/gallery/LinkButton"; import { NoStyleAnchor } from "components/pages/sharedAlbum/GoToEnte"; import { ARCHIVE_SECTION, @@ -55,7 +56,13 @@ import isElectron from "is-electron"; import { useRouter } from "next/router"; import { AppContext } from "pages/_app"; import { GalleryContext } from "pages/gallery"; -import { useContext, useEffect, useMemo, useState } from "react"; +import { + MouseEventHandler, + useContext, + useEffect, + useMemo, + useState, +} from "react"; import { Trans } from "react-i18next"; import billingService from "services/billingService"; import { getUncategorizedCollection } from "services/collectionService"; @@ -63,7 +70,16 @@ import exportService from "services/export"; import { getAccountsToken, getUserDetailsV2 } from "services/userService"; import { CollectionSummaries } from "types/collection"; import { UserDetails } from "types/user"; -import { hasStripeSubscription, isSubscriptionPastDue } from "utils/billing"; +import { + hasAddOnBonus, + hasExceededStorageQuota, + hasPaidSubscription, + hasStripeSubscription, + isOnFreePlan, + isSubscriptionActive, + isSubscriptionCancelled, + isSubscriptionPastDue, +} from "utils/billing"; import { openLink } from "utils/common"; import { getDownloadAppMessage } from "utils/ui"; import { isInternalUser } from "utils/user"; @@ -72,7 +88,6 @@ import { testUpload } from "../../../tests/upload.test"; import { MemberSubscriptionManage } from "../MemberSubscriptionManage"; import Preferences from "./Preferences"; import SubscriptionCard from "./SubscriptionCard"; -import SubscriptionStatus from "./SubscriptionStatus"; interface Iprops { collectionSummaries: CollectionSummaries; @@ -221,6 +236,117 @@ const UserDetailsSection: React.FC = ({ ); }; +interface SubscriptionStatusProps { + userDetails: UserDetails; +} + +const SubscriptionStatus: React.FC = ({ + userDetails, +}) => { + const { showPlanSelectorModal } = useContext(GalleryContext); + + const hasAMessage = useMemo(() => { + if (!userDetails) { + return false; + } + if ( + isPartOfFamily(userDetails.familyData) && + !isFamilyAdmin(userDetails.familyData) + ) { + return false; + } + if ( + hasPaidSubscription(userDetails.subscription) && + !isSubscriptionCancelled(userDetails.subscription) + ) { + return false; + } + return true; + }, [userDetails]); + + const handleClick = useMemo(() => { + const eventHandler: MouseEventHandler = (e) => { + e.stopPropagation(); + if (userDetails) { + if (isSubscriptionActive(userDetails.subscription)) { + if (hasExceededStorageQuota(userDetails)) { + showPlanSelectorModal(); + } + } else { + if ( + hasStripeSubscription(userDetails.subscription) && + isSubscriptionPastDue(userDetails.subscription) + ) { + billingService.redirectToCustomerPortal(); + } else { + showPlanSelectorModal(); + } + } + } + }; + return eventHandler; + }, [userDetails]); + + if (!hasAMessage) { + return <>; + } + + const messages = []; + if (!hasAddOnBonus(userDetails.bonusData)) { + if (isSubscriptionActive(userDetails.subscription)) { + if (isOnFreePlan(userDetails.subscription)) { + messages.push( + , + ); + } else if (isSubscriptionCancelled(userDetails.subscription)) { + messages.push( + t("RENEWAL_CANCELLED_SUBSCRIPTION_INFO", { + date: userDetails.subscription?.expiryTime, + }), + ); + } + } else { + messages.push( + , + }} + />, + ); + } + } + + if (hasExceededStorageQuota(userDetails) && messages.length === 0) { + messages.push( + , + }} + />, + ); + } + + return ( + + + {messages} + + + ); +}; + interface ShortcutSectionProps { closeSidebar: () => void; collectionSummaries: CollectionSummaries; From 334587474f5d27a8c4b5f8a3c70aff5dc1abd8a3 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 21 May 2024 19:20:08 +0530 Subject: [PATCH 14/16] Inline --- .../SubscriptionCard/backgroundOverlay.tsx | 11 ------- .../Sidebar/SubscriptionCard/clickOverlay.tsx | 15 --------- .../Sidebar/SubscriptionCard/index.tsx | 31 +++++++++++++++++-- .../Sidebar/SubscriptionStatus/index.tsx | 0 4 files changed, 28 insertions(+), 29 deletions(-) delete mode 100644 web/apps/photos/src/components/Sidebar/SubscriptionCard/clickOverlay.tsx delete mode 100644 web/apps/photos/src/components/Sidebar/SubscriptionStatus/index.tsx diff --git a/web/apps/photos/src/components/Sidebar/SubscriptionCard/backgroundOverlay.tsx b/web/apps/photos/src/components/Sidebar/SubscriptionCard/backgroundOverlay.tsx index eb9c85f510..e69de29bb2 100644 --- a/web/apps/photos/src/components/Sidebar/SubscriptionCard/backgroundOverlay.tsx +++ b/web/apps/photos/src/components/Sidebar/SubscriptionCard/backgroundOverlay.tsx @@ -1,11 +0,0 @@ -export function BackgroundOverlay() { - return ( - - ); -} diff --git a/web/apps/photos/src/components/Sidebar/SubscriptionCard/clickOverlay.tsx b/web/apps/photos/src/components/Sidebar/SubscriptionCard/clickOverlay.tsx deleted file mode 100644 index 7890558089..0000000000 --- a/web/apps/photos/src/components/Sidebar/SubscriptionCard/clickOverlay.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { FlexWrapper, Overlay } from "@ente/shared/components/Container"; -import ChevronRightIcon from "@mui/icons-material/ChevronRight"; -export function ClickOverlay({ onClick }) { - return ( - - - - - - ); -} diff --git a/web/apps/photos/src/components/Sidebar/SubscriptionCard/index.tsx b/web/apps/photos/src/components/Sidebar/SubscriptionCard/index.tsx index 848792817a..514c43df81 100644 --- a/web/apps/photos/src/components/Sidebar/SubscriptionCard/index.tsx +++ b/web/apps/photos/src/components/Sidebar/SubscriptionCard/index.tsx @@ -1,8 +1,7 @@ +import { FlexWrapper, Overlay } from "@ente/shared/components/Container"; +import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import { Box, Skeleton } from "@mui/material"; import { UserDetails } from "types/user"; -import { BackgroundOverlay } from "./backgroundOverlay"; -import { ClickOverlay } from "./clickOverlay"; - import { SubscriptionCardContentOverlay } from "./contentOverlay"; const SUBSCRIPTION_CARD_SIZE = 152; @@ -32,3 +31,29 @@ export default function SubscriptionCard({ userDetails, onClick }: Iprops) { ); } + +function BackgroundOverlay() { + return ( + + ); +} + +function ClickOverlay({ onClick }) { + return ( + + + + + + ); +} diff --git a/web/apps/photos/src/components/Sidebar/SubscriptionStatus/index.tsx b/web/apps/photos/src/components/Sidebar/SubscriptionStatus/index.tsx deleted file mode 100644 index e69de29bb2..0000000000 From 4cb49c0b4a4382911397e0f622d5eb8a41ee1a3a Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 21 May 2024 19:31:52 +0530 Subject: [PATCH 15/16] Fix warning about required key --- .../SubscriptionCard/backgroundOverlay.tsx | 0 .../photos/src/components/Sidebar/index.tsx | 28 +++++++++---------- 2 files changed, 14 insertions(+), 14 deletions(-) delete mode 100644 web/apps/photos/src/components/Sidebar/SubscriptionCard/backgroundOverlay.tsx diff --git a/web/apps/photos/src/components/Sidebar/SubscriptionCard/backgroundOverlay.tsx b/web/apps/photos/src/components/Sidebar/SubscriptionCard/backgroundOverlay.tsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx index 6c6a57adf7..b74b10f66c 100644 --- a/web/apps/photos/src/components/Sidebar/index.tsx +++ b/web/apps/photos/src/components/Sidebar/index.tsx @@ -291,48 +291,48 @@ const SubscriptionStatus: React.FC = ({ return <>; } - const messages = []; + let message: React.ReactElement | undefined; if (!hasAddOnBonus(userDetails.bonusData)) { if (isSubscriptionActive(userDetails.subscription)) { if (isOnFreePlan(userDetails.subscription)) { - messages.push( + message = ( , + /> ); } else if (isSubscriptionCancelled(userDetails.subscription)) { - messages.push( - t("RENEWAL_CANCELLED_SUBSCRIPTION_INFO", { - date: userDetails.subscription?.expiryTime, - }), - ); + message = t("RENEWAL_CANCELLED_SUBSCRIPTION_INFO", { + date: userDetails.subscription?.expiryTime, + }); } } else { - messages.push( + message = ( , }} - />, + /> ); } } - if (hasExceededStorageQuota(userDetails) && messages.length === 0) { - messages.push( + if (!message && hasExceededStorageQuota(userDetails)) { + message = ( , }} - />, + /> ); } + if (!message) return <>; + return ( = ({ onClick={handleClick && handleClick} sx={{ cursor: handleClick && "pointer" }} > - {messages} + {message} ); From a086f3643330789013dacc4a32930eedc9405e7c Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 21 May 2024 19:38:42 +0530 Subject: [PATCH 16/16] Fix type --- web/apps/photos/src/components/Sidebar/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx index b74b10f66c..300d06ed62 100644 --- a/web/apps/photos/src/components/Sidebar/index.tsx +++ b/web/apps/photos/src/components/Sidebar/index.tsx @@ -291,7 +291,7 @@ const SubscriptionStatus: React.FC = ({ return <>; } - let message: React.ReactElement | undefined; + let message: React.ReactNode; if (!hasAddOnBonus(userDetails.bonusData)) { if (isSubscriptionActive(userDetails.subscription)) { if (isOnFreePlan(userDetails.subscription)) {