Merge pull request #74 from Permissionless-Software-Foundation/dh-filter-posts

feat(nostr): Filter out posts from deletedPosts database

src/components/app-body/nfts-for-sale/index.js

@@ -11,7 +11,7 @@
 */
 
 // Global npm libraries
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useRef } from 'react'
 import { Container, Row, Col, Button, Spinner } from 'react-bootstrap'
 import axios from 'axios'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -35,9 +35,13 @@ function NftsForSale (props) {
   const [iconsAreLoaded, setIconsAreLoaded] = useState(false)
   const [dataAreLoaded, setDataAreLoaded] = useState(false)
   const [currentPage, setCurrentPage] = useState(0)
+  const [lastLoadedPage, setLastLoadedPage] = useState(0)
   const [totalPages, setTotalPages] = useState(0)
   const [selectedFilter, setSelectedFilter] = useState('Misc')
 
+  // Flag to prevent load data multiple times on component mount!
+  const componentMountRef = useRef(false)
+
   // Handler for previous page
   const handlePreviousPage = () => {
     if (currentPage > 0) {
@@ -70,6 +74,20 @@ function NftsForSale (props) {
       return offer
     }
   }, [appData])
+  // Function to process token metadata (iconUrl , userData).
+  const processOfferMetadata = useCallback(async (offer) => {
+    try {
+      // Token icon
+      if (offer.tokenIconUrl) {
+        offer.icon = offer.tokenIconUrl
+        offer.iconAlreadyDownloaded = true
+        offer.userData = JSON.parse(offer.userDataStr)
+      }
+      return offer
+    } catch (error) {
+      return offer
+    }
+  }, [])
 
   //  Fetch offers
   const getNftOffers = useCallback(async (page = 0) => {
@@ -86,7 +104,8 @@ function NftsForSale (props) {
       for (let i = 0; i < rawOffers.length; i++) {
         const offer = rawOffers[i]
         const processedOffer = await processTokenData(offer)
-        processedOffers.push(processedOffer)
+        const processedOfferMetadata = await processOfferMetadata(processedOffer)
+        processedOffers.push(processedOfferMetadata)
       }
 
       setOffersAreLoaded(true)
@@ -97,7 +116,7 @@ function NftsForSale (props) {
       setOffersAreLoaded(true)
       throw err
     }
-  }, [processTokenData])
+  }, [processTokenData, processOfferMetadata])
 
   //  This function loads the token data .
   const lazyLoadTokenData = useCallback(async (tokens) => {
@@ -166,6 +185,7 @@ function NftsForSale (props) {
         const thisToken = tokens[i]
 
         // Incon does not  need to be downloaded, so continue with the next one
+        console.log('Icon already downloaded  ', thisToken.iconAlreadyDownloaded)
         if (thisToken.iconAlreadyDownloaded) continue
 
         // Try to get token icon url from mutable data.
@@ -174,7 +194,7 @@ function NftsForSale (props) {
         if (iconUrl) {
           // Set the icon url to the token , this can be used to display the icon in the token card component.
           thisToken.icon = iconUrl
-          thisToken.tokenData.userData = userData
+          thisToken.userData = userData
         }
 
         // Mark token to prevent fetch token icon again.
@@ -246,17 +266,23 @@ function NftsForSale (props) {
 
   // Effect to load NFTs on component mount
   useEffect(() => {
-    console.log('loading nfts for sale')
-    loadNftOffers()
+    // Peevent to run multiple times
+    if (!componentMountRef.current) {
+      console.log('loading nfts for sale')
+      loadNftOffers()
+      componentMountRef.current = true
+    }
   }, [loadNftOffers])
 
   // Effect to reload data when page changes
   useEffect(() => {
-    if (currentPage >= 0) {
+    // Validate to prevent load same page again
+    if (currentPage >= 0 && currentPage !== lastLoadedPage) {
       console.log('page changed, reloading nfts for sale')
       loadNftOffers(currentPage)
+      setLastLoadedPage(currentPage)
     }
-  }, [currentPage, loadNftOffers])
+  }, [currentPage, loadNftOffers, lastLoadedPage])
 
   // Handler for refresh button
   const handleRefresh = useCallback(() => {
@@ -275,8 +301,34 @@ function NftsForSale (props) {
     return url
   }
 
+  const updateOffer = useCallback(async (offer) => {
+    try {
+      if (!offer) return
+      setOffersAreLoaded(false)
+      const processedOffer = await processTokenData(offer)
+      const processedOfferMetadata = await processOfferMetadata(processedOffer)
+
+      setOffers(offers => {
+        // find offer
+        const index = offers.findIndex((val) => { return val.tokenId === offer.tokenId })
+        // Save existing token data
+        processedOfferMetadata.tokenData = offers[index].tokenData
+        // replace with the new data
+        offers[index] = processedOfferMetadata
+        return offers
+      })
+
+      // Re-render tokens cards , to load the new data.
+      setTimeout(() => {
+        setOffersAreLoaded(true)
+      }, 500)
+    } catch (error) {
+      console.warn(error)
+    }
+  }, [processOfferMetadata, processTokenData])
+
   // This function generates a Token Card for each token in the wallet.
-  function generateCards (offers) {
+  const generateCards = useCallback(() => {
     console.log('generateCards() offerData: ', offers)
 
     const tokens = offers
@@ -292,13 +344,14 @@ function NftsForSale (props) {
           token={thisToken}
           handleRefresh={handleRefresh}
           key={`${thisToken.tokenId + i}`}
+          updateOffer={updateOffer}
         />
       )
       tokenCards.push(thisTokenCard)
     }
 
     return tokenCards
-  }
+  }, [offers, appData, handleRefresh, updateOffer])
 
   return (
     <Container>

src/components/app-body/nfts-for-sale/info-button.js

@@ -7,11 +7,18 @@
 
 // Global npm libraries
 import React, { useEffect, useState } from 'react'
-import { Button, Modal, Container, Row, Col } from 'react-bootstrap'
+import { Button, Modal, Container, Row, Col, Spinner } from 'react-bootstrap'
+import axios from 'axios'
+
+// Local libraries
+import config from '../../../config'
+// Global variables and constants
+const SERVER = config.dexServer
 
 function InfoButton (props) {
   const [show, setShow] = useState(false)
   const [mutableDataCid, setMutableDataCid] = useState(null)
+  const [loading, setLoading] = useState(false)
 
   const handleClose = () => {
     console.log('handleClose()')
@@ -36,7 +43,7 @@ function InfoButton (props) {
   // Get token user data if it exists and verify if it contains media or markdown
   useEffect(() => {
     try {
-      const userDataStr = props.token.tokenData.userData
+      const userDataStr = props.token.userData
       if (userDataStr) {
         const userData = JSON.parse(userDataStr)
 
@@ -50,6 +57,22 @@ function InfoButton (props) {
     }
   }, [props.token, show])
 
+  // Update offer data
+  const updateOffer = async () => {
+    try {
+      setLoading(true)
+      const inputObj = { tokenId: props.token.tokenId }
+      const result = await axios.post(`${SERVER}/offer/mutable/sync/`, inputObj)
+      const offerData = result.data
+      console.log('offerData: ', offerData)
+
+      if (props.updateOffer) await props.updateOffer(offerData)
+      setLoading(false)
+    } catch (error) {
+      setLoading(false)
+    }
+  }
+
   // Replace with dummy button until token data is loaded.
   if (!props.token.tokenData) {
     return (
@@ -105,6 +128,7 @@ function InfoButton (props) {
                     href={`/user-data/${props.token.tokenId}#single-view`}
                     target='_blank'
                     rel='noopener noreferrer'
+                    variant='success'
                   >
                     View User Data
                   </Button>
@@ -114,7 +138,10 @@ function InfoButton (props) {
 
           </Container>
         </Modal.Body>
-        <Modal.Footer />
+        <Modal.Footer style={{ justifyContent: 'center' }}>
+          {!loading && <Button style={{ width: '135px' }} onClick={updateOffer}>Update</Button>}
+          {loading && <Spinner />}
+        </Modal.Footer>
       </Modal>
     </>
   )

src/components/app-body/nfts-for-sale/token-card.js

@@ -20,6 +20,7 @@ function TokenCard (props) {
 
   // Update icon state every token.icon and token.tokenData changes
   useEffect(() => {
+    console.log('setting icon')
     setIcon(token.icon)
     setTokenData(token.tokenData)
   }, [token.icon, token.tokenData])
@@ -66,7 +67,7 @@ function TokenCard (props) {
 
               <Row className='text-center'>
                 <Col>
-                  <InfoButton token={token} disabled={!token.tokenData} />
+                  <InfoButton token={token} disabled={!token.tokenData} {...props} />
                 </Col>
 
                 {!hideBuyBtn && (

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

@@ -12,6 +12,8 @@ import ChatSidebar from './chat-sidebar'
 import ChatMain from './chat-main'
 import config from '../../../config'
 
+// Global variables and constants
+
 function NostrChat (props) {
   const { appData } = props
   const { nostrQueries, bchWalletState, startChannelChat } = appData
@@ -28,6 +30,8 @@ function NostrChat (props) {
   const [selectedChannel, setSelectedChannel] = useState(null)
   const [selectedChannelIsDm, setSelectedChannelIsDm] = useState(false)
 
+  const [deletedChats] = useState(appData.nostrQueries.deletedChats)
+
   const profilesRef = useRef({})
   const dmChannelsRef = useRef([])
 
@@ -182,6 +186,9 @@ function NostrChat (props) {
     // fetch messages when channel selected and channel metadata are loaded
     if (!selectedChannel || !channelsLoaded || selectedChannelIsDm) return
 
+    // wait for deleted chats
+    if (!deletedChats || !Array.isArray(deletedChats)) return
+
     // Load messages for group channel
     const relays = nostrQueries.relays
     if (relays.length === 0) {
@@ -204,7 +211,8 @@ function NostrChat (props) {
     pool.on('event', (relay, subId, ev) => {
       console.log('Group post retrieved from ', relay.url, ev.content)
       const onBlackList = nostrQueries.blackList.find((val) => { return val === ev.pubkey })
-      if (!onBlackList)onMsgRead(ev)
+      const isDeleted = deletedChats.find((val) => { return val.eventId === ev.id })
+      if (!onBlackList && !isDeleted)onMsgRead(ev)
     })
 
     return () => {
@@ -212,7 +220,7 @@ function NostrChat (props) {
       console.log('Close existing pool for group channel')
       pool.close()
     }
-  }, [onMsgRead, selectedChannel, selectedChannelIsDm, nostrQueries, channelsLoaded])
+  }, [onMsgRead, selectedChannel, selectedChannelIsDm, nostrQueries, channelsLoaded, deletedChats])
 
   // Handle nostr pool for dm channels
   useEffect(() => {

src/components/app-body/nostr/profile/nft-for-sale.js

@@ -145,7 +145,7 @@ function NFTForSale (props) {
         if (iconUrl) {
           // Set the icon url to the token , this can be used to display the icon in the token card component.
           thisToken.icon = iconUrl
-          thisToken.tokenData.userData = userData
+          thisToken.userData = userData
         }
 
         // Mark token to prevent fetch token icon again.

src/components/app-body/slp-tokens/index.js

@@ -124,7 +124,7 @@ const SlpTokens = (props) => {
         if (iconUrl) {
           // Set the icon url to the token , this can be used to display the icon in the token card component.
           thisToken.icon = iconUrl
-          thisToken.tokenData.userData = userData
+          thisToken.userData = userData
         }
 
         // Mark token to prevent fetch token icon again.

src/components/app-body/slp-tokens/info-button.js

@@ -59,7 +59,7 @@ function InfoButton (props) {
   useEffect(() => {
     try {
       console.log('props  token', props.token)
-      const userDataStr = props.token.tokenData.userData
+      const userDataStr = props.token.userData
       if (userDataStr) {
         const userData = JSON.parse(userDataStr)
 

src/hooks/state.js

@@ -46,6 +46,7 @@ function useAppState () {
   const [hideSpinner, setHideSpinner] = useState(false)
   const [denyClose, setDenyClose] = useState(false)
   const [isSingleView, setIsSingleView] = useState(false)
+
   // Background process state
   const [asyncBackGroundInitState, setAsyncBackGroundInitState] = useState({
     bchInitLoaded: false, slpInitLoaded: false, asyncBackgroundFinished: false

src/services/nostr-queries.js

@@ -7,6 +7,9 @@ import * as nip19 from 'nostr-tools/nip19'
 import { nip04 } from 'nostr-tools'
 import { hexToBytes } from '@noble/hashes/utils' // already an installed dependency
 import axios from 'axios'
+import config from '../config'
+
+const SERVER = `${config.dexServer}/`
 
 export default class NostrQueries {
   constructor ({ relays }) {
@@ -16,11 +19,16 @@ export default class NostrQueries {
     this.loadedChannelsInfo = {}
     this.blackList = []
     this.blackListFetched = false
+
+    this.deletedChats = []
+    this.deletedPosts = []
   }
 
   async start () {
     try {
       await this.getBlackList()
+      await this.fetchDeletedChats()
+      await this.fetchDeletedPosts()
     } catch (error) {
       console.error('NostrQueries.start() error : ', error.message)
       throw error
@@ -182,7 +190,9 @@ export default class NostrQueries {
 
         pool.on('event', (relay, subId, ev) => {
           console.log('post retrieved from ', relay.url, ev.sig)
-          list = [...list, ev]
+          const isDeleted = this.deletedPosts.find((val) => { return val.eventId === ev.id })
+
+          if (!isDeleted) list = [...list, ev]
         })
         pool.on('error', (relay) => {
           relay.close()
@@ -506,4 +516,39 @@ export default class NostrQueries {
       throw error
     }
   }
+
+  // Get all deleted chats
+  async fetchDeletedChats () {
+    try {
+      const options = {
+        method: 'GET',
+        url: `${SERVER}nostr/deletedChat`
+      }
+      const result = await axios.request(options)
+      const { deletedChats } = result.data
+      this.deletedChats = deletedChats
+    } catch (error) {
+      console.error('Error fetchDeletedChats: ', error)
+      throw error
+    }
+  }
+
+  // Get all deleted posts
+  async fetchDeletedPosts () {
+    try {
+      const options = {
+        method: 'GET',
+        url: `${SERVER}nostr/deletedPost`
+      }
+      const result = await axios.request(options)
+      console.log('result', result)
+      const { deletedPosts } = result.data
+      console.log('deletedPosts', deletedPosts)
+
+      this.deletedPosts = deletedPosts
+    } catch (error) {
+      console.error('Error fetchDeletedPosts: ', error)
+      throw error
+    }
+  }
 }