rendering subject and message

app/mobile/src/context/useAppContext.hook.js

@@ -95,8 +95,8 @@ export function useAppContext() {
         try {
           profile.actions.setRevision(rev.profile);
           account.actions.setRevision(rev.account);
-          card.actions.setRevision(rev.channel);
-          channel.actions.setRevision(rev.card);
+          channel.actions.setRevision(rev.channel);
+          card.actions.setRevision(rev.card);
         }
         catch(err) {
           console.log(err);

app/mobile/src/context/useChannelContext.hook.js

@@ -43,7 +43,7 @@ export function useChannelContext() {
     if (channel) {
       channel.summary = summary;
       channel.topicRevision = revision;
-      channels.curent.set(channelId, channel);
+      channels.current.set(channelId, channel);
     }
   }
   const setChannelRevision = (channelId, revision) => {
@@ -64,6 +64,7 @@ export function useChannelContext() {
         const { server, appToken, guid } = session.current;
 
         const delta = await getChannels(server, appToken, setRevision.current);
+console.log(delta);
         for (let channel of delta) {
           if (channel.data) {
             if (channel.data.channelDetail && channel.data.channelSummary) {
@@ -138,6 +139,7 @@ export function useChannelContext() {
       updateState({ account: null, channels: channels.current });
     },
     setRevision: (rev) => {
+console.log("CHANNEL REVISION:", rev);
       curRevision.current = rev;
       sync();
     },

app/mobile/src/session/channels/Channels.jsx

@@ -3,12 +3,10 @@ import { FlatList, ScrollView, View, TextInput, TouchableOpacity, Text } from 'r
 import { styles } from './Channels.styled';
 import { useChannels } from './useChannels.hook';
 import Ionicons from '@expo/vector-icons/AntDesign';
-import { ChannelItem } from './channelItem/ChannelItem';
+import { MemoizedChannelItem } from './channelItem/ChannelItem';
 
 export function Channels() {
-
   const { state, actions } = useChannels();
-
   return (
     <View style={styles.container}>
       <View style={styles.inputwrapper}>
@@ -19,7 +17,7 @@ export function Channels() {
       </View>
       <FlatList style={styles.channels}
         data={state.channels}
-        renderItem={({ item }) => <ChannelItem item={item} />}
+        renderItem={({ item }) => <MemoizedChannelItem item={item} />}
         keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
       />
     </View>

app/mobile/src/session/channels/channelItem/ChannelItem.jsx

@@ -1,7 +1,18 @@
-import { Text } from 'react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
+import React from 'react';
 import { Logo } from 'utils/Logo';
+import { styles } from './ChannelItem.styled';
 
 export function ChannelItem({ item }) {
-  return <Logo src={item.logo} width={32} height={32} />
+  return (
+    <TouchableOpacity style={styles.container} activeOpacity={1}>
+      <Logo src={item.logo} width={40} height={40} radius={6} />
+      <View style={styles.detail}>
+        <Text style={styles.subject} numberOfLines={1} ellipsizeMode={'tail'}>{ item.subject }</Text>
+        <Text style={styles.message} numberOfLines={1} ellipsizeMode={'tail'}>{ item.message }</Text>
+      </View>
+    </TouchableOpacity>
+  )
 }
 
+export const MemoizedChannelItem = React.memo(ChannelItem);

app/mobile/src/session/channels/useChannels.hook.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext } from 'react';
+import { useState, useEffect, useRef, useContext } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { useNavigate } from 'react-router-dom';
 import { CardContext } from 'context/CardContext';
@@ -12,6 +12,7 @@ export function useChannels() {
     channels: []
   });
 
+  const items = useRef([]);
   const channel = useContext(ChannelContext);
   const card = useContext(CardContext);
 
@@ -53,16 +54,50 @@ export function useChannels() {
       logo = 'appstore';
     }
 
+    let subject = null;
+    if (item?.detail?.data) {
+      try {
+        subject = JSON.parse(item?.detail?.data).subject;
+      }
+      catch (err) {
+        console.log(err);
+      }
+    }
+    if (!subject) {
+      if (contacts.length) {
+        let names = [];
+        for (let contact of contacts) {
+          names.push(contact?.profile?.handle);
+        }
+        subject = names.join(', ');
+      }
+      else {
+        subject = "Notes";
+      }
+    }
+
+    let message;
+    if (item?.summary?.lastTopic?.dataType === 'superbasictopic') {
+      try {
+        message = JSON.parse(item.summary.lastTopic.data).text;
+      }
+      catch (err) {
+        console.log(err);
+      }
+    }
+
     return {
       channelId: item.channelId,
       contacts: contacts,
       logo: logo,
+      subject: subject,
+      message: message,
     }
   }
 
   useEffect(() => {
     const channels = Array.from(channel.state.channels.values()).map(item => setChannelEntry(item));
-    updateState({ channels });
+    updateState({ channels: channels });
   }, [channel, card]);
 
   const actions = {

app/mobile/src/utitls/Logo.jsx

@@ -6,7 +6,7 @@ import team from 'images/team.png';
 
 export function Logo({ src, width, height, radius }) {
   return (
-    <View style={{ borderRadius: radius, overflow: 'hidden' }}>
+    <View style={{ borderRadius: radius, overflow: 'hidden', width, height }}>
       { src === 'team' && (
         <Image source={team} style={{ width, height }} />
       )}