From 95f49f1de12ae612957b60ed53cf5993b9b7ef1e Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 19 Feb 2024 16:07:25 +0700 Subject: Add promotion program smooth animation --- src-migrate/modules/product-promo/components/Section.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src-migrate/modules/product-promo/components/Section.tsx') diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx index b6753be7..694a3705 100644 --- a/src-migrate/modules/product-promo/components/Section.tsx +++ b/src-migrate/modules/product-promo/components/Section.tsx @@ -25,7 +25,9 @@ const ProductPromoSection = ({ productId }: Props) => { const { openModal } = useModalStore() return ( -
+
0, + })}> {promotions?.data && promotions?.data.length > 0 && ( -- cgit v1.2.3 From ee8d9403a516b7271581d656e58156e43a1b3d20 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 20 Feb 2024 09:24:34 +0700 Subject: Update promotion program line for smoother animation --- .../modules/product-promo/components/Section.tsx | 26 +++++++++++----------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'src-migrate/modules/product-promo/components/Section.tsx') diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx index 694a3705..5000e737 100644 --- a/src-migrate/modules/product-promo/components/Section.tsx +++ b/src-migrate/modules/product-promo/components/Section.tsx @@ -1,32 +1,32 @@ import style from "../styles/section.module.css" -import React from 'react' -import { useQuery } from 'react-query' import { Button, Skeleton } from '@chakra-ui/react' +import { useQuery } from 'react-query' -import ProductPromoCard from './Card' +import clsxm from "~/libs/clsxm" import { IPromotion } from '~/types/promotion' -import ProductPromoModal from "./Modal" import { useModalStore } from "../stores/useModalStore" -import clsxm from "~/libs/clsxm" +import ProductPromoCard from './Card' +import ProductPromoModal from "./Modal" type Props = { - productId: number + productId: number; + height: number; } -const ProductPromoSection = ({ productId }: Props) => { - const promotionsQuery = useQuery( - `promotions-highlight:${productId}`, - async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] }, - ) +const ProductPromoSection = ({ productId, height = 435 }: Props) => { + const promotionsQuery = useQuery({ + queryKey: [`promotions.highlight`, productId], + queryFn: async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] } + }) const promotions = promotionsQuery.data const { openModal } = useModalStore() return ( -
0, +
0, })}> -- cgit v1.2.3 From 8c8eea40f47bb0b669060a56ff0fa80648e3e3c4 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 20 Feb 2024 09:26:56 +0700 Subject: Update promotion program line for smoother animation --- src-migrate/modules/product-promo/components/Section.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src-migrate/modules/product-promo/components/Section.tsx') diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx index 5000e737..ba305724 100644 --- a/src-migrate/modules/product-promo/components/Section.tsx +++ b/src-migrate/modules/product-promo/components/Section.tsx @@ -17,7 +17,8 @@ type Props = { const ProductPromoSection = ({ productId, height = 435 }: Props) => { const promotionsQuery = useQuery({ queryKey: [`promotions.highlight`, productId], - queryFn: async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] } + queryFn: async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] }, + keepPreviousData: true }) const promotions = promotionsQuery.data -- cgit v1.2.3 From 49099ca1da44cc7097e50d88f8dc43913755aee4 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 20 Feb 2024 09:36:36 +0700 Subject: Update promotion program line unused keep prev data --- src-migrate/modules/product-promo/components/Section.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src-migrate/modules/product-promo/components/Section.tsx') diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx index ba305724..5000e737 100644 --- a/src-migrate/modules/product-promo/components/Section.tsx +++ b/src-migrate/modules/product-promo/components/Section.tsx @@ -17,8 +17,7 @@ type Props = { const ProductPromoSection = ({ productId, height = 435 }: Props) => { const promotionsQuery = useQuery({ queryKey: [`promotions.highlight`, productId], - queryFn: async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] }, - keepPreviousData: true + queryFn: async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] } }) const promotions = promotionsQuery.data -- cgit v1.2.3 From b41fcd98852b01bdaf1459fa0491b53f4fdf8b91 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 20 Feb 2024 09:47:15 +0700 Subject: Update promotion program line --- src-migrate/modules/product-promo/components/Section.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'src-migrate/modules/product-promo/components/Section.tsx') diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx index 5000e737..07a5df7b 100644 --- a/src-migrate/modules/product-promo/components/Section.tsx +++ b/src-migrate/modules/product-promo/components/Section.tsx @@ -11,10 +11,9 @@ import ProductPromoModal from "./Modal" type Props = { productId: number; - height: number; } -const ProductPromoSection = ({ productId, height = 435 }: Props) => { +const ProductPromoSection = ({ productId }: Props) => { const promotionsQuery = useQuery({ queryKey: [`promotions.highlight`, productId], queryFn: async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] } @@ -26,7 +25,7 @@ const ProductPromoSection = ({ productId, height = 435 }: Props) => { return (
0, + 'h-[450px] opacity-100': promotions?.data && promotions?.data.length > 0, })}> -- cgit v1.2.3 From bb1451372cd847def47fcaed6669a72c664f68e3 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 20 Feb 2024 13:53:53 +0700 Subject: Create and implement smooth render --- src-migrate/modules/product-promo/components/Section.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'src-migrate/modules/product-promo/components/Section.tsx') diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx index 07a5df7b..b3c6e671 100644 --- a/src-migrate/modules/product-promo/components/Section.tsx +++ b/src-migrate/modules/product-promo/components/Section.tsx @@ -3,6 +3,7 @@ import style from "../styles/section.module.css" import { Button, Skeleton } from '@chakra-ui/react' import { useQuery } from 'react-query' +import SmoothRender from "~/components/ui/smooth-render" import clsxm from "~/libs/clsxm" import { IPromotion } from '~/types/promotion' import { useModalStore } from "../stores/useModalStore" @@ -24,9 +25,11 @@ const ProductPromoSection = ({ productId }: Props) => { const { openModal } = useModalStore() return ( -
0, - })}> + 0) || false} + height={450} + duration={700} + > {promotions?.data && promotions?.data.length > 0 && ( @@ -51,7 +54,7 @@ const ProductPromoSection = ({ productId }: Props) => {
))} -
+ ) } -- cgit v1.2.3 From 5d3807a89596958a1e23e02ae11f73a2474c3432 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 20 Feb 2024 22:27:06 +0700 Subject: Update smooth render function --- src-migrate/modules/product-promo/components/Section.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules/product-promo/components/Section.tsx') diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx index b3c6e671..5fc0da4c 100644 --- a/src-migrate/modules/product-promo/components/Section.tsx +++ b/src-migrate/modules/product-promo/components/Section.tsx @@ -27,8 +27,8 @@ const ProductPromoSection = ({ productId }: Props) => { return ( 0) || false} - height={450} - duration={700} + height='450px' + duration='700ms' > -- cgit v1.2.3 From e3e3fe8d87130fcd1872046de0160272b6ea9763 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 14 Jun 2024 15:15:30 +0700 Subject: update promotion-program --- src-migrate/modules/product-promo/components/Section.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src-migrate/modules/product-promo/components/Section.tsx') diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx index 5fc0da4c..4e8a7dd5 100644 --- a/src-migrate/modules/product-promo/components/Section.tsx +++ b/src-migrate/modules/product-promo/components/Section.tsx @@ -50,7 +50,7 @@ const ProductPromoSection = ({ productId }: Props) => { > {promotions?.data.map((promotion) => (
- +
))} -- cgit v1.2.3