Full Page React App Not Rendering Consistently

App Platform
, , , ,
4

Hi Dominik Nyerges,

Referred solution: React App not initializing in Safari

Give it a try with your previous code, try to use useLayoutEffect, and capture fresh_client.

import React, { useState, useEffect, useLayoutEffect } from 'react';
import './App.css';
const HelloUser = (props) => {
  const [name, setName] = useState('')

  props.client.data.get('contact').then((data) => {
    setName(data.contact.name)
  })


  return (
    <div>
      {/* <img src={icon} className="App-logo" alt="logo" /> */}
      {/* <img src={reactLogo} className="App-logo" alt="logo" /> */}
      <h3>Hi {name},</h3>
      <p>Welcome to your first react app in Freshdesk</p>
    </div>
  )
}


const Fullpage = () => {
  return(
    <div>Full Page App</div>
  )
}

const App = () => {

  const [loaded, setLoaded] = useState(false);
  const [child, setChild] = useState(<h3>App is loading</h3>)

  useLayoutEffect(() => {
    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;
				console.log("location", location)

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

  return (
    <div>
      {child}
    </div>
  )
}

export default App;

I was able to render the Fullpage component.

1 Like