Merged in CR/optimize_performance_2 (pull request #350)

cache localstorage

1 files changed, 25 insertions, 5 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>;