Network Improvements

src/CustomLocationPage.tsx

@@ -14,8 +14,8 @@ import { DomainConfigState } from '@ir-engine/engine/src/assets/state/DomainConf
 import { MediaSettingsState } from '@ir-engine/engine/src/audio/MediaSettingsState'
 import { NetworkState } from '@ir-engine/network'
 import React, { useEffect } from 'react'
+import { NeighbourhoodNetworkState } from './ad4m/NeighbourhoodNetworkTransport'
 import { AgentState } from './ad4m/useADAM'
-import { NeighbourhoodNetworkState } from './ad4m/useNeighbourhoodNetwork'
 
 import { LocationState } from '@ir-engine/client-core/src/social/services/LocationService'
 import '@ir-engine/client-core/src/systems/AvatarUISystem'

src/ad4m/useNeighbourhoodNetwork.tsx → src/ad4m/NeighbourhoodNetworkTransport.tsx

@@ -48,22 +48,22 @@ type SignalData = {
 
 export const NeighbourhoodNetworkState = defineState({
   name: 'hexafield.adam-template.NeighbourhoodNetworkState',
-  initial: [] as Array<{ topic: Topic; sharedUrl: string }>,
+  initial: [] as Array<{ topic: Topic; networkID: NetworkID; neighbourhoodUrl: string }>,
   reactor: () => {
-    const joinedNeighbourhoods = useMutableState(NeighbourhoodNetworkState).value
+    const networks = useMutableState(NeighbourhoodNetworkState).value
 
     useEffect(() => {
-      /** @todo it's probably fine that we override this every time we connect to a new server, but we should maybe handle this smarter */
       getMutableState(StunServerState).set(PUBLIC_STUN_SERVERS)
     }, [])
 
     return (
       <>
-        {joinedNeighbourhoods.map((neighbourhood) => (
+        {networks.map((network) => (
           <ConnectionReactor
-            key={neighbourhood.topic + '_' + neighbourhood.sharedUrl}
-            sharedUrl={neighbourhood.sharedUrl}
-            topic={neighbourhood.topic}
+            key={network.networkID}
+            networkID={network.networkID}
+            sharedUrl={network.neighbourhoodUrl}
+            topic={network.topic}
           />
         ))}
       </>
@@ -75,8 +75,8 @@ const array = new Uint32Array(1)
 self.crypto.getRandomValues(array)
 const myPeerIndex = array[0]
 
-const ConnectionReactor = (props: { sharedUrl: string; topic: Topic }) => {
-  const { sharedUrl, topic } = props
+const ConnectionReactor = (props: { sharedUrl: string; networkID: NetworkID; topic: Topic }) => {
+  const { sharedUrl, networkID, topic } = props
 
   useEffect(() => {
     const url = new URL(window.location.href)
@@ -85,8 +85,6 @@ const ConnectionReactor = (props: { sharedUrl: string; topic: Topic }) => {
     window.history.replaceState({}, '', url.toString())
   }, [])
 
-  const networkID = (sharedUrl + '_' + topic) as NetworkID
-
   const perspective = getState(PerspectivesState).neighbourhoods[sharedUrl]
 
   const neighbourhood = useHookstate(() => {

src/ad4m/useADAM.tsx

@@ -28,30 +28,27 @@ export const AdamClientState = defineState({
 
       ad4mConnect.isAuthenticated().then((authenticated) => {
         authenticatedState.set(authenticated)
+
+        if (authenticated) return
+
+        const oldState = ad4mConnect.authState
+
+        const onAuthStateChange = (e) => {
+          if (ad4mConnect.authState === 'authenticated' && oldState !== 'authenticated') {
+            authenticatedState.set(true)
+            ad4mConnect.removeEventListener('authstatechange', onAuthStateChange)
+          }
+        }
+
+        ad4mConnect.addEventListener('authstatechange', onAuthStateChange)
       })
     }, [])
 
-    const authState = useHookstate(ad4mConnect.authState)
-
     useEffect(() => {
+      if (!authenticatedState.value) return
       getAd4mClient().then((client) => {
         getMutableState(AdamClientState).set(client)
       })
-
-      const onAuthStateChange = (e) => {
-        const oldState = authState.value
-        authState.set(ad4mConnect.authState)
-        console.log('auth state changed', e, ad4mConnect.authState)
-        if (ad4mConnect.authState === 'authenticated' && oldState !== 'authenticated') {
-          // window.location.reload()
-        }
-      }
-
-      ad4mConnect.addEventListener('authstatechange', onAuthStateChange)
-
-      return () => {
-        ad4mConnect.removeEventListener('authstatechange', onAuthStateChange)
-      }
     }, [authenticatedState.value])
 
     return null

src/tools/graph/DataState.ts

@@ -38,7 +38,7 @@ export const DataToolRegistry = defineState({
 export type TargetSchema<T> = {
   id: string
   label: string
-  value: JSONSchema
+  schema: JSONSchema
   onData: (data: Record<string, Partial<T>>) => T
   onConfirm: (data: T) => void
 }

src/tools/graph/MappingUI.tsx

@@ -14,7 +14,7 @@ import SchemaDisplay from './SchemaDisplay'
 export const MappingUI = () => {
   // Global visualization type state.
   const visualizationType = useHookstate('hexafield.conjure.graph-tool.ForceGraph') // todo put in search params once we have multiple
-  const targetSchema = getState(TargetVisualizationState)[visualizationType.get()].value
+  const targetSchema = getState(TargetVisualizationState)[visualizationType.get()]?.schema
 
   const onConfirm = () => {
     if (!finalDataState.value) return

src/tools/graph/forcegraph/ForceGraph.tsx

@@ -562,7 +562,7 @@ type ForceGraphShape = {
 export const ForceGraphSchema = {
   id: 'hexafield.conjure.graph-tool.ForceGraph',
   label: 'Force Graph',
-  value: forcegraphSchema,
+  schema: forcegraphSchema,
   onData: (data: Record<string, ForceGraphShape>) => {
     const finalData: ForceGraphShape = { nodes: [], edges: [] }
     const seenLabels = new Map<string, { source: string; id: number | string }>()

src/world/NeighbourhoodBubbles.tsx

@@ -1,9 +1,9 @@
-import { getMutableState, getState, NO_PROXY_STEALTH, useHookstate } from '@ir-engine/hyperflux'
+import { getMutableState, getState, NetworkID, NO_PROXY_STEALTH, useHookstate } from '@ir-engine/hyperflux'
 import { NetworkTopics } from '@ir-engine/network'
 import * as d3 from 'd3'
 import React, { useEffect, useMemo, useRef } from 'react'
+import { NeighbourhoodNetworkState } from '../ad4m/NeighbourhoodNetworkTransport'
 import { AgentState } from '../ad4m/useADAM'
-import { NeighbourhoodNetworkState } from '../ad4m/useNeighbourhoodNetwork'
 import { PerspectivesState } from '../ad4m/usePerspectives'
 import { stringToColor } from '../utils/stringToColor'
 
@@ -228,14 +228,26 @@ const NeighbourhoodBubbles = () => {
   }, [neighbourhoodsState])
 
   const onJoinNeighbourhood = (sharedURL: string) => {
-    getMutableState(NeighbourhoodNetworkState).set([{ topic: NetworkTopics.world, sharedUrl: sharedURL }])
+    getMutableState(NeighbourhoodNetworkState).set([
+      {
+        topic: NetworkTopics.world,
+        networkID: (NetworkTopics.world + '-' + sharedURL) as NetworkID,
+        neighbourhoodUrl: sharedURL
+      }
+    ])
 
     /**
      * @todo to get around the pubsub subscription race condition,
      * use a significant delay to connect to the media server a few seconds late
      */
     setTimeout(() => {
-      getMutableState(NeighbourhoodNetworkState).merge([{ topic: NetworkTopics.media, sharedUrl: sharedURL }])
+      getMutableState(NeighbourhoodNetworkState).merge([
+        {
+          topic: NetworkTopics.media,
+          networkID: (NetworkTopics.media + '-' + sharedURL) as NetworkID,
+          neighbourhoodUrl: sharedURL
+        }
+      ])
     }, 1000)
   }
 

src/world/NeighbourhoodWorldSystem.tsx

@@ -2,7 +2,7 @@ import { defineSystem, PresentationSystemGroup } from '@ir-engine/ecs'
 import { useHookstate, useMutableState } from '@ir-engine/hyperflux'
 import { NetworkState, NetworkTopics } from '@ir-engine/network'
 import React from 'react'
-import { NeighbourhoodNetworkState } from '../ad4m/useNeighbourhoodNetwork'
+import { NeighbourhoodNetworkState } from '../ad4m/NeighbourhoodNetworkTransport'
 import { useBasicScene } from './BasicScene'
 import { useSpawnAvatar } from './useSpawnAvatar'
 
@@ -18,7 +18,7 @@ export const NeighbourhoodWorldSystem = defineSystem({
         {neighbourhoods
           .filter((n) => n.topic === NetworkTopics.world)
           .map((neighbourhood) => (
-            <NeighbourhoodWorldReactor key={neighbourhood.sharedUrl} sharedUrl={neighbourhood.sharedUrl} />
+            <NeighbourhoodWorldReactor key={neighbourhood.networkID} sharedUrl={neighbourhood.networkID} />
           ))}
       </>
     )