New UI performance improvements (#140)

Author: KoalaSat

frontend/Components/NostrosAvatar/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Avatar as PaperAvatar, useTheme } from 'react-native-paper'
+import { validImageUrl } from '../../Functions/NativeFunctions'
 
 interface NostrosAvatarProps {
   pubKey: string
@@ -21,18 +22,10 @@ export const NostrosAvatar: React.FC<NostrosAvatarProps> = ({
   const displayName = name && name !== '' ? name : pubKey ?? ''
   const hasLud06 = lud06 && lud06 !== ''
   const lud06IconSize = size / 2.85
-  const validImage: () => boolean = () => {
-    if (src) {
-      const regexp = /^(https?:\/\/.*\.(?:png|jpg|jpeg))$/
-      return regexp.test(src)
-    } else {
-      return false
-    }
-  }
 
   return (
     <View>
-      {validImage() ? (
+      {validImageUrl(src) ? (
         <PaperAvatar.Image size={size} source={{ uri: src }} />
       ) : (
         <PaperAvatar.Text size={size} label={displayName.substring(0, 2).toUpperCase()} />

frontend/Components/NoteCard/index.tsx

@@ -51,7 +51,7 @@ export const NoteCard: React.FC<NoteCardProps> = ({
   const [userDownvoted, setUserDownvoted] = useState<boolean>(false)
   const [repliesCount, setRepliesCount] = React.useState<number>(0)
   const [hide, setHide] = useState<boolean>(isContentWarning(note))
-  const timestamp = useMemo(() => moment.unix(note.created_at).format('HH:mm L'), [note])
+  const timestamp = useMemo(() => moment.unix(note.created_at).format('L HH:mm'), [note])
   const nPub = useMemo(() => npubEncode(note.pubkey), [note])
 
   useEffect(() => {
@@ -60,8 +60,12 @@ export const NoteCard: React.FC<NoteCardProps> = ({
         const total = result.length
         let positive = 0
         result.forEach((reaction) => {
-          if (reaction) positive = positive + 1
-          if (reaction.pubkey === publicKey) setUserUpvoted(reaction.positive)
+          if (reaction.positive) {
+            positive = positive + 1
+            if (reaction.pubkey === publicKey) setUserUpvoted(true)
+          } else if (reaction.pubkey === publicKey) {
+            setUserDownvoted(true)
+          }
         })
         setPositiveReactions(positive)
         setNegativeReactions(total - positive)
@@ -195,8 +199,8 @@ export const NoteCard: React.FC<NoteCardProps> = ({
                 size={54}
               />
             </View>
-            <View>
-              <Text>{usernamePubKey(note.name, nPub)}</Text>
+            <View style={styles.titleUserInfo}>
+              <Text style={styles.titleUsername}>{usernamePubKey(note.name, nPub)}</Text>
               <Text>{timestamp}</Text>
             </View>
           </View>
@@ -223,7 +227,6 @@ export const NoteCard: React.FC<NoteCardProps> = ({
                 size={25}
               />
             )}
-            disabled={userDownvoted}
           >
             {negaiveReactions === undefined || negaiveReactions === 0 ? '-' : negaiveReactions}
           </Button>
@@ -241,7 +244,6 @@ export const NoteCard: React.FC<NoteCardProps> = ({
                 size={25}
               />
             )}
-            disabled={userUpvoted}
           >
             {positiveReactions === undefined || positiveReactions === 0 ? '-' : positiveReactions}
           </Button>
@@ -255,6 +257,13 @@ const styles = StyleSheet.create({
   container: {
     padding: 16,
   },
+  titleUsername: {
+    fontWeight: 'bold',
+  },
+  titleUserInfo: {
+    paddingTop: 10,
+    paddingLeft: 16,
+  },
   title: {
     flexDirection: 'row',
     justifyContent: 'space-between',

frontend/Components/ProfileCard/index.tsx

@@ -7,7 +7,7 @@ import { AppContext } from '../../Contexts/AppContext'
 import { RelayPoolContext } from '../../Contexts/RelayPoolContext'
 import { UserContext } from '../../Contexts/UserContext'
 import { getUser, updateUserContact, User } from '../../Functions/DatabaseFunctions/Users'
-import { populatePets } from '../../Functions/RelayFunctions/Users'
+import { populatePets, usernamePubKey } from '../../Functions/RelayFunctions/Users'
 import NostrosAvatar from '../NostrosAvatar'
 import LnPayment from '../LnPayment'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -85,14 +85,14 @@ export const ProfileCard: React.FC<ProfileCardProps> = ({ userPubKey, bottomShee
                 />
               </View>
               <View>
-                <View style={styles.userName}>
-                  <Text variant='titleMedium'>{user?.name}</Text>
+                <View style={styles.username}>
+                  <Text variant='titleMedium'>{usernamePubKey(user?.name ?? '', nPub)}</Text>
                   {/* <MaterialCommunityIcons name="check-decagram-outline" size={16} /> */}
+                  <Text>{user?.nip05}</Text>
                 </View>
-                <Text>{user?.nip05}</Text>
               </View>
             </View>
-            <View>
+            <View style={styles.about}>
               <Text>
                 {`${user?.about ? user?.about?.slice(0, 75) : ''}${
                   user?.about && user?.about?.length > 75 ? ' ...' : ''
@@ -178,6 +178,9 @@ const styles = StyleSheet.create({
     margin: 16,
     width: '100%',
   },
+  username: {
+    paddingLeft: 16,
+  },
   contacts: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -188,6 +191,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-around',
   },
+  about: {
+    maxHeight: 50,
+  },
   userName: {
     flexDirection: 'row',
     alignItems: 'center',

frontend/Components/TextContent/index.tsx

@@ -9,6 +9,7 @@ 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
@@ -102,7 +103,7 @@ export const TextContent: React.FC<TextContentProps> = ({ event, content, previe
 
     return (
       <Card style={styles.previewCard} onPress={() => handleUrlPress(linkPreview.url)}>
-        <Card.Cover source={{ uri: coverUrl }} />
+        {validImageUrl(coverUrl) && <Card.Cover source={{ uri: coverUrl }} resizeMode='contain' />}
         <Card.Content style={styles.previewContent}>
           <Text variant='titleSmall'>{linkPreview.title || linkPreview.url}</Text>
           {linkPreview.description && <Text variant='bodySmall'>{linkPreview.description}</Text>}

frontend/Functions/DatabaseFunctions/DirectMessages/index.ts

@@ -17,6 +17,7 @@ export const updateConversationRead: (
   db: QuickSQLiteConnection,
 ) => Promise<QueryResult | null> = async (conversationId, db) => {
   const userQuery = `UPDATE nostros_direct_messages SET read = ? WHERE conversation_id = ?`
+  console.log(userQuery)
   return db.execute(userQuery, [1, conversationId])
 }
 
@@ -44,23 +45,28 @@ export const getGroupedDirectMessages: (
 
 export const getDirectMessages: (
   db: QuickSQLiteConnection,
+  conversationId: string,
+  publicKey: string,
+  otherPubKey: string,
   options: {
-    conversationId?: string
     order?: 'DESC' | 'ASC'
   },
-) => Promise<DirectMessage[]> = async (db, { conversationId, order = 'DESC' }) => {
-  let notesQuery = `
+) => Promise<DirectMessage[]> = async (
+  db,
+  conversationId,
+  publicKey,
+  otherPubKey,
+  { order = 'DESC' },
+) => {
+  const notesQuery = `
     SELECT 
       *
     FROM
       nostros_direct_messages
+    WHERE conversation_id = "${conversationId}"
+    ORDER BY created_at ${order}
   `
-
-  if (conversationId) {
-    notesQuery += `WHERE conversation_id = "${conversationId}" `
-  }
-
-  notesQuery += `ORDER BY created_at ${order}`
+  // WHERE conversation_id = "${conversationId}"
 
   const resultSet = await db.execute(notesQuery)
   const items: object[] = getItems(resultSet)

frontend/Functions/DatabaseFunctions/Notes/index.ts

@@ -7,6 +7,7 @@ export interface Note extends Event {
   picture: string
   lnurl: string
   reply_event_id: string
+  user_created_at: number
 }
 
 const databaseToEntity: (object: any) => Note = (object) => {
@@ -21,7 +22,7 @@ export const getMainNotes: (
 ) => Promise<Note[]> = async (db, pubKey, limit) => {
   const notesQuery = `
     SELECT 
-      nostros_notes.*, nostros_users.lnurl, nostros_users.name, nostros_users.picture, nostros_users.contact FROM nostros_notes 
+      nostros_notes.*, nostros_users.lnurl, nostros_users.name, nostros_users.picture, nostros_users.contact, nostros_users.created_at as user_created_at FROM nostros_notes 
     LEFT JOIN 
       nostros_users ON nostros_users.id = nostros_notes.pubkey 
     WHERE (nostros_users.contact = 1 OR nostros_notes.pubkey = '${pubKey}')
@@ -44,7 +45,7 @@ export const getMentionNotes: (
 ) => Promise<Note[]> = async (db, pubKey, limit) => {
   const notesQuery = `
     SELECT 
-      nostros_notes.*, nostros_users.lnurl, nostros_users.name, nostros_users.picture, nostros_users.contact FROM nostros_notes 
+      nostros_notes.*, nostros_users.lnurl, nostros_users.name, nostros_users.picture, nostros_users.contact, nostros_users.created_at as user_created_at FROM nostros_notes 
     LEFT JOIN 
       nostros_users ON nostros_users.id = nostros_notes.pubkey 
     WHERE (nostros_notes.reply_event_id IN (
@@ -78,6 +79,30 @@ export const getRepliesCount: (
   return item['COUNT(*)'] ?? 0
 }
 
+export const getLastReply: (
+  db: QuickSQLiteConnection,
+  filters: {
+    eventIds: string[]
+  },
+) => Promise<Note> = async (db, { eventIds }) => {
+  const eventIdsQuery = eventIds.join('", "')
+  const replyQuery = `
+    SELECT 
+      *
+    FROM
+      nostros_notes
+    WHERE reply_event_id IN ("${eventIdsQuery}")
+    ORDER BY created_at DESC 
+    LIMIT 1
+  `
+
+  const resultSet = await db.execute(replyQuery)
+  const item: object = getItems(resultSet)[0]
+  const reaction: Note = databaseToEntity(item)
+
+  return reaction
+}
+
 export const getNotes: (
   db: QuickSQLiteConnection,
   options: {
@@ -89,7 +114,7 @@ export const getNotes: (
 ) => Promise<Note[]> = async (db, { filters = {}, limit, contacts, includeIds }) => {
   let notesQuery = `
     SELECT 
-      nostros_notes.*, nostros_users.lnurl, nostros_users.name, nostros_users.picture, nostros_users.contact FROM nostros_notes 
+      nostros_notes.*, nostros_users.lnurl, nostros_users.name, nostros_users.picture, nostros_users.contact, nostros_users.created_at as user_created_at FROM nostros_notes 
     LEFT JOIN 
       nostros_users ON nostros_users.id = nostros_notes.pubkey
   `

frontend/Functions/DatabaseFunctions/Reactions/index.ts

@@ -32,3 +32,28 @@ export const getReactions: (
 
   return reactions
 }
+
+export const getLastReaction: (
+  db: QuickSQLiteConnection,
+  filters: {
+    eventIds: string[]
+  },
+) => Promise<Reaction> = async (db, { eventIds }) => {
+  const eventIdsQuery = eventIds.join('", "')
+
+  const reactionsQuery = `
+    SELECT 
+      *
+    FROM
+      nostros_reactions
+    WHERE reacted_event_id IN ("${eventIdsQuery}")
+    ORDER BY created_at DESC 
+    LIMIT 1
+  `
+
+  const resultSet = await db.execute(reactionsQuery)
+  const item: object = getItems(resultSet)[0]
+  const reaction: Reaction = databaseToEntity(item)
+
+  return reaction
+}

frontend/Functions/DatabaseFunctions/Users/index.ts

@@ -11,6 +11,7 @@ export interface User {
   follower?: boolean
   lnurl?: string
   nip05?: string
+  created_at?: number
 }
 
 const databaseToEntity: (object: object) => User = (object) => {
@@ -73,7 +74,8 @@ export const getFollowersCount: (db: QuickSQLiteConnection) => Promise<number> =
 export const getFollowersAndFollowing: (db: QuickSQLiteConnection) => Promise<User[]> = async (
   db,
 ) => {
-  const userQuery = 'SELECT * FROM nostros_users WHERE follower = 1 OR contact = 1'
+  const userQuery =
+    'SELECT * FROM nostros_users WHERE follower = 1 OR contact = 1 ORDER BY created_at DESC'
   const resultSet = db.execute(userQuery)
   if (resultSet.rows && resultSet.rows.length > 0) {
     const items: object[] = getItems(resultSet)

frontend/Functions/NativeFunctions/index.ts

@@ -24,3 +24,12 @@ export const pickRandomItems = <T extends unknown>(arr: T[], n: number): T[] =>
   const shuffled = Array.from(arr).sort(() => 0.5 - Math.random())
   return shuffled.slice(0, n)
 }
+
+export const validImageUrl: (url: string | undefined) => boolean = (url) => {
+  if (url) {
+    const regexp = /^(https?:\/\/.*\.(?:png|jpg|jpeg))$/
+    return regexp.test(url)
+  } else {
+    return false
+  }
+}

frontend/Functions/RelayFunctions/DirectMessages/index.ts

@@ -1,5 +1,4 @@
 import { DirectMessage } from '../../DatabaseFunctions/DirectMessages'
-import { v4 as uuidv4 } from 'uuid'
 
 export const getOtherPubKey: (message: DirectMessage, ownPubKey: string) => string = (
   message,
@@ -14,17 +13,6 @@ export const getOtherPubKey: (message: DirectMessage, ownPubKey: string) => stri
   return otherPubKey
 }
 
-export const generateConversationId: (pubKey: string, otherPubKey: string) => string = (
-  pubKey,
-  otherPubKey,
-) => {
-  const pubKeys = [pubKey, otherPubKey].sort().join('')
-
-  return uuidv4({
-    random: convertStringToByteArray(pubKeys),
-  })
-}
-
 export const convertStringToByteArray: (string: string) => number[] = (string) => {
   const bytes = []
   for (let i = 0; i < string.length; ++i) {