From e30f1c520f212008c375a6181457da90b350351b Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 14 Sep 2021 16:12:03 +0700 Subject: [PATCH 1/3] :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 = ({ 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 = ({ children }) => { } return ( -
-
-
{children}
- - -
-
-
+
+
+
{children}
+ + +
+ +
+
) 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(); 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 (
+ [s.show]: showScrollToTop + })} + onClick={handleScrollUp} + > From 2849e291fb9d67023e28d1887934715a04ae8cca Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 14 Sep 2021 16:36:59 +0700 Subject: [PATCH 2/3] :art: styles: descrease spacing bottom 404, error page :%s --- src/components/modules/404/404Page/404Page.module.scss | 2 +- src/components/modules/error/ErrorPage/Errorpage.module.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/modules/404/404Page/404Page.module.scss b/src/components/modules/404/404Page/404Page.module.scss index b089a9ad3..f490b4f3a 100644 --- a/src/components/modules/404/404Page/404Page.module.scss +++ b/src/components/modules/404/404Page/404Page.module.scss @@ -6,7 +6,7 @@ background-color: white; .inner{ - height: 100vh; + height: 70vh; .logo{ margin-top: 2rem; } diff --git a/src/components/modules/error/ErrorPage/Errorpage.module.scss b/src/components/modules/error/ErrorPage/Errorpage.module.scss index 562a20f8b..379c01c46 100644 --- a/src/components/modules/error/ErrorPage/Errorpage.module.scss +++ b/src/components/modules/error/ErrorPage/Errorpage.module.scss @@ -6,7 +6,7 @@ background-color: white; .inner{ - height: 100vh; + height: 70vh; .logo{ margin-top: 2rem; } From 0463fb7808a12a619973fff53f2ee000bb8e6932 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 14 Sep 2021 16:37:16 +0700 Subject: [PATCH 3/3] :sparkles: feat: add error page :%s --- pages/_error.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 pages/_error.tsx diff --git a/pages/_error.tsx b/pages/_error.tsx new file mode 100644 index 000000000..3b7455377 --- /dev/null +++ b/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 ( + + ) +} +NotFound.Layout = Layout