feat: Integrate webex user (#2)

* log webex user

* fix

* update username

* fix eslint

src/App.tsx

@@ -30,6 +30,7 @@ const ExcalidrawWrapper = () => {
   }>({ promise: null! });
 
   const [loaded, setLoaded] = useState(false);
+  const [user, setUser] = useState({});
 
   if (!initialStatePromiseRef.current.promise) {
     initialStatePromiseRef.current.promise =
@@ -38,11 +39,11 @@ const ExcalidrawWrapper = () => {
 
   useEffect(() => {
     loadScript(WEBEX_URL).then(() => {
-      window.webexInstance = new window.Webex.Application();
-
+      initializeWebex();
       setLoaded(true);
     });
   }, []);
+
   useEffect(() => {
     if (!collabAPI || !excalidrawAPI) {
       return;
@@ -53,6 +54,21 @@ const ExcalidrawWrapper = () => {
     });
   }, [collabAPI, excalidrawAPI]);
 
+  const initializeWebex = () => {
+    window.webexInstance = new window.Webex.Application();
+    const webexApp = window.webexInstance;
+    webexApp.onReady().then(() => {
+      webexApp.context
+        .getUser()
+        .then((user: { displayName: string }) => {
+          setUser(user);
+        })
+        .catch((error: Error) => {
+          console.error(error.message);
+        });
+    });
+  };
+
   const initializeScene = async (opts: {
     collabAPI: CollabAPI;
   }): Promise<ImportedDataState | null> => {
@@ -83,7 +99,9 @@ const ExcalidrawWrapper = () => {
         initialData={initialStatePromiseRef.current.promise}
         onPointerUpdate={collabAPI?.onPointerUpdate}
       />
-      {excalidrawAPI && <CollabWrapper excalidrawAPI={excalidrawAPI} />}
+      {excalidrawAPI && (
+        <CollabWrapper excalidrawAPI={excalidrawAPI} user={user} />
+      )}
     </div>
   );
 };

src/collab/CollabWrapper.tsx

@@ -36,14 +36,12 @@ interface CollabState {
   modalIsShown: boolean;
   activeRoomLink: string;
   errorMessage: string;
-  username: string;
 }
 
 type CollabInstance = InstanceType<typeof CollabWrapper>;
 
 export interface CollabAPI {
   isCollaborating: () => boolean;
-  username: CollabState["username"];
   initializeSocketClient: CollabInstance["initializeSocketClient"];
   onCollabButtonClick: CollabInstance["onCollabButtonClick"];
   broadcastElements: CollabInstance["broadcastElements"];
@@ -60,6 +58,9 @@ type Mutable<T> = {
 
 interface Props {
   excalidrawAPI: ExcalidrawImperativeAPI;
+  user: {
+    displayName?: string;
+  };
 }
 
 const {
@@ -85,7 +86,6 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
       modalIsShown: false,
       activeRoomLink: "",
       errorMessage: "",
-      username: "",
     };
 
     this.portal = new Portal(this);

src/collab/Portal.tsx

@@ -136,7 +136,7 @@ class Portal {
         payload: {
           socketId: this.socket.id,
           userState,
-          username: this.collab.state.username,
+          username: this.collab.props.user.displayName || "",
         },
       };
       return this._broadcastSocketData(
@@ -159,7 +159,7 @@ class Portal {
           button: payload.button || "up",
           selectedElementIds:
             this.collab.excalidrawAPI.getAppState().selectedElementIds,
-          username: this.collab.state.username,
+          username: this.collab.props.user.displayName || "",
         },
       };
       return this._broadcastSocketData(