From 56c81770e0e72163d157fbab7b94dd1065e2bab0 Mon Sep 17 00:00:00 2001
From: Sergey Uchaev <dialoggg1994@gmail.com>
Date: Thu, 15 Aug 2024 23:19:17 +0300
Subject: [PATCH] add fix pagination

---
 app/[slug]/page.tsx                           |  1 -
 components/Header/Header.tsx                  |  5 +--
 .../Pagination/LoadMore/LoadMore.tsx          | 42 +++++++++++++++++++
 .../StocksList/Pagination/LoadMore/index.ts   |  1 +
 .../StocksList/Pagination/Pagination.tsx      | 14 +++----
 5 files changed, 52 insertions(+), 11 deletions(-)
 create mode 100644 components/StocksList/Pagination/LoadMore/LoadMore.tsx
 create mode 100644 components/StocksList/Pagination/LoadMore/index.ts

diff --git a/app/[slug]/page.tsx b/app/[slug]/page.tsx
index 8257b36..4c1c235 100644
--- a/app/[slug]/page.tsx
+++ b/app/[slug]/page.tsx
@@ -84,7 +84,6 @@ const PageStock = async ({ params }: Props) => {
           ) : (
             <span>Not data</span>
           )}
-
         </div>
       </div>
     );
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
index ae21423..349312d 100644
--- a/components/Header/Header.tsx
+++ b/components/Header/Header.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import Link from 'next/link';
 import { Logo } from '@/components/Logo';
 import { Profile } from '@/components/Profile';
 
@@ -10,9 +9,9 @@ export const Header = () => {
     <div className={styles.header}>
       <div className={styles.main}>
         <div className={styles.logo}>
-          <Link href="/" aria-label="Homepage">
+          <a href="/" aria-label="Homepage">
             <Logo />
-          </Link>
+          </a>
         </div>
       </div>
       <div className={styles.side}>
diff --git a/components/StocksList/Pagination/LoadMore/LoadMore.tsx b/components/StocksList/Pagination/LoadMore/LoadMore.tsx
new file mode 100644
index 0000000..e0cefda
--- /dev/null
+++ b/components/StocksList/Pagination/LoadMore/LoadMore.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import styles from '../pagination.module.scss';
+import Link from 'next/link';
+
+interface LoadMoreProps {
+  currentStart: number;
+  currentEnd: number;
+  itemsPerPage: number;
+}
+
+export const LoadMore = ({
+  currentStart,
+  currentEnd,
+  itemsPerPage,
+}: LoadMoreProps) => {
+  const scrollPosition = useRef<number>(0);
+
+  useEffect(() => {
+    if (scrollPosition.current > 0) {
+      window.scrollTo({
+        top: scrollPosition.current,
+      });
+      scrollPosition.current = 0;
+    }
+  });
+
+  const handleLoadMoreClick = () => {
+    scrollPosition.current = window.scrollY;
+  };
+
+  return (
+    <Link
+      onClick={handleLoadMoreClick}
+      className={styles.btn}
+      href={`?start=${currentStart}&end=${currentEnd + itemsPerPage}`}
+    >
+      Show more
+    </Link>
+  );
+};
diff --git a/components/StocksList/Pagination/LoadMore/index.ts b/components/StocksList/Pagination/LoadMore/index.ts
new file mode 100644
index 0000000..2d94695
--- /dev/null
+++ b/components/StocksList/Pagination/LoadMore/index.ts
@@ -0,0 +1 @@
+export { LoadMore as default } from './LoadMore';
diff --git a/components/StocksList/Pagination/Pagination.tsx b/components/StocksList/Pagination/Pagination.tsx
index 5b3283c..985ecd0 100644
--- a/components/StocksList/Pagination/Pagination.tsx
+++ b/components/StocksList/Pagination/Pagination.tsx
@@ -1,7 +1,8 @@
 import Link from 'next/link';
 import classNames from 'classnames';
 import { createPageArray } from '@/utils';
-
+import dynamic from 'next/dynamic';
+const LoadMore = dynamic(() => import('./LoadMore'), { ssr: false });
 import styles from './pagination.module.scss';
 
 export const Pagination = ({
@@ -35,12 +36,11 @@ export const Pagination = ({
   return (
     <div className={styles.box}>
       <div className={styles.loadMore}>
-        <Link
-          className={styles.btn}
-          href={`?start=${currentStart}&end=${currentEnd + itemsPerPage}`}
-        >
-          Show more
-        </Link>
+        <LoadMore
+          currentStart={currentStart}
+          currentEnd={currentEnd}
+          itemsPerPage={itemsPerPage}
+        />
       </div>
       <div className={styles.pagination}>
         <div className={styles.prev}>