From f62b2345f463695ef0f8f79830cd76b6e0332821 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sat, 13 Jan 2024 10:35:22 +0700 Subject: Refactor src migrate folder --- src/pages/_app.jsx | 99 +++++++++++++++++++++++++++++++----------------------- 1 file changed, 57 insertions(+), 42 deletions(-) (limited to 'src/pages/_app.jsx') diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index 3fe1d3cf..aa545863 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -1,58 +1,73 @@ -import '@/fonts/Inter/inter.css' -import '@/styles/globals.css' -import 'react-loading-skeleton/dist/skeleton.css' +import '@/fonts/Inter/inter.css'; +import '@/styles/globals.css'; +import 'react-loading-skeleton/dist/skeleton.css'; -import NextProgress from 'next-progress' -import { useRouter, Router } from 'next/router' -import { AnimatePresence, motion } from 'framer-motion' -import { Toaster } from 'react-hot-toast' -import { QueryClient, QueryClientProvider } from 'react-query' -import useDevice from '@/core/hooks/useDevice' -import { useEffect, useState } from 'react' -import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner' -import { SessionProvider } from 'next-auth/react' -import { ProductProvider } from '@/contexts/ProductContext' -import { ProductCartProvider } from '@/contexts/ProductCartContext' -import { ChakraProvider } from '@chakra-ui/react' -import theme from '../../chakra.theme' +import { useEffect, useState } from 'react'; +import dynamic from 'next/dynamic'; +import { useRouter, Router } from 'next/router'; +import { AnimatePresence, motion } from 'framer-motion'; +import { QueryClient, QueryClientProvider } from 'react-query'; -const queryClient = new QueryClient() +import useDevice from '@/core/hooks/useDevice'; +import { ProductProvider } from '@/contexts/ProductContext'; +import { ProductCartProvider } from '@/contexts/ProductCartContext'; +import theme from '../../chakra.theme'; + +const NextProgress = dynamic(() => import('next-progress'), { ssr: false }); +const ChakraProvider = dynamic( + () => import('@chakra-ui/react').then((mod) => mod.ChakraProvider), + { ssr: false } +); +const SessionProvider = dynamic( + () => import('next-auth/react').then((mod) => mod.SessionProvider), + { ssr: false } +); +const LogoSpinner = dynamic( + () => import('@/core/components/elements/Spinner/LogoSpinner'), + { ssr: false } +); +const Toaster = dynamic( + () => import('react-hot-toast').then((mod) => mod.Toaster), + { ssr: false } +); + +const queryClient = new QueryClient(); function MyApp({ Component, pageProps: { session, ...pageProps } }) { - const router = useRouter() - const { isMobile } = useDevice() + const router = useRouter(); + const { isMobile } = useDevice(); - const [animateLoader, setAnimateLoader] = useState(false) + const [animateLoader, setAnimateLoader] = useState(false); useEffect(() => { - const handleRouteChangeStart = () => setAnimateLoader(true) - const handleRouteChangeComplete = () => setAnimateLoader(false) + const handleRouteChangeStart = () => setAnimateLoader(true); + const handleRouteChangeComplete = () => setAnimateLoader(false); - Router.events.on('routeChangeStart', handleRouteChangeStart) - Router.events.on('routeChangeComplete', handleRouteChangeComplete) - Router.events.on('routeChangeError', handleRouteChangeComplete) + Router.events.on('routeChangeStart', handleRouteChangeStart); + Router.events.on('routeChangeComplete', handleRouteChangeComplete); + Router.events.on('routeChangeError', handleRouteChangeComplete); return () => { - Router.events.off('routeChangeStart', handleRouteChangeStart) - Router.events.off('routeChangeComplete', handleRouteChangeComplete) - Router.events.off('routeChangeError', handleRouteChangeComplete) - } - }, []) + Router.events.off('routeChangeStart', handleRouteChangeStart); + Router.events.off('routeChangeComplete', handleRouteChangeComplete); + Router.events.off('routeChangeError', handleRouteChangeComplete); + }; + }, []); - const [toasterStyle, setToasterStyle] = useState({}) + const [toasterStyle, setToasterStyle] = useState({}); useEffect(() => { - let elems = document.querySelectorAll('nav') - let totalNavHeight = 0 + let elems = document.querySelectorAll('nav'); + let totalNavHeight = 0; elems.forEach(function (elem) { - totalNavHeight += elem.offsetHeight - }) + totalNavHeight += elem.offsetHeight; + }); setToasterStyle({ - marginTop: isMobile ? totalNavHeight - 8 : totalNavHeight - }) - }, [isMobile]) + marginTop: isMobile ? totalNavHeight - 8 : totalNavHeight, + }); + }, [isMobile]); return ( @@ -63,7 +78,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) { animate={{ opacity: 1 }} exit={{ opacity: 0.4 }} transition={{ - duration: 0.1 + duration: 0.1, }} className='fixed w-screen h-screen z-[500] bg-white flex justify-center items-center' > @@ -76,7 +91,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) { containerStyle={toasterStyle} toastOptions={{ duration: 3000, - className: 'border border-gray_r-8' + className: 'border border-gray_r-8', }} /> @@ -90,7 +105,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) { - ) + ); } -export default MyApp +export default MyApp; -- cgit v1.2.3 From a70fd5b6d9c7a769ac1aaa22a7d037ba3be27a05 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 16 Jan 2024 16:08:43 +0700 Subject: Update improve product detail performance --- src/pages/_app.jsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) (limited to 'src/pages/_app.jsx') diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index aa545863..9067fd03 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -1,6 +1,6 @@ import '@/fonts/Inter/inter.css'; import '@/styles/globals.css'; -import 'react-loading-skeleton/dist/skeleton.css'; +// import 'react-loading-skeleton/dist/skeleton.css'; import { useEffect, useState } from 'react'; import dynamic from 'next/dynamic'; @@ -9,8 +9,6 @@ import { AnimatePresence, motion } from 'framer-motion'; import { QueryClient, QueryClientProvider } from 'react-query'; import useDevice from '@/core/hooks/useDevice'; -import { ProductProvider } from '@/contexts/ProductContext'; -import { ProductCartProvider } from '@/contexts/ProductCartContext'; import theme from '../../chakra.theme'; const NextProgress = dynamic(() => import('next-progress'), { ssr: false }); @@ -18,6 +16,17 @@ const ChakraProvider = dynamic( () => import('@chakra-ui/react').then((mod) => mod.ChakraProvider), { ssr: false } ); +const ProductProvider = dynamic( + () => import('@/contexts/ProductContext').then((mod) => mod.ProductProvider), + { ssr: false } +); +const ProductCartProvider = dynamic( + () => + import('@/contexts/ProductCartContext').then( + (mod) => mod.ProductCartProvider + ), + { ssr: false } +); const SessionProvider = dynamic( () => import('next-auth/react').then((mod) => mod.SessionProvider), { ssr: false } -- cgit v1.2.3 From 838f2c7f5790c10779cfd32944c52f75713a4a05 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Thu, 25 Jan 2024 16:05:26 +0700 Subject: Add scroll to top component --- src/pages/_app.jsx | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'src/pages/_app.jsx') diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index 9067fd03..e2190fda 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -35,6 +35,9 @@ const LogoSpinner = dynamic( () => import('@/core/components/elements/Spinner/LogoSpinner'), { ssr: false } ); +const ScrollToTop = dynamic(() => import('@/core/components/ScrollToTop'), { + ssr: false, +}); const Toaster = dynamic( () => import('react-hot-toast').then((mod) => mod.Toaster), { ssr: false } @@ -80,6 +83,8 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) { return ( + + {animateLoader && ( Date: Sat, 27 Jan 2024 11:46:36 +0700 Subject: Refactor layout --- src/pages/_app.jsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src/pages/_app.jsx') diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index e2190fda..01dec611 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -1,5 +1,6 @@ import '@/fonts/Inter/inter.css'; import '@/styles/globals.css'; +import '@/styles/normalize.css'; // import 'react-loading-skeleton/dist/skeleton.css'; import { useEffect, useState } from 'react'; -- cgit v1.2.3 From df1f989fac16e99925b4d74472f329f9cdb97787 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 5 Mar 2024 09:16:34 +0700 Subject: Add id flashsale on mobile --- src/pages/_app.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/pages/_app.jsx') diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index 01dec611..bcb41dd6 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -89,9 +89,9 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) { {animateLoader && (