From 963a6331c342dbbb00accd13df6c4340bac29152 Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Wed, 4 Dec 2024 15:50:38 -0800
Subject: [PATCH] refactor: scroll-to-top

---
 src/app/layout.tsx                            |  2 ++
 .../ScrollToTop.tsx => scroll-to-top.tsx}     | 33 ++++++++++---------
 src/components/search/Search.tsx              |  2 --
 3 files changed, 20 insertions(+), 17 deletions(-)
 rename src/components/{search/ScrollToTop.tsx => scroll-to-top.tsx} (63%)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ca8466b..447453d 100644
--- 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 b/src/components/scroll-to-top.tsx
similarity index 63%
rename from src/components/search/ScrollToTop.tsx
rename to src/components/scroll-to-top.tsx
index 305e170..1128eaa 100644
--- a/src/components/search/ScrollToTop.tsx
+++ b/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
index 6b29cbb..520da47 100644
--- 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>