rendering topic settings

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

@@ -3,6 +3,7 @@ import { StoreContext } from 'context/StoreContext';
 import { CardContext } from 'context/CardContext';
 import { ChannelContext } from 'context/ChannelContext';
 import { ProfileContext } from 'context/ProfileContext';
+import moment from 'moment';
 
 export function useConversationContext() {
   const [state, setState] = useState({
@@ -11,6 +12,8 @@ export function useConversationContext() {
     revision: null,
     contacts: [],
     topics: new Map(),
+    createed: null,
+    host: null,
   });
   const store = useContext(StoreContext);
   const card = useContext(CardContext);
@@ -208,6 +211,20 @@ export function useConversationContext() {
     let logo = null;
     let subject = null;
 
+    let timestamp;
+    const date = new Date(item.detail.created * 1000);
+    const now = new Date();
+    const offset = now.getTime() - date.getTime();
+    if(offset < 86400000) {
+      timestamp = moment(date).format('h:mma');
+    }
+    else if (offset < 31449600000) {
+      timestamp = moment(date).format('M/DD');
+    }
+    else {
+      timestamp = moment(date).format('M/DD/YYYY');
+    }
+
     if (!item) {
       updateState({ contacts, logo, subject });
       return;
@@ -267,7 +284,7 @@ export function useConversationContext() {
       }
     }
 
-    updateState({ subject, logo, contacts });
+    updateState({ subject, logo, contacts, host: item.cardId, created: timestamp });
   }
 
   useEffect(() => {

app/mobile/src/session/Session.jsx

@@ -71,6 +71,7 @@ export function Session() {
 
     return (
       <ConversationStack.Navigator
+          initialRouteName="channels"
           screenOptions={({ route }) => ({ headerShown: true, headerTintColor: Colors.primary })}
           screenListeners={{ state: (e) => { if (e?.data?.state?.index === 0 && selected) { setSelected(null); }}, }}>
         <ConversationStack.Screen name="channels" options={{
@@ -124,7 +125,8 @@ export function Session() {
     const cards = useCards();
 
     return (
-      <ContactStack.Navigator screenOptions={({ route }) => ({ headerShow: true, headerTintColor: Colors.primary })}>
+      <ContactStack.Navigator screenOptions={({ route }) => ({ headerShow: true, headerTintColor: Colors.primary })}
+          initialRouteName="cards">
         <ContactStack.Screen name="cards" options={{
             headerStyle: { backgroundColor: Colors.titleBackground }, 
             headerBackTitleVisible: false, 

app/mobile/src/session/details/Details.jsx

@@ -1,15 +1,34 @@
 import { View, Text, TouchableOpacity } from 'react-native';
 import { styles } from './Details.styled';
+import { useDetails } from './useDetails.hook';
+import { Logo } from 'utils/Logo';
+import Ionicons from '@expo/vector-icons/AntDesign';
+import Colors from 'constants/Colors';
 
-export function DetailsHeader({ channel }) {
+export function DetailsHeader() {
-  return <Text style={styles.title}>Details</Text>
+  return <Text style={styles.title}>Topic Settings</Text>
 }
 
 export function DetailsBody({ channel, clearConversation }) {
+
+  const { state, actions } = useDetails();
+
+console.log(state);
+
   return (
-    <TouchableOpacity onPress={clearConversation}>
+    <View style={styles.details}>
-      <Text>CLEAR</Text>
+      <Logo src={state.logo} width={72} height={72} radius={8} />
-    </TouchableOpacity>
+      <View style={styles.info}>
+        <View style={styles.subject}>
+          <Text style={styles.subject}>{ state.subject }</Text>
+          { state.mode === 'host' && (
+            <Ionicons name="edit" size={16} color={Colors.text} />
+          )}
+        </View>
+        <Text style={styles.created}>{ state.created }</Text>
+        <Text style={styles.mode}>{ state.mode }</Text>
+      </View>  
+    </View>
   )
 }
 
@@ -17,15 +36,7 @@ export function Details({ channel, clearConversation }) {
   return (
     <View>
       <Text>DETAILS</Text>
-      { channel && (
+      <DetailsBody channel={channel} clearConversation={clearConversation} />
-        <>
-          <Text>{ channel.cardId }</Text>
-          <Text>{ channel.channelId }</Text>
-        </>
-      )}
-      <TouchableOpacity onPress={clearConversation}>
-        <Text>CLEAR</Text>
-      </TouchableOpacity>
     </View>
   )
 }

app/mobile/src/session/details/Details.styled.js

@@ -2,27 +2,34 @@ import { StyleSheet } from 'react-native';
 import { Colors } from 'constants/Colors';
 
 export const styles = StyleSheet.create({
-  container: {
+  details: {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    borderLeftWidth: 1,
-    borderColor: Colors.divider,
-  },
-  header: {
-    width: '100%',
     display: 'flex',
     flexDirection: 'row',
-    borderBottomWidth: 1,
+    justifyContent: 'center',
-    borderColor: Colors.divider,
+    paddingTop: 16,
-    padding: 8,
   },
-  body: {
+  info: {
-    width: '100%',
+    paddingLeft: 8,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  subject: {
+    fontSize: 18,
+    display: 'flex',
+    flexDirection: 'row',
+    paddingRight: 8,
+    color: Colors.text,
+  },
+  created: {
+    fontSize: 16,
+    color: Colors.text,
+  },
+  mode: {
+    fontSize: 16,
+    color: Colors.text,
   },
   title: {
-    fontSize: 18,
+    fontSize: 20,
-  },
+  }
 })
 

app/mobile/src/session/details/useDetails.hook.js

@@ -0,0 +1,31 @@
+import { useState, useEffect, useRef, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ConversationContext } from 'context/ConversationContext';
+
+export function useDetails() {
+
+  const [state, setState] = useState({
+    subject: null,
+    created: null,
+    logo: null,
+    mode: null,
+  });
+
+  const conversation = useContext(ConversationContext);
+  const navigate = useNavigate();
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {
+    const { subject, created, logo, host } = conversation.state;
+    updateState({ subject, created, logo, mode: host ? 'guest' : 'host' });
+  }, [conversation]);
+
+  const actions = {
+  };
+
+  return { state, actions };
+}
+