Merge pull request #116 from xmtp-labs/saulmc/simplify-convolist

Simplify the main convo list view
ephemeraHQ · May 31, 2024 · 84b8e13 · 84b8e13
2 parents 8594ab5 + b923392
commit 84b8e13
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 144 deletions.
diff --git a/src/components/ConversationListHeader.tsx b/src/components/ConversationListHeader.tsx
@@ -2,15 +2,13 @@ import {Box, HStack, VStack} from 'native-base';
 import React, {FC, useCallback} from 'react';
 import {Pressable} from 'react-native';
 import {AvatarWithFallback} from '../components/AvatarWithFallback';
-import {Button} from '../components/common/Button';
 import {Icon} from '../components/common/Icon';
 import {Text} from '../components/common/Text';
 import {useAddress} from '../hooks/useAddress';
 import {useContactInfo} from '../hooks/useContactInfo';
 import {useTypedNavigation} from '../hooks/useTypedNavigation';
 import {translate} from '../i18n';
 import {ScreenNames} from '../navigation/ScreenNames';
-import {colors} from '../theme/colors';
 
 export interface ConversationListHeaderProps {
   list: 'ALL_MESSAGES' | 'MESSAGE_REQUESTS';
@@ -19,24 +17,18 @@ export interface ConversationListHeaderProps {
   onShowMessageRequests: () => void;
 }
 
-export const ConversationListHeader: FC<ConversationListHeaderProps> = ({
-  list,
-  showPickerModal,
-  messageRequestCount,
-  onShowMessageRequests,
-}) => {
+export const ConversationListHeader: FC<ConversationListHeaderProps> = () => {
   const {navigate} = useTypedNavigation();
   const {address} = useAddress();
   const {avatarUrl} = useContactInfo(address);
 
+  const handleNewMessagePress = useCallback(() => {
+    navigate(ScreenNames.Search);
+  }, [navigate]);
+
   const handleAccountPress = useCallback(() => {
     navigate(ScreenNames.Account);
   }, [navigate]);
-  const navigateToDev = useCallback(() => {
-    if (__DEV__) {
-      navigate(ScreenNames.Dev);
-    }
-  }, [navigate]);
   return (
     <VStack marginTop={'4px'}>
       <HStack
@@ -52,92 +44,15 @@ export const ConversationListHeader: FC<ConversationListHeaderProps> = ({
             size={40}
           />
         </Pressable>
-        <Box
-          borderRadius={'24px'}
-          zIndex={10}
-          paddingX={'16px'}
-          paddingY={'8px'}
-          backgroundColor={'white'}
-          shadow={4}>
-          <Box>
-            <Button
-              onLongPress={navigateToDev}
-              _pressed={{backgroundColor: 'transparent'}}
-              size={'sm'}
-              variant={'ghost'}
-              leftIcon={
-                <Icon
-                  name="chat-bubble-oval-left"
-                  size={16}
-                  type="mini"
-                  color="#0F172A"
-                />
-              }
-              rightIcon={
-                <Icon
-                  name="chevron-down-thick"
-                  size={16}
-                  type="mini"
-                  color="#0F172A"
-                />
-              }
-              onPress={showPickerModal}>
-              <Text typography="text-sm/heavy">
-                {list === 'ALL_MESSAGES'
-                  ? translate('all_messages')
-                  : translate('message_requests')}
-              </Text>
-            </Button>
-          </Box>
+        <Text typography="text-lg/heavy" textAlign={'center'}>
+          {translate('group_chats')}
+        </Text>
+        <Box>
+          <Pressable onPress={handleNewMessagePress}>
+            <Icon name="plus-circle" size={40} color={'#4F46E5'} />
+          </Pressable>
         </Box>
-        <Box width={10} />
       </HStack>
-      {list === 'MESSAGE_REQUESTS' ? (
-        <Box
-          backgroundColor={colors.actionAlertBG}
-          paddingY={'8px'}
-          paddingX={'16px'}>
-          <Text
-            typography="text-caption/regular"
-            textAlign={'center'}
-            color={colors.actionAlertText}>
-            {translate('message_requests_from_new_addresses')}
-          </Text>
-        </Box>
-      ) : messageRequestCount > 0 ? (
-        <Pressable onPress={onShowMessageRequests}>
-          <HStack
-            backgroundColor={colors.actionPrimary}
-            padding={'8px'}
-            borderRadius={'8px'}
-            alignItems={'center'}
-            marginX={'16px'}>
-            <Box paddingLeft={'8px'} paddingRight={'16px'}>
-              <Icon name="inbox-arrow-down" color={colors.actionPrimaryText} />
-            </Box>
-            <Text
-              flex={1}
-              color={colors.actionPrimaryText}
-              typography="text-xs/bold">
-              {translate('message_requests_count', {
-                count: String(messageRequestCount),
-              })}
-            </Text>
-            <Box
-              paddingLeft={'8px'}
-              paddingRight={'16px'}
-              justifyContent={'flex-end'}>
-              <Icon
-                name="chevron-right-thick"
-                size={16}
-                color={colors.actionPrimaryText}
-              />
-            </Box>
-          </HStack>
-        </Pressable>
-      ) : (
-        <Box />
-      )}
     </VStack>
   );
 };
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -8,7 +8,6 @@
   "create_new_wallet": "Create new wallet",
   "you": "You",
   "search": "Search",
-
   "youve_got_no_messages": "You’ve got no messages",
   "start_a_conversation_to_get_going": "Start a conversation to get going!",
   "filter_conversations": "Filter conversations",
@@ -19,42 +18,32 @@
   "no": "No",
   "yes": "Yes",
   "start": "Start",
-
   "recents": "Recents",
   "contacts": "Contacts",
-
   "your_interoperable_web3_inbox": "Your interoperable web3 inbox",
   "youre_just_a_few_steps_away_from_secure_wallet_to_wallet_messaging": "You're just a few steps away from secure, wallet-to-wallet messaging",
   "connect_your_wallet": "Connect your wallet",
   "you_can_connect_or_create": "You can connect or create a wallet via Wallet Connect.",
   "whats_a_wallet": "What's a wallet?",
   "no_private_keys_will_be_shared": "No private keys will be shared",
-
   "step_1_of_2": "Step 1 of 2",
   "create_your_xmtp_identity": "Create your XMTP identity",
   "now_that_your_wallet_is_connected": "Now that your wallet is connected, we’re going to create your XMTP identity on our network with a wallet signature.",
   "create_xmtp_identity": "Create XMTP identity",
   "step_2_of_2": "Step 2 of 2",
-
   "domain_origin": "Domain origin",
-
   "copy_your_code": "Copy your code",
-
   "allow": "Allow",
   "block": "Block",
-
   "yesterday": "Yesterday",
-
   "conversation_image_alt": "Attached Image",
-
   "walletconnect": "WalletConnect",
   "metamask": "Metamask",
   "coinbase_wallet": "Coinbase Wallet",
   "guest_wallet": "Guest Wallet",
   "group_changed": "Group Changed",
   "add_to_group": "Add",
   "group": "Group",
-
   "dev_screen": "Dev Screen",
   "client": "Client",
   "address": "Address",
@@ -66,11 +55,9 @@
   "get_groups": "Get Groups",
   "get_contacts": "Get Contacts",
   "group_name": "Group Name",
-
   "valid_address": "Valid Ethereum Address",
   "message_requests_from_new_addresses": "Message requests from addresses you’ve never interacted with show up here",
   "not_on_xmtp_group": "User can't be added to group because they are not on XMTP Group network",
-
   "wallet_error": "Wallet Error",
   "group_add_single": "%{initiatedByAddress} added %{address}",
   "group_add_plural": "%{initiatedByAddress} added %{addressCount} members",
@@ -79,7 +66,7 @@
   "error_group_remove": "An error occurred removing from group",
   "error_group_adding": "An error occurred adding to group",
   "reply": "Reply",
-
   "conversation_replying_to": "Replying to %{name}",
-  "replied_to": "Replied to an earlier message"
-}
+  "replied_to": "Replied to an earlier message",
+  "group_chats": "Group Chats"
+}
diff --git a/src/screens/ConversationListScreen.tsx b/src/screens/ConversationListScreen.tsx
@@ -1,6 +1,5 @@
-import {useIsFocused} from '@react-navigation/native';
 import {Group} from '@xmtp/react-native-sdk';
-import {Box, Center, Fab, FlatList, HStack, VStack} from 'native-base';
+import {Box, Center, FlatList, HStack, VStack} from 'native-base';
 import React, {useCallback, useMemo, useState} from 'react';
 import {ListRenderItem, Pressable} from 'react-native';
 import {ConversationListHeader} from '../components/ConversationListHeader';
@@ -14,9 +13,7 @@ import {AppConfig} from '../consts/AppConfig';
 import {SupportedContentTypes} from '../consts/ContentTypes';
 import {TestIds} from '../consts/TestIds';
 import {useClient} from '../hooks/useClient';
-import {useTypedNavigation} from '../hooks/useTypedNavigation';
 import {translate} from '../i18n';
-import {ScreenNames} from '../navigation/ScreenNames';
 import {useListQuery} from '../queries/useListQuery';
 import {mmkvStorage} from '../services/mmkvStorage';
 import {colors} from '../theme/colors';
@@ -74,7 +71,6 @@ export const ConversationListScreen = () => {
   );
   const [showPickerModal, setShowPickerModal] = useState(false);
   const [showConsentDrawer, setShowConsentDrawer] = useState(false);
-  const focused = useIsFocused();
   const {
     messages,
     messageRequests,
@@ -83,14 +79,10 @@ export const ConversationListScreen = () => {
     refetch,
     isRefetching,
   } = useData();
-  const {navigate} = useTypedNavigation();
 
   const showPicker = () => {
     setShowPickerModal(true);
   };
-  const handleNewMessagePress = useCallback(() => {
-    navigate(ScreenNames.Search);
-  }, [navigate]);
 
   const handleFilterPress = useCallback(
     (type: 'ALL_MESSAGES' | 'MESSAGE_REQUESTS') => {
@@ -152,26 +144,6 @@ export const ConversationListScreen = () => {
           renderItem={renderItem}
           ListFooterComponent={<Box height={50} />}
         />
-        {!showPickerModal && focused && (
-          <Fab
-            testID={TestIds.CONVERSATION_LIST_NEW_BUTTON}
-            position="absolute"
-            size="sm"
-            right={27}
-            bottom={24}
-            height={'48px'}
-            width={'48px'}
-            backgroundColor={'#4F46E5'}
-            onPress={handleNewMessagePress}
-            icon={
-              <Icon
-                name="plus-thick"
-                size={28}
-                color={colors.actionPrimaryText}
-              />
-            }
-          />
-        )}
       </Screen>
       <Drawer
         title={translate('filter_conversations')}

diff --git a/src/screens/DevScreen.tsx b/src/screens/DevScreen.tsx
@@ -37,7 +37,9 @@ const RequestItem: FC<RequestItemProps> = ({title, request}) => {
     return JSON.stringify(data, (key, value) => {
       if (typeof value === 'object' && value !== null) {
         // Duplicate reference found, discard key
-        if (cache.includes(value)) return;
+        if (cache.includes(value)) {
+          return;
+        }
 
         // Store value in our collection
         cache.push(value);
@@ -73,7 +75,9 @@ const DataItem: FC<DataItemProps> = ({title, data}) => {
     return JSON.stringify(data, (key, value) => {
       if (typeof value === 'object' && value !== null) {
         // Duplicate reference found, discard key
-        if (cache.includes(value)) return;
+        if (cache.includes(value)) {
+          return;
+        }
 
         // Store value in our collection
         cache.push(value);