From 80aeeb0d7fd71272fc58ea98d864a43002af7a32 Mon Sep 17 00:00:00 2001
From: aelassas <akram.elassas@gmail.com>
Date: Fri, 10 Jan 2025 18:21:22 +0100
Subject: [PATCH] Fix: product page does not scroll to top on product click

---
 .../(public)/product/[id]/[name]/page.tsx     | 20 +++++++++++++------
 frontend/src/components/ScrollToTop.tsx       | 13 ++++++++++++
 2 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/ScrollToTop.tsx

diff --git a/frontend/src/app/(pages)/(public)/product/[id]/[name]/page.tsx b/frontend/src/app/(pages)/(public)/product/[id]/[name]/page.tsx
index 105a552..a1aef67 100644
--- a/frontend/src/app/(pages)/(public)/product/[id]/[name]/page.tsx
+++ b/frontend/src/app/(pages)/(public)/product/[id]/[name]/page.tsx
@@ -8,6 +8,7 @@ import * as UserService from '@/lib/UserService'
 import * as WishlistService from '@/lib/WishlistService'
 import ProductComponent from '@/components/Product'
 import Indicator from '@/components/Indicator'
+import ScrollToTop from '@/components/ScrollToTop'
 
 const Product = async (props: { params: Promise<{ id: string, name: string }> }) => {
   const params = await props.params
@@ -30,12 +31,19 @@ const Product = async (props: { params: Promise<{ id: string, name: string }> })
     console.error(err)
   }
 
-  return product ? (
-    <Suspense fallback={<Indicator />}>
-      <ProductComponent product={product} />
-    </Suspense>
-  ) : (
-    <NoMatch />
+  return (
+    <>
+      <ScrollToTop />
+      {
+        product ? (
+          <Suspense fallback={<Indicator />}>
+            <ProductComponent product={product} />
+          </Suspense>
+        ) : (
+          <NoMatch />
+        )
+      }
+    </>
   )
 }
 
diff --git a/frontend/src/components/ScrollToTop.tsx b/frontend/src/components/ScrollToTop.tsx
new file mode 100644
index 0000000..f532dd4
--- /dev/null
+++ b/frontend/src/components/ScrollToTop.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import { useEffect } from 'react'
+
+const ScrollToTop = () => {
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [])
+
+  return null
+}
+
+export default ScrollToTop