fix: Fix Main Stage in React Hello World

addons-web-sdk/samples/hello-world-react-ts-vite/src/components/MainStage.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { meet } from '@googleworkspace/meet-addons/meet.addons';
+import { CLOUD_PROJECT_NUMBER } from '../constants';
+
+/**
+ * See: https://developers.google.com/meet/add-ons/guides/overview#main-stage
+ */
+function MainStage() {
+  useEffect(() => {
+    /**
+     * Prepares the Add-on Main Stage Client, which signals that the add-on has
+     * successfully launched in the main stage.
+     */
+    async function initializeMainStage() {
+      const session = await meet.addon.createAddonSession({
+        cloudProjectNumber: CLOUD_PROJECT_NUMBER,
+      });
+      await session.createSidePanelClient();
+    }
+    initializeMainStage();
+  }, []);
+
+
+  return (
+    <>
+      <div>This is the Add-on Main Stage. Everyone in the call can see this.</div>
+      <div>Hello, world!</div>
+    </>
+  )
+}
+
+export default MainStage;

addons-web-sdk/samples/hello-world-react-ts-vite/src/components/Setup.tsx → addons-web-sdk/samples/hello-world-react-ts-vite/src/components/SidePanel.tsx

@@ -2,9 +2,13 @@ import { useEffect, useState } from 'react';
 import { meet } from '@googleworkspace/meet-addons/meet.addons';
 import { CLOUD_PROJECT_NUMBER, MAIN_STAGE_URL } from '../constants';
 
-function Setup() {
+/**
+ * See: https://developers.google.com/meet/add-ons/guides/overview#side-panel
+ */
+function SidePanel() {
   const [sidePanelClient, setSidePanelClient] = useState(null);
 
+  // Launches the main stage when the main button is clicked.
   async function startCollaboration(e) {
     if (!sidePanelClient) {
       throw new Error("Side Panel is not yet initialized!");
@@ -13,6 +17,9 @@ function Setup() {
   }
 
   useEffect(() => {
+    /**
+     * Prepares the Add-on Side Panel Client.
+     */
     async function setUpAddon() {
       const session = await meet.addon.createAddonSession({
         cloudProjectNumber: CLOUD_PROJECT_NUMBER,
@@ -30,4 +37,4 @@ function Setup() {
   )
 }
 
-export default Setup;
+export default SidePanel;

addons-web-sdk/samples/hello-world-react-ts-vite/src/mainStage.tsx

@@ -1,9 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import Game from './components/Game.tsx'
+import MainStage from './components/MainStage.tsx'
 
+// Renders the MainStage as a React component.
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <Game />
+    <MainStage />
   </StrictMode>,
-)
+)

addons-web-sdk/samples/hello-world-react-ts-vite/src/sidePanel.tsx

@@ -1,9 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import Setup from './components/Setup.tsx'
+import SidePanel from './components/SidePanel.tsx'
 
+// Renders the SidePanel as a React component.
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <Setup />
+    <SidePanel />
   </StrictMode>,
-)
+)