From e30f1c520f212008c375a6181457da90b350351b Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 16:12:03 +0700
Subject: [PATCH] :recycle: enhan: refactor component ScrollToTop

:%s
---
 src/components/common/Layout/Layout.tsx       | 21 ++++-----
 .../ScrollToTop/ScrollToTop.module.scss       | 16 +++----
 .../common/ScrollToTop/ScrollToTop.tsx        | 45 +++++++++----------
 3 files changed, 40 insertions(+), 42 deletions(-)

diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx
index 8b93825b4..8a023e81a 100644
--- a/src/components/common/Layout/Layout.tsx
+++ b/src/components/common/Layout/Layout.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import { FC } from 'react'
 import { useModalCommon } from 'src/components/hooks'
 import { BRAND, CATEGORY, FEATURED } from 'src/utils/constanst.utils'
-import { CustomShapeSvg } from '..'
+import { CustomShapeSvg, ScrollToTop } from '..'
 import Footer from '../Footer/Footer'
 import Header from '../Header/Header'
 import MenuNavigationProductList from '../MenuNavigationProductList/MenuNavigationProductList'
@@ -18,7 +18,7 @@ interface Props {
 const Layout: FC<Props> = ({ children }) => {
     const { locale = 'en-US' } = useRouter()
     const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false })
-    
+
     const toggleFilter = () => {
         if (visibleFilter) {
             closeFilter()
@@ -28,14 +28,15 @@ const Layout: FC<Props> = ({ children }) => {
     }
     return (
         <CommerceProvider locale={locale}>
-                <div className={s.mainLayout}>
-                    <Header toggleFilter={toggleFilter}/>
-                    <main >{children}</main>
-                    
-                    <CustomShapeSvg/>
-					<div className={s.filter}><MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter}/> </div>
-                    <Footer />
-                </div>
+            <div className={s.mainLayout}>
+                <Header toggleFilter={toggleFilter} />
+                <main >{children}</main>
+
+                <CustomShapeSvg />
+                <div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>
+                <ScrollToTop visibilityHeight={1500} />
+                <Footer />
+            </div>
         </CommerceProvider>
 
     )
diff --git a/src/components/common/ScrollToTop/ScrollToTop.module.scss b/src/components/common/ScrollToTop/ScrollToTop.module.scss
index c010f08ad..940bc0ac2 100644
--- a/src/components/common/ScrollToTop/ScrollToTop.module.scss
+++ b/src/components/common/ScrollToTop/ScrollToTop.module.scss
@@ -1,24 +1,24 @@
-@import '../../../styles/utilities';
+@import "../../../styles/utilities";
 
 .scrollToTop {
     @apply hidden;
+    z-index: 9999;
 
     @screen md {
         &.show {
             @apply block rounded-lg fixed cursor-pointer;
-            right: 11.2rem;
-            bottom: 21.6rem; 
+            right: 6.4rem;
+            bottom: 21.6rem;
             width: 6.4rem;
             height: 6.4rem;
             background-color: var(--border-line);
-        }
-        
-        &.hide {
-            @apply hidden;
+            @screen lg {
+                right: 11.2rem;
+            }
         }
     }
 
     .scrollToTopBtn {
         @apply outline-none w-full h-full;
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/common/ScrollToTop/ScrollToTop.tsx b/src/components/common/ScrollToTop/ScrollToTop.tsx
index eef74cb24..388fae3cc 100644
--- a/src/components/common/ScrollToTop/ScrollToTop.tsx
+++ b/src/components/common/ScrollToTop/ScrollToTop.tsx
@@ -1,47 +1,44 @@
-import React, { useState, useEffect, MutableRefObject } from 'react'
 import classNames from 'classnames'
+import React, { useEffect, useState } from 'react'
+import ArrowUp from '../../icons/IconArrowUp'
 import s from './ScrollToTop.module.scss'
 
-import ArrowUp from '../../icons/IconArrowUp'
 
 interface ScrollToTopProps {
     visibilityHeight?: number;
 }
 
-const ScrollToTop = ({ visibilityHeight=450 }: ScrollToTopProps) => {
-
-    const [scrollPosition, setSrollPosition] = useState(0);
-    const [showScrollToTop, setShowScrollToTop] = useState("hide");
+const ScrollToTop = ({ visibilityHeight = 450 }: ScrollToTopProps) => {
+    const [showScrollToTop, setShowScrollToTop] = useState<boolean>();
 
     function handleVisibleButton() {
-        const position = window.pageYOffset;
-        setSrollPosition(position);
-    
+        const scrollPosition = window.scrollY;
+
         if (scrollPosition > visibilityHeight) {
-          return setShowScrollToTop("show")
-        } else if (scrollPosition < visibilityHeight) {
-          return setShowScrollToTop("hide");
+            setShowScrollToTop(true)
+        } else {
+            setShowScrollToTop(false)
         }
     };
 
+    useEffect(() => {
+        window.addEventListener("scroll", handleVisibleButton);
+        return () => {
+            window.removeEventListener("scroll", handleVisibleButton);
+        }
+    }, []);
+
+
     function handleScrollUp() {
         window.scrollTo(0, 0);
     }
 
-    function addEventScroll() {
-        window.addEventListener("scroll", handleVisibleButton);
-    }
-
-    useEffect(() => {
-        addEventScroll();
-    }, []);    
-
     return (
         <div className={classNames(s.scrollToTop, {
-            [s[`${showScrollToTop}`]]: showScrollToTop
-          })}
-          onClick={handleScrollUp}
-          >
+            [s.show]: showScrollToTop
+        })}
+            onClick={handleScrollUp}
+        >
             <button className={s.scrollToTopBtn}>
                 <ArrowUp />
             </button>