Merge pull request #52 from KieIO/m7-lytran2

M7 Ly: error page, fix scroll to top

pages/_error.tsx

@@ -0,0 +1,9 @@
+import { Layout } from 'src/components/common'
+import { ErrorPage } from 'src/components/modules/error'
+
+export default function NotFound() {
+  return (
+       <ErrorPage/>
+  )
+}
+NotFound.Layout = Layout

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>
 
     )

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;
     }
-}
+}

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>

src/components/modules/404/404Page/404Page.module.scss

@@ -6,7 +6,7 @@
   
     background-color: white;
     .inner{
-        height: 100vh;
+        height: 70vh;
         .logo{
             margin-top: 2rem;
         }

src/components/modules/error/ErrorPage/Errorpage.module.scss

@@ -6,7 +6,7 @@
   
     background-color: white;
     .inner{
-        height: 100vh;
+        height: 70vh;
         .logo{
             margin-top: 2rem;
         }