Namespace

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

@@ -27,7 +27,7 @@ import {
     isArchivedCollection,
     isPinnedCollection,
 } from "@/new/photos/services/magic-metadata";
-import { useAppContext } from "@/new/photos/types/context";
+import { usePhotosAppContext } from "@/new/photos/types/context";
 import ArchiveOutlinedIcon from "@mui/icons-material/ArchiveOutlined";
 import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
 import EditIcon from "@mui/icons-material/Edit";
@@ -130,7 +130,8 @@ const CollectionOptions: React.FC<CollectionHeaderProps> = ({
     isActiveCollectionDownloadInProgress,
 }) => {
     const { showMiniDialog } = useBaseContext();
-    const { showLoadingBar, hideLoadingBar, onGenericError } = useAppContext();
+    const { showLoadingBar, hideLoadingBar, onGenericError } =
+        usePhotosAppContext();
     const { syncWithRemote } = useContext(GalleryContext);
     const overFlowMenuIconRef = useRef<SVGSVGElement>(null);
 

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

@@ -76,7 +76,7 @@ import {
     userDetailsAddOnBonuses,
     type UserDetails,
 } from "@/new/photos/services/user-details";
-import { AppContext, useAppContext } from "@/new/photos/types/context";
+import { usePhotosAppContext } from "@/new/photos/types/context";
 import { initiateEmail, openURL } from "@/new/photos/utils/web";
 import {
     FlexWrapper,
@@ -509,7 +509,7 @@ const UtilitySection: React.FC<Pick<SidebarProps, "closeSidebar">> = ({
     closeSidebar,
 }) => {
     const router = useRouter();
-    const { watchFolderView, setWatchFolderView } = useAppContext();
+    const { watchFolderView, setWatchFolderView } = usePhotosAppContext();
 
     const { show: showAccount, props: accountVisibilityProps } =
         useModalVisibility();
@@ -563,7 +563,7 @@ const UtilitySection: React.FC<Pick<SidebarProps, "closeSidebar">> = ({
 const HelpSection: React.FC<Pick<SidebarProps, "closeSidebar">> = ({
     closeSidebar,
 }) => {
-    const { showMiniDialog } = useContext(AppContext);
+    const { showMiniDialog } = useBaseContext();
     const { openExportModal } = useContext(GalleryContext);
 
     const { show: showHelp, props: helpVisibilityProps } = useModalVisibility();
@@ -596,7 +596,7 @@ const HelpSection: React.FC<Pick<SidebarProps, "closeSidebar">> = ({
 };
 
 const ExitSection: React.FC = () => {
-    const { logout, showMiniDialog } = useContext(AppContext);
+    const { logout, showMiniDialog } = useBaseContext();
 
     const handleLogout = () =>
         showMiniDialog({

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

@@ -18,7 +18,7 @@ import type {
     UploadPhase,
 } from "@/new/photos/services/upload/types";
 import { redirectToCustomerPortal } from "@/new/photos/services/user-details";
-import { useAppContext } from "@/new/photos/types/context";
+import { usePhotosAppContext } from "@/new/photos/types/context";
 import { firstNonEmpty } from "@/utils/array";
 import { CustomError } from "@ente/shared/error";
 import DiscFullIcon from "@mui/icons-material/DiscFull";
@@ -111,7 +111,7 @@ export default function Uploader({
 }: Props) {
     const { showMiniDialog } = useBaseContext();
     const { showNotification, onGenericError, watchFolderView } =
-        useAppContext();
+        usePhotosAppContext();
     const galleryContext = useContext(GalleryContext);
     const publicCollectionGalleryContext = useContext(
         PublicCollectionGalleryContext,

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

@@ -66,7 +66,7 @@ import {
     userDetailsSnapshot,
     verifyStripeSubscription,
 } from "@/new/photos/services/user-details";
-import { useAppContext } from "@/new/photos/types/context";
+import { usePhotosAppContext } from "@/new/photos/types/context";
 import { splitByPredicate } from "@/utils/array";
 import { FlexWrapper } from "@ente/shared/components/Container";
 import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
@@ -180,7 +180,7 @@ export const GalleryContext = createContext<GalleryContextType>(
 const Page: React.FC = () => {
     const { logout, showMiniDialog } = useBaseContext();
     const { showLoadingBar, hideLoadingBar, onGenericError, watchFolderView } =
-        useAppContext();
+        usePhotosAppContext();
 
     const isOffline = useIsOffline();
     const [state, dispatch] = useGalleryReducer();

web/apps/photos/src/pages/shared-albums.tsx

@@ -39,7 +39,7 @@ import {
     isHiddenCollection,
 } from "@/new/photos/services/collection";
 import { sortFiles } from "@/new/photos/services/files";
-import { useAppContext } from "@/new/photos/types/context";
+import { usePhotosAppContext } from "@/new/photos/types/context";
 import { CenteredFlex } from "@ente/shared/components/Container";
 import SingleInputForm, {
     type SingleInputFormProps,
@@ -95,7 +95,7 @@ export default function PublicCollectionGallery() {
     const [publicCollection, setPublicCollection] = useState<Collection>(null);
     const [errorMessage, setErrorMessage] = useState<string>(null);
     const { showMiniDialog } = useBaseContext();
-    const { showLoadingBar, hideLoadingBar } = useAppContext();
+    const { showLoadingBar, hideLoadingBar } = usePhotosAppContext();
     const [loading, setLoading] = useState(true);
     const router = useRouter();
     const [isPasswordProtected, setIsPasswordProtected] =

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

@@ -33,7 +33,6 @@ import {
     redirectToPaymentsApp,
     userDetailsAddOnBonuses,
 } from "@/new/photos/services/user-details";
-import { useAppContext } from "@/new/photos/types/context";
 import { bytesInGB, formattedStorageByteSize } from "@/new/photos/utils/units";
 import { openURL } from "@/new/photos/utils/web";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
@@ -58,6 +57,7 @@ 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 +682,7 @@ function ManageSubscription({
     subscription,
     hasAddOnBonus,
 }: ManageSubscriptionProps) {
-    const { onGenericError } = useAppContext();
+    const { onGenericError } = usePhotosAppContext();
 
     const openFamilyPortal = async () => {
         setLoading(true);

web/packages/new/photos/components/gallery/PeopleHeader.tsx

@@ -59,7 +59,7 @@ import {
 import { t } from "i18next";
 import React, { useEffect, useReducer, useState } from "react";
 import type { FaceCluster } from "../../services/ml/cluster";
-import { useAppContext } from "../../types/context";
+import { usePhotosAppContext } from "../../types/context";
 import { DialogCloseIconButton } from "../mui/Dialog";
 import { SuggestionFaceList } from "../PeopleList";
 import {
@@ -547,7 +547,7 @@ const SuggestionsDialog: React.FC<SuggestionsDialogProps> = ({
     person,
 }) => {
     const { showMiniDialog } = useBaseContext();
-    const { onGenericError } = useAppContext();
+    const { onGenericError } = usePhotosAppContext();
 
     const [state, dispatch] = useReducer(
         suggestionsDialogReducer,

web/packages/new/photos/components/utils/use-wrap-async.ts

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { useAppContext } from "../../types/context";
+import { usePhotosAppContext } from "../../types/context";
 
 /**
  * Wrap a function returning a promise in a loading bar and error handler.
@@ -19,7 +19,8 @@ import { useAppContext } from "../../types/context";
 export const useWrapAsyncOperation = <T extends unknown[]>(
     f: (...args: T) => Promise<void>,
 ) => {
-    const { showLoadingBar, hideLoadingBar, onGenericError } = useAppContext();
+    const { showLoadingBar, hideLoadingBar, onGenericError } =
+        usePhotosAppContext();
     return useCallback(
         async (...args: T) => {
             showLoadingBar();

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

@@ -54,10 +54,10 @@ import {
     removeSelectedDuplicateGroups,
     type DuplicateGroup,
 } from "../services/dedup";
-import { useAppContext } from "../types/context";
+import { usePhotosAppContext } from "../types/context";
 
 const Page: React.FC = () => {
-    const { onGenericError } = useAppContext();
+    const { onGenericError } = usePhotosAppContext();
 
     const [state, dispatch] = useReducer(dedupReducer, initialDedupState);
 

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

@@ -1,11 +1,10 @@
-import type { BaseContextT } from "@/base/context";
 import { type NotificationAttributes } from "@/new/photos/components/Notification";
 import { createContext, useContext } from "react";
 
 /**
  * The type of the React context available to all pages in the photos app.
  */
-export type AppContextT = BaseContextT & {
+export interface PhotosAppContextT {
     /**
      * Show the global activity indicator (a loading bar at the top of the
      * page).
@@ -26,17 +25,21 @@ export type AppContextT = BaseContextT & {
     onGenericError: (error: unknown) => void;
     watchFolderView: boolean;
     setWatchFolderView: (isOpen: boolean) => void;
-};
+}
 
 /**
- * The React {@link Context} available to all nodes in the React tree.
+ * The React {@link Context} available to all nodes in the React tree of photos
+ * app pages.
  */
-export const AppContext = createContext<AppContextT | undefined>(undefined);
+export const PhotosAppContext = createContext<PhotosAppContextT | undefined>(
+    undefined,
+);
 
 /**
- * Utility hook to get the photos {@link AppContextT}.
+ * Utility hook to get the photos {@link PhotosAppContextT}.
  *
  * This context is provided at the top level _app component for the photos app,
  * and thus is available to all React components in the Photos app's React tree.
  */
-export const useAppContext = (): AppContextT => useContext(AppContext)!;
+export const usePhotosAppContext = (): PhotosAppContextT =>
+    useContext(PhotosAppContext)!;