bigbluebutton / bigbluebutton-html-plugin-sdk

BigBlueButton Plugin SDK
GNU Lesser General Public License v3.0
7 stars 6 forks source link

[useCurrentUser] data never arrives for a postponed usage #119

Open TiagoJacobs opened 3 weeks ago

TiagoJacobs commented 3 weeks ago

Let's say we have two components, mounted at same time:


function SecondComponent (props:PluginProps):React.ReactElement<PluginProps> {
  const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(props.pluginUuid);
  const currentUser = pluginApi.useCurrentUser();

  useEffect ( () => {
    console.log("User data in second component: ", JSON.stringify(currentUser?.data));
  }, [
    JSON.stringify(currentUser?.data)
  ]);

  return <></>;
}

export default function MainPluginComponent (props:PluginProps):React.ReactElement<PluginProps> {
  BbbPluginSdk.initialize(props.pluginUuid);
  const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(props.pluginUuid);
  const currentUser = pluginApi.useCurrentUser();

  console.log("User data in first component: ", JSON.stringify(currentUser?.data));

  return <>
    <SecondComponent {...props} />
  </>;

Everything works great: image


However, if the second component is mounted afterwards, like in below code:

function SecondComponent (props:PluginProps):React.ReactElement<PluginProps> {
  const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(props.pluginUuid);
  const currentUser = pluginApi.useCurrentUser();

  useEffect ( () => {
    console.log("User data in second component: ", JSON.stringify(currentUser?.data));
  }, [
    JSON.stringify(currentUser?.data)
  ]);

  return <></>;
}

export default function MainPluginComponent (props:PluginProps):React.ReactElement<PluginProps> {
  BbbPluginSdk.initialize(props.pluginUuid);
  const pluginApi: PluginApi = BbbPluginSdk.getPluginApi(props.pluginUuid);
  const currentUser = pluginApi.useCurrentUser();
  const [displaySecondComponent, setDisplaySecondComponent] = useState(false);
  useEffect( () => {
    setTimeout( () => {
      setDisplaySecondComponent(true);
    }, 2000);
  }, []);

  useEffect ( () => {
    console.log("User data in first component: ", JSON.stringify(currentUser?.data));
  }, [
    JSON.stringify(currentUser?.data)
  ]);

  return <>
  { 
    displaySecondComponent ? 
    <SecondComponent {...props} />
    :null 
  }
  </>;
}

Data never arrives into the second component: image