migrate to new api

client/src/app/App.tsx

@@ -1,6 +1,6 @@
-import { FluenceClient } from '@fluencelabs/fluence';
+import { createClient, FluenceClient } from '@fluencelabs/fluence';
+import { dev } from '@fluencelabs/fluence-network-environment';
 import React, { useEffect, useState } from 'react';
-import { connect } from 'src/fluence';
 
 import './App.scss';
 import { FluenceClientContext } from './FluenceClientContext';
@@ -15,7 +15,7 @@ const App = () => {
 
     useEffect(() => {
         const fn = async () => {
-            const c = await connect();
+            const c = await createClient(dev[0]);
             setClient(c);
         };
         fn();
@@ -69,7 +69,7 @@ const App = () => {
                 </div>
 
                 <div className="wrapper">
-                    <div>{isInRoom && client && <CollaborativeEditor />}</div>
+                    {/* <div>{isInRoom && client && <CollaborativeEditor />}</div> */}
                     <div>{isInRoom && client && <UserList selfName={nickName} />}</div>
                 </div>
             </div>

client/src/app/CollaborativeEditor.tsx

@@ -2,9 +2,9 @@ import * as Automerge from 'automerge';
 import DiffMatchPatch from 'diff-match-patch';
 import { useEffect, useState } from 'react';
 import { fluentPadServiceId, notifyTextUpdateFnName } from 'src/fluence/constants';
-import { subscribeToEvent } from 'src/fluence/exApi';
 import { useFluenceClient } from './FluenceClientContext';
 import * as calls from 'src/fluence/calls';
+import { subscribeToEvent } from '@fluencelabs/fluence';
 
 interface TextDoc {
     value: Automerge.Text;

client/src/app/UserList.tsx

@@ -5,9 +5,9 @@ import {
     notifyUserAddedFnName,
     notifyUserRemovedFnName,
 } from 'src/fluence/constants';
-import { subscribeToEvent } from 'src/fluence/exApi';
 import { useFluenceClient } from './FluenceClientContext';
 import * as calls from 'src/fluence/calls';
+import { subscribeToEvent } from '@fluencelabs/fluence';
 
 interface User {
     id: string;
@@ -26,7 +26,7 @@ const turnUserAsOfflineCandidate = (u: User): User => {
 
 type PeerId = string;
 
-const refreshTimeoutMs = 7000;
+const refreshTimeoutMs = 2000;
 
 export const UserList = (props: { selfName: string }) => {
     const client = useFluenceClient()!;
@@ -111,20 +111,15 @@ export const UserList = (props: { selfName: string }) => {
         .map((x) => x[1])
         .sort((a, b) => a.name.localeCompare(b.name));
 
-    const onlineUsers = usersArray.filter((x) => x.isOnline);
-    const offlineUsers = usersArray.filter((x) => !x.isOnline);
-
     return (
         <div>
             <ul>
-                {onlineUsers.map((x) => (
+                {usersArray.map((x) => (
                     <li key={x.id}>
-                        {x.name} ({x.id} <span style={{ color: 'green' }}>(online)</span>)
+                        {x.name}{' '}
-                    </li>
+                        <span style={{ color: x.isOnline ? 'green' : 'red' }}>
-                ))}
+                            ({x.isOnline ? 'online' : 'offline'})
-                {offlineUsers.map((x) => (
+                        </span>
-                    <li key={x.id}>
-                        {x.name} ({x.id} <span style={{ color: 'red' }}>(offline)</span>)
                     </li>
                 ))}
             </ul>

client/src/fluence/calls.ts

@@ -1,4 +1,4 @@
-import { FluenceClient } from '@fluencelabs/fluence';
+import { FluenceClient, Particle, sendParticle } from '@fluencelabs/fluence';
 import {
     fluentPadServiceId,
     historyNodePid,
@@ -10,7 +10,6 @@ import {
     userListNodePid,
     userListServiceId,
 } from './constants';
-import { Particle, sendParticle } from './exApi';
 
 export interface ServiceResult {
     ret_code: number;

client/src/fluence/constants.ts

@@ -7,8 +7,8 @@ export const notifyUserAddedFnName = 'notifyUserAdded';
 export const notifyUserRemovedFnName = 'notifyUserRemoved';
 export const notifyTextUpdateFnName = 'notifyTextUpdate';
 
-export const userListServiceId = 'd4506f7d-be4a-4332-87b2-eb530f350861';
+export const userListServiceId = '65b7232f-45ff-464f-a804-c4c8ce563726';
-export const historyServiceId = 'd9abbacf-6ee2-49e5-9683-536a5c931fa1';
+export const historyServiceId = '29a5724d-c865-42fe-bfc1-e2c6b84a89b4';
 
 export const userListNodePid = dev[2].peerId;
 export const historyNodePid = dev[2].peerId;

client/src/fluence/exApi.ts

@@ -1,68 +0,0 @@
-import { FluenceClient } from '@fluencelabs/fluence';
-import { SecurityTetraplet } from '@fluencelabs/fluence/dist/internal/commonTypes';
-
-const defaultTtl = 7000;
-
-export class Particle {
-    script: string;
-    data: Map<string, any>;
-    ttl: number;
-
-    constructor(script: string, data?: Map<string, any> | Record<string, any>, ttl?: number) {
-        this.script = script;
-        if (data === undefined) {
-            this.data = new Map();
-        } else if (data instanceof Map) {
-            this.data = data;
-        } else {
-            this.data = new Map();
-            for (let k in data) {
-                this.data.set(k, data[k]);
-            }
-        }
-
-        this.ttl = ttl ?? defaultTtl;
-    }
-}
-
-export const sendParticle = async (client: FluenceClient, particle: Particle): Promise<string> => {
-    return await client.sendScript(particle.script, particle.data, particle.ttl);
-};
-
-export const registerServiceFunction = (
-    client: FluenceClient,
-    serviceId: string,
-    fnName: string,
-    handler: (args: any[], tetraplets: SecurityTetraplet[][]) => object,
-) => {
-    client.registerCallback(serviceId, fnName, handler);
-};
-
-// prettier-ignore
-export const unregisterServiceFunction = (
-    client: FluenceClient,
-    serviceId: string,
-    fnName: string
-) => {
-    client.unregisterCallback(serviceId, fnName);
-};
-
-export const subscribeToEvent = (
-    client: FluenceClient,
-    serviceId: string,
-    fnName: string,
-    handler: (args: any[], tetraplets: SecurityTetraplet[][]) => void,
-): Function => {
-    const realHandler = (args: any[], tetraplets: SecurityTetraplet[][]) => {
-        // dont' block
-        setImmediate(() => {
-            handler(args, tetraplets);
-        });
-
-        return {};
-    };
-    registerServiceFunction(client, serviceId, fnName, realHandler);
-    return () => {
-        unregisterServiceFunction(client, serviceId, fnName);
-    };
-};

client/src/fluence/index.ts

@@ -1,47 +0,0 @@
-import { FluenceClient, peerIdToSeed, generatePeerId, seedToPeerId } from '@fluencelabs/fluence';
-import { dev } from '@fluencelabs/fluence-network-environment';
-import log from 'loglevel';
-import { registerServiceFunction } from './exApi';
-
-log.setLevel(2);
-
-const getPrivKey = async () => {
-    // return '7sHe8vxCo4BkdPNPdb8f2T8CJMgTmSvBTmeqtH9QWrar';
-    const peerId = await generatePeerId();
-    const key = peerIdToSeed(peerId);
-    return key;
-};
-
-export let fluenceClient: FluenceClient;
-
-export const connect = async (): Promise<FluenceClient> => {
-    if (fluenceClient) {
-        return fluenceClient;
-    }
-
-    const node = dev[0];
-    const key = await getPrivKey();
-    const peerId = await seedToPeerId(key);
-    const c = new FluenceClient(peerId);
-
-    // missing built-in identity function
-    registerServiceFunction(c, 'op', 'identity', (args, _) => {
-        console.log('called identity');
-        return args;
-    });
-
-    registerServiceFunction(c, 'op', 'alert', (args, _) => {
-        alert(args);
-        return args;
-    });
-
-    await c.connect(node.multiaddr);
-    fluenceClient = c;
-    return fluenceClient;
-};
-
-export const disconnect = async () => {
-    if (fluenceClient) {
-        await fluenceClient.disconnect();
-    }
-};

client/src/index.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.scss';
-import App1 from './app/App1';
+import App from './app/App';
+import log from 'loglevel';
+
+log.setLevel(2);
 
 ReactDOM.render(
     <React.StrictMode>
-        <App1 />
+        <App />
     </React.StrictMode>,
     document.getElementById('root'),
 );