diff --git a/src/components/app-body/index.js b/src/components/app-body/index.js index 0733d27..bc349b6 100644 --- a/src/components/app-body/index.js +++ b/src/components/app-body/index.js @@ -25,6 +25,7 @@ import SignMessage from './sign/index.js' import ServerSelectView from './configuration/select-server-view' import NostrPost from './nostr/nostr-post/index.js' import NostrRead from './nostr/nostr-read/index.js' +import GlobalFeed from './nostr/global-feed/index.js' import UserDataReview from './user-data-review' function AppBody (props) { // Dependency injection through props @@ -47,6 +48,7 @@ function AppBody (props) { } /> } /> } /> + } /> } /> {/** Show in all paths except the servers view */} diff --git a/src/components/app-body/nostr/global-feed/feed.js b/src/components/app-body/nostr/global-feed/feed.js new file mode 100644 index 0000000..c216a3b --- /dev/null +++ b/src/components/app-body/nostr/global-feed/feed.js @@ -0,0 +1,98 @@ +/** + * Component for reading global nostr posts + */ +// Global npm libraries +import React, { useEffect, useState } from 'react' +import { Container, Card, Spinner } from 'react-bootstrap' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faUser } from '@fortawesome/free-solid-svg-icons' + +import { RelayPool } from 'nostr' + +function Feed (props) { + const { bchWalletState } = props.appData + const [posts, setPosts] = useState([]) + const [loaded, setLoaded] = useState(false) + + useEffect(() => { + const start = () => { + const psf = 'wss://nostr-relay.psfoundation.info' + + const pool = RelayPool([psf]) + pool.on('open', relay => { + relay.subscribe('REQ', { limit: 10, kinds: [1], '#t': ['slpdex-socialmedia'] }) + }) + + pool.on('eose', relay => { + console.log('Closing Relay') + setLoaded(true) + relay.close() + }) + + pool.on('event', (relay, subId, ev) => { + console.log('Received event:', ev) + // const profile = JSON.parse(ev.content) + setPosts(currentPosts => [...currentPosts, ev]) + }) + } + + if (!loaded) { + start() + } + }, [bchWalletState, loaded]) + + return ( + +
+ {posts.map((post, index) => ( + + +
+
+ +
+
+
+ {post.pubkey.slice(0, 8) + '...'} +
+ + {`${post.pubkey.slice(0, 8)}...${post.pubkey.slice(-5)}`} + +
+ + {new Date(post.created_at * 1000).toLocaleString()} + +
+
+
+ {post.content} +
+
+
+
+ ))} + {!posts.length && loaded && ( +
+ +
No posts found
+
+ )} + + {!loaded && ( +
+ +
+ )} +
+
+ ) +} + +export default Feed diff --git a/src/components/app-body/nostr/global-feed/index.js b/src/components/app-body/nostr/global-feed/index.js new file mode 100644 index 0000000..72ac994 --- /dev/null +++ b/src/components/app-body/nostr/global-feed/index.js @@ -0,0 +1,31 @@ +/* +Component for reading the nostr global feed. +*/ + +// Global npm libraries +import React from 'react' +import { Container } from 'react-bootstrap' +import Feed from './feed' + +function GlobalFeed (props) { + const { appData } = props + + return ( + <> + +

+ Global Feed +

+ +
+ + ) +} + +export default GlobalFeed diff --git a/src/components/app-body/nostr/nostr-read/public-read.js b/src/components/app-body/nostr/nostr-read/public-read.js index e34bc80..653d804 100644 --- a/src/components/app-body/nostr/nostr-read/public-read.js +++ b/src/components/app-body/nostr/nostr-read/public-read.js @@ -3,7 +3,7 @@ */ // Global npm libraries import React, { useEffect, useState } from 'react' -import { Container, Card } from 'react-bootstrap' +import { Container, Card, Spinner } from 'react-bootstrap' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faUser } from '@fortawesome/free-solid-svg-icons' @@ -28,6 +28,7 @@ function PublicRead (props) { pool.on('eose', relay => { console.log('Closing Relay') + setLoaded(true) relay.close() }) @@ -35,8 +36,6 @@ function PublicRead (props) { console.log('Received event:', ev) setPosts(currentPosts => [...currentPosts, ev]) }) - - setLoaded(true) } if (!loaded) { @@ -85,6 +84,11 @@ function PublicRead (props) {
No posts found
)} + {!loaded && ( +
+ +
+ )} ) diff --git a/src/components/nav-menu/index.js b/src/components/nav-menu/index.js index 0eb2a87..573b1e4 100644 --- a/src/components/nav-menu/index.js +++ b/src/components/nav-menu/index.js @@ -114,6 +114,13 @@ function NavMenu (props) { > Nostr Profile + + Global Feed +