[web] Run tsc when linting (#1339)

web/.gitignore

@@ -10,6 +10,9 @@ node_modules/
 # Local env files
 .env*.local
 
+# tsc
+*.tsbuildinfo
+
 # Vite
 dist
 

web/apps/accounts/src/pages/credentials/index.tsx

@@ -1,17 +1,9 @@
 import CredentialPage from "@ente/accounts/pages/credentials";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { useContext } from "react";
 import { AppContext } from "../_app";
 
 export default function Credential() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <CredentialPage appContext={appContext} appName={APPS.ACCOUNTS} />;
-    return (
-        <CredentialPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
-    );
 }

web/apps/accounts/src/pages/generate/index.tsx

@@ -1,17 +1,9 @@
 import GeneratePage from "@ente/accounts/pages/generate";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Generate() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <GeneratePage appContext={appContext} appName={APPS.ACCOUNTS} />;
-    return (
-        <GeneratePage
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
-    );
 }

web/apps/accounts/src/pages/login/index.tsx

@@ -1,17 +1,9 @@
 import LoginPage from "@ente/accounts/pages/login";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { useContext } from "react";
 import { AppContext } from "../_app";
 
 export default function Login() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <LoginPage appContext={appContext} appName={APPS.ACCOUNTS} />;
-    return (
-        <LoginPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
-    );
 }

web/apps/accounts/src/pages/passkeys/flow/Recover.tsx

@@ -1,17 +1,14 @@
 import { TwoFactorType } from "@ente/accounts/constants/twofactor";
 import RecoverPage from "@ente/accounts/pages/recover";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Recover() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
     return (
         <RecoverPage
             appContext={appContext}
-            router={router}
             appName={APPS.PHOTOS}
             twoFactorType={TwoFactorType.PASSKEY}
         />

web/apps/accounts/src/pages/recover/index.tsx

@@ -1,17 +1,9 @@
 import RecoverPage from "@ente/accounts/pages/recover";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Recover() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <RecoverPage appContext={appContext} appName={APPS.ACCOUNTS} />;
-    return (
-        <RecoverPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
-    );
 }

web/apps/accounts/src/pages/signup/index.tsx

@@ -1,17 +1,9 @@
 import SignupPage from "@ente/accounts/pages/signup";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Sigup() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <SignupPage appContext={appContext} appName={APPS.ACCOUNTS} />;
-    return (
-        <SignupPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
-    );
 }

web/apps/accounts/src/pages/two-factor/recover/index.tsx

@@ -1,17 +1,11 @@
 import TwoFactorRecoverPage from "@ente/accounts/pages/two-factor/recover";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function TwoFactorRecover() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
     return (
-        <TwoFactorRecoverPage
+        <TwoFactorRecoverPage appContext={appContext} appName={APPS.ACCOUNTS} />
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
     );
 }

web/apps/accounts/src/pages/two-factor/setup/index.tsx

@@ -1,17 +1,11 @@
 import TwoFactorSetupPage from "@ente/accounts/pages/two-factor/setup";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function TwoFactorSetup() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
     return (
-        <TwoFactorSetupPage
+        <TwoFactorSetupPage appContext={appContext} appName={APPS.ACCOUNTS} />
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
     );
 }

web/apps/accounts/src/pages/two-factor/verify/index.tsx

@@ -1,17 +1,11 @@
 import TwoFactorVerifyPage from "@ente/accounts/pages/two-factor/verify";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function TwoFactorVerify() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
     return (
-        <TwoFactorVerifyPage
+        <TwoFactorVerifyPage appContext={appContext} appName={APPS.ACCOUNTS} />
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
     );
 }

web/apps/accounts/src/pages/verify/index.tsx

@@ -1,17 +1,9 @@
 import VerifyPage from "@ente/accounts/pages/verify";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Verify() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <VerifyPage appContext={appContext} appName={APPS.ACCOUNTS} />;
-    return (
-        <VerifyPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
-    );
 }

web/apps/auth/src/pages/404.tsx

@@ -1,17 +1,9 @@
 import { APPS } from "@ente/shared/apps/constants";
 import NotFoundPage from "@ente/shared/next/pages/404";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function NotFound() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <NotFoundPage appContext={appContext} appName={APPS.AUTH} />;
-    return (
-        <NotFoundPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
 }

web/apps/auth/src/pages/auth/index.tsx

@@ -122,19 +122,6 @@ const AuthenticatorCodesPage = () => {
                 <AuthFooter />
                 <div style={{ marginBottom: "4rem" }} />
             </div>
-            <style jsx>{`
-                @media (min-width: 800px) {
-                    .row {
-                        display: flex;
-                        flex-wrap: wrap;
-                        justify-content: center;
-                    }
-                    .col {
-                        flex: 0 0 50%;
-                        max-width: 50%;
-                    }
-                }
-            `}</style>
         </>
     );
 };

web/apps/auth/src/pages/change-email/index.tsx

@@ -1,17 +1,9 @@
 import ChangeEmailPage from "@ente/accounts/pages/change-email";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function ChangeEmail() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <ChangeEmailPage appContext={appContext} appName={APPS.AUTH} />;
-    return (
-        <ChangeEmailPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
 }

web/apps/auth/src/pages/change-password/index.tsx

@@ -1,17 +1,9 @@
 import ChangePasswordPage from "@ente/accounts/pages/change-password";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function ChangePassword() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <ChangePasswordPage appContext={appContext} appName={APPS.AUTH} />;
-    return (
-        <ChangePasswordPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
 }

web/apps/auth/src/pages/credentials/index.tsx

@@ -1,17 +1,9 @@
 import CredentialPage from "@ente/accounts/pages/credentials";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Credential() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <CredentialPage appContext={appContext} appName={APPS.AUTH} />;
-    return (
-        <CredentialPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
 }

web/apps/auth/src/pages/generate/index.tsx

@@ -1,17 +1,9 @@
 import GeneratePage from "@ente/accounts/pages/generate";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Generate() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <GeneratePage appContext={appContext} appName={APPS.AUTH} />;
-    return (
-        <GeneratePage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
 }

web/apps/auth/src/pages/login/index.tsx

@@ -1,17 +1,9 @@
 import LoginPage from "@ente/accounts/pages/login";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Login() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <LoginPage appContext={appContext} appName={APPS.AUTH} />;
-    return (
-        <LoginPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
 }

web/apps/auth/src/pages/recover/index.tsx

@@ -1,17 +1,9 @@
 import RecoverPage from "@ente/accounts/pages/recover";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Recover() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <RecoverPage appContext={appContext} appName={APPS.AUTH} />;
-    return (
-        <RecoverPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
 }

web/apps/auth/src/pages/signup/index.tsx

@@ -1,17 +1,9 @@
 import SignupPage from "@ente/accounts/pages/signup";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Sigup() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <SignupPage appContext={appContext} appName={APPS.AUTH} />;
-    return (
-        <SignupPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
 }

web/apps/auth/src/pages/two-factor/recover/index.tsx

@@ -1,17 +1,9 @@
 import TwoFactorRecoverPage from "@ente/accounts/pages/two-factor/recover";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function TwoFactorRecover() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <TwoFactorRecoverPage appContext={appContext} appName={APPS.AUTH} />;
-    return (
-        <TwoFactorRecoverPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
 }

web/apps/auth/src/pages/two-factor/setup/index.tsx

@@ -1,17 +1,9 @@
 import TwoFactorSetupPage from "@ente/accounts/pages/two-factor/setup";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function TwoFactorSetup() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <TwoFactorSetupPage appContext={appContext} appName={APPS.AUTH} />;
-    return (
-        <TwoFactorSetupPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
 }

web/apps/auth/src/pages/two-factor/verify/index.tsx

@@ -1,17 +1,9 @@
 import TwoFactorVerifyPage from "@ente/accounts/pages/two-factor/verify";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
-import { AppContext } from "pages/_app";
 import { useContext } from "react";
+import { AppContext } from "../../_app";
 
 export default function TwoFactorVerify() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <TwoFactorVerifyPage appContext={appContext} appName={APPS.AUTH} />;
-    return (
-        <TwoFactorVerifyPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
 }

web/apps/auth/src/pages/verify/index.tsx

@@ -1,17 +1,9 @@
 import VerifyPage from "@ente/accounts/pages/verify";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Verify() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <VerifyPage appContext={appContext} appName={APPS.AUTH} />;
-    return (
-        <VerifyPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
 }

web/apps/cast/src/components/FilledCircleCheck.tsx

@@ -0,0 +1,64 @@
+import { styled } from "@mui/material";
+
+const FilledCircleCheck = () => {
+    return (
+        <Container>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+                <circle cx="26" cy="26" r="25" fill="green" />
+                <path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+            </svg>
+        </Container>
+    );
+};
+
+export default FilledCircleCheck;
+
+const Container = styled("div")`
+    width: 100px;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    overflow: hidden;
+    animation: scaleIn 0.3s ease-in-out forwards;
+
+    @keyframes scaleIn {
+        0% {
+            transform: scale(0);
+        }
+        50% {
+            transform: scale(1.1);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+
+    svg {
+        width: 100px;
+        height: 100px;
+
+        circle {
+            fill: green;
+        }
+
+        path {
+            transform-origin: 50% 50%;
+            stroke-dasharray: 48;
+            stroke-dashoffset: 48;
+            animation: strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s
+                forwards;
+            stroke: white;
+            stroke-width: 2;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+        }
+    }
+
+    @keyframes strokeCheck {
+        100% {
+            stroke-dashoffset: 0;
+        }
+    }
+`;

web/apps/cast/src/components/FilledCircleCheck/FilledCircleCheck.module.scss

@@ -1,51 +0,0 @@
-.circle {
-    width: 100px;
-    height: 100px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    overflow: hidden;
-
-    &.animate {
-        animation: scaleIn 0.3s ease-in-out forwards;
-    }
-}
-
-@keyframes scaleIn {
-    0% {
-        transform: scale(0);
-    }
-    50% {
-        transform: scale(1.1);
-    }
-    100% {
-        transform: scale(1);
-    }
-}
-
-.checkmark {
-    width: 100px;
-    height: 100px;
-
-    &__circle {
-        fill: green;
-    }
-
-    &__check {
-        transform-origin: 50% 50%;
-        stroke-dasharray: 48;
-        stroke-dashoffset: 48;
-        animation: strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
-        stroke: white;
-        stroke-width: 2;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-    }
-}
-
-@keyframes strokeCheck {
-    100% {
-        stroke-dashoffset: 0;
-    }
-}

web/apps/cast/src/components/FilledCircleCheck/index.tsx

@@ -1,35 +0,0 @@
-import { useEffect, useState } from "react";
-import styles from "./FilledCircleCheck.module.scss"; // Import our CSS module
-
-const FilledCircleCheck = () => {
-    const [animate, setAnimate] = useState(false);
-
-    useEffect(() => {
-        setAnimate(true);
-    }, []);
-
-    return (
-        <div className={`${styles.circle} ${animate ? styles.animate : ""}`}>
-            <svg
-                className={styles.checkmark}
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 52 52"
-            >
-                <circle
-                    className={styles.checkmark__circle}
-                    cx="26"
-                    cy="26"
-                    r="25"
-                    fill="green"
-                />
-                <path
-                    className={styles.checkmark__check}
-                    fill="none"
-                    d="M14.1 27.2l7.1 7.2 16.7-16.8"
-                />
-            </svg>
-        </div>
-    );
-};
-
-export default FilledCircleCheck;

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

@@ -1,17 +1,9 @@
 import { APPS } from "@ente/shared/apps/constants";
 import NotFoundPage from "@ente/shared/next/pages/404";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function NotFound() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <NotFoundPage appContext={appContext} appName={APPS.AUTH} />;
-    return (
-        <NotFoundPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
 }

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

@@ -1,17 +1,9 @@
 import ChangeEmailPage from "@ente/accounts/pages/change-email";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function ChangeEmail() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <ChangeEmailPage appContext={appContext} appName={APPS.PHOTOS} />;
-    return (
-        <ChangeEmailPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
 }

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

@@ -1,17 +1,9 @@
 import ChangePasswordPage from "@ente/accounts/pages/change-password";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function ChangePassword() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <ChangePasswordPage appContext={appContext} appName={APPS.PHOTOS} />;
-    return (
-        <ChangePasswordPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
 }

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

@@ -1,17 +1,9 @@
 import CredentialPage from "@ente/accounts/pages/credentials";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Credential() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <CredentialPage appContext={appContext} appName={APPS.PHOTOS} />;
-    return (
-        <CredentialPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
 }

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

@@ -1,17 +1,9 @@
 import GeneratePage from "@ente/accounts/pages/generate";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Generate() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <GeneratePage appContext={appContext} appName={APPS.PHOTOS} />;
-    return (
-        <GeneratePage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
 }

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

@@ -1,17 +1,9 @@
 import LoginPage from "@ente/accounts/pages/login";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Login() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <LoginPage appContext={appContext} appName={APPS.PHOTOS} />;
-    return (
-        <LoginPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
 }

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

@@ -1,17 +1,10 @@
 import RecoverPage from "@ente/accounts/pages/recover";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Recover() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+
-    return (
+    return <RecoverPage appContext={appContext} appName={APPS.PHOTOS} />;
-        <RecoverPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
 }

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

@@ -1,17 +1,9 @@
 import SignupPage from "@ente/accounts/pages/signup";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Sigup() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <SignupPage appContext={appContext} appName={APPS.PHOTOS} />;
-    return (
-        <SignupPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
 }

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

@@ -1,17 +1,11 @@
 import TwoFactorRecoverPage from "@ente/accounts/pages/two-factor/recover";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function TwoFactorRecover() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
     return (
-        <TwoFactorRecoverPage
+        <TwoFactorRecoverPage appContext={appContext} appName={APPS.PHOTOS} />
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
     );
 }

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

@@ -1,17 +1,9 @@
 import TwoFactorSetupPage from "@ente/accounts/pages/two-factor/setup";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function TwoFactorSetup() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <TwoFactorSetupPage appContext={appContext} appName={APPS.PHOTOS} />;
-    return (
-        <TwoFactorSetupPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
 }

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

@@ -1,17 +1,11 @@
 import TwoFactorVerifyPage from "@ente/accounts/pages/two-factor/verify";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function TwoFactorVerify() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
     return (
-        <TwoFactorVerifyPage
+        <TwoFactorVerifyPage appContext={appContext} appName={APPS.PHOTOS} />
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
     );
 }

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

@@ -1,17 +1,9 @@
 import VerifyPage from "@ente/accounts/pages/verify";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Verify() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
+    return <VerifyPage appContext={appContext} appName={APPS.PHOTOS} />;
-    return (
-        <VerifyPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
 }

web/apps/photos/src/utils/file/index.ts

@@ -1,6 +1,7 @@
 import { logError } from "@ente/shared/sentry";
 import { LS_KEYS, getData } from "@ente/shared/storage/localStorage";
 import { User } from "@ente/shared/user/types";
+import { downloadUsingAnchor } from "@ente/shared/utils";
 import {
     FILE_TYPE,
     RAW_FORMATS,

web/packages/accounts/pages/change-email.tsx

@@ -23,11 +23,7 @@ function ChangeEmailPage({ appName, appContext }: PageProps) {
         <VerticallyCentered>
             <FormPaper>
                 <FormPaperTitle>{t("CHANGE_EMAIL")}</FormPaperTitle>
-                <ChangeEmailForm
+                <ChangeEmailForm appName={appName} appContext={appContext} />
-                    router={router}
-                    appName={appName}
-                    appContext={appContext}
-                />
             </FormPaper>
         </VerticallyCentered>
     );

web/packages/accounts/pages/two-factor/recover.tsx

@@ -23,6 +23,7 @@ import { ApiError } from "@ente/shared/error";
 import { Link } from "@mui/material";
 import { HttpStatusCode } from "axios";
 import { t } from "i18next";
+import { useRouter } from "next/router";
 import { Trans } from "react-i18next";
 
 const bip39 = require("bip39");
@@ -30,7 +31,6 @@ const bip39 = require("bip39");
 bip39.setDefaultWordlist("english");
 
 export default function Recover({
-    router,
     appContext,
     twoFactorType = TwoFactorType.TOTP,
 }: PageProps) {
@@ -40,6 +40,8 @@ export default function Recover({
     const [doesHaveEncryptedRecoveryKey, setDoesHaveEncryptedRecoveryKey] =
         useState(false);
 
+    const router = useRouter();
+
     useEffect(() => {
         const user = getData(LS_KEYS.USER);
         if (!user || !user.email || !user.twoFactorSessionID) {

web/packages/accounts/pages/two-factor/setup.tsx

@@ -1,7 +1,4 @@
 import { enableTwoFactor, setupTwoFactor } from "@ente/accounts/api/user";
-import { t } from "i18next";
-import { useEffect, useState } from "react";
-
 import VerifyTwoFactor, {
     VerifyTwoFactorCallback,
 } from "@ente/accounts/components/two-factor/VerifyForm";
@@ -16,16 +13,21 @@ import { logError } from "@ente/shared/sentry";
 import { LS_KEYS, getData, setData } from "@ente/shared/storage/localStorage";
 import { Box, CardContent, Typography } from "@mui/material";
 import Card from "@mui/material/Card";
+import { t } from "i18next";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 
 export enum SetupMode {
     QR_CODE,
     MANUAL_CODE,
 }
 
-export default function SetupTwoFactor({ router, appName }: PageProps) {
+export default function SetupTwoFactor({ appName }: PageProps) {
     const [twoFactorSecret, setTwoFactorSecret] =
         useState<TwoFactorSecret>(null);
 
+    const router = useRouter();
+
     useEffect(() => {
         if (twoFactorSecret) {
             return;

web/packages/accounts/pages/two-factor/verify.tsx

@@ -4,12 +4,7 @@ import VerifyTwoFactor, {
 } from "@ente/accounts/components/two-factor/VerifyForm";
 import { PAGES } from "@ente/accounts/constants/pages";
 import { logoutUser } from "@ente/accounts/services/user";
-import { LS_KEYS, getData, setData } from "@ente/shared/storage/localStorage";
+import type { PageProps } from "@ente/shared/apps/types";
-import { User } from "@ente/shared/user/types";
-import { t } from "i18next";
-import { useEffect, useState } from "react";
-
-import { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
@@ -17,11 +12,18 @@ import FormTitle from "@ente/shared/components/Form/FormPaper/Title";
 import LinkButton from "@ente/shared/components/LinkButton";
 import { ApiError } from "@ente/shared/error";
 import InMemoryStore, { MS_KEYS } from "@ente/shared/storage/InMemoryStore";
+import { LS_KEYS, getData, setData } from "@ente/shared/storage/localStorage";
+import { User } from "@ente/shared/user/types";
 import { HttpStatusCode } from "axios";
+import { t } from "i18next";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 
-export default function TwoFactorVerify({ router }: PageProps) {
+export const TwoFactorVerify: React.FC<PageProps> = () => {
     const [sessionID, setSessionID] = useState("");
 
+    const router = useRouter();
+
     useEffect(() => {
         const main = async () => {
             const user: User = getData(LS_KEYS.USER);
@@ -84,4 +86,6 @@ export default function TwoFactorVerify({ router }: PageProps) {
             </FormPaper>
         </VerticallyCentered>
     );
-}
+};
+
+export default TwoFactorVerify;

web/packages/accounts/pages/verify.tsx

@@ -26,16 +26,19 @@ import { clearKeys } from "@ente/shared/storage/sessionStorage";
 import { KeyAttributes, User } from "@ente/shared/user/types";
 import { Box, Typography } from "@mui/material";
 import { HttpStatusCode } from "axios";
+import { useRouter } from "next/router";
 import { putAttributes, sendOtt, verifyOtt } from "../api/user";
 import { PAGES } from "../constants/pages";
 import { configureSRP } from "../services/srp";
 import { logoutUser } from "../services/user";
 import { SRPSetupAttributes } from "../types/srp";
 
-export default function VerifyPage({ appContext, router, appName }: PageProps) {
+export default function VerifyPage({ appContext, appName }: PageProps) {
     const [email, setEmail] = useState("");
     const [resend, setResend] = useState(0);
 
+    const router = useRouter();
+
     useEffect(() => {
         const main = async () => {
             const user: User = getData(LS_KEYS.USER);

web/packages/build-config/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    /* A minimal tsconfig so that we can run tsc on the build-config package
+       itself */
+    "compilerOptions": {
+        "noEmit": true,
+        "checkJs": true
+    },
+    "include": ["*.js"]
+}

web/packages/shared/utils/index.ts

@@ -29,8 +29,9 @@ export function isPromise<T>(obj: T | Promise<T>): obj is Promise<T> {
 
 export async function retryAsyncFunction<T>(
     request: (abort?: () => void) => Promise<T>,
+    waitTimeBeforeNextTry?: number[],
 ): Promise<T> {
-    const waitTimeBeforeNextTry = [2000, 5000, 10000];
+    if (!waitTimeBeforeNextTry) waitTimeBeforeNextTry = [2000, 5000, 10000];
 
     for (
         let attemptNumber = 0;