diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/_app.jsx | 99 | ||||
| -rw-r--r-- | src/pages/shop/product/[slug].jsx | 118 |
2 files changed, 62 insertions, 155 deletions
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 ( <SessionProvider session={session}> @@ -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', }} /> <NextProgress color='#F01C21' options={{ showSpinner: false }} /> @@ -90,7 +105,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) { </ProductProvider> </QueryClientProvider> </SessionProvider> - ) + ); } -export default MyApp +export default MyApp; diff --git a/src/pages/shop/product/[slug].jsx b/src/pages/shop/product/[slug].jsx index 667373b4..73e8987c 100644 --- a/src/pages/shop/product/[slug].jsx +++ b/src/pages/shop/product/[slug].jsx @@ -1,114 +1,6 @@ -import Seo from '@/core/components/Seo'; -import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'; -import { getIdFromSlug } from '@/core/utils/slug'; -import productApi from '@/lib/product/api/productApi'; -import PageNotFound from '@/pages/404'; -import dynamic from 'next/dynamic'; -import { useRouter } from 'next/router'; -import cookie from 'cookie'; -import axios from 'axios'; -import { useProductContext } from '@/contexts/ProductContext'; -import { useEffect } from 'react'; -import { updateItemCart } from '@/core/utils/cart'; +import ProductDetailPage, { + getServerSideProps, +} from '~/pages/shop/product/[slug]'; -const BasicLayout = dynamic(() => - import('@/core/components/layouts/BasicLayout') -); -const Product = dynamic(() => - import('@/lib/product/components/Product/Product') -); - -export async function getServerSideProps(context) { - const { slug } = context.query; - const cookies = context.req.headers.cookie; - const cookieObj = cookies ? cookie.parse(cookies) : {}; - const auth = cookieObj.auth ? JSON.parse(cookieObj.auth) : {}; - const tier = auth.pricelist ? auth.pricelist : false; - - let response = await axios( - `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/product-detail?id=` + - getIdFromSlug(slug) + - '&auth=' + - tier - ); - let product = response.data; - // let productSolr = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } }) - // let productSolr = null - if (product?.length == 1) { - product = product[0]; - } else { - product = null; - } - - return { - props: { product }, - }; -} - -export default function ProductDetail({ product }) { - const router = useRouter(); - const { setProduct } = useProductContext(); - - useEffect(() => { - if (product) { - setProduct(product); - } - }, [product, setProduct]); - - useEffect(() => { - const { action, variantId, qty } = router.query; - const addToCart = async () => { - const data = { - productId: variantId, - quantity: qty, - selected: true, - programLineId: null, - source: action, - }; - - await updateItemCart(data); - const redirectURL = - action === 'buy' ? '/shop/checkout?source=buy' : '/shop/cart'; - router.push(redirectURL); - }; - - if (action && variantId && qty) { - addToCart(); - } - }, [router]); - - if (!product) return <PageNotFound />; - - return ( - <BasicLayout> - <Seo - title={product?.name || '' + ' - Indoteknik.com' || ''} - description='Temukan pilihan produk B2B Industri & Alat Teknik untuk Perusahaan, UMKM & Pemerintah dengan lengkap, mudah dan transparan.' - openGraph={{ - url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath, - images: [ - { - url: product?.image, - width: 800, - height: 800, - alt: product?.name, - }, - ], - type: 'product', - }} - additionalMetaTags={[ - { - name: 'keywords', - content: `${product?.name}, Harga ${product?.name}, Beli ${product?.name}, Spesifikasi ${product?.name}`, - }, - ]} - /> - {!product && ( - <div className='container mx-auto flex justify-center pt-10'> - <LogoSpinner width={36} height={36} /> - </div> - )} - {product && <Product product={product} />} - </BasicLayout> - ); -} +export { getServerSideProps }; +export default ProductDetailPage; |