Merge pull request #58 from Permissionless-Software-Foundation/dh-chat-markdown

feat(nostr): Added markdown support to Nostr Chat

package-lock.json

@@ -13,7 +13,7 @@
         "@fortawesome/free-regular-svg-icons": "6.7.2",
         "@fortawesome/free-solid-svg-icons": "6.7.2",
         "@fortawesome/react-fontawesome": "0.2.2",
-        "@noble/hashes": "^1.8.0",
+        "@noble/hashes": "1.8.0",
         "axios": "0.27.2",
         "bch-dex-lib": "2.2.0",
         "bch-message-lib": "2.2.1",

package.json

@@ -7,7 +7,7 @@
     "@fortawesome/free-regular-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@noble/hashes": "^1.8.0",
+    "@noble/hashes": "1.8.0",
     "axios": "0.27.2",
     "bch-dex-lib": "2.2.0",
     "bch-message-lib": "2.2.1",

src/components/app-body/nostr-chat/index.js

@@ -6,6 +6,7 @@
 import React, { useCallback, useEffect, useState, useRef } from 'react'
 import { Container, Row, Col } from 'react-bootstrap'
 import { RelayPool } from 'nostr'
+
 // Local libraries
 import ChatSidebar from './chat-sidebar'
 import ChatMain from './chat-main'
@@ -26,14 +27,17 @@ function NostrChat (props) {
   // Handle read messages
   const onMsgRead = useCallback(async (msg) => {
     try {
+      // console.log('onMsgRead() msg: ', msg)
+
       // Update messages list
       setMessages(current => {
-        const exist = current.find(val => val.id === msg.id)
         // ignore existing messages
+        const exist = current.find(val => val.id === msg.id)
         if (exist) return current
 
         const newMsgs = [...current]
         newMsgs.push(msg)
+
         // Sort messages by timestamp
         newMsgs.sort((a, b) => b.created_at - a.created_at)
         return newMsgs.reverse()
@@ -45,9 +49,11 @@ function NostrChat (props) {
       if (existProfile) {
         return
       }
-      // Fech profile.
+
+      // Fetch profile.
       let profile = await appData.nostrQueries.getProfile(pubKey)
       if (!profile) profile = { name: pubKey }
+
       // Update profiles state
       setProfiles(currentProfiles => {
         const newProfiles = { ...currentProfiles }
@@ -75,6 +81,7 @@ function NostrChat (props) {
     pool.on('open', relay => {
       relay.subscribe('REQ', { limit: 10, kinds: [42], '#e': [selectedChannel] })
     })
+
     pool.on('eose', relay => {
       setLoadedMessages(true)
     })
@@ -83,6 +90,7 @@ function NostrChat (props) {
       console.log('post retrieved from ', relay.url, ev.content)
       onMsgRead(ev)
     })
+
     return () => {
       // Close pool on component unmount or selected channel changes
       console.log('Close existing pool')

src/components/app-body/nostr-chat/message-item.js

@@ -6,6 +6,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser } from '@fortawesome/free-solid-svg-icons'
+import NostrFormat from '../../app-body/nostr/nostr-format'
 
 function MessageItem (props) {
   const { message, profiles } = props
@@ -26,7 +27,7 @@ function MessageItem (props) {
     if (!profile && profiles[message.pubkey]) {
       setProfile(profiles[message.pubkey])
     }
-  }, [profiles, message])
+  }, [profiles, message, profile])
 
   useEffect(() => {
     if (msgRef.current && message.latest) {
@@ -35,7 +36,7 @@ function MessageItem (props) {
         block: 'end'
       })
     }
-  }, [msgRef.current, message])
+  }, [message])
 
   return (
     <div className='mb-3 d-flex align-items-start' ref={msgRef}>
@@ -86,7 +87,8 @@ function MessageItem (props) {
             <small className='text-muted'>{formatTime(message.created_at * 1000)}</small>
           </div>
           <div style={{ lineHeight: '1.4', wordBreak: 'break-all' }}>
-            {message.content}
+            <NostrFormat content={message.content} />
+
           </div>
         </div>
       </div>

src/config/index.js

@@ -24,7 +24,7 @@ const config = {
     'wss://nos.lol',
     'wss://relay.damus.io'
   ],
-  chatsId: [ 
+  chatsId: [
     '32b0ebc01c984008977fbe476e064946990df75525331b24b37bbba5e89f4039'
   ]