2023-01-13 11:51:30 +00:00
|
|
|
import * as React from 'react'
|
2023-01-14 14:52:10 +00:00
|
|
|
import { StyleSheet, View } from 'react-native'
|
2023-01-13 11:51:30 +00:00
|
|
|
import { DrawerContentScrollView } from '@react-navigation/drawer'
|
2023-01-14 20:35:35 +00:00
|
|
|
import {
|
|
|
|
Button,
|
|
|
|
Card,
|
|
|
|
Chip,
|
|
|
|
Drawer,
|
|
|
|
IconButton,
|
|
|
|
Text,
|
|
|
|
TouchableRipple,
|
|
|
|
useTheme,
|
|
|
|
} from 'react-native-paper'
|
2023-01-13 11:51:30 +00:00
|
|
|
import Logo from '../Logo'
|
|
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import { RelayPoolContext } from '../../Contexts/RelayPoolContext'
|
2023-01-14 20:35:35 +00:00
|
|
|
import { UserContext } from '../../Contexts/UserContext'
|
2023-01-15 14:22:02 +00:00
|
|
|
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
|
2023-01-14 14:52:10 +00:00
|
|
|
import { navigate } from '../../lib/Navigation'
|
|
|
|
import NostrosAvatar from '../Avatar'
|
|
|
|
import { formatPubKey } from '../../Functions/RelayFunctions/Users'
|
2023-01-13 11:51:30 +00:00
|
|
|
|
2023-01-15 14:22:02 +00:00
|
|
|
export const MenuItems: React.FC = () => {
|
2023-01-13 11:51:30 +00:00
|
|
|
const [drawerItemIndex, setDrawerItemIndex] = React.useState<number>(-1)
|
2023-01-14 20:35:35 +00:00
|
|
|
const { relays } = React.useContext(RelayPoolContext)
|
|
|
|
const { nPub, publicKey, user, contactsCount, followersCount, logout } =
|
|
|
|
React.useContext(UserContext)
|
2023-01-13 11:51:30 +00:00
|
|
|
const { t } = useTranslation('common')
|
|
|
|
const theme = useTheme()
|
|
|
|
|
|
|
|
const onPressLogout: () => void = () => {
|
2023-01-14 20:35:35 +00:00
|
|
|
logout()
|
2023-01-13 11:51:30 +00:00
|
|
|
}
|
|
|
|
|
2023-01-14 14:52:10 +00:00
|
|
|
const onPressItem: (key: string, index: number) => void = (key, index) => {
|
2023-01-13 11:51:30 +00:00
|
|
|
setDrawerItemIndex(index)
|
2023-01-14 14:52:10 +00:00
|
|
|
if (key === 'relays') {
|
|
|
|
navigate('Relays')
|
|
|
|
} else if (key === 'config') {
|
|
|
|
navigate('Feed', { page: 'Config' })
|
|
|
|
} else if (key === 'about') {
|
|
|
|
navigate('About')
|
2023-01-13 11:51:30 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<DrawerContentScrollView
|
|
|
|
alwaysBounceVertical={false}
|
|
|
|
style={[
|
|
|
|
styles.drawerContent,
|
|
|
|
{
|
|
|
|
backgroundColor: theme.colors.background,
|
2023-01-13 16:36:05 +00:00
|
|
|
borderBottomRightRadius: publicKey ? 0 : 28,
|
2023-01-13 11:51:30 +00:00
|
|
|
},
|
|
|
|
]}
|
|
|
|
>
|
|
|
|
<Drawer.Section showDivider={false}>
|
|
|
|
<Logo />
|
|
|
|
</Drawer.Section>
|
2023-01-14 20:35:35 +00:00
|
|
|
{nPub && (
|
2023-01-14 14:52:10 +00:00
|
|
|
<Card style={styles.cardContainer}>
|
|
|
|
<Card.Content style={styles.cardContent}>
|
2023-01-15 14:22:02 +00:00
|
|
|
<TouchableRipple onPress={() => navigate('Profile', { pubKey: user?.id })}>
|
2023-01-14 20:35:35 +00:00
|
|
|
<View style={styles.cardContent}>
|
|
|
|
<View style={styles.cardAvatar}>
|
|
|
|
<NostrosAvatar
|
|
|
|
name={user?.name}
|
|
|
|
pubKey={nPub}
|
|
|
|
src={user?.picture}
|
|
|
|
lud06={user?.lnurl}
|
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
<View>
|
|
|
|
<Text variant='titleMedium'>{user?.name}</Text>
|
|
|
|
<Text>{formatPubKey(nPub)}</Text>
|
|
|
|
</View>
|
|
|
|
</View>
|
|
|
|
</TouchableRipple>
|
2023-01-14 14:52:10 +00:00
|
|
|
<View style={styles.cardEdit}>
|
2023-01-16 12:09:18 +00:00
|
|
|
<IconButton
|
|
|
|
icon='pencil-outline'
|
|
|
|
size={20}
|
|
|
|
onPress={() => navigate('ProfileConfig')}
|
|
|
|
/>
|
2023-01-14 14:52:10 +00:00
|
|
|
</View>
|
|
|
|
</Card.Content>
|
|
|
|
<Card.Content style={styles.cardActions}>
|
|
|
|
<Chip
|
|
|
|
compact={true}
|
|
|
|
style={styles.cardActionsChip}
|
|
|
|
onPress={() => console.log('Pressed')}
|
|
|
|
>
|
|
|
|
{t('menuItems.following', { following: contactsCount })}
|
|
|
|
</Chip>
|
|
|
|
<Chip
|
|
|
|
compact={true}
|
|
|
|
style={styles.cardActionsChip}
|
|
|
|
onPress={() => console.log('Pressed')}
|
|
|
|
>
|
|
|
|
{t('menuItems.followers', { followers: followersCount })}
|
|
|
|
</Chip>
|
|
|
|
</Card.Content>
|
|
|
|
</Card>
|
|
|
|
)}
|
|
|
|
{publicKey && (
|
|
|
|
<Drawer.Section>
|
2023-01-13 11:51:30 +00:00
|
|
|
<Drawer.Item
|
2023-01-14 14:52:10 +00:00
|
|
|
label={t('menuItems.relays')}
|
2023-01-16 12:09:18 +00:00
|
|
|
icon={() => <MaterialCommunityIcons name='chart-timeline-variant' size={25} />}
|
2023-01-14 14:52:10 +00:00
|
|
|
key='relays'
|
|
|
|
active={drawerItemIndex === 0}
|
|
|
|
onPress={() => onPressItem('relays', 0)}
|
2023-01-13 11:51:30 +00:00
|
|
|
onTouchEnd={() => setDrawerItemIndex(-1)}
|
2023-01-14 14:52:10 +00:00
|
|
|
right={() =>
|
|
|
|
relays.length < 1 ? (
|
|
|
|
<Text style={{ color: theme.colors.error }}>{t('menuItems.notConnected')}</Text>
|
|
|
|
) : (
|
|
|
|
<Text style={{ color: theme.colors.inversePrimary }}>
|
|
|
|
{t('menuItems.connectedRelays', { number: relays.length })}
|
|
|
|
</Text>
|
|
|
|
)
|
|
|
|
}
|
2023-01-13 11:51:30 +00:00
|
|
|
/>
|
2023-01-14 20:35:35 +00:00
|
|
|
{/* <Drawer.Item
|
2023-01-14 14:52:10 +00:00
|
|
|
label={t('menuItems.configuration')}
|
|
|
|
icon='cog-outline'
|
|
|
|
key='config'
|
|
|
|
active={drawerItemIndex === 1}
|
|
|
|
onPress={() => onPressItem('config', 1)}
|
2023-01-13 11:51:30 +00:00
|
|
|
onTouchEnd={() => setDrawerItemIndex(-1)}
|
2023-01-14 20:35:35 +00:00
|
|
|
/> */}
|
2023-01-14 14:52:10 +00:00
|
|
|
</Drawer.Section>
|
|
|
|
)}
|
|
|
|
<Drawer.Section showDivider={false}>
|
|
|
|
<Drawer.Item
|
|
|
|
label={t('menuItems.about')}
|
|
|
|
icon='message-question-outline'
|
|
|
|
key='about'
|
|
|
|
active={drawerItemIndex === 2}
|
|
|
|
onPress={() => onPressItem('about', 2)}
|
|
|
|
onTouchEnd={() => setDrawerItemIndex(-1)}
|
|
|
|
/>
|
2023-01-13 11:51:30 +00:00
|
|
|
</Drawer.Section>
|
|
|
|
</DrawerContentScrollView>
|
|
|
|
{publicKey && (
|
|
|
|
<Drawer.Section
|
|
|
|
style={[
|
|
|
|
styles.bottomSection,
|
|
|
|
{
|
|
|
|
backgroundColor: theme.colors.background,
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
showDivider={false}
|
|
|
|
>
|
|
|
|
<Button mode='outlined' onPress={onPressLogout}>
|
|
|
|
{t('menuItems.logout')}
|
|
|
|
</Button>
|
|
|
|
</Drawer.Section>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
drawerContent: {
|
|
|
|
flex: 1,
|
2023-01-14 14:52:10 +00:00
|
|
|
borderTopRightRadius: 28,
|
|
|
|
},
|
|
|
|
cardContainer: {
|
|
|
|
margin: 12,
|
|
|
|
},
|
|
|
|
cardActions: {
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'space-between',
|
|
|
|
},
|
|
|
|
cardActionsChip: {
|
|
|
|
width: '47%',
|
|
|
|
},
|
|
|
|
cardAvatar: {
|
|
|
|
marginRight: 14,
|
|
|
|
},
|
|
|
|
cardContent: {
|
|
|
|
width: '100%',
|
|
|
|
flexDirection: 'row',
|
|
|
|
},
|
|
|
|
cardEdit: {
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'flex-end',
|
|
|
|
flex: 1,
|
2023-01-13 11:51:30 +00:00
|
|
|
},
|
|
|
|
bottomSection: {
|
2023-01-13 16:36:05 +00:00
|
|
|
marginBottom: 0,
|
2023-01-14 14:52:10 +00:00
|
|
|
borderBottomRightRadius: 28,
|
|
|
|
padding: 24,
|
2023-01-13 11:51:30 +00:00
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
export default MenuItems
|