Reduce boilerplate

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

@@ -7,6 +7,7 @@ import {
 } from "@/next/log-web";
 import type { AppName, BaseAppContextT } from "@/next/types/app";
 import { AppUpdate } from "@/next/types/ipc";
+import { ensure } from "@/utils/ensure";
 import {
     APPS,
     APP_TITLES,
@@ -45,7 +46,7 @@ import isElectron from "is-electron";
 import type { AppProps } from "next/app";
 import { useRouter } from "next/router";
 import "photoswipe/dist/photoswipe.css";
-import { createContext, useEffect, useRef, useState } from "react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 import LoadingBar from "react-top-loading-bar";
 import DownloadManager from "services/download";
 import { resumeExportsIfNeeded } from "services/export";
@@ -103,6 +104,9 @@ type AppContextT = BaseAppContextT & {
 /** The React {@link Context} available to all pages. */
 export const AppContext = createContext<AppContextT | undefined>(undefined);
 
+/** Utility hook to reduce amount of boilerplate in account related pages. */
+export const useAppContext = () => ensure(useContext(AppContext));
+
 export default function App({ Component, pageProps }: AppProps) {
     const appName: AppName = "photos";
 

web/apps/photos/src/pages/change-email.tsx

@@ -1,8 +1,6 @@
-import { ensure } from "@/utils/ensure";
 import Page_ from "@ente/accounts/pages/change-email";
-import { useContext } from "react";
-import { AppContext } from "./_app";
+import { useAppContext } from "./_app";
 
-const Page = () => <Page_ appContext={ensure(useContext(AppContext))} />;
+const Page = () => <Page_ appContext={useAppContext()} />;
 
 export default Page;

web/apps/photos/src/pages/change-password.tsx

@@ -1,8 +1,6 @@
-import { ensure } from "@/utils/ensure";
 import Page_ from "@ente/accounts/pages/change-password";
-import { useContext } from "react";
-import { AppContext } from "./_app";
+import { useAppContext } from "./_app";
 
-const Page = () => <Page_ appContext={ensure(useContext(AppContext))} />;
+const Page = () => <Page_ appContext={useAppContext()} />;
 
 export default Page;

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

@@ -1,8 +1,6 @@
-import { ensure } from "@/utils/ensure";
 import Page_ from "@ente/accounts/pages/credentials";
-import { useContext } from "react";
-import { AppContext } from "./_app";
+import { useAppContext } from "./_app";
 
-const Page = () => <Page_ appContext={ensure(useContext(AppContext))} />;
+const Page = () => <Page_ appContext={useAppContext()} />;
 
 export default Page;

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

@@ -1,8 +1,6 @@
-import { ensure } from "@/utils/ensure";
 import Page_ from "@ente/accounts/pages/generate";
-import { useContext } from "react";
-import { AppContext } from "./_app";
+import { useAppContext } from "./_app";
 
-const Page = () => <Page_ appContext={ensure(useContext(AppContext))} />;
+const Page = () => <Page_ appContext={useAppContext()} />;
 
 export default Page;

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

@@ -1,8 +1,6 @@
-import { ensure } from "@/utils/ensure";
 import Page_ from "@ente/accounts/pages/login";
-import { useContext } from "react";
-import { AppContext } from "./_app";
+import { useAppContext } from "./_app";
 
-const Page = () => <Page_ appContext={ensure(useContext(AppContext))} />;
+const Page = () => <Page_ appContext={useAppContext()} />;
 
 export default Page;

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

@@ -1,8 +1,6 @@
-import { ensure } from "@/utils/ensure";
 import Page_ from "@ente/accounts/pages/recover";
-import { useContext } from "react";
-import { AppContext } from "./_app";
+import { useAppContext } from "./_app";
 
-const Page = () => <Page_ appContext={ensure(useContext(AppContext))} />;
+const Page = () => <Page_ appContext={useAppContext()} />;
 
 export default Page;

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

@@ -1,8 +1,6 @@
-import { ensure } from "@/utils/ensure";
 import Page_ from "@ente/accounts/pages/signup";
-import { useContext } from "react";
-import { AppContext } from "./_app";
+import { useAppContext } from "./_app";
 
-const Page = () => <Page_ appContext={ensure(useContext(AppContext))} />;
+const Page = () => <Page_ appContext={useAppContext()} />;
 
 export default Page;

web/apps/photos/src/pages/two-factor/recover.tsx

@@ -1,8 +1,6 @@
-import { ensure } from "@/utils/ensure";
 import Page_ from "@ente/accounts/pages/two-factor/recover";
-import { useContext } from "react";
-import { AppContext } from "../_app";
+import { useAppContext } from "../_app";
 
-const Page = () => <Page_ appContext={ensure(useContext(AppContext))} />;
+const Page = () => <Page_ appContext={useAppContext()} />;
 
 export default Page;

web/apps/photos/src/pages/two-factor/setup.tsx

@@ -1,8 +1,6 @@
-import { ensure } from "@/utils/ensure";
 import Page_ from "@ente/accounts/pages/two-factor/setup";
-import { useContext } from "react";
-import { AppContext } from "../_app";
+import { useAppContext } from "../_app";
 
-const Page = () => <Page_ appContext={ensure(useContext(AppContext))} />;
+const Page = () => <Page_ appContext={useAppContext()} />;
 
 export default Page;

web/apps/photos/src/pages/two-factor/verify.tsx

@@ -1,8 +1,6 @@
-import { ensure } from "@/utils/ensure";
 import Page_ from "@ente/accounts/pages/two-factor/verify";
-import { useContext } from "react";
-import { AppContext } from "../_app";
+import { useAppContext } from "../_app";
 
-const Page = () => <Page_ appContext={ensure(useContext(AppContext))} />;
+const Page = () => <Page_ appContext={useAppContext()} />;
 
 export default Page;

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

@@ -1,8 +1,6 @@
-import { ensure } from "@/utils/ensure";
 import Page_ from "@ente/accounts/pages/verify";
-import { useContext } from "react";
-import { AppContext } from "./_app";
+import { useAppContext } from "./_app";
 
-const Page = () => <Page_ appContext={ensure(useContext(AppContext))} />;
+const Page = () => <Page_ appContext={useAppContext()} />;
 
 export default Page;