Teams Nation - ACS Teams Meeting Join Demo

TeamsNation-ACSTEamsMeetingJoinDemo

import './App.css';
import { AzureCommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';
import {
  CallAdapter,
  createAzureCommunicationCallAdapter,
  fromFlatCommunicationIdentifier,
  CallComposite
} from '@azure/communication-react';
import React, { useEffect, useMemo, useState } from 'react';
import { unstable_renderSubtreeIntoContainer } from 'react-dom';

function App(): JSX.Element {
  const endpointUrl = ''; //this is your ACS endpoint
  const displayName = 'Teams Nation Demo User';
  
  const [callAdapter, setCallAdapter] = useState<CallAdapter>();
  const [userId, setUserId] = useState("");
  const [token, setToken] = useState("");
  const [meetingLink, setMeetingLink] = useState("");

const credential = useMemo(() => {
    try {
      console.log("getting new ACS Credential with token" + token);
      return new AzureCommunicationTokenCredential(token);
    } catch {
      console.error('Failed to construct token credential');
      return undefined;
    }
}, [token]);
  
    useEffect(() => {
  
    if (credential !== undefined) {
      const createAdapter = async (credential: AzureCommunicationTokenCredential): Promise<void> => {       
        setCallAdapter(
          await createAzureCommunicationCallAdapter({
            userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,
            displayName,
            credential,
            locator: { meetingLink: meetingLink }
          })
        );
      };      
      createAdapter(credential);
    }
  }, [credential]);
  
  const startAppointment = async () : Promise<void> => {
    const appointmentData = await fetch('YOUR POWER AUTOMATE FLOW URL', {
      method: 'post'
    });
    const appointmentDataJson = await appointmentData.json();
    setMeetingLink(appointmentDataJson.joinLink);

    const getIdsAndToken = async (): Promise<void> => {
        const response = await fetch('YOUR AZ FUNCTION URL');
        const responseJson = await response.json();
        setToken(responseJson.value.item2.token);
        setUserId(responseJson.value.item1.id);
        console.log("Got id and tokens");
      };
    getIdsAndToken();

  }
  
   if (!!callAdapter) {
    return (
        <div style={{ height: '100vh', display: 'flex' }}>
    <div style={{ width: '50vw' }}>
            <CallComposite adapter={callAdapter} />
          </div>
    </div>
    )
   }
  
  if (credential === undefined) {
    return (
      <div style={{ width: '50vw' }}>
<button onClick={startAppointment}>Start Video Appointment</button>
          </div>    
    )
  }
  return <h3>Initializing...</h3>;
}


export default App;