From 336a87c45acd4c146d7b8beebfa47d18e6f0d35c Mon Sep 17 00:00:00 2001 From: debsouryadatta Date: Wed, 11 Dec 2024 01:36:43 +0530 Subject: [PATCH] Fix: Site gettint stuck (cause: heavy banner component on the explore page) and other minor changes --- .../src/app/(inner_routes)/bookmarks/page.tsx | 2 + .../src/app/(inner_routes)/explore/page.tsx | 6 +- .../src/app/(inner_routes)/search/page.tsx | 2 +- nextjs-app/src/app/layout.tsx | 2 +- .../src/components/course/ShareDialog.tsx | 13 +- .../components/create/SubscriptionAction.tsx | 4 +- nextjs-app/src/components/explore/Banner.tsx | 122 ------------------ nextjs-app/src/components/explore/banner.tsx | 122 ------------------ .../landing/layout/sections/contact.tsx | 5 +- .../landing/layout/sections/hero.tsx | 8 +- .../src/components/post/ShareDialog.tsx | 16 ++- .../settings/SubscriptionButton.tsx | 4 +- 12 files changed, 47 insertions(+), 259 deletions(-) delete mode 100755 nextjs-app/src/components/explore/Banner.tsx delete mode 100755 nextjs-app/src/components/explore/banner.tsx diff --git a/nextjs-app/src/app/(inner_routes)/bookmarks/page.tsx b/nextjs-app/src/app/(inner_routes)/bookmarks/page.tsx index f1ad1b4..0fa0755 100755 --- 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() { ); } + +export const dynamic = 'force-dynamic'; \ No newline at end of file diff --git a/nextjs-app/src/app/(inner_routes)/explore/page.tsx b/nextjs-app/src/app/(inner_routes)/explore/page.tsx index ad96b9c..7202d2b 100755 --- 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 (
- + {/* */}
@@ -67,3 +67,5 @@ export default async function page() {
); } + +export const dynamic = 'force-dynamic'; \ No newline at end of file diff --git a/nextjs-app/src/app/(inner_routes)/search/page.tsx b/nextjs-app/src/app/(inner_routes)/search/page.tsx index 5a3cffe..f56deef 100755 --- 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} + />
diff --git a/nextjs-app/src/app/layout.tsx b/nextjs-app/src/app/layout.tsx index b825c25..14cfc30 100755 --- 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 ( - + {children} diff --git a/nextjs-app/src/components/course/ShareDialog.tsx b/nextjs-app/src/components/course/ShareDialog.tsx index 1a7a09a..0657298 100755 --- 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 index 12bb481..1be49ab 100755 --- 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 deleted file mode 100755 index 4b2a9de..0000000 --- a/nextjs-app/src/components/explore/Banner.tsx +++ /dev/null @@ -1,122 +0,0 @@ -"use client" - -import React, { useState, useRef, useEffect } from 'react' -import { motion, useAnimation } from 'framer-motion' - -const Star = ({ x, y, size, opacity }: { x: number; y: number; size: number; opacity: number }) => ( - -) - -export default function Banner() { - const [stars, setStars] = useState<{ x: number; y: number; size: number; opacity: number }[]>([]) - const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) - const bannerRef = useRef(null) - const controls = useAnimation() - - useEffect(() => { - const newStars = Array.from({ length: 30 }, () => ({ - x: Math.random() * 100, - y: Math.random() * 100, - size: Math.random() * 2 + 1, - opacity: Math.random() * 0.5 + 0.3, - })) - setStars(newStars) - }, []) - - useEffect(() => { - const animateLaser = async () => { - while (true) { - await controls.start({ - pathLength: [0, 1], - pathOffset: [0, 1], - transition: { duration: 6, ease: "linear" } - }) - } - } - animateLaser() - }, [controls]) - - const handleMouseMove = (event: React.MouseEvent) => { - if (bannerRef.current) { - const rect = bannerRef.current.getBoundingClientRect() - setMousePosition({ - x: (event.clientX - rect.left) / rect.width - 0.5, - y: (event.clientY - rect.top) / rect.height - 0.5, - }) - } - } - - return ( -
- - {stars.map((star, index) => ( - - ))} - -
-
-

- AiVerse: AI Learning Community - - - - - - - - - - -

-

- Explore user posts, generated courses roadmaps blog posts, and much more. -

-
-
- ) -} \ No newline at end of file diff --git a/nextjs-app/src/components/explore/banner.tsx b/nextjs-app/src/components/explore/banner.tsx deleted file mode 100755 index 4b2a9de..0000000 --- a/nextjs-app/src/components/explore/banner.tsx +++ /dev/null @@ -1,122 +0,0 @@ -"use client" - -import React, { useState, useRef, useEffect } from 'react' -import { motion, useAnimation } from 'framer-motion' - -const Star = ({ x, y, size, opacity }: { x: number; y: number; size: number; opacity: number }) => ( - -) - -export default function Banner() { - const [stars, setStars] = useState<{ x: number; y: number; size: number; opacity: number }[]>([]) - const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) - const bannerRef = useRef(null) - const controls = useAnimation() - - useEffect(() => { - const newStars = Array.from({ length: 30 }, () => ({ - x: Math.random() * 100, - y: Math.random() * 100, - size: Math.random() * 2 + 1, - opacity: Math.random() * 0.5 + 0.3, - })) - setStars(newStars) - }, []) - - useEffect(() => { - const animateLaser = async () => { - while (true) { - await controls.start({ - pathLength: [0, 1], - pathOffset: [0, 1], - transition: { duration: 6, ease: "linear" } - }) - } - } - animateLaser() - }, [controls]) - - const handleMouseMove = (event: React.MouseEvent) => { - if (bannerRef.current) { - const rect = bannerRef.current.getBoundingClientRect() - setMousePosition({ - x: (event.clientX - rect.left) / rect.width - 0.5, - y: (event.clientY - rect.top) / rect.height - 0.5, - }) - } - } - - return ( -
- - {stars.map((star, index) => ( - - ))} - -
-
-

- AiVerse: AI Learning Community - - - - - - - - - - -

-

- Explore user posts, generated courses roadmaps blog posts, and much more. -

-
-
- ) -} \ No newline at end of file diff --git a/nextjs-app/src/components/landing/layout/sections/contact.tsx b/nextjs-app/src/components/landing/layout/sections/contact.tsx index 4df9b08..850afbb 100644 --- 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:leomirandadev@gmail.com?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 index 2cb7898..291a48d 100644 --- 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 (
@@ -39,7 +45,7 @@ export const HeroSection = () => {

- diff --git a/nextjs-app/src/components/post/ShareDialog.tsx b/nextjs-app/src/components/post/ShareDialog.tsx index b371dec..4a82807 100644 --- 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"); diff --git a/nextjs-app/src/components/settings/SubscriptionButton.tsx b/nextjs-app/src/components/settings/SubscriptionButton.tsx index 1dbe39d..147c7ba 100755 --- a/nextjs-app/src/components/settings/SubscriptionButton.tsx +++ b/nextjs-app/src/components/settings/SubscriptionButton.tsx @@ -21,7 +21,9 @@ const SubscriptionButton = ({ tier, isCurrentTier, credits, price }: Props) => { const response = await axios.post("/api/stripe", { tier }); - window.location.href = response.data.url; + if (typeof window !== 'undefined') { + window.location.href = response.data.url; + } } catch (error) { toast.error("Something went wrong. Please try again later."); } finally {