Use React component as a modal

In the new simple react template, can I use a react component as a modal template?
like this:

client.interface.trigger("showModal", {
        title: "Sample Modal",
        template: reactComponent
 })
1 Like

Hey @Matheus_Nunes,

Yes, you can use a react component as a template, but you cannot refer the component name as a template as the template would require a .html instead you can use the instance API like shown below

in that case the template will be index.html since it’s a Single Page app, the component is rendered dynamically based on the location

For eg

App.js will be

import React, { useState, useEffect } from "react";
import "./App.css";
import HelloUser from "./components/HelloUser";
import Modal from "./components/Modal";


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 = true;
		document.head.appendChild(script);
	}, []);

	useEffect(() => {
		if (!loaded) return;
		app.initialized().then((client) => {
			client.instance.context().then(function (data) {
				let location = data.location;

				if (location === "ticket_sidebar") {
					setChild(<HelloUser client={client} />);
				}
				if (location === "modal") {
					setChild(<Modal client={client} />);
				}
			});
		});
	}, [loaded]);

	return <div>{child}</div>;
};

export default App;

Note:- the above sinppet is long, please use the scroll bar inside the snippet to view the full snippet

and your client.interface.trigger will be

client.interface.trigger("showModal", {
        title: "Sample Modal",
        template: "index.html"
 })

Let us know if you need anymore help/guidance on this.

Hope this helps!

Stay Safe :slight_smile:

5 Likes

Nice, that worked. :tada:
Thank you.

2 Likes

I had a problem using this solution, sometimes the function app.initialized() do not reach the resolve and the modal window stay showing the element used to initialize the child. This happens randomly, sometimes the modal is loaded normally.

2 Likes

Hey @Matheus_Nunes,

Could you please share a screen grab of this issue?, so we could investigate this further?

1 Like

Hi
After testing a few things I thought of a guess as to what was causing the error that I mentioned in the previous comment.
In fact the problem was not in the return of the app.initialized function, putting a log inside the function that executes the setLoaded when the fresh_client script is loaded I saw that it is not executed sometimes, disabling the cache I noticed that the problem does not occur, so I assumed the problem was that when the browser sees that the script has already been loaded in the app view in the sidebar, he doesn’t load it again and the loaded state is not updated in the sidebar view. So I removed the addition of the script in useEffect, downloaded the script into the project and included it at the beginning of the App component. So I didn’t have the problem anymore. I don’t know if my guess is correct.
I couldn’t exemplify the occurrence of the problem in screen images.
Thanks for your attention.

2 Likes