Move to base context

web/apps/photos/src/components/AuthenticateUser.tsx

@@ -6,7 +6,6 @@ import {
 import type { ModalVisibilityProps } from "@/base/components/utils/modal";
 import { useBaseContext } from "@/base/context";
 import log from "@/base/log";
-import { usePhotosAppContext } from "@/new/photos/types/context";
 import VerifyMasterPasswordForm, {
     type VerifyMasterPasswordFormProps,
 } from "@ente/shared/components/VerifyMasterPasswordForm";
@@ -33,8 +32,7 @@ export const AuthenticateUser: React.FC<AuthenticateUserProps> = ({
     onClose,
     onAuthenticate,
 }) => {
-    const { logout, showMiniDialog } = useBaseContext();
-    const { onGenericError } = usePhotosAppContext();
+    const { logout, showMiniDialog, onGenericError } = useBaseContext();
     const [user, setUser] = useState<User>();
     const [keyAttributes, setKeyAttributes] = useState<KeyAttributes>();
 

web/apps/photos/src/components/Collections/CollectionHeader.tsx

@@ -129,9 +129,8 @@ const CollectionOptions: React.FC<CollectionHeaderProps> = ({
     setFilesDownloadProgressAttributesCreator,
     isActiveCollectionDownloadInProgress,
 }) => {
-    const { showMiniDialog } = useBaseContext();
-    const { showLoadingBar, hideLoadingBar, onGenericError } =
-        usePhotosAppContext();
+    const { showMiniDialog, onGenericError } = useBaseContext();
+    const { showLoadingBar, hideLoadingBar } = usePhotosAppContext();
     const { syncWithRemote } = useContext(GalleryContext);
     const overFlowMenuIconRef = useRef<SVGSVGElement>(null);
 

web/apps/photos/src/components/DeleteAccount.tsx

@@ -9,7 +9,6 @@ import {
     DropdownInput,
     type DropdownOption,
 } from "@/new/photos/components/DropdownInput";
-import { usePhotosAppContext } from "@/new/photos/types/context";
 import { initiateEmail } from "@/new/photos/utils/web";
 import { getData, LS_KEYS } from "@ente/shared/storage/localStorage";
 import { getActualKey } from "@ente/shared/user";
@@ -49,8 +48,7 @@ export const DeleteAccount: React.FC<DeleteAccountProps> = ({
     onClose,
     onAuthenticateUser,
 }) => {
-    const { logout, showMiniDialog } = useBaseContext();
-    const { onGenericError } = usePhotosAppContext();
+    const { logout, showMiniDialog, onGenericError } = useBaseContext();
 
     const [loading, setLoading] = useState(false);
     const deleteAccountChallenge = useRef<string | undefined>(undefined);

web/apps/photos/src/components/Upload.tsx

@@ -131,9 +131,8 @@ export const Upload: React.FC<UploadProps> = ({
     showSessionExpiredMessage,
     ...props
 }) => {
-    const { showMiniDialog } = useBaseContext();
-    const { showNotification, onGenericError, watchFolderView } =
-        usePhotosAppContext();
+    const { showMiniDialog, onGenericError } = useBaseContext();
+    const { showNotification, watchFolderView } = usePhotosAppContext();
     const galleryContext = useContext(GalleryContext);
     const publicCollectionGalleryContext = useContext(
         PublicCollectionGalleryContext,

web/apps/photos/src/pages/_app.tsx

@@ -6,17 +6,14 @@ import {
     TranslucentLoadingOverlay,
 } from "@/base/components/loaders";
 import { AttributedMiniDialog } from "@/base/components/MiniDialog";
-import {
-    genericErrorDialogAttributes,
-    useAttributedMiniDialog,
-} from "@/base/components/utils/dialog";
+import { useAttributedMiniDialog } from "@/base/components/utils/dialog";
 import {
     useIsRouteChangeInProgress,
     useSetupI18n,
     useSetupLogs,
 } from "@/base/components/utils/hooks-app";
 import { photosTheme } from "@/base/components/utils/theme";
-import { BaseContext } from "@/base/context";
+import { BaseContext, deriveBaseContext } from "@/base/context";
 import log from "@/base/log";
 import { logStartupBanner } from "@/base/log-web";
 import { AppUpdate } from "@/base/types/ipc";
@@ -146,20 +143,8 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
         });
     }, []);
 
-    const onGenericError = useCallback((e: unknown) => {
-        log.error(e);
-        // The generic error handler is sometimes called in the context of
-        // actions that were initiated by a confirmation dialog action handler
-        // themselves, then we need to let the current one close.
-        //
-        // See: [Note: Chained MiniDialogs]
-        setTimeout(() => {
-            showMiniDialog(genericErrorDialogAttributes());
-        }, 0);
-    }, []);
-
     const baseContext = useMemo(
-        () => ({ logout, showMiniDialog }),
+        () => deriveBaseContext({ logout, showMiniDialog }),
         [logout, showMiniDialog],
     );
     const appContext = useMemo(
@@ -168,19 +153,14 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
             hideLoadingBar,
             watchFolderView,
             setWatchFolderView,
-            showMiniDialog,
             showNotification,
-            onGenericError,
-            logout,
         }),
         [
             showLoadingBar,
             hideLoadingBar,
             watchFolderView,
-            showMiniDialog,
+            setWatchFolderView,
             showNotification,
-            onGenericError,
-            logout,
         ],
     );
 

web/apps/photos/src/pages/gallery.tsx

@@ -164,8 +164,8 @@ export const GalleryContext = createContext<GalleryContextType>(
  *           Photo List           v
  */
 const Page: React.FC = () => {
-    const { logout, showMiniDialog } = useBaseContext();
-    const { showLoadingBar, hideLoadingBar, onGenericError, watchFolderView } =
+    const { logout, showMiniDialog, onGenericError } = useBaseContext();
+    const { showLoadingBar, hideLoadingBar, watchFolderView } =
         usePhotosAppContext();
 
     const isOffline = useIsOffline();

web/packages/base/context.ts

@@ -1,5 +1,7 @@
 import type { MiniDialogAttributes } from "@/base/components/MiniDialog";
 import { createContext, useContext } from "react";
+import { genericErrorDialogAttributes } from "./components/utils/dialog";
+import log from "./log";
 
 /**
  * The type of the context expected to be present in the React tree for all apps
@@ -20,6 +22,10 @@ export interface BaseContextT {
      * customized by providing appropriate {@link MiniDialogAttributes}.
      */
     showMiniDialog: (attributes: MiniDialogAttributes) => void;
+    /**
+     * Log the given error and show a generic error {@link MiniDialog}.
+     */
+    onGenericError: (error: unknown) => void;
 }
 
 /**
@@ -33,3 +39,29 @@ export const BaseContext = createContext<BaseContextT | undefined>(undefined);
  * available to all React components that refer to the base package.
  */
 export const useBaseContext = (): BaseContextT => useContext(BaseContext)!;
+
+/**
+ * A helper function to create a {@link BaseContext} by deriving derivable
+ * context values from the minimal subset.
+ *
+ * In simpler words, it automatically provides a definition of
+ * {@link onGenericError} using the given {@link showMiniDialog} prop.
+ */
+export const deriveBaseContext = ({
+    logout,
+    showMiniDialog,
+}: Omit<BaseContextT, "onGenericError">): BaseContextT => {
+    const onGenericError = (e: unknown) => {
+        log.error(e);
+        // The generic error handler is sometimes called in the context of
+        // actions that were initiated by a confirmation dialog action handler
+        // themselves, then we need to let the current one close.
+        //
+        // See: [Note: Chained MiniDialogs]
+        setTimeout(() => {
+            showMiniDialog(genericErrorDialogAttributes());
+        }, 0);
+    };
+
+    return { logout, showMiniDialog, onGenericError };
+};

web/packages/new/photos/components/PlanSelector.tsx

@@ -57,7 +57,6 @@ import Typography from "@mui/material/Typography";
 import { t } from "i18next";
 import React, { useCallback, useEffect, useState } from "react";
 import { Trans } from "react-i18next";
-import { usePhotosAppContext } from "../types/context";
 
 type PlanSelectorProps = ModalVisibilityProps & {
     setLoading: (loading: boolean) => void;
@@ -682,7 +681,7 @@ function ManageSubscription({
     subscription,
     hasAddOnBonus,
 }: ManageSubscriptionProps) {
-    const { onGenericError } = usePhotosAppContext();
+    const { onGenericError } = useBaseContext();
 
     const openFamilyPortal = async () => {
         setLoading(true);

web/packages/new/photos/pages/duplicates.tsx

@@ -8,6 +8,7 @@ import {
     OverflowMenuOption,
 } from "@/base/components/OverflowMenu";
 import { Ellipsized2LineTypography } from "@/base/components/Typography";
+import { useBaseContext } from "@/base/context";
 import log from "@/base/log";
 import { formattedByteSize } from "@/new/photos/utils/units";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
@@ -54,10 +55,9 @@ import {
     removeSelectedDuplicateGroups,
     type DuplicateGroup,
 } from "../services/dedup";
-import { usePhotosAppContext } from "../types/context";
 
 const Page: React.FC = () => {
-    const { onGenericError } = usePhotosAppContext();
+    const { onGenericError } = useBaseContext();
 
     const [state, dispatch] = useReducer(dedupReducer, initialDedupState);
 

web/packages/new/photos/types/context.ts

@@ -19,10 +19,6 @@ export interface PhotosAppContextT {
      * using the provided {@link NotificationAttributes}.
      */
     showNotification: (attributes: NotificationAttributes) => void;
-    /**
-     * Show a generic error dialog, and log the given error.
-     */
-    onGenericError: (error: unknown) => void;
     watchFolderView: boolean;
     setWatchFolderView: (isOpen: boolean) => void;
 }