React PowerBI Embed Component

EmbedComponent.tsx

// Required Packages:
// npm install --save powerbi-client powerbi-client-react

import React, {useEffect, useState} from 'react'
import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from "powerbi-client";

declare const BackendAPI: any;

type EmbedConfigResponse = {
  reportId: string;
  embedUrl: string;
  accessToken: string;
} | null;

type Props = {}

export default function EmbedComponent({}: Props) {
	const [embedConfig, setEmbedConfig] = useState<any>();

    useEffect(() => {
      // Get embed config from a backend api
      const backendAPI = new BackendAPI();
      backendAPI
        .getEmbed()
        .then((res: EmbedConfigResponse) => {
          if (res) {
            setEmbedConfig({reportId: res.reportId, embedUrl: res.embedUrl, accessToken: res.accessToken});
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }, [])

    const getReportConfig = ({ reportId, embedUrl, accessToken }) => {
      return {
        type: "report", // Supported types: report, dashboard, tile, visual and qna
        id: reportId,
        embedUrl,
        accessToken: accessToken,
        tokenType: models.TokenType.Embed,
        settings: {
          panes: {
            filters: {
              expanded: false,
              visible: false,
            },
          },
          background: models.BackgroundType.Transparent,
        },
      };
    };
  return (<>
    {embedConfig ? (<PowerBIEmbed embedConfig={getReportConfig(embedConfig)}/>) : "Loading..."}
  </>)
}