that is a good question, you can use the instance method in combination with the interface method to achieve this, here is an example
HelloUser.js
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import reactLogo from '../assets/logo.svg';
import icon from '../assets/icon.svg'
const HelloUser = ({client}) => {
const [name, setName] = useState('')
client.data.get('contact').then((data) => {
setName(data.contact.name)
})
const OpenModalOne = () => {
client.interface.trigger("showModal", {
title: "Information Form",
template: "index.html",
data: {modalID: 'ModalOne'}
});
}
const OpenModalTwo = () => {
client.interface.trigger("showModal", {
title: "Information Form",
template: "index.html",
data: {modalID: 'ModalTwo'}
});
}
return (
<div>
<img src={icon} className="App-logo" alt="logo" />
<img src={reactLogo} className="App-logo" alt="logo" />
<h3>Hi {name},</h3>
<button onClick={OpenModalOne}>Open Modal One</button>
<button onClick={OpenModalTwo}>Open Modal Two</button>
</div>
)
}
HelloUser.propTypes = {
client: PropTypes.object
}
export default HelloUser
App.js
import React, { useState, useEffect } from 'react';
import './App.css';
import HelloUser from './components/HelloUser';
import ModalOne from './components/ModalOne';
import ModalTwo from './components/ModalTwo';
const App = () => {
const [loaded, setLoaded] = useState(false);
const [child, setChild] = useState(<h3>App is loading</h3>)
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://static.freshdev.io/fdk/2.0/assets/fresh_client.js';
script.addEventListener('load', () => setLoaded(true));
script.defer = false;
document.head.appendChild(script);
}, []);
useEffect(() => {
if (!loaded) return
app.initialized().then((client) => {
client.instance.context().then(function (data) {
let location = data.location;
let InstanceData = data.data
let ModalID = '';
if (InstanceData && InstanceData.hasOwnProperty('modalID')){
ModalID = InstanceData.modalID
}
if (location === "ticket_sidebar") {
setChild(<HelloUser client={client} />);
}
if (location === "modal" && ModalID === 'ModalOne') {
setChild(<ModalOne client={client} />);
}
if (location === "modal" && ModalID === 'ModalTwo') {
setChild(<ModalTwo client={client} />);
}
});
});
}, [loaded])
return (
<div>
{child}
</div>
)
}
export default App;
Output
I’ve also attached the app from the above screenshot as a zip file for your reference,
new-react.zip (179.9 KB)
Hope this helps!