receiving channels

app/client/mobile/src/content/Content.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import {Text} from 'react-native-paper';
 import {SafeAreaView} from 'react-native';
+import {useContent} from './useContent.hook';
+
+export function Content() {
+  const { state, actions } = useContent();
 
-export function Channels() {
   return (
     <SafeAreaView>
-      <Text>CHANNELS</Text>
+      <Text>CONTENT PANE</Text>
     </SafeAreaView>
   );
 }

app/client/mobile/src/content/useContent.hook.ts

@@ -0,0 +1,38 @@
+import {useState, useContext, useEffect} from 'react';
+import {AppContext} from '../context/AppContext';
+import {DisplayContext} from '../context/DisplayContext';
+import {ContextType} from '../context/ContextType';
+import {Channel} from 'databag-client-sdk';
+
+export function useContent() {
+  const app = useContext(AppContext) as ContextType;
+  const display = useContext(DisplayContext) as ContextType;
+  const [state, setState] = useState({
+    strings: display.state.strings,
+    cards: [] as Card[],
+    filtered: [] as Card[],
+    filter: '',
+  });
+
+  const updateState = (value: any) => {
+    setState(s => ({...s, ...value}));
+  };
+
+  useEffect(() => {
+    const content = app.state.session?.getContent();
+    const setChannels = ({channels, cardId}) => {
+      console.log("----> CHANNELS:", cardId, channels.length);
+      updateState({channels});
+    };
+    content.addChannelListener(setChannels);
+    return () => {
+      content.removeChannelListener(setChannels);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const actions = {};
+
+  return { state, actions };
+}
+

app/client/mobile/src/context/useAppContext.hook.ts

@@ -3,7 +3,7 @@ import {DatabagSDK, Session} from 'databag-client-sdk';
 import {SessionStore} from '../SessionStore';
 import {NativeCrypto} from '../NativeCrypto';
 import {LocalStore} from '../LocalStore';
-const DATABAG_DB = 'db_v215.db';
+const DATABAG_DB = 'db_v217.db';
 const SETTINGS_DB = 'ls_v001.db';
 
 const databag = new DatabagSDK(

app/client/mobile/src/session/Session.tsx

@@ -4,6 +4,7 @@ import {styles} from './Session.styled';
 import {IconButton, Surface, Text} from 'react-native-paper';
 import {Settings} from '../settings/Settings';
 import {Contacts} from '../contacts/Contacts';
+import {Content} from '../content/Content';
 import {Registry} from '../registry/Registry';
 import {Profile, ContactParams} from '../profile/Profile';
 import {Details} from '../details/Details';
@@ -22,6 +23,7 @@ const ProfileDrawer = createDrawerNavigator();
 const DetailsDrawer = createDrawerNavigator();
 
 const ContactStack = createStackNavigator();
+const ContentStack = createStackNavigator();
 
 export function Session() {
   const {state} = useSession();
@@ -150,7 +152,7 @@ function ContentTab({scheme}: {scheme: string}) {
     <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
       <ContactStack.Navigator initialRouteName="contacts" screenOptions={{headerShown: false}}>
         <ContactStack.Screen name="content" options={{headerBackTitleVisible: false}}>
-          {() => <Text>CONTENT</Text>}
+          {() => <Content />}
         </ContactStack.Screen>
       </ContactStack.Navigator>
     </NavigationContainer>
@@ -340,7 +342,7 @@ function HomeScreen({nav}) {
           <Identity openSettings={nav.settings.openDrawer} openContacts={nav.contacts.openDrawer} />
         </Surface>
         <Surface style={styles.channels} elevation={1} mode="flat">
-          <Text>CHANNELS</Text>
+          <Content />
         </Surface>
       </View>
       <View style={styles.right}>

app/sdk/src/net/getChannels.ts

@@ -4,7 +4,6 @@ import { ChannelEntity } from '../entities';
 export async function getChannels(node: string, secure: boolean, token: string, revision: number, types: string[]): Promise<ChannelEntity[]> {
   const params = (revision ? `&revision=${revision}` : '') + `&types=${encodeURIComponent(JSON.stringify(types))}`;
   const endpoint = `http${secure ? 's' : ''}://${node}/content/channels?agent=${token}${params}`;
-console.log("CHANNELS", endpoint);
   const channels = await fetchWithTimeout(endpoint, { method: 'GET' });
   checkResponse(channels.status);
   return await channels.json();

app/sdk/src/stream.ts

@@ -91,8 +91,6 @@ export class StreamModule {
           const nextRev = this.nextRevision;
           try {
             const delta = await getChannels(node, secure, token, this.revision, channelTypes);
-console.log("DELTA:" ,delta);
-
             for (const entity of delta) {
               const { id, revision, data } = entity;
               if (data) {
@@ -195,6 +193,7 @@ console.log("DELTA:" ,delta);
   public addChannelListener(ev: (arg: { channels: Channel[], cardId: string | null }) => void): void {
     this.emitter.on('channel', ev);
     const channels = Array.from(this.channelEntries, ([channelId, entry]) => entry.channel);
+console.log("EMIT ON ADD", channels.length);
     ev({ channels, cardId: null });
   }
 
@@ -204,10 +203,16 @@ console.log("DELTA:" ,delta);
 
   private emitChannels() {
     const channels = Array.from(this.channelEntries, ([channelId, entry]) => entry.channel);
+console.log("EMIT", channels.length);
     this.emitter.emit('channel', { channels, cardId: null });
   } 
 
-  public async close(): Promise<void> {}
+  public async close(): Promise<void> {
+    this.closing = true;
+    while (this.syncing) { 
+      await new Promise((r) => setTimeout(r, CLOSE_POLL_MS));
+    }
+  }
 
   public async setRevision(rev: number): Promise<void> {
     this.nextRevision = rev;