product page reload fixed

src/component/home/Products.jsx

@@ -13,7 +13,7 @@ export default function Products() {
         uid: localStorage.getItem('uid') // USER UID
     }
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.product,
+        queryKey: queryKeys.products,
         queryFn: () => productsData(reqData)
     })
     const products = data?.data?.products_data // PRODUCTS DATA

src/component/product/ProductFactory.jsx

@@ -1,5 +1,4 @@
-import {useEffect} from "react";
-import { useMutation, useQuery } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 // import getImage from "../../utils/getImage";
 import ProductStart from "./ProductStart";
@@ -8,6 +7,7 @@ import {MyProductData} from "../../services/services";
 import ProductActive from "./ProductActive";
 import ProductProvision from "./ProductProvision";
 import {productConst} from "../../constants/products";
+import queryKeys from "../../services/queryKeys";
 
 export default function ProductFactory(){
     const location = useLocation();
@@ -16,30 +16,18 @@ export default function ProductFactory(){
     // Split the pathname by '/' and get the last element
     const productID = pathname.split('/').pop();
 
-    const getProductData = useMutation({
-        mutationFn: (reqData) => {
-            return MyProductData(reqData)
-        },
-        onError: (error) => {
-            console.log(error)
-        },
-        onSuccess: (res) => {
-            if(res?.data?.resultCode != '0'){
-                throw({message: 'Something went wrong'})
-            }
-        }
-    })
-
-    useEffect(()=>{
     let reqData = {
         product_id : productID,
         token: localStorage.getItem('token'), // USER TOKEN
         uid: localStorage.getItem('uid') // USER UID
     }
-    getProductData.mutate(reqData)
-    },[])
-        
-    const myproduct_data = getProductData?.data?.data?.myproduct?.myproudct // PRODUCT DETAILS
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.product_page,
+        queryFn: () => MyProductData(reqData),
+        staleTime: 0
+    })
+
+    const myproduct_data = data?.data?.myproduct?.myproudct // PRODUCT DETAILS
     const product_name =  myproduct_data?.product_name;
     const product_status  = myproduct_data?.status;
 
@@ -47,7 +35,7 @@ export default function ProductFactory(){
         <>
             <BreadcrumbComBS title={product_name} paths={['Dashboard', 'Product']} />
             <div className="row">
-                {getProductData?.isPending ?
+                {isFetching ?
                     <>
                         <div className="row">
                             <div className="col-12">
@@ -55,10 +43,10 @@ export default function ProductFactory(){
                             </div>
                         </div>
                     </>
-                    : getProductData?.error ?
+                    : isError ?
                         <div className="row">
                             <div className="col-12">
-                                <p className='text-danger'>{getProductData?.error?.message}</p>
+                                <p className='text-danger'>{error?.message}</p>
                             </div>
                         </div>
                     :

src/component/product/ProductProvision.jsx

@@ -110,9 +110,9 @@ export default function ProductProvision(props){
                             <div className="card card-statistics ">
                                 <h4 className="card-title" style={{padding:'10px'}}>Started creating your selection</h4>
                                 <img className="card-img-top" src={getImage('widget/working.jpg')}  alt="Card image cap" />
-                                <div className="card-body">
+                                {/* <div className="card-body">
                                     <div className="" dangerouslySetInnerHTML={{__html: productDescription}}/>
-                                </div>
+                                </div> */}
                             </div>
 
                         </div>

src/component/product/ProductStart.jsx

@@ -30,6 +30,7 @@ export default function ProductStart(props){
         //     // exact: true,
         // })
         queryClient.invalidateQueries({ queryKey: [...queryKeys.product_url] })
+        queryClient.invalidateQueries({ queryKey: [...queryKeys.product_page] })
     }
 
     const mutation = useMutation({

src/services/queryKeys.js

@@ -1,12 +1,13 @@
 const queryKeys = {
     user_details: ['user_details'],
     product_url: ['product_url'],
-    product: ['product-data'],
+    products: ['product-data'],
+    myproduct_provision: ['myproduct_provision'],
+    product_page: ['product_page'],
     
     dashboard: ['dashboard'],
     topBar: ['top-bar'],
     recentAction: ['recent-action'],
-    myproduct_provision: ['myproduct_provision'],
     calendar_events: ['calendar_events'],
     contacts: ['contacts']
 }