Breakout rooms sample app using Dyte react-ui-kit and react-web-core

BreakoutApp.tsx

/**
 * required packages
 * "@dytesdk/react-ui-kit": "^1.64.0",
 * "@dytesdk/react-web-core": "^1.35.20",
 */

import { useEffect } from 'react';
import { useDyteClient } from '@dytesdk/react-web-core';
import { DyteBreakoutRoomsToggle, DyteDialogManager, DyteGrid } from '@dytesdk/react-ui-kit';

function BreakoutApp() {
	const [meeting, initMeeting] = useDyteClient();
	const url = new URL(window.location.href);
	const queryToken = url.searchParams.get('authToken');

	if (!queryToken) {
		alert('Please add authToken to url query params');
	}

	useEffect(() => {
		const init = async () => {
			if (!queryToken) return;

			await initMeeting({
				authToken: queryToken,
				defaults: {
					video: false,
					audio: false,
				},
			}).then(async (meet) => {
				if (!meet) return;

				await meet.join();
			});
		};
		init();
	}, []);

	if (!meeting) {
		return <div>Loading...</div>;
	}

	return (
		<div>
			<h1>{meeting.meta.meetingTitle}</h1>
			<DyteDialogManager meeting={meeting} />
			<div style={{ width: '500px', height: '300px' }}>
				<DyteGrid meeting={meeting} />
			</div>
			<DyteBreakoutRoomsToggle meeting={meeting} />
		</div>
	);
}

export default BreakoutApp;