product API refetched on modal close

src/component/product/ProductStart.jsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";
 import getImage from "../../utils/getImage";
-import { Modal } from "bootstrap";
+// import { Modal } from "bootstrap";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { subscribe } from '../../services/services'
 import queryKeys from "../../services/queryKeys";
@@ -20,12 +20,12 @@ export default function ProductStart(props){
     const product_status  = props.productData?.status;
     const modalRef = useRef()
 
-    const hideModal = () => {
-        // modalRef.current.hide()
-
-        // document.body.classList.remove('modal-open')
-        // const modal = new Modal(document.querySelector('.modal'))
-        // modal.hide()
+    const refetch = () => {
+        queryClient.refetchQueries({
+            queryKey: [...queryKeys.product],
+            // type: 'active',
+            // exact: true,
+        })
     }
 
     const mutation = useMutation({
@@ -38,11 +38,6 @@ export default function ProductStart(props){
         },
           onSuccess: (res) => {
             setRequestStatus({status:true, message:'successful'})
-            // queryClient.refetchQueries({
-            //     queryKey: [...queryKeys.product],
-            //     // type: 'active',
-            //     // exact: true,
-            // })
             console.log(res)
         },
         onSettled: () => {
@@ -115,7 +110,7 @@ export default function ProductStart(props){
                     <div className="modal-content">
                         <div className="modal-header">
                             <h5 className="modal-title" id="verticalCenterTitle">{productTitle}</h5>
-                            <button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
+                            <button onClick={refetch} type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
                                 <span aria-hidden="true">&times;</span>
                             </button>
                         </div>
@@ -151,7 +146,7 @@ export default function ProductStart(props){
                             )}
                         </div>
                         <div className="modal-footer">
-                            <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
+                            <button onClick={refetch} type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
                             <button type="button" className="btn btn-success" disabled={mutation.isSuccess} onClick={handleSubscribe}>{mutation.isPending ? 'loading...' : 'Start'}</button>
                         </div>
                     </div>