address errors on login and _app files

Vets-Who-Code · Nov 24, 2024 · abbcb4e · abbcb4e
1 parent 70e3c73
commit abbcb4e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 23 deletions.
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,7 +1,8 @@
 import { ElementType, useEffect } from "react";
 import { useRouter } from "next/router";
-import type { AppProps } from "next/app";
+import type { AppProps } from 'next/app';
 import { SessionProvider } from "next-auth/react";
+import type { Session } from "next-auth";
 import { Analytics } from "@vercel/analytics/react";
 import SEO from "@components/seo/deafult-seo";
 import FallbackLayout from "@layout/fallback";
@@ -16,29 +17,31 @@ import { UIProvider } from "../contexts/ui-context";
 import { UserProvider } from "../contexts/user-context";
 
 interface CustomAppProps extends Omit<AppProps, "Component"> {
-    Component: AppProps["Component"] & { Layout?: ElementType }; // Made Layout optional
+    Component: AppProps["Component"] & { Layout?: ElementType };
     pageProps: {
-        session?: any;
-        layout?: object;
+        session?: Session | null;
+        layout?: Record<string, unknown>;
         className?: string;
         [key: string]: unknown;
     };
 }
 
-const MyApp = ({ Component, pageProps }: CustomAppProps) => {
+const MyApp = ({ Component, pageProps }: CustomAppProps): JSX.Element => {
     const router = useRouter();
     const Layout = Component.Layout || FallbackLayout;
-    const layoutProps = pageProps.layout || {}; // Simplified this check
+    const layoutProps = pageProps.layout || {};
 
     useEffect(() => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        document.activeElement instanceof HTMLElement &&
-            document.activeElement.blur();
+        // Replace the expression with a more explicit check and action
+        const activeElement = document.activeElement;
+        if (activeElement instanceof HTMLElement) {
+            activeElement.blur();
+        }
     }, [router]);
 
     useEffect(() => {
-        document.body.className = pageProps.className || ""; // Simplified this
-    }, [pageProps.className]); // Added dependency array to prevent unnecessary updates
+        document.body.className = pageProps.className || "";
+    }, [pageProps.className]);
 
     return (
         <SessionProvider session={pageProps.session}>
@@ -55,4 +58,4 @@ const MyApp = ({ Component, pageProps }: CustomAppProps) => {
     );
 };
 
-export default MyApp;
+export default MyApp;
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useCallback } from "react";
 import { useRouter } from "next/router";
 import { useSession, signIn } from "next-auth/react";
 import Spinner from "@ui/spinner";
@@ -25,12 +25,36 @@ const Login: PageWithLayout = () => {
 
     useEffect(() => {
         if (status === "authenticated") {
-            router.push("/profile").catch((err) => {
-                console.error("Failed to redirect to profile:", err);
-            });
+            // Using async/await with proper error handling
+            (async () => {
+                try {
+                    await router.push("/profile");
+                } catch (err) {
+                    // Only log in development, consider using a proper error tracking service
+                    if (process.env.NODE_ENV === "development") {
+                        // eslint-disable-next-line no-console
+                        console.error("Failed to redirect to profile:", err);
+                    }
+                }
+            })();
         }
     }, [status, router]);
 
+    const handleSignIn = useCallback(async () => {
+        try {
+            await signIn("github", {
+                callbackUrl: "/profile",
+                redirect: true,
+            });
+        } catch (error) {
+            // Handle sign-in error if needed
+            if (process.env.NODE_ENV === "development") {
+                // eslint-disable-next-line no-console
+                console.error("Sign-in failed:", error);
+            }
+        }
+    }, []);
+
     if (!mounted || status === "loading") {
         return (
             <div className="tw-fixed tw-bg-white tw-top-0 tw-z-50 tw-w-screen tw-h-screen tw-flex tw-justify-center tw-items-center">
@@ -54,12 +78,7 @@ const Login: PageWithLayout = () => {
                     <div className="tw-p-6">
                         <button
                             type="button"
-                            onClick={() =>
-                                void signIn("github", {
-                                    callbackUrl: "/profile",
-                                    redirect: true,
-                                })
-                            }
+                            onClick={handleSignIn}
                             className="tw-w-full tw-flex tw-items-center tw-justify-center tw-gap-2 tw-px-4 tw-py-3 tw-text-sm tw-font-medium tw-text-white tw-bg-primary tw-rounded-md tw-transition-colors"
                         >
                             <i className="fab fa-github" />
@@ -112,4 +131,4 @@ export const getStaticProps: GetStaticProps<LoginProps> = () => {
     };
 };
 
-export default Login;
+export default Login;