@dxos/react-client 2.28.23-dev.09d48bf0 → 2.28.23-dev.82df2091

package/package.json

@@ -1,24 +1,25 @@
 {
   "name": "@dxos/react-client",
-  "version": "2.28.23-dev.09d48bf0",
+  "version": "2.28.23-dev.82df2091",
   "description": "React client API",
   "license": "MIT",
   "author": "DXOS.org",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
   "dependencies": {
-    "@dxos/async": "2.28.23-dev.09d48bf0",
-    "@dxos/bot-factory-client": "2.28.23-dev.09d48bf0",
-    "@dxos/client": "2.28.23-dev.09d48bf0",
-    "@dxos/config": "2.28.23-dev.09d48bf0",
-    "@dxos/credentials": "2.28.23-dev.09d48bf0",
-    "@dxos/crypto": "2.28.23-dev.09d48bf0",
-    "@dxos/debug": "2.28.23-dev.09d48bf0",
-    "@dxos/echo-db": "2.28.23-dev.09d48bf0",
-    "@dxos/network-manager": "2.28.23-dev.09d48bf0",
-    "@dxos/util": "2.28.23-dev.09d48bf0",
+    "@dxos/async": "2.28.23-dev.82df2091",
+    "@dxos/bot-factory-client": "2.28.23-dev.82df2091",
+    "@dxos/client": "2.28.23-dev.82df2091",
+    "@dxos/config": "2.28.23-dev.82df2091",
+    "@dxos/credentials": "2.28.23-dev.82df2091",
+    "@dxos/crypto": "2.28.23-dev.82df2091",
+    "@dxos/debug": "2.28.23-dev.82df2091",
+    "@dxos/echo-db": "2.28.23-dev.82df2091",
+    "@dxos/network-manager": "2.28.23-dev.82df2091",
+    "@dxos/util": "2.28.23-dev.82df2091",
     "assert": "^2.0.0",
     "debug": "^4.3.3",
+    "ipfs-http-client": "~56.0.1",
     "use-subscription": "^1.4.1"
   },
   "devDependencies": {
@@ -39,6 +40,7 @@
     "expect": "~27.0.2",
     "fork-ts-checker-webpack-plugin": "~6.2.5",
     "level-js": "^5.0.2",
+    "node-fetch": "^2.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",

package/src/hooks/index.ts

@@ -7,5 +7,6 @@ export * from './client';
 export * from './echo-queries';
 export * from './echo-selections';
 export * from './invitations';
+export * from './ipfs';
 export * from './util';
 export * from './wns';

package/src/hooks/ipfs/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './useIpfsClient';
+export * from './useIpfsFiles';

package/src/hooks/ipfs/useIpfsClient.ts

@@ -0,0 +1,37 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { CID, create } from 'ipfs-http-client';
+import path from 'path';
+import { useMemo } from 'react';
+
+/**
+ * Return URL to IPFS resource on local gateway.
+ * @param gateway
+ * @param cid
+ * @param filename
+ */
+export const getIpfsUrl = (gateway: string, cid: CID, filename?: string) => {
+  const args = filename ? [`filename=${encodeURI(filename)}`] : [];
+  return path.join(gateway, String(cid), '?', args.join('&'));
+};
+
+// TODO(kaplanski): Factor out IPFS related functionality to its own package.
+/**
+ * https://www.npmjs.com/package/ipfs-http-client#example
+ * NOTE: We need to run our own servers to enable CORS.
+ * Ports
+ * - 8001 Gateway
+ * - 5001 API
+ */
+export const useIpfsClient = (url?: string) => {
+  return useMemo(() => {
+    if (!url) {
+      return undefined;
+    }
+
+    const client = create({ url });
+    return client;
+  }, [url]);
+};

package/src/hooks/ipfs/useIpfsFiles.ts

@@ -0,0 +1,59 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { CID, IPFSHTTPClient } from 'ipfs-http-client';
+import { useMemo } from 'react';
+
+import { Party } from '@dxos/client';
+
+import { useSelection } from '../echo-selections';
+
+export type IPFSFile = {
+  filename?: string
+  cid: CID
+  size?: number
+}
+
+/**
+ * Returns a list of mapped IPFS files.
+ * @param party
+ * @param type
+ */
+export const useIpfsFiles = (party: Party | undefined, type: string) => {
+  // TODO(burdon): Schema definitions for types?
+  // TODO(burdon): Use reducer to do mapping?
+  const items = useSelection(party?.select().filter({ type }));
+
+  const files: IPFSFile[] = useMemo(() => items?.map(item => ({
+    filename: item.model.getProperty('filename'),
+    cid: item.model.getProperty('cid'),
+    size: item.model.getProperty('size')
+  })), [items]) ?? [];
+
+  return files;
+};
+
+// TODO(wittjosiah): This is not returning IPFSFiles.
+export const uploadFilesToIpfs = async (
+  ipfsClient: IPFSHTTPClient,
+  files: File[],
+  onError?: (error: Error) => void
+) => {
+  return await Promise.all(files.map(async (file) => {
+    // https://docs.ipfs.io/reference/js/api
+    // https://github.com/ipfs/js-ipfs/tree/master/packages/ipfs-http-client
+    try {
+      const { cid, path, size } = await ipfsClient.add(file);
+      await ipfsClient.pin.add(cid);
+      // TODO(kaplanski): path is CID v0. cid is CID v1. Current default is v0, but will be updated to v1 in the future. We'll need to update to support v1.
+      return {
+        cid: path,
+        size,
+        filename: file.name
+      };
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error(err as string)); // TODO(burdon): Generalize.
+    }
+  }));
+};