From 1ddd143b2ef3d3421527b975774b213d54afbe77 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 20 Nov 2024 09:15:18 +0530 Subject: [PATCH] Context --- web/apps/accounts/src/types/context.ts | 4 ++-- web/apps/auth/eslint.config.mjs | 5 ---- web/apps/auth/src/pages/_app.tsx | 24 ++----------------- web/apps/auth/src/pages/auth.tsx | 2 +- web/apps/auth/src/pages/change-email.tsx | 2 +- web/apps/auth/src/pages/change-password.tsx | 2 +- web/apps/auth/src/pages/credentials.tsx | 2 +- web/apps/auth/src/pages/generate.tsx | 2 +- web/apps/auth/src/pages/login.tsx | 2 +- web/apps/auth/src/pages/passkeys/finish.tsx | 2 +- web/apps/auth/src/pages/passkeys/recover.tsx | 2 +- web/apps/auth/src/pages/recover.tsx | 2 +- web/apps/auth/src/pages/signup.tsx | 2 +- .../auth/src/pages/two-factor/recover.tsx | 2 +- web/apps/auth/src/pages/two-factor/setup.tsx | 2 +- web/apps/auth/src/pages/two-factor/verify.tsx | 2 +- web/apps/auth/src/pages/verify.tsx | 2 +- web/apps/auth/src/types/context.ts | 17 +++++++++++++ web/packages/new/photos/types/context.ts | 3 +-- 19 files changed, 36 insertions(+), 45 deletions(-) create mode 100644 web/apps/auth/src/types/context.ts diff --git a/web/apps/accounts/src/types/context.ts b/web/apps/accounts/src/types/context.ts index 416ff1fcf1..5218ae033f 100644 --- a/web/apps/accounts/src/types/context.ts +++ b/web/apps/accounts/src/types/context.ts @@ -12,7 +12,7 @@ type AppContextT = Omit; export const AppContext = createContext(undefined); /** - * Utility hook to get the {@link AppContextT}, throwing an exception if it is - * not defined. + * Utility hook to get the {@link AppContextT} expected to be available to all + * React components in the Accounts app's React tree. */ export const useAppContext = (): AppContextT => useContext(AppContext)!; diff --git a/web/apps/auth/eslint.config.mjs b/web/apps/auth/eslint.config.mjs index 9405448dcf..d9bbd0401c 100644 --- a/web/apps/auth/eslint.config.mjs +++ b/web/apps/auth/eslint.config.mjs @@ -16,12 +16,7 @@ export default [ "@typescript-eslint/no-unsafe-member-access": "off", "@typescript-eslint/no-unsafe-argument": "off", /** TODO: Disabled as we migrate, try to prune these again */ - "@typescript-eslint/no-unnecessary-type-assertion": "off", - "@typescript-eslint/consistent-indexed-object-style": "off", - "@typescript-eslint/prefer-promise-reject-errors": "off", - "@typescript-eslint/no-useless-constructor": "off", "react-hooks/exhaustive-deps": "off", - "react-refresh/only-export-components": "off", }, }, ]; diff --git a/web/apps/auth/src/pages/_app.tsx b/web/apps/auth/src/pages/_app.tsx index 772311ce95..98feccc295 100644 --- a/web/apps/auth/src/pages/_app.tsx +++ b/web/apps/auth/src/pages/_app.tsx @@ -1,5 +1,4 @@ import { accountLogout } from "@/accounts/services/logout"; -import type { AccountsContextT } from "@/accounts/types/context"; import { clientPackageName, staticAppTitle } from "@/base/app"; import { CustomHead } from "@/base/components/Head"; import { AttributedMiniDialog } from "@/base/components/MiniDialog"; @@ -28,30 +27,11 @@ import { ThemeProvider } from "@mui/material/styles"; import { t } from "i18next"; import type { AppProps } from "next/app"; import { useRouter } from "next/router"; -import React, { - createContext, - useCallback, - useContext, - useEffect, - useState, -} from "react"; +import React, { useCallback, useEffect, useState } from "react"; +import { AppContext } from "types/context"; import "../../public/css/global.css"; -/** - * Properties available via {@link AppContext} to the Auth app's React tree. - */ -type AppContextT = AccountsContextT & { - themeColor: THEME_COLOR; - setThemeColor: (themeColor: THEME_COLOR) => void; -}; - -/** The React {@link Context} available to all pages. */ -export const AppContext = createContext(undefined); - -/** Utility hook to reduce amount of boilerplate in account related pages. */ -export const useAppContext = () => useContext(AppContext)!; - const App: React.FC = ({ Component, pageProps }) => { const router = useRouter(); const [isI18nReady, setIsI18nReady] = useState(false); diff --git a/web/apps/auth/src/pages/auth.tsx b/web/apps/auth/src/pages/auth.tsx index a254d151c9..ee872a3a1f 100644 --- a/web/apps/auth/src/pages/auth.tsx +++ b/web/apps/auth/src/pages/auth.tsx @@ -19,7 +19,7 @@ import { useRouter } from "next/router"; import React, { useEffect, useState } from "react"; import { generateOTPs, type Code } from "services/code"; import { getAuthCodes } from "services/remote"; -import { useAppContext } from "./_app"; +import { useAppContext } from "types/context"; const Page: React.FC = () => { const { logout, showNavBar, showMiniDialog } = useAppContext(); diff --git a/web/apps/auth/src/pages/change-email.tsx b/web/apps/auth/src/pages/change-email.tsx index cef4716203..74b094aeed 100644 --- a/web/apps/auth/src/pages/change-email.tsx +++ b/web/apps/auth/src/pages/change-email.tsx @@ -1,5 +1,5 @@ import Page_ from "@/accounts/pages/change-email"; -import { useAppContext } from "./_app"; +import { useAppContext } from "types/context"; const Page = () => ; diff --git a/web/apps/auth/src/pages/change-password.tsx b/web/apps/auth/src/pages/change-password.tsx index 2232edc6bc..3ce2c6267d 100644 --- a/web/apps/auth/src/pages/change-password.tsx +++ b/web/apps/auth/src/pages/change-password.tsx @@ -1,5 +1,5 @@ import Page_ from "@/accounts/pages/change-password"; -import { useAppContext } from "./_app"; +import { useAppContext } from "types/context"; const Page = () => ; diff --git a/web/apps/auth/src/pages/credentials.tsx b/web/apps/auth/src/pages/credentials.tsx index fa3cc8fad6..17dd9fef70 100644 --- a/web/apps/auth/src/pages/credentials.tsx +++ b/web/apps/auth/src/pages/credentials.tsx @@ -1,5 +1,5 @@ import Page_ from "@/accounts/pages/credentials"; -import { useAppContext } from "./_app"; +import { useAppContext } from "types/context"; const Page = () => ; diff --git a/web/apps/auth/src/pages/generate.tsx b/web/apps/auth/src/pages/generate.tsx index a82d0a46f3..12723d0b0a 100644 --- a/web/apps/auth/src/pages/generate.tsx +++ b/web/apps/auth/src/pages/generate.tsx @@ -1,5 +1,5 @@ import Page_ from "@/accounts/pages/generate"; -import { useAppContext } from "./_app"; +import { useAppContext } from "types/context"; const Page = () => ; diff --git a/web/apps/auth/src/pages/login.tsx b/web/apps/auth/src/pages/login.tsx index a61718a309..c373229f00 100644 --- a/web/apps/auth/src/pages/login.tsx +++ b/web/apps/auth/src/pages/login.tsx @@ -1,5 +1,5 @@ import Page_ from "@/accounts/pages/login"; -import { useAppContext } from "./_app"; +import { useAppContext } from "types/context"; const Page = () => ; diff --git a/web/apps/auth/src/pages/passkeys/finish.tsx b/web/apps/auth/src/pages/passkeys/finish.tsx index e75df9677b..e7c08cae2c 100644 --- a/web/apps/auth/src/pages/passkeys/finish.tsx +++ b/web/apps/auth/src/pages/passkeys/finish.tsx @@ -1,5 +1,5 @@ import Page_ from "@/accounts/pages/passkeys/finish"; -import { useAppContext } from "../_app"; +import { useAppContext } from "types/context"; const Page = () => ; diff --git a/web/apps/auth/src/pages/passkeys/recover.tsx b/web/apps/auth/src/pages/passkeys/recover.tsx index d7ac1c30df..a156314ed5 100644 --- a/web/apps/auth/src/pages/passkeys/recover.tsx +++ b/web/apps/auth/src/pages/passkeys/recover.tsx @@ -1,5 +1,5 @@ import Page_ from "@/accounts/pages/two-factor/recover"; -import { useAppContext } from "../_app"; +import { useAppContext } from "types/context"; const Page = () => ( diff --git a/web/apps/auth/src/pages/recover.tsx b/web/apps/auth/src/pages/recover.tsx index 3fb3866a8a..62ceb6a63a 100644 --- a/web/apps/auth/src/pages/recover.tsx +++ b/web/apps/auth/src/pages/recover.tsx @@ -1,5 +1,5 @@ import Page_ from "@/accounts/pages/recover"; -import { useAppContext } from "./_app"; +import { useAppContext } from "types/context"; const Page = () => ; diff --git a/web/apps/auth/src/pages/signup.tsx b/web/apps/auth/src/pages/signup.tsx index 37386b9b4e..e1bb54b598 100644 --- a/web/apps/auth/src/pages/signup.tsx +++ b/web/apps/auth/src/pages/signup.tsx @@ -1,5 +1,5 @@ import Page_ from "@/accounts/pages/signup"; -import { useAppContext } from "./_app"; +import { useAppContext } from "types/context"; const Page = () => ; diff --git a/web/apps/auth/src/pages/two-factor/recover.tsx b/web/apps/auth/src/pages/two-factor/recover.tsx index 1c36e691ec..dbf10270fb 100644 --- a/web/apps/auth/src/pages/two-factor/recover.tsx +++ b/web/apps/auth/src/pages/two-factor/recover.tsx @@ -1,5 +1,5 @@ import Page_ from "@/accounts/pages/two-factor/recover"; -import { useAppContext } from "../_app"; +import { useAppContext } from "types/context"; const Page = () => ; diff --git a/web/apps/auth/src/pages/two-factor/setup.tsx b/web/apps/auth/src/pages/two-factor/setup.tsx index 404fbb271a..7e6691e98e 100644 --- a/web/apps/auth/src/pages/two-factor/setup.tsx +++ b/web/apps/auth/src/pages/two-factor/setup.tsx @@ -1,5 +1,5 @@ import Page_ from "@/accounts/pages/two-factor/setup"; -import { useAppContext } from "../_app"; +import { useAppContext } from "types/context"; const Page = () => ; diff --git a/web/apps/auth/src/pages/two-factor/verify.tsx b/web/apps/auth/src/pages/two-factor/verify.tsx index b6fc679f8c..0a449ad470 100644 --- a/web/apps/auth/src/pages/two-factor/verify.tsx +++ b/web/apps/auth/src/pages/two-factor/verify.tsx @@ -1,5 +1,5 @@ import Page_ from "@/accounts/pages/two-factor/verify"; -import { useAppContext } from "../_app"; +import { useAppContext } from "types/context"; const Page = () => ; diff --git a/web/apps/auth/src/pages/verify.tsx b/web/apps/auth/src/pages/verify.tsx index 64aeb883a9..572f40aa99 100644 --- a/web/apps/auth/src/pages/verify.tsx +++ b/web/apps/auth/src/pages/verify.tsx @@ -1,5 +1,5 @@ import Page_ from "@/accounts/pages/verify"; -import { useAppContext } from "./_app"; +import { useAppContext } from "types/context"; const Page = () => ; diff --git a/web/apps/auth/src/types/context.ts b/web/apps/auth/src/types/context.ts new file mode 100644 index 0000000000..c5f95ba5c7 --- /dev/null +++ b/web/apps/auth/src/types/context.ts @@ -0,0 +1,17 @@ +import type { AccountsContextT } from "@/accounts/types/context"; +import { THEME_COLOR } from "@ente/shared/themes/constants"; +import { createContext, useContext } from "react"; + +/** + * Properties available via {@link AppContext} to the Auth app's React tree. + */ +type AppContextT = AccountsContextT & { + themeColor: THEME_COLOR; + setThemeColor: (themeColor: THEME_COLOR) => void; +}; + +/** The React {@link Context} available to all pages. */ +export const AppContext = createContext(undefined); + +/** Utility hook to reduce amount of boilerplate in account related pages. */ +export const useAppContext = () => useContext(AppContext)!; diff --git a/web/packages/new/photos/types/context.ts b/web/packages/new/photos/types/context.ts index 903eee593f..65dd7ad76e 100644 --- a/web/packages/new/photos/types/context.ts +++ b/web/packages/new/photos/types/context.ts @@ -35,8 +35,7 @@ export type AppContextT = AccountsContextT & { export const AppContext = createContext(undefined); /** - * Utility hook to get the photos {@link AppContextT}, throwing an exception if - * it is not defined. + * Utility hook to get the photos {@link AppContextT}. * * 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.