@dxos/react-client 2.25.0 → 2.25.1-dev.0ff9b5c9

package/package.json

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

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/client';
+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;
 }