fixed iframe bug

src/component/product/ProductActive.jsx

@@ -1,19 +1,44 @@
-import React from "react";
+import React, { useRef } from "react";
 import getImage from "../../utils/getImage";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import GeneralTab from "./settingsTab/GeneralTab";
+import { useMutation } from "@tanstack/react-query";
+import { productRefreshSite } from "../../services/services";
 
 
 export default function ProductActive({productData}){
-       const settingsObject = {
+    const iframe = useRef()
-            home_tab: { title: 'Home Page', controls: 'home', active: 'active show' , data: {}},
+
-            footer_tab: { title: 'Footer', controls: 'footer', active: '', data: {} },
+    const settingsObject = {
-            about_tab: { title: 'About Page', controls: 'about', active: '', data: {} },
+        home_tab: { title: 'Home Page', controls: 'home', active: 'active show' , data: {}},
-            contact_tab: { title: 'Contact Page', controls: 'contact', active: '', data: {} },
+        footer_tab: { title: 'Footer', controls: 'footer', active: '', data: {} },
-            social_tab: { title: 'Socials', controls: 'social', active: '', data: {} },
+        about_tab: { title: 'About Page', controls: 'about', active: '', data: {} },
-            template_tab: { title: 'Template', controls: 'template', active: '', data: {} },
+        contact_tab: { title: 'Contact Page', controls: 'contact', active: '', data: {} },
-            color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', data: {} },
+        social_tab: { title: 'Socials', controls: 'social', active: '', data: {} },
-            };
+        template_tab: { title: 'Template', controls: 'template', active: '', data: {} },
+        color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', data: {} },
+    };
+
+    const refresh = useMutation({
+        mutationFn: (fields) => {
+            return productRefreshSite(fields)
+        },
+        onSuccess: (res) => {
+            iframe.current.src += ''
+        }
+    })
+
+    const handleRefresh = () => {
+        const reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid'), // USER UID
+            product_id: productData.product_id,
+            subscription_uid: productData.subscription_uid
+
+        }
+        refresh.mutate(reqData)
+    }
+    let externalUrl= 'https://'+productData?.internal_url
 
     return(
         <>
@@ -24,74 +49,66 @@ export default function ProductActive({productData}){
 
 
             <div className="row account-contant">
-<>
+                <>
-
+                    <div className="row tabs-contant">
-
+                        <div className="col-xxl-6">
-    <div className="row tabs-contant">
+                            <div className="card card-statistics">
-        <div className="col-xxl-6">
+                                <div className="card-header">
-            <div className="card card-statistics">
+                                    <div className="card-heading d-flex justify-content-between">
-                <div className="card-header">
+                                        <h4 className="card-title">{externalUrl}</h4>
-                    <div className="card-heading">
+                                        <button type="button" onClick={()=>iframe.current.src += ''} className="btn btn-primary">IC</button>
-                        <h4 className="card-title">{productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'}</h4>
-                    </div>
-                </div>
-                <div className="card-body">
-                    <iframe style={{borderWidth: '0px;'}} src={productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'} width="100%" height="600" title={productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'}></iframe>
-
-                </div>
-            </div>
-        </div>
-        <div className="col-xxl-6">
-            <div className="card card-statistics">
-                <div className="card-header">
-                    <div className="card-heading">
-                        <h4 className="card-title"> Site Settings </h4>
-                    </div>
-                </div>
-                <div className="card-body">
-                    <div className="tab tab-vertical">
-                        <ul className="nav nav-tabs" role="tablist">
-                            <>
-                                {Object.entries(settingsObject).map(([key, value]) => (
-                                    <li className="nav-item">
-                                      <a className={`nav-link ${value.active}`}
-                                         id={key} data-bs-toggle="pill"
-                                         data-bs-target={`#${value.controls}`}
-                                         type="button" role="tab"
-                                         aria-controls={value.controls}
-                                         aria-selected="true">{value.title}</a>
-                                    </li>
-                                ))}
-                             </>
-                        </ul>
-                        <div className="tab-content">
-                            <>
-                                {Object.entries(settingsObject).map(([key, value]) => (
-                                    <div className={`tab-pane fade  ${value.active}`}
-                                         id={value.controls} role="tabpanel"
-                                         aria-labelledby={key}>
-                                         <GeneralTab name={value.title} data={value.data} />
                                     </div>
-                                ))}
+                                </div>
-                            </>
+                                <div className="card-body">
+                                    <iframe ref={iframe} style={{borderWidth: '0px;'}} src={externalUrl} width="100%" height="600" title={productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'}></iframe>
+                                </div>
+                                <div className="p-4 ml-auto">
+                                    <button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Loading...' : 'Refresh Site'}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-xxl-6">
+                            <div className="card card-statistics">
+                                <div className="card-header">
+                                    <div className="card-heading">
+                                        <h4 className="card-title"> Site Settings </h4>
+                                    </div>
+                                </div>
+                                <div className="card-body">
+                                    <div className="tab tab-vertical">
+                                        <ul className="nav nav-tabs" role="tablist">
+                                            <>
+                                                {Object.entries(settingsObject).map(([key, value]) => (
+                                                    <li className="nav-item">
+                                                    <a className={`nav-link ${value.active}`}
+                                                        id={key} data-bs-toggle="pill"
+                                                        data-bs-target={`#${value.controls}`}
+                                                        type="button" role="tab"
+                                                        aria-controls={value.controls}
+                                                        aria-selected="true">{value.title}</a>
+                                                    </li>
+                                                ))}
+                                            </>
+                                        </ul>
+                                        <div className="tab-content">
+                                            <>
+                                                {Object.entries(settingsObject).map(([key, value]) => (
+                                                    <div className={`tab-pane fade  ${value.active}`}
+                                                        id={value.controls} role="tabpanel"
+                                                        aria-labelledby={key}>
+                                                        <GeneralTab name={value.title} data={value.data} />
+                                                    </div>
+                                                ))}
+                                            </>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
+                </>
             </div>
-        </div>
-    </div>
-
-
-
-
-</>
-
-
-
-
-
-            </div>
-
         </>
     )
 }

src/services/services.js

@@ -115,6 +115,14 @@ export const productsData = (reqData) => {
     return postAuxEnd(`/panel/account/products`, postData, false)
 }
 
+// FUNCTION TO REFRESH SITE
+export const productRefreshSite = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/products/refresh`, postData, false)
+}
+
 // FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
 export const recentActions = (reqData) => {
     let postData = {