@dxos/react-client 0.4.10-main.fe71b4c → 0.4.10-next.71cec10

package/src/echo/useSpaceInvitations.ts

@@ -2,29 +2,18 @@
 // Copyright 2022 DXOS.org
 //
 
-import { useMemo, useSyncExternalStore } from 'react';
+import { useMemo } from 'react';
 
+import { MulticastObservable } from '@dxos/async';
 import { type PublicKey } from '@dxos/client';
+import { useMulticastObservable } from '@dxos/react-async';
 
 import { useSpace } from './useSpaces';
-import { useInvitationStatus } from '../invitations';
+import { type CancellableInvitationObservable, useInvitationStatus } from '../invitations';
 
-export const useSpaceInvitations = (spaceKey?: PublicKey) => {
+export const useSpaceInvitations = (spaceKey?: PublicKey): CancellableInvitationObservable[] => {
   const space = useSpace(spaceKey);
-  const invitations =
-    useSyncExternalStore(
-      (listener) => {
-        if (!space) {
-          return () => {};
-        }
-
-        const subscription = space.invitations.subscribe(() => listener());
-        return () => subscription.unsubscribe();
-      },
-      () => space?.invitations.get(),
-    ) ?? [];
-
-  return invitations;
+  return useMulticastObservable(space?.invitations ?? MulticastObservable.empty()) ?? [];
 };
 
 export const useSpaceInvitation = (spaceKey?: PublicKey, invitationId?: string) => {

package/src/halo/useContacts.ts

@@ -2,9 +2,8 @@
 // Copyright 2020 DXOS.org
 //
 
-import { useSyncExternalStore } from 'react';
-
 import type { Contact } from '@dxos/client/halo';
+import { useMulticastObservable } from '@dxos/react-async';
 
 import { useClient } from '../client';
 
@@ -15,13 +14,5 @@ import { useClient } from '../client';
  */
 export const useContacts = (): Contact[] => {
   const client = useClient();
-  const contacts = useSyncExternalStore(
-    (listener) => {
-      const subscription = client.halo.contacts.subscribe(listener);
-      return () => subscription.unsubscribe();
-    },
-    () => client.halo.contacts.get(),
-  );
-
-  return contacts;
+  return useMulticastObservable(client.halo.contacts);
 };

package/src/halo/useDevices.ts

@@ -2,21 +2,12 @@
 // Copyright 2020 DXOS.org
 //
 
-import { useSyncExternalStore } from 'react';
-
 import type { Device } from '@dxos/client/halo';
+import { useMulticastObservable } from '@dxos/react-async';
 
 import { useClient } from '../client';
 
 export const useDevices = (): Device[] => {
   const client = useClient();
-  const devices = useSyncExternalStore(
-    (listener) => {
-      const subscription = client.halo.devices.subscribe(listener);
-      return () => subscription.unsubscribe();
-    },
-    () => client.halo.devices.get(),
-  );
-
-  return devices;
+  return useMulticastObservable(client.halo.devices);
 };

package/src/halo/useHaloInvitations.ts

@@ -2,23 +2,16 @@
 // Copyright 2022 DXOS.org
 //
 
-import { useMemo, useSyncExternalStore } from 'react';
+import { useMemo } from 'react';
+
+import { useMulticastObservable } from '@dxos/react-async';
 
 import { useClient } from '../client';
-import { useInvitationStatus } from '../invitations';
+import { useInvitationStatus, type CancellableInvitationObservable } from '../invitations';
 
-export const useHaloInvitations = () => {
+export const useHaloInvitations = (): CancellableInvitationObservable[] => {
   const client = useClient();
-  const invitations =
-    useSyncExternalStore(
-      (listener) => {
-        const subscription = client.halo.invitations.subscribe(() => listener());
-        return () => subscription.unsubscribe();
-      },
-      () => client.halo.invitations.get(),
-    ) ?? [];
-
-  return invitations;
+  return useMulticastObservable(client.halo.invitations);
 };
 
 export const useHaloInvitation = (invitationId?: string) => {

package/src/mesh/useNetworkStatus.ts

@@ -2,9 +2,8 @@
 // Copyright 2020 DXOS.org
 //
 
-import { useSyncExternalStore } from 'react';
-
 import { type NetworkStatus } from '@dxos/client/mesh';
+import { useMulticastObservable } from '@dxos/react-async';
 
 import { useClient } from '../client';
 
@@ -13,13 +12,5 @@ import { useClient } from '../client';
  */
 export const useNetworkStatus = (): NetworkStatus => {
   const client = useClient();
-  const networkStatus = useSyncExternalStore(
-    (listener) => {
-      const subscription = client.mesh.networkStatus.subscribe(listener);
-      return () => subscription.unsubscribe();
-    },
-    () => client.mesh.networkStatus.get(),
-  );
-
-  return networkStatus;
+  return useMulticastObservable(client.mesh.networkStatus);
 };