mfe-customer/src/client/jsx/react/pages/scene/components/withScene.jsx

Subscription page with Checkout

import React, { useState, useEffect, useRef } from "react";
import RequestService from "@ozoneuniverse/mfe-components/dist/components/request-manager";
import { RenderManager } from "@ozoneuniverse/mfe-components/dist/components/managers/renderManager";
import Scene from "@ozoneuniverse/mfe-components/dist/components/models/scene";
import { querys } from "../../querys";

export const withScene = (Component) => (props) => {
  const { metaverseName, metaverseSceneName } = props.computedMatch.params;
  const canvasRef = useRef(null);
  const canvas3DRef = useRef(null);
  const [renderManager, setRenderManager] = useState(null);

  const getSceneData = (data) => {
    let dataOut = {};

    for (let i = 0; i < data.length; i++) {
      dataOut[data[i].metaverseUserSceneName] = {
        config: {
          assetsScene: data[i].assets.map((element) => {
            return {
              name: element.metaverseUserSceneAssetName,
              url: element.metaverseUserSceneAssetUrl,
            };
          }),
        },
        classScene: Scene,
      };
    }

    return dataOut;
  };

  const initScene = () => {
    const variables = {
      input: {
        metaverseWorldName: metaverseName,
      },
    };
    let renderManagerData = {
      canvas: canvasRef.current,
      canvas3D: canvas3DRef.current,
      roomsConfig: [],
      defaultScene: "",
      mfeConfig: {},
      auth: false,
    };

    RequestService.queryGetGraphQL(
      querys["getScenesGuest"],
      "getScenesGuest",
      variables
    ).then(async (response) => {
      const { success, data } = response.data.getMetaverseUserVisitorScenes;
      if (success && data.length > 0) {
        renderManagerData.roomsConfig = getSceneData(data);
        renderManagerData.defaultScene = data[0].metaverseUserSceneName;
        await setRenderManager(new RenderManager(renderManagerData));
      } else {
        //nothing
      }
    });
  };

  useEffect(() => {
    initScene();
  }, []);

  useEffect(() => {
    if (renderManager) {
      renderManager.renderFirstScene({
        idScene: metaverseSceneName,
      });
    }
  }, [renderManager]);

  const actionsScene = { canvasRef, canvas3DRef };
  return <Component {...props} {...actionsScene} />;
};