refactor: scroll-to-top

laurelin60 · Dec 4, 2024 · 963a633 · 963a633
1 parent 958326d
commit 963a633
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import "./globals.css";
 import { Footer } from "@/components/footer";
 import GoogleAnalytics from "@/components/GoogleAnalytics";
 import { Header } from "@/components/header";
+import { ScrollToTop } from "@/components/scroll-to-top";
 import { Toaster } from "@/components/ui/toaster";
 
 const inter = Inter({ subsets: ["latin"], fallback: ["sans-serif"] });
@@ -45,6 +46,7 @@ export default function RootLayout({
                     <Header />
                     <GoogleAnalytics />
                     {children}
+                    <ScrollToTop />
                     <Footer />
                     <Toaster />
                 </div>

diff --git a/src/components/search/ScrollToTop.tsx → src/components/scroll-to-top.tsx b/src/components/search/ScrollToTop.tsx → src/components/scroll-to-top.tsx
@@ -1,38 +1,43 @@
-import React, { useEffect, useState } from "react";
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
 import { ChevronUpIcon } from "lucide-react";
 
-const ScrollToTop = () => {
+export function ScrollToTop() {
     const [isVisible, setIsVisible] = useState(false);
 
-    const toggleVisibility = () => {
+    const toggleVisibility = useCallback(() => {
         if (window.scrollY > 700) {
             setIsVisible(true);
         } else {
             setIsVisible(false);
         }
-    };
+    }, []);
 
-    const scrollToTop = () => {
+    const scrollToTop = useCallback(() => {
         window.scrollTo({
             top: 0,
             behavior: "smooth",
         });
-    };
+    }, []);
 
     useEffect(() => {
         window.addEventListener("scroll", toggleVisibility);
+
         return () => {
             window.removeEventListener("scroll", toggleVisibility);
         };
-    }, []);
+    }, [toggleVisibility]);
 
     return (
         <div
-            className={`${
-                isVisible
-                    ? "visible opacity-60 hover:w-40 hover:opacity-100"
-                    : "invisible opacity-0"
-            } group fixed bottom-4 right-4 z-50 flex h-11 w-11 cursor-pointer items-center justify-center rounded-full bg-primary px-3 transition-all`}
+            className={cn(
+                "group fixed bottom-4 right-4 z-50 flex h-11 w-11 cursor-pointer items-center justify-center rounded-full bg-primary px-3 transition-all",
+                !isVisible
+                    ? "invisible opacity-0"
+                    : "visible opacity-60 hover:w-40 hover:opacity-100"
+            )}
             onClick={scrollToTop}
         >
             <div className="flex items-center justify-center">
@@ -45,6 +50,4 @@ const ScrollToTop = () => {
             </div>
         </div>
     );
-};
-
-export default ScrollToTop;
+}
diff --git a/src/components/search/Search.tsx b/src/components/search/Search.tsx
@@ -16,7 +16,6 @@ import { queryDatabase } from "../../lib/utils/query-db";
 import { ToastAction } from "../ui/toast";
 import { useToast } from "../ui/use-toast";
 import { SearchFilter } from "./filter/search-filter";
-import ScrollToTop from "./ScrollToTop";
 import { SearchSelect } from "./SearchSelect";
 
 export interface CourseObject {
@@ -328,7 +327,6 @@ const Search = () => {
                             ge={ge}
                         />
                     )}
-                    <ScrollToTop />
                 </div>
             </div>
         </div>