New UI last changes (#144)

KoalaSat · Jan 22, 2023 · 15216dc · 15216dc
2 parents 3bfcd2a + 719bec3
commit 15216dc
Show file tree

Hide file tree

Showing 16 changed files with 233 additions and 161 deletions.
diff --git a/frontend/Components/MenuItems/index.tsx b/frontend/Components/MenuItems/index.tsx
@@ -18,7 +18,7 @@ import { UserContext } from '../../Contexts/UserContext'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
 import { navigate } from '../../lib/Navigation'
 import NostrosAvatar from '../NostrosAvatar'
-import { formatPubKey } from '../../Functions/RelayFunctions/Users'
+import { formatPubKey, username } from '../../Functions/RelayFunctions/Users'
 
 export const MenuItems: React.FC = () => {
   const [drawerItemIndex, setDrawerItemIndex] = React.useState<number>(-1)
@@ -61,7 +61,9 @@ export const MenuItems: React.FC = () => {
         {nPub && (
           <Card style={styles.cardContainer}>
             <Card.Content style={styles.cardContent}>
-              <TouchableRipple onPress={() => navigate('Profile', { pubKey: publicKey })}>
+              <TouchableRipple
+                onPress={() => navigate('Profile', { pubKey: publicKey, title: username(user) })}
+              >
                 <View style={styles.cardContent}>
                   <View style={styles.cardAvatar}>
                     <NostrosAvatar

diff --git a/frontend/Components/NoteCard/index.tsx b/frontend/Components/NoteCard/index.tsx
@@ -28,17 +28,18 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import { REGEX_SOCKET_LINK } from '../../Constants/Relay'
 import { push } from '../../lib/Navigation'
 import { getNpub } from '../../lib/nostr/Nip19'
+import { User } from '../../Functions/DatabaseFunctions/Users'
 
 interface NoteCardProps {
   note: Note
-  onPressOptions?: () => void
+  onPressUser?: (user: User) => void
   showAnswerData?: boolean
 }
 
 export const NoteCard: React.FC<NoteCardProps> = ({
   note,
   showAnswerData = true,
-  onPressOptions = () => {},
+  onPressUser = () => {},
 }) => {
   const theme = useTheme()
   const { publicKey, privateKey } = React.useContext(UserContext)
@@ -116,21 +117,15 @@ export const NoteCard: React.FC<NoteCardProps> = ({
             </Card.Content>
           </TouchableRipple>
         )}
-        <TouchableRipple
-          onPress={() =>
-            note.kind !== EventKind.recommendServer && push('Note', { noteId: note.id })
-          }
-        >
-          <Card.Content style={[styles.content, { borderColor: theme.colors.onSecondary }]}>
-            {hide ? (
-              <Button mode='outlined' onPress={() => setHide(false)}>
-                {t('noteCard.contentWarning')}
-              </Button>
-            ) : (
-              <TextContent event={note} />
-            )}
-          </Card.Content>
-        </TouchableRipple>
+        <Card.Content style={[styles.content, { borderColor: theme.colors.onSecondary }]}>
+          {hide ? (
+            <Button mode='outlined' onPress={() => setHide(false)}>
+              {t('noteCard.contentWarning')}
+            </Button>
+          ) : (
+            <TextContent event={note} onPressUser={onPressUser} />
+          )}
+        </Card.Content>
       </>
     )
   }
@@ -187,9 +182,9 @@ export const NoteCard: React.FC<NoteCardProps> = ({
 
   return (
     note && (
-      <Card>
+      <Card style={styles.container}>
         <Card.Content style={styles.title}>
-          <TouchableRipple onPress={onPressOptions}>
+          <TouchableRipple onPress={() => onPressUser({ id: note.pubkey, name: note.name })}>
             <View style={styles.titleUser}>
               <View>
                 <NostrosAvatar
@@ -207,7 +202,11 @@ export const NoteCard: React.FC<NoteCardProps> = ({
             </View>
           </TouchableRipple>
           <View>
-            <IconButton icon='dots-vertical' size={25} onPress={onPressOptions} />
+            <IconButton
+              icon='dots-vertical'
+              size={25}
+              onPress={() => onPressUser({ id: note.pubkey, name: note.name })}
+            />
           </View>
         </Card.Content>
         {getNoteContent()}
@@ -262,7 +261,7 @@ export const NoteCard: React.FC<NoteCardProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    padding: 16,
+    flex: 1,
   },
   titleUsername: {
     fontWeight: 'bold',

diff --git a/frontend/Components/ProfileCard/index.tsx b/frontend/Components/ProfileCard/index.tsx
@@ -28,6 +28,7 @@ export const ProfileCard: React.FC<ProfileCardProps> = ({ userPubKey, bottomShee
   const [isContact, setIsContact] = React.useState<boolean>()
   const [showNotification, setShowNotification] = React.useState<undefined | string>()
   const nPub = React.useMemo(() => getNpub(userPubKey), [userPubKey])
+  const username = React.useMemo(() => usernamePubKey(user?.name ?? '', nPub), [nPub, user])
 
   React.useEffect(() => {
     loadUser()
@@ -66,7 +67,7 @@ export const ProfileCard: React.FC<ProfileCardProps> = ({ userPubKey, bottomShee
 
   const goToProfile: () => void = () => {
     bottomSheetRef.current?.close()
-    push('Profile', { pubKey: userPubKey })
+    push('Profile', { pubKey: userPubKey, title: username })
   }
 
   return (
@@ -86,7 +87,7 @@ export const ProfileCard: React.FC<ProfileCardProps> = ({ userPubKey, bottomShee
               </View>
               <View>
                 <View style={styles.username}>
-                  <Text variant='titleMedium'>{usernamePubKey(user?.name ?? '', nPub)}</Text>
+                  <Text variant='titleMedium'>{username}</Text>
                   {/* <MaterialCommunityIcons name="check-decagram-outline" size={16} /> */}
                   <Text>{user?.nip05}</Text>
                 </View>
@@ -123,7 +124,7 @@ export const ProfileCard: React.FC<ProfileCardProps> = ({ userPubKey, bottomShee
             icon='message-plus-outline'
             size={28}
             onPress={() => {
-              navigate('Conversation', { pubKey: userPubKey })
+              navigate('Conversation', { pubKey: userPubKey, title: username })
               bottomSheetRef.current?.close()
             }}
           />

diff --git a/frontend/Components/TextContent/index.tsx b/frontend/Components/TextContent/index.tsx
@@ -3,18 +3,18 @@ import ParsedText from 'react-native-parsed-text'
 import { Event } from '../../lib/nostr/Events'
 import { Linking, StyleSheet, View } from 'react-native'
 import { AppContext } from '../../Contexts/AppContext'
-import { getUser } from '../../Functions/DatabaseFunctions/Users'
+import { getUser, User } from '../../Functions/DatabaseFunctions/Users'
 import { formatPubKey } from '../../Functions/RelayFunctions/Users'
 import moment from 'moment'
 import { Card, Text, useTheme } from 'react-native-paper'
 import { getLinkPreview } from 'link-preview-js'
-import { push } from '../../lib/Navigation'
 import { validImageUrl } from '../../Functions/NativeFunctions'
 
 interface TextContentProps {
   event?: Event
   content?: string
   preview?: boolean
+  onPressUser?: (user: User) => void
 }
 
 interface LinkPreviewMedia {
@@ -35,7 +35,12 @@ interface LinkPreviewMedia {
   favicons: string[]
 }
 
-export const TextContent: React.FC<TextContentProps> = ({ event, content, preview = true }) => {
+export const TextContent: React.FC<TextContentProps> = ({
+  event,
+  content,
+  preview = true,
+  onPressUser = () => {},
+}) => {
   const theme = useTheme()
   const { database } = useContext(AppContext)
   const [userNames, setUserNames] = useState<Record<number, string>>({})
@@ -55,7 +60,7 @@ export const TextContent: React.FC<TextContentProps> = ({ event, content, previe
     const mentionIndex: number = parseInt(text.substring(2, text.length - 1))
     const userPubKey = event.tags[mentionIndex][1]
 
-    push('Profile', { pubKey: userPubKey })
+    onPressUser({ id: userPubKey, name: text })
   }
 
   const renderMentionText: (matchingString: string, matches: string[]) => string = (

diff --git a/frontend/Pages/ContactsFeed/index.tsx b/frontend/Pages/ContactsFeed/index.tsx
@@ -205,6 +205,7 @@ export const ContactsFeed: React.FC = () => {
         <ScrollView horizontal={false}>
           <View>
             <FlatList
+              style={styles.list}
               data={following}
               renderItem={renderContactItem}
               ItemSeparatorComponent={Divider}
@@ -235,6 +236,7 @@ export const ContactsFeed: React.FC = () => {
         <ScrollView horizontal={false}>
           <View>
             <FlatList
+              style={styles.list}
               data={followers}
               renderItem={renderContactItem}
               ItemSeparatorComponent={Divider}
@@ -443,6 +445,9 @@ const styles = StyleSheet.create({
   tabLabel: {
     margin: 8,
   },
+  list: {
+    paddingBottom: 80,
+  },
 })
 
 export default ContactsFeed
diff --git a/frontend/Pages/ConversationPage/index.tsx b/frontend/Pages/ConversationPage/index.tsx
@@ -109,7 +109,7 @@ export const ConversationPage: React.FC<ConversationPageProps> = ({ route }) =>
   }
 
   const onPressOtherUser: () => void = () => {
-    navigate('Profile', { pubKey: otherPubKey })
+    navigate('Profile', { pubKey: otherPubKey, title: username(otherUser) })
   }
 
   const send: () => void = () => {

diff --git a/frontend/Pages/ConversationsFeed/index.tsx b/frontend/Pages/ConversationsFeed/index.tsx
@@ -109,11 +109,16 @@ export const ConversationsFeed: React.FC = () => {
 
     const otherPubKey = getOtherPubKey(item, publicKey)
     const user: User = users?.find((user) => user.id === otherPubKey) ?? { id: otherPubKey }
+    const userMame = username(user)
 
     return (
       <TouchableRipple
         onPress={() =>
-          navigate('Conversation', { pubKey: user.id, conversationId: item.conversation_id })
+          navigate('Conversation', {
+            pubKey: user.id,
+            conversationId: item.conversation_id,
+            title: userMame,
+          })
         }
       >
         <View key={user.id} style={styles.contactRow}>
@@ -126,7 +131,7 @@ export const ConversationsFeed: React.FC = () => {
               size={40}
             />
             <View style={styles.contactName}>
-              <Text variant='titleSmall'>{username(user)}</Text>
+              <Text variant='titleSmall'>{userMame}</Text>
             </View>
           </View>
           <View style={styles.contactInfo}>
@@ -189,7 +194,7 @@ export const ConversationsFeed: React.FC = () => {
       onPress={() => {
         bottomSheetUserListRef.current?.close()
         bottomSheetPubKeyRef.current?.close()
-        navigate('Conversation', { pubKey: item.id })
+        navigate('Conversation', { pubKey: item.id, title: username(item) })
       }}
     >
       <View key={item.id} style={styles.contactRow}>
@@ -215,6 +220,7 @@ export const ConversationsFeed: React.FC = () => {
       {directMessages.length > 0 ? (
         <ScrollView horizontal={false}>
           <FlatList
+            style={styles.list}
             data={directMessages}
             renderItem={renderConversationItem}
             ItemSeparatorComponent={Divider}
@@ -303,7 +309,7 @@ export const ConversationsFeed: React.FC = () => {
             mode='contained'
             disabled={!sendPubKeyInput || sendPubKeyInput === ''}
             onPress={() => {
-              navigate('Conversation', { pubKey: sendPubKeyInput })
+              navigate('Conversation', { pubKey: sendPubKeyInput, title: sendPubKeyInput })
               bottomSheetPubKeyRef.current?.close()
             }}
           >
@@ -356,6 +362,9 @@ const styles = StyleSheet.create({
     paddingLeft: 16,
     paddingRight: 16,
   },
+  list: {
+    paddingBottom: 64,
+  },
 })
 
 export default ConversationsFeed
diff --git a/frontend/Pages/FeedNavigator/index.tsx b/frontend/Pages/FeedNavigator/index.tsx
@@ -82,7 +82,11 @@ export const HomeNavigator: React.FC = () => {
                       onPress={() => (navigation as any as DrawerNavigationProp<{}>).openDrawer()}
                     />
                   ) : null}
-                  <Appbar.Content title={t(`homeNavigator.${route.name}`)} />
+                  <Appbar.Content
+                    title={
+                      route.params?.title ? route.params?.title : t(`homeNavigator.${route.name}`)
+                    }
+                  />
                   {['Profile', 'Conversation'].includes(route.name) && (
                     <Appbar.Action
                       icon='dots-vertical'

diff --git a/frontend/Pages/HomeFeed/index.tsx b/frontend/Pages/HomeFeed/index.tsx
@@ -148,8 +148,8 @@ export const HomeFeed: React.FC<HomeFeedProps> = ({ navigation }) => {
       <View style={styles.noteCard} key={item.id}>
         <NoteCard
           note={item}
-          onPressOptions={() => {
-            setProfileCardPubKey(item.pubkey)
+          onPressUser={(user) => {
+            setProfileCardPubKey(user.id)
             bottomSheetProfileRef.current?.open()
           }}
         />

diff --git a/frontend/Pages/HomeNavigator/index.tsx b/frontend/Pages/HomeNavigator/index.tsx
@@ -10,13 +10,12 @@ import { useTranslation } from 'react-i18next'
 import ProfileCreatePage from '../../Pages/ProfileCreatePage'
 import { DrawerNavigationProp } from '@react-navigation/drawer'
 import RelaysPage from '../RelaysPage'
-import { useState } from 'react'
 
 export const HomeNavigator: React.FC = () => {
   const theme = useTheme()
   const { t } = useTranslation('common')
-  const [bottomSheetPage, setBottomSheetPage] = useState<'keys' | 'relays'>('keys')
-  const bottomSheetRef = React.useRef<RBSheet>(null)
+  const bottomSheetKeysRef = React.useRef<RBSheet>(null)
+  const bottomSheetRelaysRef = React.useRef<RBSheet>(null)
   const Stack = React.useMemo(() => createStackNavigator(), [])
   const cardStyleInterpolator = React.useMemo(
     () =>
@@ -26,8 +25,9 @@ export const HomeNavigator: React.FC = () => {
     [],
   )
   const onPressQuestion: (pageName: string) => void = (pageName) => {
-    bottomSheetRef.current?.open()
-    setBottomSheetPage(pageName === 'Relays' ? 'relays' : 'keys')
+    pageName === 'Relays'
+      ? bottomSheetRelaysRef.current?.open()
+      : bottomSheetKeysRef.current?.open()
   }
 
   const BottomSheetKeys = React.useMemo(
@@ -60,17 +60,6 @@ export const HomeNavigator: React.FC = () => {
     [],
   )
 
-  const BottomSheets = {
-    keys: {
-      component: BottomSheetKeys,
-      height: 430,
-    },
-    relays: {
-      component: BottomSheetRelays,
-      height: 680,
-    },
-  }
-
   return (
     <>
       <Stack.Navigator
@@ -121,9 +110,24 @@ export const HomeNavigator: React.FC = () => {
         </Stack.Group>
       </Stack.Navigator>
       <RBSheet
-        ref={bottomSheetRef}
+        ref={bottomSheetKeysRef}
+        closeOnDragDown={true}
+        height={430}
+        customStyles={{
+          container: {
+            backgroundColor: theme.colors.background,
+            padding: 16,
+            borderTopRightRadius: 28,
+            borderTopLeftRadius: 28,
+          },
+        }}
+      >
+        {BottomSheetKeys}
+      </RBSheet>
+      <RBSheet
+        ref={bottomSheetRelaysRef}
         closeOnDragDown={true}
-        height={BottomSheets[bottomSheetPage].height}
+        height={680}
         customStyles={{
           container: {
             backgroundColor: theme.colors.background,
@@ -133,7 +137,7 @@ export const HomeNavigator: React.FC = () => {
           },
         }}
       >
-        {BottomSheets[bottomSheetPage].component}
+        {BottomSheetRelays}
       </RBSheet>
     </>
   )

diff --git a/frontend/Pages/NostrosDrawerNavigator/index.tsx b/frontend/Pages/NostrosDrawerNavigator/index.tsx
@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignContent: 'center',
     flex: 1,
-    paddingLeft: 50,
+    paddingLeft: 90,
   },
 })