Revert "Removed mobx from harmony module." This reverts commit 1c36c1b.

packages/client-core/components/ui/Harmony/index.tsx

@@ -58,9 +58,11 @@ import moment from 'moment';
 import React, { useEffect, useRef, useState } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
+import { observer } from 'mobx-react';
 //@ts-ignore
 import styles from './Harmony.module.scss';
 import { Network } from '@xr3ngine/engine/src/networking/classes/Network';
+import {autorun} from "mobx";
 
 
 const mapStateToProps = (state: any): any => {
@@ -108,7 +110,7 @@ interface Props {
     resetChannelServer?: typeof resetChannelServer;
 }
 
-const Harmony = (props: Props): any => {
+const Harmony = observer((props: Props): any => {
     const {
         authState,
         chatState,
@@ -192,6 +194,18 @@ const Harmony = (props: Props): any => {
             resetChannelServer();
             if (channelAwaitingProvisionRef.current.id.length === 0) _setActiveAVChannelId('');
         });
+
+        autorun(() => {
+            if ((Network.instance.transport as any).channelType === 'instance') {
+                const channelEntries = [...channels.entries()];
+                const instanceChannel = channelEntries.find((entry) => entry[1].instanceId != null);
+                if (instanceChannel != null && channelAwaitingProvision?.id?.length === 0) {
+                    setActiveAVChannelId(instanceChannel[0]);
+                }
+            } else {
+                setActiveAVChannelId((Network.instance.transport as any).channelId);
+            }
+        });
     }, []);
 
     useEffect(() => {
@@ -242,18 +256,6 @@ const Harmony = (props: Props): any => {
         });
     }, [channels]);
 
-    useEffect(() => {
-        if ((Network.instance.transport as any).channelType === 'instance') {
-            const channelEntries = [...channels.entries()];
-            const instanceChannel = channelEntries.find((entry) => entry[1].instanceId != null);
-            if (instanceChannel != null && channelAwaitingProvision?.id?.length === 0) {
-                setActiveAVChannelId(instanceChannel[0]);
-            }
-        } else {
-            setActiveAVChannelId((Network.instance.transport as any).channelId);
-        }
-    }, [channels, channelAwaitingProvision]);
-
 
     const openLeftDrawer = (e: any): void => {
         setBottomDrawerOpen(false);
@@ -808,6 +810,6 @@ const Harmony = (props: Props): any => {
             </div>
         </div>
     );
-};
+});
 
 export default connect(mapStateToProps, mapDispatchToProps)(Harmony);

packages/client-core/components/ui/VideoChat/index.tsx

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { MediaStreamSystem } from '@xr3ngine/engine/src/networking/systems/MediaStreamSystem';
 import { Network } from '@xr3ngine/engine/src/networking/classes/Network';
+import { observer } from 'mobx-react';
 import { selectAuthState } from '../../../redux/auth/selector';
 import { selectLocationState } from '../../../redux/location/selector';
 import Fab from "@material-ui/core/Fab";
@@ -24,7 +25,7 @@ const mapStateToProps = (state: any): any => {
 const mapDispatchToProps = (dispatch: Dispatch): any => ({
 });
 
-const VideoChat = (props: Props) => {
+const VideoChat = observer((props: Props) => {
   const {
     authState,
     locationState
@@ -46,6 +47,6 @@ const VideoChat = (props: Props) => {
       {MediaStreamSystem.mediaStream != null && <CallEnd /> }
     </Fab>
   );
-};
+});
 
 export default connect(mapStateToProps, mapDispatchToProps)(VideoChat);

packages/client-core/package.json

@@ -64,6 +64,8 @@
     "lodash": "^4.17.20",
     "mediasoup-client": "^3.6.12",
     "minimist": "^1.2.5",
+    "mobx": "5.15.6",
+    "mobx-react": "^6.2.5",
     "moment": "^2.29.1",
     "mousetrap": "^1.6.5",
     "next": "^10.0.6",