Skip to content

Commit

Permalink
Simplify the main convo list view
Browse files Browse the repository at this point in the history
  • Loading branch information
@saulmc
saulmc committed May 31, 2024
1 parent 6a35be0 commit 955cbb8
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 88 deletions.
116 changes: 65 additions & 51 deletions src/components/ConversationListHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -29,6 +27,10 @@ export const ConversationListHeader: FC<ConversationListHeaderProps> = ({
const {address} = useAddress();
const {avatarUrl} = useContactInfo(address);

const handleNewMessagePress = useCallback(() => {
navigate(ScreenNames.Search);
}, [navigate]);

const handleAccountPress = useCallback(() => {
navigate(ScreenNames.Account);
}, [navigate]);
Expand All @@ -52,13 +54,12 @@ export const ConversationListHeader: FC<ConversationListHeaderProps> = ({
size={40}
/>
</Pressable>
<Box
{/* <Box
borderRadius={'24px'}
zIndex={10}
paddingX={'16px'}
paddingY={'8px'}
backgroundColor={'white'}
shadow={4}>
>
<Box>
<Button
onLongPress={navigateToDev}
Expand Down Expand Up @@ -88,56 +89,69 @@ export const ConversationListHeader: FC<ConversationListHeaderProps> = ({
: translate('message_requests')}
</Text>
</Button>
</Box>
</Box> }
</Box> */}
<Text typography="text-lg/heavy" textAlign={'center'}>
{translate('group_chats')}
</Text>
<Box>
<Pressable onPress={handleNewMessagePress}>
<Icon

Check failure on line 99 in src/components/ConversationListHeader.tsx

View workflow job for this annotation

GitHub Actions / lint 

Replace `⏎··············name="plus-circle"⏎··············size={40}⏎··············color={"#4F46E5"}⏎···········` with `·name="plus-circle"·size={40}·color={'#4F46E5'}`
name="plus-circle"
size={40}
color={"#4F46E5"}

Check warning on line 102 in src/components/ConversationListHeader.tsx

View workflow job for this annotation

GitHub Actions / lint 

Strings must use singlequote
/>
</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>
{/* {
list === 'MESSAGE_REQUESTS' ? (
<Box
backgroundColor={colors.actionAlertBG}
paddingY={'8px'}
paddingX={'16px'}>
<Text
flex={1}
color={colors.actionPrimaryText}
typography="text-xs/bold">
{translate('message_requests_count', {
count: String(messageRequestCount),
})}
typography="text-caption/regular"
textAlign={'center'}
color={colors.actionAlertText}>
{translate('message_requests_from_new_addresses')}
</Text>
<Box
paddingLeft={'8px'}
paddingRight={'16px'}
justifyContent={'flex-end'}>
<Icon
name="chevron-right-thick"
size={16}
</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}
/>
</Box>
</HStack>
</Pressable>
) : (
<Box />
)}
</VStack>
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 >

Check failure on line 155 in src/components/ConversationListHeader.tsx

View workflow job for this annotation

GitHub Actions / lint 

Delete `·`
);
};
19 changes: 3 additions & 16 deletions src/i18n/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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"
}
22 changes: 1 addition & 21 deletions src/screens/ConversationListScreen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
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';
Expand Down Expand Up @@ -152,26 +152,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')}
Expand Down

0 comments on commit 955cbb8

Please sign in to comment.