Full Page React App Not Rendering Consistently

[Rolen_Le]

Continuing the discussion from App is loading no content display:

Hi! I am currently seeing intermittent loads where the child component will not set on a refresh for a full page react app on Freshdesk similar to the issue above. Is there a way to make the app load consistently.

Here is my manifest.

{
  "platform-version": "2.2",
  "product": {
    "freshdesk": {
      "location": {
        "ticket_sidebar": {
          "url": "index.html",
          "icon": "icon.svg"
        },
        "full_page_app": {
          "url": "index.html",
          "icon": "icon.svg"
        }
      }
    }
  },
  "whitelisted-domains": [],
  "engines": {
    "node": "14.21.2",
    "fdk": "8.6.7"
  }
}

and the App.js.

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

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

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;
				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;

see full code here.

[NyDominik (Dominik Nyerges)]

Hi!

I did this workaround:

import React, { useState, useEffect } from 'react';
import './App.css';
import Child from './components';
import { Grid } from '@mui/material';
import { CircularProgress } from '@mui/material';

const App = () => {
  const [loaded, setLoaded] = useState(false);
  const [child, setChild] = useState(<Grid container className='loadingContainer'> <CircularProgress  className='loading'/> </Grid>);
  const [appClientState, setClient] = useState(null);

  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);

    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap';
    document.head.appendChild(link);
  }, []);


  useEffect(() => {
    if (!loaded) return

    let myInterval = setInterval(() => {
      if(appClientState == null)
        window.location.reload();
    }, 1000);

    async function getAppClient() {
      let appClient = await app.initialized().then((client) =>{
        setClient(appClient);
        if(client != null){
          getIpParamas(client).then(iparams =>{
            let props = {
              iparams: iparams,
              client: client
            };
            setChild((<Child props={props}/>));
          })
          
          clearInterval(myInterval);
          return client;
        }
      })
      appClient = await appClient;
    }

    getAppClient();
  }, [loaded])

  const getIpParamas = async (client) => {
    let iparamResult = await client.iparams.get().then (
      function(data) {
        return data;
      },
      function(error) {
        client.interface.trigger("showNotify", {
          type: "danger",
          message: "Failed to get ipparamas restart application "+error
        });
      }
    );

    return iparamResult;
  }

  return (
      child
  )
}

export default App;

[vangakirankumarreddy]

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.

[Rolen_Le]

Thank you that seems to solve it.