CHIEFSOFT\ameye
100 lines
4.7 KiB
React
100 lines
4.7 KiB
React
import React, {useEffect, useMemo, useRef, useState} from "react";
|
|
import { useSelector } from "react-redux";
|
|
import getImage from "../../utils/getImage";
|
|
import { useMutation, useQuery } from "@tanstack/react-query";
|
|
import { productRefreshSite, getSettingsData } from "../../services/services";
|
|
import Settings from "./settingsTab/Settings";
|
|
import queryKeys from "../../services/queryKeys";
|
|
import {SocketContextValues} from "../context/SocketIOContext";
|
|
|
|
|
|
export default function ProductActive({productData}){
|
|
const {joinRoom} = SocketContextValues() // Destructures values from socket context
|
|
const iframe = useRef()
|
|
|
|
const [refreshMsg, setRefreshMsg] = useState('')
|
|
|
|
const refresh = useMutation({
|
|
mutationFn: (fields) => {
|
|
return productRefreshSite(fields)
|
|
},
|
|
onSuccess: (res) => {
|
|
setRefreshMsg(res?.data?.message)
|
|
setTimeout(()=>{setRefreshMsg('')},3000)
|
|
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
|
|
|
|
const productSubUID = productData.subscription_uid;
|
|
useEffect(() => {
|
|
const provision_room = "PROVISION_"+productSubUID;
|
|
console.log("JOINING ROOM ON ACTIVE *** ", provision_room);
|
|
joinRoom(provision_room); // provision subscription room
|
|
}, [])
|
|
|
|
return(
|
|
<>
|
|
{/*<BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />*/}
|
|
{/*<div className="row">*/}
|
|
{/* <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
|
{/*</div>*/}
|
|
|
|
|
|
<div className="row account-contant">
|
|
<>
|
|
<div className="row tabs-contant">
|
|
<div className="col-xxl-6">
|
|
<div className="card card-statistics">
|
|
<div className="card-header">
|
|
<div className="card-heading d-flex justify-content-between">
|
|
{/*<h4 className="card-title">{externalUrl}</h4>*/}
|
|
<h4 style={{color: '#148399', fontWeight: 'bolder'}}>
|
|
<a href={externalUrl} target='_blank'>{externalUrl}</a></h4>
|
|
<button type="button" onClick={()=>iframe.current.src += ''} className="btn">
|
|
<img src={getImage('refresh.png')} style={{width: '30px', height: 'auto'}} alt='refresh page' />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="card-body" style={{minHeight: '680px'}}>
|
|
<iframe ref={iframe} style={{borderWidth: '0px'}} src={externalUrl} width="100%" height="600" title={externalUrl}></iframe>
|
|
</div>
|
|
<div className="p-4 ml-auto">
|
|
<div className="d-flex justify-end gap-3">
|
|
{refreshMsg &&
|
|
<p className="text-success text-center">{refreshMsg}</p>
|
|
}
|
|
<button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Initiating...' : 'Rebuild Site'}
|
|
</button>
|
|
</div>
|
|
</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" style={{minHeight: '680px'}}>
|
|
<Settings productData={productData} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
</div>
|
|
</>
|
|
)
|
|
} |