Merge pull request #56 from xmtp-labs/ar/remove-v2

Remove V2

src/components/ConversationListItem.tsx

@@ -15,6 +15,11 @@ interface ConversationListItemProps {
   lastMessageTime: number;
 }
 
+/**
+ *
+ * @deprecated only leaving v3 for now
+ *
+ */
 export const ConversationListItem: FC<ConversationListItemProps> = ({
   conversation,
   display,
@@ -26,8 +31,8 @@ export const ConversationListItem: FC<ConversationListItemProps> = ({
   return (
     <Pressable
       onPress={() => {
-        navigate(ScreenNames.Conversation, {
-          topic: conversation.topic,
+        navigate(ScreenNames.Group, {
+          id: conversation.topic,
         });
       }}>
       <HStack space={[2, 3]} alignItems={'center'} w={'100%'} padding={'16px'}>

src/hooks/useListMessages.ts

@@ -1,13 +1,6 @@
 import {useQueryClient} from '@tanstack/react-query';
 import {useEffect} from 'react';
-import {DeviceEventEmitter} from 'react-native';
-import {ContentTypes} from '../consts/ContentTypes';
-import {EventEmitterEvents} from '../consts/EventEmitters';
-import {
-  ListConversation,
-  ListGroup,
-  ListMessages,
-} from '../models/ListMessages';
+import {ListMessages} from '../models/ListMessages';
 import {QueryKeys} from '../queries/QueryKeys';
 import {useListQuery} from '../queries/useListQuery';
 import {useClient} from './useClient';
@@ -16,127 +9,34 @@ export const useListMessages = () => {
   const {client} = useClient();
   const queryClient = useQueryClient();
 
-  useEffect(() => {
-    const startStream = () => {
-      if (!client) {
-        return;
-      }
-      client.conversations.streamAllMessages(async message => {
-        const topic = message.topic;
-        const content = message.content();
-        const messageStringContent =
-          typeof content === 'string' ? content : message.fallback ?? '';
-        queryClient.setQueryData<ListMessages>(
-          [QueryKeys.List, client?.address],
-          prev => {
-            const existingConversation = prev?.find(it => {
-              return 'conversation' in it && it.conversation.topic === topic;
-            });
-            // Handle existing conversations here, new conversations handled in stream
-            if (existingConversation) {
-              const data = prev?.map(it => {
-                if ('conversation' in it && it.conversation.topic === topic) {
-                  if ('conversation' in existingConversation) {
-                    const newIt: ListConversation = {
-                      conversation: existingConversation.conversation,
-                      display: messageStringContent,
-                      lastMessageTime: message.sent,
-                      isRequest: it.isRequest,
-                    };
-                    return newIt;
-                  }
-                }
-                return it;
-              });
-              return data;
-            } else {
-              const existingGroup = prev?.find(it => {
-                return 'group' in it && it.group.id === topic;
-              });
-              if (existingGroup) {
-                if (
-                  message.contentTypeId === ContentTypes.GroupMembershipChange
-                ) {
-                  DeviceEventEmitter.emit(
-                    `${EventEmitterEvents.GROUP_CHANGED}_${topic}`,
-                  );
-                }
-                const data = prev?.map(it => {
-                  if ('group' in it && it.group.id === topic) {
-                    if ('group' in existingGroup) {
-                      const newIt: ListGroup = {
-                        group: existingGroup.group,
-                        display: messageStringContent,
-                        lastMessageTime: message.sent,
-                        isRequest: it.isRequest,
-                      };
-                      return newIt;
-                    }
-                  }
-                  return it;
-                });
-                return data;
-              } else {
-                return prev;
-              }
-            }
-          },
-        );
-      });
-    };
-
-    startStream();
-
-    return () => {
-      client?.conversations.cancelStreamAllMessages();
-    };
-  }, [client, queryClient]);
-
-  useEffect(() => {
-    const startStream = () => {
-      if (!client) {
-        return;
-      }
-      client.conversations.stream(async newConversation => {
-        const [consent] = await Promise.all([newConversation.consentState()]);
-        const content = '';
-        queryClient.setQueryData<ListMessages>(
-          [QueryKeys.List, client?.address],
-          prev => {
-            return [
-              {
-                conversation: newConversation,
-                display: content,
-                lastMessageTime: Date.now(),
-                isRequest: consent !== 'allowed',
-              },
-              ...(prev ?? []),
-            ];
-          },
-        );
-      });
-    };
-
-    startStream();
-
-    return () => {
-      client?.conversations.cancelStream();
-    };
-  }, [client, queryClient]);
-
   useEffect(() => {
     const startStream = () => {
       if (!client) {
         return;
       }
       client.conversations.streamGroups(async newGroup => {
+        let content = '';
+        try {
+          const groupMessages = await newGroup.messages();
+          try {
+            const lastMessageContent = groupMessages[0]?.content();
+            content =
+              typeof lastMessageContent === 'string'
+                ? lastMessageContent
+                : groupMessages[0]?.fallback ?? '';
+          } catch (err) {
+            content = groupMessages[0]?.fallback ?? '';
+          }
+        } catch (err) {
+          content = '';
+        }
         queryClient.setQueryData<ListMessages>(
           [QueryKeys.List, client?.address],
           prev => {
             return [
               {
                 group: newGroup,
-                display: '',
+                display: content,
                 lastMessageTime: Date.now(),
                 isRequest: false,
               },

src/models/ListMessages.ts

@@ -7,6 +7,9 @@ export interface ListItem {
   isRequest: boolean;
 }
 
+/**
+ * @deprecated only leaving v3 for now
+ */
 export interface ListConversation extends ListItem {
   conversation: Conversation<any>;
 }
@@ -15,4 +18,4 @@ export interface ListGroup extends ListItem {
   group: Group<any>;
 }
 
-export type ListMessages = (ListConversation | ListGroup)[];
+export type ListMessages = ListGroup[];

src/navigation/AppNavigation.tsx

@@ -5,7 +5,6 @@ import {Platform} from 'react-native';
 import {useClientContext} from '../context/ClientContext';
 import {AccountSettingsScreen} from '../screens/AccountSettingsScreen';
 import {ConversationListScreen} from '../screens/ConversationListScreen';
-import {ConversationScreen} from '../screens/ConversationScreen';
 import {DevScreen} from '../screens/DevScreen';
 import {GroupScreen} from '../screens/GroupScreen';
 import {LoadingScreen} from '../screens/LoadingScreen';
@@ -79,10 +78,6 @@ export const AppNavigation = () => {
             name={ScreenNames.ConversationList}
             component={ConversationListScreen}
           />
-          <AuthenticatedStack.Screen
-            name={ScreenNames.Conversation}
-            component={ConversationScreen}
-          />
           <AuthenticatedStack.Screen
             name={ScreenNames.Group}
             component={GroupScreen}

src/navigation/ScreenNames.ts

@@ -8,7 +8,6 @@ export enum ScreenNames {
   // Auth Stack
   Account = 'account',
   ConversationList = 'conversation_list',
-  Conversation = 'conversation',
   Group = 'group',
   NewConversation = 'new_conversation',
   Search = 'search',

src/navigation/StackParams.ts

@@ -12,7 +12,6 @@ export type OnboardingStackParams = {
 export type AuthenticatedStackParams = {
   [ScreenNames.Account]: undefined;
   [ScreenNames.ConversationList]: undefined;
-  [ScreenNames.Conversation]: {topic: string};
   [ScreenNames.Group]: {id: string};
   [ScreenNames.NewConversation]: {addresses: string[]};
   [ScreenNames.Search]: undefined;

src/navigation/linkingDefinition.ts

@@ -10,7 +10,6 @@ export const linkingDefinition: LinkingOptions<RootStackParams> = {
       [ScreenNames.OnboardingEnableIdentity]: 'onboarding_enable_identity',
       [ScreenNames.Account]: 'account',
       [ScreenNames.ConversationList]: 'conversation_list',
-      [ScreenNames.Conversation]: 'conversation/:topic',
       [ScreenNames.NewConversation]: {
         path: 'new_conversation/:addresses',
         parse: {

src/screens/ConversationListScreen.tsx

@@ -4,7 +4,6 @@ import {Box, Center, Fab, FlatList, HStack, VStack} from 'native-base';
 import React, {FC, useCallback, useMemo, useState} from 'react';
 import {ListRenderItem, Pressable} from 'react-native';
 import {AvatarWithFallback} from '../components/AvatarWithFallback';
-import {ConversationListItem} from '../components/ConversationListItem';
 import {GroupListItem} from '../components/GroupListItem';
 import {Button} from '../components/common/Button';
 import {Drawer} from '../components/common/Drawer';
@@ -16,18 +15,13 @@ import {useClient} from '../hooks/useClient';
 import {useListMessages} from '../hooks/useListMessages';
 import {useTypedNavigation} from '../hooks/useTypedNavigation';
 import {translate} from '../i18n';
-import {
-  ListConversation,
-  ListGroup,
-  ListMessages,
-} from '../models/ListMessages';
+import {ListGroup, ListMessages} from '../models/ListMessages';
 import {ScreenNames} from '../navigation/ScreenNames';
 import {colors} from '../theme/colors';
 
 const EmptyBackground = require('../../assets/images/Bg_asset.svg').default;
 
-const keyExtractor = (item: ListConversation | ListGroup) =>
-  'conversation' in item ? item.conversation?.topic : item.group?.id ?? '';
+const keyExtractor = (item: ListGroup) => item.group?.id ?? '';
 
 const useData = () => {
   const {client} = useClient();
@@ -219,27 +213,15 @@ export const ConversationListScreen = () => {
     [],
   );
 
-  const renderItem: ListRenderItem<ListConversation | ListGroup> = useCallback(
-    ({item}) => {
-      if ('conversation' in item) {
-        return (
-          <ConversationListItem
-            conversation={item.conversation}
-            display={item.display}
-            lastMessageTime={item.lastMessageTime}
-          />
-        );
-      }
-      return (
-        <GroupListItem
-          group={item.group}
-          display={item.display}
-          lastMessageTime={item.lastMessageTime}
-        />
-      );
-    },
-    [],
-  );
+  const renderItem: ListRenderItem<ListGroup> = useCallback(({item}) => {
+    return (
+      <GroupListItem
+        group={item.group}
+        display={item.display}
+        lastMessageTime={item.lastMessageTime}
+      />
+    );
+  }, []);
 
   return (
     <>

src/screens/ConversationScreen.tsx

@@ -89,6 +89,11 @@ const getInitialConsentState = (address: string, peerAddress: string) => {
   return 'denied';
 };
 
+/**
+ *
+ * @deprecated This screen is not used anymore
+ * keeping it for reference in case we want UI of 1 to 1 chats to be different
+ */
 export const ConversationScreen = () => {
   const {params} = useRoute();
   const {topic} = params as {topic: string};