From f9209e212d0cba3d60f08eee51ead68eaaf66418 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Thu, 10 Oct 2024 15:44:55 +0530 Subject: [PATCH] wip checkpoint --- .../PhotoViewer/ImageEditorOverlay/index.tsx | 20 ++++++--- web/apps/photos/src/pages/_app.tsx | 43 +++++-------------- web/apps/photos/src/utils/ui/index.tsx | 15 ------- web/packages/accounts/pages/recover.tsx | 7 +-- .../accounts/pages/two-factor/recover.tsx | 11 +++-- web/packages/base/components/MiniDialog.tsx | 5 +++ 6 files changed, 42 insertions(+), 59 deletions(-) diff --git a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx index 02cd636e09..5cdfe0b8a7 100644 --- a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx +++ b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx @@ -4,6 +4,7 @@ import { MenuItemGroup, MenuSectionTitle, } from "@/base/components/Menu"; +import type { MiniDialogAttributes } from "@/base/components/MiniDialog"; import { nameAndExtension } from "@/base/file"; import log from "@/base/log"; import { photosDialogZIndex } from "@/new/photos/components/z-index"; @@ -39,7 +40,6 @@ import type { Dispatch, MutableRefObject, SetStateAction } from "react"; import { createContext, useContext, useEffect, useRef, useState } from "react"; import { getLocalCollections } from "services/collectionService"; import uploadManager from "services/upload/uploadManager"; -import { getEditorCloseConfirmationMessage } from "utils/ui"; import ColoursMenu from "./ColoursMenu"; import CropMenu, { cropRegionOfCanvas, getCropRegionArgs } from "./CropMenu"; import FreehandCropRegion from "./FreehandCropRegion"; @@ -84,7 +84,7 @@ export interface CropBoxProps { } const ImageEditorOverlay = (props: IProps) => { - const appContext = useContext(AppContext); + const { showMiniDialog } = useContext(AppContext); const canvasRef = useRef(null); const originalSizeCanvasRef = useRef(null); @@ -442,9 +442,7 @@ const ImageEditorOverlay = (props: IProps) => { const handleCloseWithConfirmation = () => { if (transformationPerformed || coloursAdjusted) { - appContext.setDialogBoxAttributesV2( - getEditorCloseConfirmationMessage(handleClose), - ); + showMiniDialog(confirmEditorCloseDialogAttributes(handleClose)); } else { handleClose(); } @@ -733,6 +731,18 @@ const ImageEditorOverlay = (props: IProps) => { export default ImageEditorOverlay; +const confirmEditorCloseDialogAttributes = ( + onConfirm: () => void, +): MiniDialogAttributes => ({ + title: t("CONFIRM_EDITOR_CLOSE_MESSAGE"), + message: t("CONFIRM_EDITOR_CLOSE_DESCRIPTION"), + continue: { + text: t("close"), + color: "critical", + action: onConfirm, + }, +}); + /** * Create a new {@link File} with the contents of the given canvas. * diff --git a/web/apps/photos/src/pages/_app.tsx b/web/apps/photos/src/pages/_app.tsx index 9ecc2eb6b5..3fec77edc3 100644 --- a/web/apps/photos/src/pages/_app.tsx +++ b/web/apps/photos/src/pages/_app.tsx @@ -1,9 +1,12 @@ import { clientPackageName, staticAppTitle } from "@/base/app"; import { CustomHead } from "@/base/components/Head"; -import type { MiniDialogAttributes } from "@/base/components/MiniDialog"; import { AttributedMiniDialog } from "@/base/components/MiniDialog"; import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator"; import { AppNavbar } from "@/base/components/Navbar"; +import { + genericErrorDialogAttributes, + useAttributedMiniDialog, +} from "@/base/components/utils/mini-dialog"; import { setupI18n } from "@/base/i18n"; import log from "@/base/log"; import { @@ -36,7 +39,6 @@ import { getTheme } from "@ente/shared/themes"; import { THEME_COLOR } from "@ente/shared/themes/constants"; import type { User } from "@ente/shared/user/types"; import ArrowForward from "@mui/icons-material/ArrowForward"; -import ErrorOutline from "@mui/icons-material/ErrorOutline"; import { CssBaseline } from "@mui/material"; import { ThemeProvider } from "@mui/material/styles"; import Notification from "components/Notification"; @@ -72,17 +74,15 @@ export default function App({ Component, pageProps }: AppProps) { const isLoadingBarRunning = useRef(false); const loadingBar = useRef(null); const [dialogMessage, setDialogMessage] = useState(); - const [dialogBoxAttributeV2, setDialogBoxAttributesV2] = useState< - MiniDialogAttributes | undefined - >(); const [messageDialogView, setMessageDialogView] = useState(false); - const [dialogBoxV2View, setDialogBoxV2View] = useState(false); const [watchFolderView, setWatchFolderView] = useState(false); const [watchFolderFiles, setWatchFolderFiles] = useState(null); const [notificationView, setNotificationView] = useState(false); const closeNotification = () => setNotificationView(false); const [notificationAttributes, setNotificationAttributes] = useState(null); + + const { showMiniDialog, miniDialogProps } = useAttributedMiniDialog(); const [themeColor, setThemeColor] = useLocalState( LS_KEYS.THEME, THEME_COLOR.DARK, @@ -201,10 +201,6 @@ export default function App({ Component, pageProps }: AppProps) { setMessageDialogView(true); }, [dialogMessage]); - useEffect(() => { - setDialogBoxV2View(true); - }, [dialogBoxAttributeV2]); - useEffect(() => { setNotificationView(true); }, [notificationAttributes]); @@ -236,12 +232,6 @@ export default function App({ Component, pageProps }: AppProps) { () => setMessageDialogView(false), [], ); - const closeDialogBoxV2 = () => setDialogBoxV2View(false); - - const showMiniDialog = useCallback((attributes: MiniDialogAttributes) => { - setDialogBoxAttributesV2(attributes); - setDialogBoxV2View(true); - }, []); // Use `onGenericError` instead. const somethingWentWrong = useCallback( @@ -254,18 +244,10 @@ export default function App({ Component, pageProps }: AppProps) { [], ); - const onGenericError = useCallback( - (e: unknown) => ( - log.error("Error", e), - setDialogBoxAttributesV2({ - title: t("error"), - icon: , - message: t("generic_error"), - close: { variant: "critical" }, - }) - ), - [], - ); + const onGenericError = useCallback((e: unknown) => { + log.error("Error", e); + showMiniDialog(genericErrorDialogAttributes()); + }, []); const logout = useCallback(() => { void photosLogout().then(() => router.push("/")); @@ -287,7 +269,6 @@ export default function App({ Component, pageProps }: AppProps) { showMiniDialog, somethingWentWrong, onGenericError, - setDialogBoxAttributesV2, mapEnabled, updateMapEnabled, // <- changes on each render isCFProxyDisabled, @@ -318,9 +299,7 @@ export default function App({ Component, pageProps }: AppProps) { /> void, -): DialogBoxAttributes => ({ - title: t("CONFIRM_EDITOR_CLOSE_MESSAGE"), - content: t("CONFIRM_EDITOR_CLOSE_DESCRIPTION"), - proceed: { - action: doClose, - text: t("close"), - variant: "critical", - }, - close: { text: t("cancel") }, -}); diff --git a/web/packages/accounts/pages/recover.tsx b/web/packages/accounts/pages/recover.tsx index c6e86cdafc..c4ad1ba20f 100644 --- a/web/packages/accounts/pages/recover.tsx +++ b/web/packages/accounts/pages/recover.tsx @@ -29,7 +29,7 @@ const bip39 = require("bip39"); bip39.setDefaultWordlist("english"); const Page: React.FC = ({ appContext }) => { - const { showNavBar, setDialogBoxAttributesV2 } = appContext; + const { showNavBar, showMiniDialog } = appContext; const [keyAttributes, setKeyAttributes] = useState< KeyAttributes | undefined @@ -98,10 +98,11 @@ const Page: React.FC = ({ appContext }) => { }; const showNoRecoveryKeyMessage = () => - setDialogBoxAttributesV2({ + showMiniDialog({ title: t("sorry"), - close: {}, message: t("NO_RECOVERY_KEY_MESSAGE"), + continue: { color: "secondary" }, + cancel: false, }); return ( diff --git a/web/packages/accounts/pages/two-factor/recover.tsx b/web/packages/accounts/pages/two-factor/recover.tsx index be2d2227fd..0aa1406b6f 100644 --- a/web/packages/accounts/pages/two-factor/recover.tsx +++ b/web/packages/accounts/pages/two-factor/recover.tsx @@ -42,7 +42,7 @@ export interface RecoverPageProps { } const Page: React.FC = ({ appContext, twoFactorType }) => { - const { logout } = appContext; + const { showMiniDialog, logout } = appContext; const [encryptedTwoFactorSecret, setEncryptedTwoFactorSecret] = useState | null>(null); @@ -72,6 +72,7 @@ const Page: React.FC = ({ appContext, twoFactorType }) => { if (!resp.encryptedSecret) { showContactSupportDialog({ text: t("GO_BACK"), + autoClose: true, action: router.back, }); } else { @@ -91,6 +92,7 @@ const Page: React.FC = ({ appContext, twoFactorType }) => { setDoesHaveEncryptedRecoveryKey(false); showContactSupportDialog({ text: t("GO_BACK"), + autoClose: true, action: router.back, }); } @@ -146,11 +148,10 @@ const Page: React.FC = ({ appContext, twoFactorType }) => { }; const showContactSupportDialog = ( - dialogClose?: MiniDialogAttributes["close"], + dialogContinue?: MiniDialogAttributes["continue"], ) => { - appContext.setDialogBoxAttributesV2({ + showMiniDialog({ title: t("contact_support"), - close: dialogClose ?? {}, message: ( = ({ appContext, twoFactorType }) => { values={{ emailID: "support@ente.io" }} /> ), + continue: { color: "secondary", ...(dialogContinue ?? {}) }, + cancel: false, }); }; diff --git a/web/packages/base/components/MiniDialog.tsx b/web/packages/base/components/MiniDialog.tsx index dcf0a53239..037d887845 100644 --- a/web/packages/base/components/MiniDialog.tsx +++ b/web/packages/base/components/MiniDialog.tsx @@ -75,6 +75,11 @@ export interface MiniDialogAttributes { * is opened, allowing the user to confirm just by pressing ENTER. */ autoFocus?: boolean; + /** + * If `true`, close the dialog after {@link action} completes. + * TODO: Test/Impl/Is this needed? + */ + autoClose?: boolean; /** * The function to call when the user activates the button. *