Fix: Site gettint stuck (cause: heavy banner component on the explore…

… page) and other minor changes
debsouryadatta · Dec 10, 2024 · 336a87c · 336a87c
1 parent 5d461b1
commit 336a87c
Show file tree

Hide file tree

Showing 12 changed files with 47 additions and 259 deletions.
diff --git a/nextjs-app/src/app/(inner_routes)/bookmarks/page.tsx b/nextjs-app/src/app/(inner_routes)/bookmarks/page.tsx
@@ -83,3 +83,5 @@ export default function page() {
     </div>
   );
 }
+
+export const dynamic = 'force-dynamic';
diff --git a/nextjs-app/src/app/(inner_routes)/explore/page.tsx b/nextjs-app/src/app/(inner_routes)/explore/page.tsx
@@ -1,4 +1,4 @@
-import Banner from "@/components/explore/Banner";
+// import Banner from "@/components/explore/Banner";
 import React from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import PostsList from "@/components/explore/PostsList";
@@ -45,7 +45,7 @@ export default async function page() {
 
   return (
     <div>
-      <Banner />
+      {/* <Banner /> */}
       <div className="flex flex-col items-center">
         <Tabs defaultValue="posts" className="mt-5 w-full max-w-2xl flex flex-col items-center">
           <TabsList className="bg-zinc-400 text-black dark:bg-zinc-800 dark:text-white w-96">
@@ -67,3 +67,5 @@ export default async function page() {
     </div>
   );
 }
+
+export const dynamic = 'force-dynamic';
diff --git a/nextjs-app/src/app/(inner_routes)/search/page.tsx b/nextjs-app/src/app/(inner_routes)/search/page.tsx
@@ -13,7 +13,7 @@ export default function page() {
           src="https://res.cloudinary.com/diyxwdtjd/image/upload/v1723098788/projects/code-1839406_ial7zq.jpg"
           alt="/"
           width={200}
-          height={200}
+
         />
         <Search />
       </div>

diff --git a/nextjs-app/src/app/layout.tsx b/nextjs-app/src/app/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en">
       <body className={inter.className}>
         <Providers>
           {children}

diff --git a/nextjs-app/src/components/course/ShareDialog.tsx b/nextjs-app/src/components/course/ShareDialog.tsx
@@ -20,15 +20,22 @@ import { toast } from "sonner"
 
 export function ShareDialog({course}: {course: any}) {
     const [pageUrl, setPageUrl] = useState("");
-
+    const [mounted, setMounted] = useState(false);
 
     useEffect(() => {
+      setMounted(true);
+      if (typeof window !== 'undefined') {
         let inviteCode = course?.visibility == "invite-only" ? `?inviteCode=${course.inviteCode}` : "";
         setPageUrl(
-            window.location.protocol + "//" + window.location.host + window.location.pathname + inviteCode
+          window.location.protocol + "//" + window.location.host + window.location.pathname + inviteCode
         )
-    }, [])
+      }
+    }, [course])
 
+    if (!mounted) {
+      return null;
+    }
+
     const copyToClipboard = () => {
         navigator.clipboard.writeText(pageUrl)
         toast("Link copied to clipboard");

diff --git a/nextjs-app/src/components/create/SubscriptionAction.tsx b/nextjs-app/src/components/create/SubscriptionAction.tsx
@@ -15,7 +15,9 @@ export default function SubscriptionAction({credits}: {credits: number}) {
     setLoading(true);
     try {
       const response = await axios.get("/api/stripe");
-      window.location.href = response.data.url;
+      if (typeof window !== 'undefined') {
+        window.location.href = response.data.url;
+      }
     } catch (error) {
       console.log("error", error);
     } finally {

diff --git a/nextjs-app/src/components/explore/Banner.tsx b/nextjs-app/src/components/explore/Banner.tsx
diff --git a/nextjs-app/src/components/explore/banner.tsx b/nextjs-app/src/components/explore/banner.tsx
diff --git a/nextjs-app/src/components/landing/layout/sections/contact.tsx b/nextjs-app/src/components/landing/layout/sections/contact.tsx
@@ -54,7 +54,10 @@ export const ContactSection = () => {
 
     const mailToLink = `mailto:[email protected]?subject=${subject}&body=Hello I am ${firstName} ${lastName}, my Email is ${email}. %0D%0A${message}`;
 
-    window.location.href = mailToLink;
+    // Only execute on client
+    if (typeof window !== 'undefined') {
+      window.location.href = mailToLink;
+    }
   }
 
   return (

diff --git a/nextjs-app/src/components/landing/layout/sections/hero.tsx b/nextjs-app/src/components/landing/layout/sections/hero.tsx
@@ -13,6 +13,12 @@ export const HeroSection = () => {
   const { theme } = useTheme();
   const router = useRouter();
 
+  const safeRedirect = (url: string) => {
+    if (typeof window !== 'undefined') {
+      window.location.href = url;
+    }
+  }
+
   return (
     <section id="hero" className="container w-full">
       <div className="grid place-items-center lg:max-w-screen-xl gap-8 mx-auto py-20 md:py-32">
@@ -39,7 +45,7 @@ export const HeroSection = () => {
           </p>
 
           <div className="space-y-4 md:space-y-0 md:space-x-4">
-            <Button onClick={() => window.location.href = "/explore"} className="w-5/6 md:w-1/4 font-bold group/arrow">
+            <Button onClick={() => safeRedirect("/explore")} className="w-5/6 md:w-1/4 font-bold group/arrow">
               Get Started
               <ArrowRight className="size-5 ml-2 group-hover/arrow:translate-x-1 transition-transform" />
             </Button>

diff --git a/nextjs-app/src/components/post/ShareDialog.tsx b/nextjs-app/src/components/post/ShareDialog.tsx
@@ -19,13 +19,21 @@ import { Share } from "lucide-react"
 
 export function ShareDialog({post}: {post: any}) {
     const [pageUrl, setPageUrl] = useState("");
+    const [mounted, setMounted] = useState(false);
 
     useEffect(() => {
-        setPageUrl(
-            window.location.protocol + "//" + window.location.host + "/post/" + post.id
-        )
-    }, [])
+      setMounted(true);
+      if (typeof window !== 'undefined') {
+          setPageUrl(
+              window.location.protocol + "//" + window.location.host + "/post/" + post.id
+          )
+      }
+    }, [post.id])
 
+    if (!mounted) {
+      return null;
+    }
+
     const copyToClipboard = () => {
         navigator.clipboard.writeText(pageUrl)
         toast("Link copied to clipboard");
-Original file line number
+Diff line change
@@ Expand Up / @@ -83,3 +83,5 @@ export default function page() { @@
         </div>
       );
     }
+    export const dynamic = 'force-dynamic';