@dxos/react-client 2.24.1-dev.79448ad7 → 2.25.1-dev.3e7251f9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-client",
-  "version": "2.24.1-dev.79448ad7",
+  "version": "2.25.1-dev.3e7251f9",
   "description": "React client API",
   "keywords": [],
   "license": "AGPL-3.0",
@@ -8,24 +8,24 @@
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
   "dependencies": {
-    "@dxos/async": "2.24.1-dev.79448ad7",
-    "@dxos/bot-factory-client": "2.24.1-dev.79448ad7",
-    "@dxos/client": "2.24.1-dev.79448ad7",
-    "@dxos/config": "2.24.1-dev.79448ad7",
-    "@dxos/credentials": "2.24.1-dev.79448ad7",
-    "@dxos/crypto": "2.24.1-dev.79448ad7",
-    "@dxos/debug": "2.24.1-dev.79448ad7",
-    "@dxos/echo-db": "2.24.1-dev.79448ad7",
-    "@dxos/util": "2.24.1-dev.79448ad7",
+    "@dxos/async": "2.25.1-dev.3e7251f9",
+    "@dxos/bot-factory-client": "2.25.1-dev.3e7251f9",
+    "@dxos/client": "2.25.1-dev.3e7251f9",
+    "@dxos/config": "2.25.1-dev.3e7251f9",
+    "@dxos/credentials": "2.25.1-dev.3e7251f9",
+    "@dxos/crypto": "2.25.1-dev.3e7251f9",
+    "@dxos/debug": "2.25.1-dev.3e7251f9",
+    "@dxos/echo-db": "2.25.1-dev.3e7251f9",
+    "@dxos/util": "2.25.1-dev.3e7251f9",
     "assert": "^2.0.0",
     "debug": "^4.3.3",
     "react-display-name": "^0.2.5",
     "use-subscription": "^1.4.1"
   },
   "devDependencies": {
-    "@dxos/esbuild-plugins": "2.24.1-dev.79448ad7",
+    "@dxos/esbuild-plugins": "2.25.1-dev.3e7251f9",
     "@dxos/esbuild-server": "~1.7.4",
-    "@dxos/toolchain-node-library": "2.24.0",
+    "@dxos/toolchain-node-library": "2.25.0",
     "@mui/material": "^5.0.1",
     "@testing-library/react": "^11.0.4",
     "@testing-library/react-hooks": "5.1.2",

package/react-client.build.log

@@ -1,33 +0,0 @@
-Invoking: toolchain build:test 
-
-
-typescript
-OK in 7607 ms
-
-eslint
-OK in 7853 ms
-
-mocha
-This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills
-This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills
-
-
-  ClientProvider
-    ✓ Renders with children
-    ✓ Provides the client
-
-  Client hook
-    ✓ should throw when used outside a context
-    ✓ should return client when used properly in a context
-
-  Config hook
-    ✓ should throw when used outside a context
-    ✓ should return default client config when no config is passed in a context
-    ✓ should return custom client config when used properly in a context
-
-
-  7 passing (362ms)
-
-OK in 2825 ms
-
-CHECK COMPLETE in 18304 ms

package/src/hooks/echo-queries/index.ts

@@ -5,4 +5,3 @@
 export * from './useContacts';
 export * from './useMembers';
 export * from './useParties';
-export * from './useRemoteParties';

package/src/hooks/echo-queries/useContacts.ts

@@ -4,7 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { PartyMember } from '@dxos/echo-db';
+import { PartyMember } from '@dxos/client';
 
 import { useClient } from '../client';
 

package/src/hooks/echo-queries/useMembers.tsx

@@ -4,10 +4,9 @@
 
 import { useEffect, useState } from 'react';
 
-import { PartyProxy } from '@dxos/client';
-import { PartyMember } from '@dxos/echo-db';
+import { Party, PartyMember } from '@dxos/client';
 
-export const useMembers = (party: PartyProxy | undefined) => {
+export const useMembers = (party: Party | undefined) => {
   const [members, setMembers] = useState<PartyMember[]>([]);
 
   useEffect(() => {

package/src/hooks/echo-queries/useParties.ts

@@ -4,7 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { PartyProxy } from '@dxos/client';
+import { Party } from '@dxos/client';
 import { PublicKeyLike } from '@dxos/crypto';
 
 import { useClient } from '../client';
@@ -13,7 +13,7 @@ import { useClient } from '../client';
  * Get a specific Party.
  * Requires ClientContext to be set via ClientProvider.
  */
-export const useParty = (partyKey?: PublicKeyLike): PartyProxy | undefined => {
+export const useParty = (partyKey?: PublicKeyLike): Party | undefined => {
   const parties = useParties();
   return parties.find(party => partyKey && party.key.equals(partyKey));
 };
@@ -24,7 +24,7 @@ export const useParty = (partyKey?: PublicKeyLike): PartyProxy | undefined => {
  */
 export const useParties = () => {
   const client = useClient();
-  const [parties, setParties] = useState<PartyProxy[]>([]);
+  const [parties, setParties] = useState<Party[]>([]);
 
   useEffect(() => {
     const result = client.echo.queryParties();

package/src/hooks/echo-selections/search.ts

@@ -2,12 +2,17 @@
 // Copyright 2020 DXOS.org
 //
 
+import { Party } from '@dxos/client';
+
+import { useSelection } from '.';
+
 /**
  * A Selector used for finding items based on a search pattern.
  * @param search Searched value.
  */
 // TODO(burdon): Create index.
-export const searchSelector = (search: any) => (selection: any) => {
+// TODO(dmaretskyi): Why is this in react-client?
+export const useSearchSelection = (party: Party, search: any) => {
   const match = (pattern: any, text: any) => {
     if (!pattern) {
       return true;
@@ -21,15 +26,14 @@ export const searchSelector = (search: any) => (selection: any) => {
     return text.toLowerCase().indexOf(pattern) !== -1;
   };
 
-  // TODO(burdon): Use selection to filter.
-  return selection.items.filter((item: any) => {
+  return useSelection(party.select().filter(item => {
     // TODO(burdon): Filter types.
-    if (item.type.indexOf('example') === -1) {
+    if (item.type?.indexOf('example') === -1) {
       return false;
     }
 
     // TODO(burdon): Generalize.
     const text = item.model.getProperty('name');
     return match(search, text);
-  });
+  }), [search]);
 };

package/src/hooks/echo-selections/useSelection.ts

@@ -4,7 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { SelectionResult } from '@dxos/echo-db';
+import { Entity, Selection } from '@dxos/client';
 import { Falsy } from '@dxos/util';
 
 /**
@@ -15,27 +15,32 @@ import { Falsy } from '@dxos/util';
  * apart from changes in ECHO database itself, must be passed to deps array
  * for updates to work correctly.
  *
- * @param selectionResult Selection from which to query data. Can be falsy - in that case the hook will return undefined.
+ * @param selection Selection from which to query data. Can be falsy - in that case the hook will return undefined.
  * @param deps Array of values that trigger the selector when changed.
  */
-export function useSelection<T> (
-  selectionResult: SelectionResult<T> | Falsy,
+export function useSelection<T extends Entity<any>> (
+  selection: Selection<T> | Falsy,
   deps: readonly any[] = []
-): T | undefined {
-  const [data, setData] = useState(() => selectionResult ? selectionResult.getValue() : undefined);
+): T[] | undefined {
+  const [result, setResult] = useState(() => selection ? selection.query() : undefined);
+  const [data, setData] = useState(() => result ? result.result : undefined);
 
-  // Update data when deps change.
+  // Update selection when the query or customs deps change.
   useEffect(() => {
-    if (selectionResult) {
-      const unsub = selectionResult.update.on(() => {
-        setData(selectionResult.getValue());
+    const newResult = selection ? selection.query() : undefined;
+    const newData = newResult ? newResult.result : undefined;
+    setResult(newResult);
+    setData(newData);
+  }, [!!selection, !!selection && selection.root, ...deps]);
+
+  // Update data when database updates.
+  useEffect(() => {
+    if (result) {
+      return result.update.on(newData => {
+        setData(newData);
       });
-      setData(selectionResult.getValue());
-      return unsub;
-    } else {
-      setData(undefined);
     }
-  }, deps);
+  }, [result]);
 
   return data;
 }

package/src/hooks/util/useResultSet.ts

@@ -5,7 +5,7 @@
 import { useMemo } from 'react';
 import { useSubscription } from 'use-subscription';
 
-import { ResultSet } from '@dxos/echo-db';
+import { ResultSet } from '@dxos/client';
 
 /**
  * A convenience hook used for subscribing to changing values of a result set.

package/stories/halo-invitations.stories.tsx

@@ -8,8 +8,7 @@ import {
   Box, Button, Divider, Paper, TextField, Toolbar
 } from '@mui/material';
 
-import { Invitation } from '@dxos/client';
-import { InvitationDescriptor } from '@dxos/echo-db';
+import { Invitation, InvitationDescriptor } from '@dxos/client';
 
 import {
   ClientProvider,

package/stories/helpers/ClientPanel.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { Box } from '@mui/material';
 
-import { Client, PartyProxy } from '@dxos/client';
+import { Client, Party } from '@dxos/client';
 
 import { useProfile } from '../../src';
 import { JsonPanel } from './JsonPanel';
@@ -18,7 +18,7 @@ export const ClientPanel = ({
 }: {
   client: Client,
   profile?: Partial<ReturnType<typeof useProfile>>,
-  parties?: PartyProxy[]
+  parties?: Party[]
 }) => {
   const data = (parties.length !== 0) ? { parties: parties.map(({ key }) => key.toHex()) } : undefined;
 

package/stories/party-invitations.stories.tsx

@@ -8,9 +8,8 @@ import {
   Box, Button, Divider, Paper, TextField, Toolbar
 } from '@mui/material';
 
-import { PartyInvitation } from '@dxos/client';
+import { PartyInvitation, InvitationDescriptor } from '@dxos/client';
 import { PublicKey } from '@dxos/crypto';
-import { InvitationDescriptor } from '@dxos/echo-db';
 
 import {
   ClientProvider,

package/dist/src/hooks/echo-queries/useRemoteParties.d.ts

@@ -1,7 +0,0 @@
-import { Party } from '@dxos/client/src/proto/gen/dxos/client';
-/**
- * Get all Parties available to current user.
- * Requires ClientContext to be set via ClientProvider.
- */
-export declare const useRemoteParties: () => Party[];
-//# sourceMappingURL=useRemoteParties.d.ts.map

package/dist/src/hooks/echo-queries/useRemoteParties.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useRemoteParties.d.ts","sourceRoot":"","sources":["../../../../src/hooks/echo-queries/useRemoteParties.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAI/D;;;GAGG;AACH,eAAO,MAAM,gBAAgB,eAY5B,CAAC"}

package/dist/src/hooks/echo-queries/useRemoteParties.js

@@ -1,24 +0,0 @@
-"use strict";
-//
-// Copyright 2020 DXOS.org
-//
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRemoteParties = void 0;
-const react_1 = require("react");
-const client_1 = require("../client");
-/**
- * Get all Parties available to current user.
- * Requires ClientContext to be set via ClientProvider.
- */
-const useRemoteParties = () => {
-    const client = (0, client_1.useClient)();
-    const [parties, setParties] = (0, react_1.useState)([]);
-    (0, react_1.useEffect)(() => {
-        const stream = client.services.PartyService.SubscribeParties();
-        stream.subscribe(result => { var _a; return setParties((_a = result.parties) !== null && _a !== void 0 ? _a : []); }, console.error);
-        return () => stream.close();
-    }, []);
-    return parties;
-};
-exports.useRemoteParties = useRemoteParties;
-//# sourceMappingURL=useRemoteParties.js.map

package/dist/src/hooks/echo-queries/useRemoteParties.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useRemoteParties.js","sourceRoot":"","sources":["../../../../src/hooks/echo-queries/useRemoteParties.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEF,iCAA4C;AAI5C,sCAAsC;AAEtC;;;GAGG;AACI,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,MAAM,GAAG,IAAA,kBAAS,GAAE,CAAC;IAC3B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAU,EAAE,CAAC,CAAC;IAEpD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC;QAC/D,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,WAAC,OAAA,UAAU,CAAC,MAAA,MAAM,CAAC,OAAO,mCAAI,EAAE,CAAC,CAAA,EAAA,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QAE5E,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAZW,QAAA,gBAAgB,oBAY3B"}

package/src/hooks/echo-queries/useRemoteParties.ts

@@ -1,27 +0,0 @@
-//
-// Copyright 2020 DXOS.org
-//
-
-import { useEffect, useState } from 'react';
-
-import { Party } from '@dxos/client/src/proto/gen/dxos/client';
-
-import { useClient } from '../client';
-
-/**
- * Get all Parties available to current user.
- * Requires ClientContext to be set via ClientProvider.
- */
-export const useRemoteParties = () => {
-  const client = useClient();
-  const [parties, setParties] = useState<Party[]>([]);
-
-  useEffect(() => {
-    const stream = client.services.PartyService.SubscribeParties();
-    stream.subscribe(result => setParties(result.parties ?? []), console.error);
-
-    return () => stream.close();
-  }, []);
-
-  return parties;
-};