From 273f79e0e75cab92a5072819c03b38762b0cff03 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 7 Nov 2024 08:35:30 +0700 Subject: update mobile type --- .../modules/product-detail/components/Image.tsx | 116 ++++++++++----------- src-migrate/types/product.ts | 1 + 2 files changed, 59 insertions(+), 58 deletions(-) (limited to 'src-migrate') diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx index 30ca0d34..29710df8 100644 --- a/src-migrate/modules/product-detail/components/Image.tsx +++ b/src-migrate/modules/product-detail/components/Image.tsx @@ -1,22 +1,22 @@ import style from '../styles/image.module.css'; import ImageNext from 'next/image'; -import React, { useEffect, useMemo, useState } from 'react' -import { InfoIcon } from 'lucide-react' -import { Tooltip } from '@chakra-ui/react' +import React, { useEffect, useMemo, useState } from 'react'; +import { InfoIcon } from 'lucide-react'; +import { Tooltip } from '@chakra-ui/react'; -import { IProductDetail } from '~/types/product' -import ImageUI from '~/components/ui/image' +import { IProductDetail } from '~/types/product'; +import ImageUI from '~/components/ui/image'; import moment from 'moment'; - +import useDevice from '@/core/hooks/useDevice'; type Props = { - product: IProductDetail -} + product: IProductDetail; +}; const Image = ({ product }: Props) => { - const flashSale = product.flash_sale + const flashSale = product.flash_sale; const [count, setCount] = useState(flashSale?.remaining_time || 0); - + const { isDesktop, isMobile } = useDevice(); useEffect(() => { let interval: NodeJS.Timeout; @@ -34,59 +34,58 @@ const Image = ({ product }: Props) => { }; }, [flashSale?.remaining_time]); - const duration = moment.duration(count, 'seconds') - + const duration = moment.duration(count, 'seconds'); + console.log('product', product); const image = useMemo(() => { - if (product.image) return product.image + '?ratio=square' - return '/images/noimage.jpeg' - }, [product.image]) + if (isMobile && product.image_mobile) { + return product.image_mobile + '?ratio=square'; + } + }, [product.image, product.image_mobile]); return (
{/*
*/} - -
-
- {product.isSni && ( - - )} -
-
- {product.isTkdn && ( - - )} -
-
- {/*
*/} - - + +
+
+ {product.isSni && ( + + )} +
+
+ {product.isTkdn && ( + + )} +
+
+ {/*
*/}
-
+
@@ -94,7 +93,7 @@ const Image = ({ product }: Props) => { {flashSale.remaining_time > 0 && (
-
+
{
-
{Math.floor(product.lowest_price.discount_percentage)}%
+
+ {Math.floor(product.lowest_price.discount_percentage)}% +
{ {duration.seconds().toString().padStart(2, '0')}
-
)}
- ) -} + ); +}; -export default Image \ No newline at end of file +export default Image; diff --git a/src-migrate/types/product.ts b/src-migrate/types/product.ts index 31ea0ce1..e43a5ebb 100644 --- a/src-migrate/types/product.ts +++ b/src-migrate/types/product.ts @@ -3,6 +3,7 @@ import { IProductVariantDetail } from './productVariant'; export interface IProduct { id: number; image: string; + image_mobile: string; code: string; display_name: string; name: string; -- cgit v1.2.3 From 982a18543beefdd33f20c294b06b7a1a87103b2f Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 7 Nov 2024 09:16:51 +0700 Subject: update mobile image --- .../product-card/components/ProductCard.tsx | 176 +++++++++++---------- .../modules/product-detail/components/Image.tsx | 6 +- 2 files changed, 96 insertions(+), 86 deletions(-) (limited to 'src-migrate') diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx index 0febfadb..a439cdc8 100644 --- a/src-migrate/modules/product-card/components/ProductCard.tsx +++ b/src-migrate/modules/product-card/components/ProductCard.tsx @@ -1,95 +1,108 @@ -import style from '../styles/product-card.module.css' +import style from '../styles/product-card.module.css'; import ImageNext from 'next/image'; -import clsx from 'clsx' -import Link from 'next/link' -import React, { useEffect, useMemo, useState } from 'react' -import Image from '~/components/ui/image' -import useUtmSource from '~/hooks/useUtmSource' -import clsxm from '~/libs/clsxm' -import formatCurrency from '~/libs/formatCurrency' -import { formatToShortText } from '~/libs/formatNumber' -import { createSlug } from '~/libs/slug' -import { IProduct } from '~/types/product' - +import clsx from 'clsx'; +import Link from 'next/link'; +import React, { useEffect, useMemo, useState } from 'react'; +import Image from '~/components/ui/image'; +import useUtmSource from '~/hooks/useUtmSource'; +import clsxm from '~/libs/clsxm'; +import formatCurrency from '~/libs/formatCurrency'; +import { formatToShortText } from '~/libs/formatNumber'; +import { createSlug } from '~/libs/slug'; +import { IProduct } from '~/types/product'; +import useDevice from '@/core/hooks/useDevice'; type Props = { - product: IProduct - layout?: 'vertical' | 'horizontal' -} + product: IProduct; + layout?: 'vertical' | 'horizontal'; +}; const ProductCard = ({ product, layout = 'vertical' }: Props) => { - const utmSource = useUtmSource() - + const utmSource = useUtmSource(); + const { isDesktop, isMobile } = useDevice(); const URL = { - product: createSlug('/shop/product/', product.name, product.id.toString()) + `?utm_source=${utmSource}`, - manufacture: createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString()), - } + product: + createSlug('/shop/product/', product.name, product.id.toString()) + + `?utm_source=${utmSource}`, + manufacture: createSlug( + '/shop/brands/', + product.manufacture.name, + product.manufacture.id.toString() + ), + }; const image = useMemo(() => { - if (product.image) return product.image + '?ratio=square' - return '/images/noimage.jpeg' - }, [product.image]) + if (!isDesktop && product.image_mobile) { + return product.image_mobile + '?ratio=square'; + } else { + if (product.image) return product.image + '?ratio=square'; + return '/images/noimage.jpeg'; + } + }, [product.image, product.image_mobile]); return ( -
-
+
- -
- {product.name} -
-
- {product.isSni && ( - - )} -
-
- {product.isTkdn && ( - - )} +
+ {product.name} +
+
+ {product.isSni && ( + + )} +
+
+ {product.isTkdn && ( + + )} +
-
{product.variant_total > 1 && ( -
{product.variant_total} Varian
+
+ {product.variant_total} Varian +
)}
-
- +
+ {product.manufacture.name} @@ -113,17 +126,15 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
- Inc PPN: - Rp {formatCurrency(Math.round(product.lowest_price.price * 1.11))} + Inc PPN: Rp{' '} + {formatCurrency(Math.round(product.lowest_price.price * 1.11))}
{product.stock_total > 0 && ( -
- Ready Stock -
+
Ready Stock
)} {product.qty_sold > 0 && (
@@ -131,14 +142,11 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
)}
-
- ) -} - -const classPrefix = ({ layout }: Props) => { + ); +}; -} +const classPrefix = ({ layout }: Props) => {}; -export default ProductCard \ No newline at end of file +export default ProductCard; diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx index 29710df8..96ae2027 100644 --- a/src-migrate/modules/product-detail/components/Image.tsx +++ b/src-migrate/modules/product-detail/components/Image.tsx @@ -35,10 +35,12 @@ const Image = ({ product }: Props) => { }, [flashSale?.remaining_time]); const duration = moment.duration(count, 'seconds'); - console.log('product', product); const image = useMemo(() => { - if (isMobile && product.image_mobile) { + if (!isDesktop && product.image_mobile) { return product.image_mobile + '?ratio=square'; + } else { + if (product.image) return product.image + '?ratio=square'; + return '/images/noimage.jpeg'; } }, [product.image, product.image_mobile]); -- cgit v1.2.3 From 0d3c0cf6a00ef81bfdb944490e48f16af41fc029 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 13 Nov 2024 10:08:16 +0700 Subject: add radis --- src-migrate/modules/page-content/index.tsx | 33 ++++++++++++------------------ 1 file changed, 13 insertions(+), 20 deletions(-) (limited to 'src-migrate') diff --git a/src-migrate/modules/page-content/index.tsx b/src-migrate/modules/page-content/index.tsx index 3423ca8b..54ee0a04 100644 --- a/src-migrate/modules/page-content/index.tsx +++ b/src-migrate/modules/page-content/index.tsx @@ -10,28 +10,21 @@ type Props = { const PageContent = ({ path }: Props) => { const [localData, setData] = useState(); const [shouldFetch, setShouldFetch] = useState(false); + const [isLoading, setIsLoading] = useState(false); useEffect(() => { - const localData = localStorage.getItem(`page-content:${path}`); - if (localData) { - setData(JSON.parse(localData)); - }else{ - setShouldFetch(true); - } - },[]) - - const { data, isLoading } = useQuery( - `page-content:${path}`, - async () => await getPageContent({ path }), { - enabled: shouldFetch, - onSuccess: (data) => { - if (data) { - localStorage.setItem(`page-content:${path}`, JSON.stringify(data)); - setData(data); - } - }, - } - ); + const fetchData = async () => { + setIsLoading(true); + const res = await fetch(`/api/page-content?path=${path}`); + const { data } = await res.json(); + if (data) { + setData(data); + } + setIsLoading(false); + }; + + fetchData(); + }, []); const parsedContent = useMemo(() => { if (!localData) return ''; -- cgit v1.2.3