summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src-migrate/modules/page-content/index.tsx30
-rw-r--r--src/lib/home/components/BannerSection.jsx34
-rw-r--r--src/lib/home/components/PromotionProgram.jsx39
-rw-r--r--src/lib/review/components/CustomerReviews.jsx25
4 files changed, 108 insertions, 20 deletions
diff --git a/src-migrate/modules/page-content/index.tsx b/src-migrate/modules/page-content/index.tsx
index edecb855..3423ca8b 100644
--- a/src-migrate/modules/page-content/index.tsx
+++ b/src-migrate/modules/page-content/index.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { useQuery } from 'react-query';
import { PageContentProps } from '~/types/pageContent';
import { getPageContent } from '~/services/pageContent';
@@ -8,18 +8,38 @@ type Props = {
};
const PageContent = ({ path }: Props) => {
+ const [localData, setData] = useState<PageContentProps>();
+ const [shouldFetch, setShouldFetch] = useState(false);
+
+ useEffect(() => {
+ const localData = localStorage.getItem(`page-content:${path}`);
+ if (localData) {
+ setData(JSON.parse(localData));
+ }else{
+ setShouldFetch(true);
+ }
+ },[])
+
const { data, isLoading } = useQuery<PageContentProps>(
`page-content:${path}`,
- async () => await getPageContent({ path })
+ async () => await getPageContent({ path }), {
+ enabled: shouldFetch,
+ onSuccess: (data) => {
+ if (data) {
+ localStorage.setItem(`page-content:${path}`, JSON.stringify(data));
+ setData(data);
+ }
+ },
+ }
);
const parsedContent = useMemo<string>(() => {
- if (!data) return '';
- return data.content.replaceAll(
+ if (!localData) return '';
+ return localData.content.replaceAll(
'src="/web/image',
`src="${process.env.NEXT_PUBLIC_ODOO_API_HOST}/web/image`
);
- }, [data]);
+ }, [localData]);
if (isLoading) return <PageContentSkeleton />;
return <div dangerouslySetInnerHTML={{ __html: parsedContent || '' }}></div>;
diff --git a/src/lib/home/components/BannerSection.jsx b/src/lib/home/components/BannerSection.jsx
index f83c36fc..60d38f8f 100644
--- a/src/lib/home/components/BannerSection.jsx
+++ b/src/lib/home/components/BannerSection.jsx
@@ -1,18 +1,42 @@
import Link from '@/core/components/elements/Link/Link';
import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import { bannerApi } from '../../../api/bannerApi';
const { useQuery } = require('react-query');
const { default: bannerSectionApi } = require('../api/bannerSectionApi');
const BannerSection = () => {
- const fetchBannerSection = async () => await bannerSectionApi();
- const bannerSection = useQuery('bannerSection', fetchBannerSection);
+ const [data, setData] = useState(null);
+ const [shouldFetch, setShouldFetch] = useState(false);
+
+ useEffect(() => {
+ const localData = localStorage.getItem('Homepage_bannerSection');
+ if (localData) {
+ setData(JSON.parse(localData));
+ }else{
+ setShouldFetch(true);
+ }
+ }, []);
+
+ // const fetchBannerSection = async () => await bannerSectionApi();
+ const getBannerSection = useQuery('bannerSection', bannerApi({ type: 'home-banner' }), {
+ enabled: shouldFetch,
+ onSuccess: (data) => {
+ if (data) {
+ localStorage.setItem('Homepage_bannerSection', JSON.stringify(data));
+ setData(data);
+ }
+ },
+ });
+
+ const bannerSection = data;
return (
- bannerSection.data &&
- bannerSection.data?.length > 0 && (
+ bannerSection &&
+ bannerSection?.length > 0 && (
<div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
- {bannerSection.data?.map((banner) => (
+ {bannerSection?.map((banner) => (
<Link key={banner.id} href={banner.url}>
<Image
width={1024}
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index ae06bd4d..7433e7f0 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -4,15 +4,38 @@ import { bannerApi } from '@/api/bannerApi';
import useDevice from '@/core/hooks/useDevice';
import { Swiper, SwiperSlide } from 'swiper/react';
import BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton';
+import { useEffect, useState } from 'react';
const { useQuery } = require('react-query');
const BannerSection = () => {
- const promotionProgram = useQuery(
+ const { isMobile, isDesktop } = useDevice();
+ const [data, setData] = useState(null);
+ const [shouldFetch, setShouldFetch] = useState(false);
+
+ useEffect(() => {
+ const localData = localStorage.getItem('Homepage_promotionProgram');
+ if (localData) {
+ setData(JSON.parse(localData));
+ }else{
+ setShouldFetch(true);
+ }
+ },[])
+
+ const getPromotionProgram = useQuery(
'promotionProgram',
- bannerApi({ type: 'banner-promotion' })
+ bannerApi({ type: 'banner-promotion' }),{
+ enabled: shouldFetch,
+ onSuccess: (data) => {
+ if (data) {
+ localStorage.setItem('Homepage_promotionProgram', JSON.stringify(data));
+ setData(data);
+ }
+ }
+ }
);
- const { isMobile, isDesktop } = useDevice();
- if (promotionProgram.isLoading) {
+ const promotionProgram = data
+
+ if (getPromotionProgram?.isLoading && !data) {
return <BannerPromoSkeleton />;
}
@@ -40,10 +63,10 @@ const BannerSection = () => {
)}
</div>
{isDesktop &&
- promotionProgram.data &&
- promotionProgram.data?.length > 0 && (
+ promotionProgram &&
+ promotionProgram?.length > 0 && (
<div className='grid grid-cols-3 sm:grid-cols-3 gap-4 rounded-md'>
- {promotionProgram.data?.map((banner) => (
+ {promotionProgram?.map((banner) => (
<Link key={banner.id} href={banner.url}>
<Image
width={439}
@@ -60,7 +83,7 @@ const BannerSection = () => {
{isMobile && (
<Swiper slidesPerView={1.1} spaceBetween={8} freeMode>
- {promotionProgram.data?.map((banner) => (
+ {promotionProgram?.map((banner) => (
<SwiperSlide key={banner.id}>
<Link key={banner.id} href={banner.url}>
<Image
diff --git a/src/lib/review/components/CustomerReviews.jsx b/src/lib/review/components/CustomerReviews.jsx
index a6e697f0..6ca0fa7b 100644
--- a/src/lib/review/components/CustomerReviews.jsx
+++ b/src/lib/review/components/CustomerReviews.jsx
@@ -3,16 +3,37 @@ import MobileView from '@/core/components/views/MobileView';
import Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper';
+import { useEffect, useState } from 'react';
const { useQuery } = require('react-query');
const { getCustomerReviews } = require('../api/customerReviewsApi');
const CustomerReviews = () => {
- const { data: customerReviews } = useQuery(
+ const [data, setData] = useState(null);
+
+ useEffect(() => {
+ const localData = localStorage.getItem('Homepage_customerReviews');
+ if (localData) {
+ setData(JSON.parse(localData));
+ }
+ },[])
+
+
+ const { data: fetchCustomerReviews } = useQuery(
'customerReviews',
- getCustomerReviews
+ getCustomerReviews,{
+ enabled: !data,
+ onSuccess: (data) => {
+ if (data) {
+ localStorage.setItem('Homepage_customerReviews', JSON.stringify(data));
+ setData(data);
+ }
+ }
+ }
);
+ const customerReviews = data
+
return (
<div className='px-4 sm:px-0'>
<h1 className='font-semibold text-[14px] sm:text-h-lg mb-4'>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 04:01:25 +0000