Merge pull request #36 from Permissionless-Software-Foundation/dh-profile-fill

feat(nostr): Fill in Nostr Profile form with existing data

src/components/app-body/nostr/content-creators/content-card.js

@@ -7,43 +7,14 @@ import { Card } from 'react-bootstrap'
 import Jdenticon from '@chris.troutner/react-jdenticon'
 import CopyOnClick from '../../bch-wallet/copy-on-click.js'
 import FollowBtn from './follow-btn.js'
-import { RelayPool } from 'nostr'
 
 function ContentCard (props) {
-  const [profile, setProfile] = useState([])
-  const [loaded, setLoaded] = useState(false)
   const { creator, followList, refreshFollowList } = props
+  const [profile, setProfile] = useState(null)
 
   useEffect(() => {
-    const loadProfile = async () => {
-      const psf = 'wss://nostr-relay.psfoundation.info'
-
-      const pool = RelayPool([psf])
-      pool.on('open', relay => {
-        relay.subscribe('subid', { limit: 5, kinds: [0], authors: [creator.pubkey] })
-      })
-
-      pool.on('eose', relay => {
-        console.log('Closing Relay')
-        relay.close()
-      })
-
-      pool.on('event', (relay, subId, ev) => {
-        try {
-          const profile = JSON.parse(ev.content)
-          console.log('profile', profile)
-          setProfile(profile)
-        } catch (error) {
-          console.log('Error parsing profile', error)
-        }
-      })
-      setLoaded(true)
-    }
-
-    if (!loaded && creator.npub) {
-      loadProfile()
-    }
-  }, [loaded, creator])
+    setProfile(creator?.profile || {})
+  }, [creator.profile])
 
   const goToProfile = () => {
     const profileUrl = `${window.location.origin}/profile/${creator.npub}`
@@ -69,8 +40,8 @@ function ContentCard (props) {
 
             {/* Creator Info */}
             <div className='flex-grow-1'>
-              <h5 className='mb-2 fw-bold cursor-pointer' onClick={goToProfile}>{profile.name}</h5>
-              <p className='text-muted medium mb-3'>{profile.about}</p>
+              <h5 className='mb-2 fw-bold cursor-pointer' onClick={goToProfile}>{profile?.name}</h5>
+              <p className='text-muted medium mb-3'>{profile?.about}</p>
 
               {/* Nostr Public Key */}
               <div className='mb-2'>
@@ -126,7 +97,16 @@ function ContentCard (props) {
                 Message
               </button>
 
-              <small>Followers: {creator.followerCnt}</small>
+              <div className='d-flex align-items-center justify-content-center gap-2 mt-2'>
+                <span
+                  className='badge rounded-pill bg-white border text-dark px-3 py-2 shadow-sm d-flex align-items-center gap-2'
+                  style={{ fontSize: '1rem', fontWeight: 600, cursor: 'auto' }}
+                >
+                  <i className='bi bi-people-fill text-primary' style={{ fontSize: '1.2rem' }} />
+                  <span style={{ fontWeight: 700 }}>{creator.followerCnt}</span>
+                  <span className='text-muted' style={{ fontWeight: 400, fontSize: '0.9rem' }}>Followers</span>
+                </span>
+              </div>
             </div>
           </div>
 
@@ -139,8 +119,8 @@ function ContentCard (props) {
 
             {/* Creator Info */}
             <div className='w-100 mb-3'>
-              <h5 className='mb-2 fw-bold' onClick={goToProfile}>{profile.name}</h5>
-              <p className='text-muted small mb-3'>{profile.about}</p>
+              <h5 className='mb-2 fw-bold' onClick={goToProfile}>{profile?.name}</h5>
+              <p className='text-muted small mb-3'>{profile?.about}</p>
 
               {/* Nostr Public Key */}
               <div className='mb-3'>
@@ -194,6 +174,13 @@ function ContentCard (props) {
                 Message
               </button>
             </div>
+            <div className='d-flex align-items-center justify-content-center gap-2 mt-2'>
+              <span className='badge rounded-pill bg-white border text-dark px-3 py-2 shadow-sm d-flex align-items-center gap-2' style={{ fontSize: '1rem', fontWeight: 600 }}>
+                <i className='bi bi-people-fill text-primary' style={{ fontSize: '1.2rem' }} />
+                <span style={{ fontWeight: 700 }}>{creator.followerCnt}</span>
+                <span className='text-muted' style={{ fontWeight: 400, fontSize: '0.9rem' }}>Followers</span>
+              </span>
+            </div>
           </div>
         </Card.Body>
       </Card>

src/components/app-body/nostr/content-creators/content-creators-list.js

@@ -1,5 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react'
-import { Container, Spinner, Form } from 'react-bootstrap'
+import { Container, Spinner, Dropdown } from 'react-bootstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faFilter } from '@fortawesome/free-solid-svg-icons'
 
 import axios from 'axios'
 // Local libraries
@@ -12,6 +14,7 @@ const SERVER = config.dexServer
 function ContentCreators (props) {
   const [creators, setCreators] = useState([])
   const [loaded, setLoaded] = useState(false)
+  const [selectedFilter, setSelectedFilter] = useState('Most Followers')
   const { appData } = props
 
   const [followList, setFollowList] = useState([])
@@ -47,13 +50,57 @@ function ContentCreators (props) {
     setFollowList(list)
   }, [appData])
 
+  const loadProfile = useCallback(async (pubKey) => {
+    return new Promise((resolve) => {
+      const psf = 'wss://nostr-relay.psfoundation.info'
+
+      const pool = RelayPool([psf])
+      pool.on('open', relay => {
+        relay.subscribe('subid', { limit: 5, kinds: [0], authors: [pubKey] })
+      })
+
+      pool.on('eose', relay => {
+        console.log('Closing Relay')
+        relay.close()
+        resolve(false)
+      })
+
+      pool.on('event', (relay, subId, ev) => {
+        try {
+          const profile = JSON.parse(ev.content)
+          // console.log('profile', profile)
+          resolve(profile)
+        } catch (error) {
+          resolve(false)
+        }
+      })
+    })
+  }, [])
+
   useEffect(() => {
     const loadCreators = async () => {
       try {
-        const creators = await axios.get(`${SERVER}/sm/list/all/0`)
-        console.log(creators.data)
-        setCreators(creators.data)
+        const creatorsRes = await axios.get(`${SERVER}/sm/list/all/0`)
+        const creators = creatorsRes.data
+        // console.log('creators', creators)
+        setCreators(creators)
         setLoaded(true)
+
+        for (let i = 0; i < creators.length; i++) {
+          try {
+            const creator = creators[i]
+            const profile = await loadProfile(creator.pubkey)
+
+            // the folowing lines should re-render the ContentCard
+            setCreators(prevCreators => {
+              const updatedCreators = [...prevCreators]
+              updatedCreators[i] = { ...updatedCreators[i], profile }
+              return updatedCreators
+            })
+          } catch (error) {
+            console.warn(error)
+          }
+        }
       } catch (error) {
         setLoaded(true)
       }
@@ -63,7 +110,21 @@ function ContentCreators (props) {
       loadCreators()
       getFollowList()
     }
-  }, [loaded, followList, getFollowList])
+  }, [loaded, followList, getFollowList, loadProfile])
+
+  const filteredCreators = useCallback(() => {
+    if (!creators || creators.length === 0) {
+      return []
+    }
+
+    let filtered = [...creators]
+
+    if (selectedFilter === 'Most Followers') {
+      filtered = filtered.sort((a, b) => (b.followerCnt || 0) - (a.followerCnt || 0))
+    }
+
+    return filtered
+  }, [creators, selectedFilter])
 
   return (
     <Container className='mt-4 mb-5'>
@@ -74,13 +135,25 @@ function ContentCreators (props) {
         </p>
       </div>
 
-      <div className='mb-4'>
-        <h3>Filters</h3>
-        <Form.Select>
-          <option>Most Followers</option>
-          <option>Most Tokens</option>
-          <option>Most Likes</option>
-        </Form.Select>
+      <div className='mb-4 d-flex justify-content-end'>
+        <Dropdown>
+          <Dropdown.Toggle variant='outline-secondary' className='d-flex align-items-center gap-2'>
+            <FontAwesomeIcon icon={faFilter} />
+            <span>{selectedFilter}</span>
+          </Dropdown.Toggle>
+
+          <Dropdown.Menu>
+            <Dropdown.Item onClick={() => setSelectedFilter('Most Followers')}>
+              Most Followers
+            </Dropdown.Item>
+            <Dropdown.Item onClick={() => setSelectedFilter('Most Tokens')}>
+              Most Tokens
+            </Dropdown.Item>
+            <Dropdown.Item onClick={() => setSelectedFilter('Most Likes')}>
+              Most Likes
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
       </div>
 
       {!loaded && (
@@ -92,7 +165,7 @@ function ContentCreators (props) {
 
       {loaded && (
         <div>
-          {creators.map((creator, i) => (
+          {filteredCreators().map((creator, i) => (
             <ContentCard
               key={`creator-key${i}`}
               creator={creator}
@@ -104,7 +177,7 @@ function ContentCreators (props) {
         </div>
       )}
 
-      {loaded && creators.length === 0 && (
+      {loaded && filteredCreators().length === 0 && (
         <div className='text-center text-muted py-5 bg-light rounded-4 shadow-sm'>
           <i className='bi bi-people-fill fs-1 mb-3 d-block opacity-50' />
           <div>No content creators found</div>

src/components/app-body/nostr/nostr-post/profile-post.js

@@ -3,17 +3,19 @@ Component for posting nostr information on kind 0.
 */
 
 // Global npm libraries
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Container, Form, Button, Spinner } from 'react-bootstrap'
 import Accordion from 'react-bootstrap/Accordion'
 import { finalizeEvent } from 'nostr-tools/pure'
 import { Relay } from 'nostr-tools/relay'
 import { hexToBytes } from '@noble/hashes/utils' // already an installed dependency
+import { RelayPool } from 'nostr'
 
 function ProfilePost (props) {
+  const { bchWalletState } = props.appData
   const [accordionKey, setAccordionKey] = useState(null)
   const [onFetch, setOnFetch] = useState(false)
-  const { bchWalletState } = props.appData
+  const [formLoaded, setFormLoaded] = useState(false)
   const [formData, setFormData] = useState({
     name: '',
     about: '',
@@ -27,6 +29,43 @@ function ProfilePost (props) {
   const [errorMsg, setErrorMsg] = useState('')
   const [successMsg, setSuccessMsg] = useState('')
 
+  useEffect(() => {
+    // Get Last post from
+    const getLastPost = () => {
+      const { nostrKeyPair } = bchWalletState
+
+      const psf = 'wss://nostr-relay.psfoundation.info'
+
+      const pool = RelayPool([psf])
+      pool.on('open', relay => {
+        relay.subscribe('subid', { limit: 1, kinds: [0], authors: [nostrKeyPair.pubHex] })
+        setFormLoaded(true)
+      })
+
+      pool.on('eose', relay => {
+        console.log('Closing Relay')
+        setFormLoaded(true)
+        relay.close()
+      })
+
+      pool.on('event', (relay, subId, ev) => {
+        console.log('Received event:', ev)
+        // setPosts(currentPosts => [...currentPosts, ev])
+        try {
+          const data = JSON.parse(ev.content)
+          console.log('data', data)
+          setFormData(data)
+        } catch (error) {
+
+        }
+      })
+    }
+
+    if (!formLoaded) {
+      getLastPost()
+    }
+  }, [bchWalletState, formLoaded])
+
   const handleInputChange = (e) => {
     const { name, value } = e.target
     setFormData({
@@ -78,7 +117,6 @@ function ProfilePost (props) {
 
       // Close the connection to the relay.
       relay.close()
-      resetForm()
       setSuccessMsg('Post successfully published!')
       setOnFetch(false)
     } catch (error) {
@@ -92,18 +130,6 @@ function ProfilePost (props) {
     setAccordionKey(key)
   }
 
-  const resetForm = () => {
-    setFormData({
-      name: '',
-      about: '',
-      picture: '',
-      display_name: '',
-      website: '',
-      banner: '',
-      bot: false
-    })
-  }
-
   return (
     <>
       <Container className='mt-4'>
@@ -121,103 +147,111 @@ function ProfilePost (props) {
                   {successMsg}
                 </div>
               )}
-              <Form onSubmit={handleSubmit}>
-                <Form.Group className='mb-3'>
-                  <Form.Label>Name</Form.Label>
-                  <Form.Control
-                    type='text'
-                    placeholder='Enter your name'
-                    name='name'
-                    value={formData.name}
-                    onChange={handleInputChange}
-                    required
-                  />
-                </Form.Group>
+              {formLoaded && (
+                <Form onSubmit={handleSubmit}>
+                  <Form.Group className='mb-3'>
+                    <Form.Label>Name</Form.Label>
+                    <Form.Control
+                      type='text'
+                      placeholder='Enter your name'
+                      name='name'
+                      value={formData.name}
+                      onChange={handleInputChange}
+                      required
+                    />
+                  </Form.Group>
 
-                <Form.Group className='mb-3'>
-                  <Form.Label>About</Form.Label>
-                  <Form.Control
-                    as='textarea'
-                    rows={3}
-                    placeholder='Tell us about yourself'
-                    name='about'
-                    value={formData.about}
-                    onChange={handleInputChange}
-                    required
-                  />
-                </Form.Group>
+                  <Form.Group className='mb-3'>
+                    <Form.Label>About</Form.Label>
+                    <Form.Control
+                      as='textarea'
+                      rows={3}
+                      placeholder='Tell us about yourself'
+                      name='about'
+                      value={formData.about}
+                      onChange={handleInputChange}
+                      required
+                    />
+                  </Form.Group>
 
-                <Form.Group className='mb-3'>
-                  <Form.Label>Profile Picture URL</Form.Label>
-                  <Form.Control
-                    type='url'
-                    placeholder='Enter URL to your profile picture'
-                    name='picture'
-                    value={formData.picture}
-                    onChange={handleInputChange}
-                  />
-                </Form.Group>
+                  <Form.Group className='mb-3'>
+                    <Form.Label>Profile Picture URL</Form.Label>
+                    <Form.Control
+                      type='url'
+                      placeholder='Enter URL to your profile picture'
+                      name='picture'
+                      value={formData.picture}
+                      onChange={handleInputChange}
+                    />
+                  </Form.Group>
 
-                <Form.Group className='mb-3'>
-                  <Form.Label>Display Name</Form.Label>
-                  <Form.Control
-                    type='text'
-                    placeholder='Enter your display name'
-                    name='display_name'
-                    value={formData.display_name}
-                    onChange={handleInputChange}
-                  />
-                </Form.Group>
+                  <Form.Group className='mb-3'>
+                    <Form.Label>Display Name</Form.Label>
+                    <Form.Control
+                      type='text'
+                      placeholder='Enter your display name'
+                      name='display_name'
+                      value={formData.display_name}
+                      onChange={handleInputChange}
+                    />
+                  </Form.Group>
 
-                <Form.Group className='mb-3'>
-                  <Form.Label>Website</Form.Label>
-                  <Form.Control
-                    type='url'
-                    placeholder='Enter your website URL'
-                    name='website'
-                    value={formData.website}
-                    onChange={handleInputChange}
-                  />
-                </Form.Group>
+                  <Form.Group className='mb-3'>
+                    <Form.Label>Website</Form.Label>
+                    <Form.Control
+                      type='url'
+                      placeholder='Enter your website URL'
+                      name='website'
+                      value={formData.website}
+                      onChange={handleInputChange}
+                    />
+                  </Form.Group>
 
-                <Form.Group className='mb-3'>
-                  <Form.Label>Banner URL</Form.Label>
-                  <Form.Control
-                    type='url'
-                    placeholder='Enter URL to your banner picture (1024x768 pixels)'
-                    name='banner'
-                    value={formData.banner}
-                    onChange={handleInputChange}
-                  />
-                </Form.Group>
+                  <Form.Group className='mb-3'>
+                    <Form.Label>Banner URL</Form.Label>
+                    <Form.Control
+                      type='url'
+                      placeholder='Enter URL to your banner picture (1024x768 pixels)'
+                      name='banner'
+                      value={formData.banner}
+                      onChange={handleInputChange}
+                    />
+                  </Form.Group>
 
-                <Form.Group className='mb-3'>
-                  <Form.Check
-                    type='checkbox'
-                    label='This account is for a bot'
-                    name='bot'
-                    checked={formData.bot}
-                    onChange={(e) => {
-                      setFormData({
-                        ...formData,
-                        bot: e.target.checked
-                      })
-                      setSuccessMsg('')
-                      setErrorMsg('')
-                    }}
-                  />
-                </Form.Group>
+                  <Form.Group className='mb-3'>
+                    <Form.Check
+                      type='checkbox'
+                      label='This account is for a bot'
+                      name='bot'
+                      checked={formData.bot}
+                      onChange={(e) => {
+                        setFormData({
+                          ...formData,
+                          bot: e.target.checked
+                        })
+                        setSuccessMsg('')
+                        setErrorMsg('')
+                      }}
+                    />
+                  </Form.Group>
 
-                <div className='d-flex justify-content-center'>
-                  {!onFetch && (
-                    <Button variant='primary' type='submit' disabled={onFetch}>
-                      Post
-                    </Button>
-                  )}
-                  {onFetch && <Spinner animation='border' variant='primary' />}
+                  <div className='d-flex justify-content-center'>
+                    {!onFetch && (
+                      <Button variant='primary' type='submit' disabled={onFetch}>
+                        Post
+                      </Button>
+                    )}
+                    {onFetch && <Spinner animation='border' variant='primary' />}
+                  </div>
+
+                </Form>
+              )}
+              {!formLoaded && (
+                <div className='text-center'>
+                  <Spinner animation='border' variant='primary' />
                 </div>
+              )}
 
-              </Form>
             </Accordion.Body>
           </Accordion.Item>
         </Accordion>

src/config/index.js

@@ -15,7 +15,7 @@ const config = {
   radicleUrl: 'https://app.radicle.network/seeds/maple.radicle.garden/rad:git:hnrkd5cjwwb5tzx37hq9uqm5ubon7ee468xcy/remotes/hyyycncbn9qzqmobnhjq9rry6t4mbjiadzjoyhaknzxjcz3cxkpfpc',
 
   dexServer: 'https://dex-api.fullstack.cash',
-  //dexServer: 'http://localhost:5700',
+  // dexServer: 'http://localhost:5700',
 
   nostrTopic: 'bch-dex-test-topic-02',
   nostrRelay: 'wss://nostr-relay.psfoundation.info'