added missing component

app/mobile/src/session/conversation/topicItem/TopicItem.jsx

@@ -0,0 +1,21 @@
+import { View, Text, TouchableOpacity } from 'react-native';
+import { useTopicItem } from './useTopicItem.hook';
+import { styles } from './TopicItem.styled';
+import { Logo } from 'utils/Logo';
+
+export function TopicItem({ item }) {
+
+  const { state, actions } = useTopicItem(item);
+
+  return (
+    <View style={styles.item}>
+      <View style={styles.header}>
+        <Logo src={state.logo} width={28} height={28} radius={6} />
+        <Text style={styles.name}>{ state.name }</Text>
+        <Text style={styles.timestamp}>{ state.timestamp }</Text>
+      </View>
+      <Text style={styles.message}>{ state.message }</Text>
+    </View>
+  );
+}
+

app/mobile/src/session/conversation/topicItem/TopicItem.styled.js

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  item: {
+    borderTopWidth: 1,
+    borderColor: Colors.white,
+    paddingTop: 8,
+    paddingBottom: 8,
+  },
+  header: {
+    display: 'flex',
+    flexDirection: 'row',
+    paddingLeft: 16,
+  },
+  name: {
+    paddingLeft: 8,
+  },
+  timestamp: {
+    paddingLeft: 8,
+  },
+  message: {
+    paddingLeft: 52,
+  },
+})
+

app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js

@@ -0,0 +1,100 @@
+import { useState, useEffect, useContext } from 'react';
+import { CardContext } from 'context/CardContext';
+import { ProfileContext } from 'context/ProfileContext';
+
+export function useTopicItem(item) {
+
+  const [state, setState] = useState({
+    name: null,
+    known: null,
+    logo: null,
+    timestamp: null,
+    message: null,
+  });
+
+  const profile = useContext(ProfileContext);
+  const card = useContext(CardContext);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {
+    const { topicId, detail } = item;
+    const { guid, data, status, transform } = detail;
+
+    let name, known, logo;
+    const identity = profile.state?.profile;
+    if (guid === identity.guid) {
+      known = true;
+      if (identity.name) {
+        name = identity.name;
+      }
+      else {
+        name = `${identity.handle}@${identity.node}`;
+      }
+      const img = profile.actions.getImageUrl();
+      if (img) {
+        logo = img;
+      }
+      else {
+        logo = 'avatar';
+      }
+    }
+    else {
+      const contact = card.actions.getByGuid(guid);
+      if (contact) {
+        if (contact.profile.imageSet) {
+          logo = card.actions.getCardLogo(contact.cardId, contact.revision);
+        }
+        else {
+          logo = 'avatar';
+        }
+
+        known = true;
+        if (contact.profile.name) {
+          name = contact.profile.name;
+        }
+        else {
+          name = `${contact.handle}@${contact.node}`;
+        }
+      }
+      else {
+        name = "unknown";
+        known = false;
+        logo = 'avatar';
+      }
+    }
+
+    let message;
+    try {
+      const data = JSON.parse(item.detail.data);
+      message = data.text;
+    }
+    catch (err) {
+      console.log("empty message");
+    }
+
+    let timestamp;
+    const date = new Date(item.detail.created * 1000);
+    const now = new Date();
+    const offset = now.getTime() - date.getTime();
+    if(offset < 86400000) {
+      timestamp = date.toLocaleTimeString([], {hour: 'numeric', minute:'2-digit'});
+    }
+    else if (offset < 31449600000) {
+      timestamp = date.toLocaleDateString("en-US", {day: 'numeric', month:'numeric'});
+    }
+    else {
+      timestamp = date.toLocaleDateString("en-US");
+    }
+
+    updateState({ logo, name, known, message, timestamp });
+  }, [card, item]);
+
+  const actions = {
+  };
+
+  return { state, actions };
+}
+