Basic nostr feed works, global feed is updated and works great

src/components/BottomBar.js

@@ -11,13 +11,13 @@ const BottomBar = () => {
 
     return (
         <div className='min-bottom-bar:hidden fixed bottom-0 left-0 right-0 bg-gray-800 p-2 flex justify-around items-center z-20 border-t-2 border-gray-700'>
-            <div onClick={() => router.push('/')} className={`cursor-pointer p-2 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
+            <div onClick={() => router.push('/')} className={`cursor-pointer px-4 py-3 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
                 <i className="pi pi-home text-2xl" />
             </div>
-            <div onClick={() => router.push('/content')} className={`cursor-pointer p-2 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
+            <div onClick={() => router.push('/content')} className={`cursor-pointer px-4 py-3 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
                 <i className="pi pi-video text-2xl" />
             </div>
-            <div onClick={() => router.push('/feed?channel=global')} className={`cursor-pointer p-2 rounded-lg ${isActive('/feed?channel=global') ? 'bg-gray-700' : ''}`}>
+            <div onClick={() => router.push('/feed?channel=global')} className={`cursor-pointer px-4 py-3 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}>
                 <i className="pi pi-comments text-2xl" />
             </div>
         </div>

src/components/feeds/GlobalFeed.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Card } from 'primereact/card';
 import { Avatar } from 'primereact/avatar';
 import { Tag } from 'primereact/tag';
@@ -8,6 +8,13 @@ import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { useRouter } from 'next/router';
+import { useCommunityNotes } from '@/hooks/nostr/useCommunityNotes';
+import { useNDKContext } from '@/context/NDKContext';
+import { findKind0Fields } from '@/utils/nostr';
+import NostrIcon from '../../../public/nostr.png';
+import Image from 'next/image';
+import { useImageProxy } from '@/hooks/useImageProxy';
+import { nip19 } from 'nostr-tools';
 
 const StackerNewsIconComponent = () => (
     <svg width="16" height="16" className='mr-2' viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -25,8 +32,32 @@ const GlobalFeed = () => {
     const router = useRouter();
     const { data: discordData, error: discordError, isLoading: discordLoading } = useDiscordQuery({page: router.query.page});
     const { data: stackerNewsData, error: stackerNewsError, isLoading: stackerNewsLoading } = useQuery({queryKey: ['stackerNews'], queryFn: fetchStackerNews});
+    const { communityNotes: nostrData, error: nostrError, isLoading: nostrLoading } = useCommunityNotes();
+    const { ndk } = useNDKContext();
+    const { returnImageProxy } = useImageProxy();
 
-    if (discordLoading || stackerNewsLoading) {
+    const [authorData, setAuthorData] = useState({});
+
+    useEffect(() => {
+        const fetchAuthors = async () => {
+            const authorDataMap = {};
+            for (const message of nostrData) {
+                const author = await fetchAuthor(message.pubkey);
+                authorDataMap[message.pubkey] = author;
+            }
+            setAuthorData(authorDataMap);
+        };
+
+        if (nostrData && nostrData.length > 0) {
+            fetchAuthors();
+        }
+    }, [nostrData]);
+
+    const fetchAuthor = async (pubkey) => {
+        // ... (keep the existing fetchAuthor function)
+    }
+
+    if (discordLoading || stackerNewsLoading || nostrLoading) {
         return (
             <div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
                 <ProgressSpinner className='w-full mt-24 mx-auto' />
@@ -34,34 +65,57 @@ const GlobalFeed = () => {
         );
     }
 
-    if (discordError || stackerNewsError) {
+    if (discordError || stackerNewsError || nostrError) {
         return <div className="text-red-500 text-center p-4">Failed to load feed. Please try again later.</div>;
     }
 
     const combinedFeed = [
         ...(discordData || []).map(item => ({ ...item, type: 'discord' })),
-        ...(stackerNewsData || []).map(item => ({ ...item, type: 'stackernews' }))
+        ...(stackerNewsData || []).map(item => ({ ...item, type: 'stackernews' })),
-    ].sort((a, b) => new Date(b.timestamp || b.createdAt) - new Date(a.timestamp || a.createdAt));
+        ...(nostrData || []).map(item => ({ ...item, type: 'nostr' }))
+    ].sort((a, b) => {
+        const dateA = a.type === 'nostr' ? a.created_at * 1000 : new Date(a.timestamp || a.createdAt);
+        const dateB = b.type === 'nostr' ? b.created_at * 1000 : new Date(b.timestamp || b.createdAt);
+        return dateB - dateA;
+    });
 
     const header = (item) => (
         <div className="flex flex-row w-full items-center justify-between p-4 bg-gray-800 rounded-t-lg">
             <div className="flex flex-row items-center">
-                <Avatar image={item.type === 'discord' ? item.avatar : null} icon={item.type === 'stackernews' ? "pi pi-user" : null} shape="circle" size="large" className="border-2 border-blue-400" />
+                <Avatar 
-                <p className="pl-4 font-bold text-xl text-white">{item.type === 'discord' ? item.author : item.user.name}</p>
+                    image={item.type === 'discord' ? item.avatar : 
+                           item.type === 'nostr' ? authorData[item.pubkey]?.avatar : null} 
+                    icon={item.type === 'stackernews' ? "pi pi-user" : null} 
+                    shape="circle" 
+                    size="large" 
+                    className="border-2 border-blue-400" 
+                />
+                <p className="pl-4 font-bold text-xl text-white">
+                    {item.type === 'discord' ? item.author : 
+                     item.type === 'stackernews' ? item.user.name :
+                     authorData[item.pubkey]?.username || item.pubkey.substring(0, 12) + '...'}
+                </p>
             </div>
             <div className="flex flex-col items-start justify-between">
                 <div className="flex flex-row w-full justify-between items-center my-1 max-sidebar:flex-col max-sidebar:items-start">
-                    {item.type === 'discord' ? (
+                    {item.type === 'discord' && (
                         <>
                             <Tag value={item.channel} severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2 max-sidebar:mr-0" />
                             <Tag icon="pi pi-discord" value="discord" className="w-fit text-[#f8f8ff] bg-blue-400 max-sidebar:mt-1" />
                         </>
-                    ) : (
+                    )}
+                    {item.type === 'stackernews' && (
                         <>
                             <Tag value="~devs" severity="contrast" className="w-fit text-[#f8f8ff] mr-2 max-sidebar:mr-0" />
                             <Tag icon={<StackerNewsIconComponent />} value="stackernews" className="w-fit bg-gray-600 text-[#f8f8ff] max-sidebar:mt-1" />
                         </>
                     )}
+                    {item.type === 'nostr' && (
+                        <>
+                            <Tag icon="pi pi-hashtag" value="plebdevs" severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2 max-sidebar:mr-0" />
+                            <Tag icon={<Image src={NostrIcon} alt="Nostr" width={14} height={14} className='mr-[1px]' />} value="nostr" className="w-fit text-[#f8f8ff] bg-blue-400 max-sidebar:mt-1" />
+                        </>
+                    )}
                 </div>
             </div>
         </div>
@@ -70,18 +124,27 @@ const GlobalFeed = () => {
     const footer = (item) => (
         <div className="w-full flex justify-between items-center">
             <span className="bg-gray-800 rounded-lg p-2 text-sm text-gray-300">
-                {new Date(item.timestamp || item.createdAt).toLocaleString()}
+                {item.type === 'nostr' 
+                    ? new Date(item.created_at * 1000).toLocaleString()
+                    : new Date(item.timestamp || item.createdAt).toLocaleString()}
             </span>
             <Button
-                label={item.type === 'discord' ? "View in Discord" : "View on StackerNews"}
+                label={item.type === 'discord' ? "View in Discord" : 
+                       item.type === 'stackernews' ? "View on StackerNews" : 
+                       "View on Nostr"}
                 icon="pi pi-external-link"
                 outlined
-                severity={item.type === 'discord' ? "info" : "warning"}
+                severity={item.type === 'discord' ? "info" : 
+                          item.type === 'stackernews' ? "warning" : 
+                          "success"}
                 size="small"
                 className='my-2'
-                onClick={() => window.open(item.type === 'discord' ? 
+                onClick={() => window.open(
-                    `https://discord.com/channels/${item.channelId}/${item.id}` : 
+                    item.type === 'discord' ? `https://discord.com/channels/${item.channelId}/${item.id}` : 
-                    `https://stacker.news/items/${item.id}`, '_blank')}
+                    item.type === 'stackernews' ? `https://stacker.news/items/${item.id}` :
+                    `https://nostr.band/${nip19.noteEncode(item.id)}`, 
+                    '_blank'
+                )}
             />
         </div>
     );
@@ -97,8 +160,8 @@ const GlobalFeed = () => {
                     footer={() => footer(item)}
                     className="w-full bg-gray-700 shadow-lg hover:shadow-xl transition-shadow duration-300 mb-4"
                     >
-                        {item.type === 'discord' ? (
+                        {item.type === 'discord' || item.type === 'nostr' ? (
-                            <p className="m-0 text-lg text-gray-200">{item.content}</p>
+                            <p className="m-0 text-lg text-gray-200 overflow-hidden break-words">{item.content}</p>
                         ) : (
                             <>
                                 <h3 className="m-0 text-lg text-gray-200">{item.title}</h3>

src/components/feeds/NostrFeed.js

@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from 'react';
+import { Card } from 'primereact/card';
+import { Avatar } from 'primereact/avatar';
+import { Tag } from 'primereact/tag';
+import { Button } from 'primereact/button';
+import { ProgressSpinner } from 'primereact/progressspinner';
+import { useCommunityNotes } from '@/hooks/nostr/useCommunityNotes';
+import { useRouter } from 'next/router';
+import { useNDKContext } from '@/context/NDKContext';
+import { findKind0Fields } from '@/utils/nostr';
+import NostrIcon from '../../../public/nostr.png';
+import Image from 'next/image';
+import { useImageProxy } from '@/hooks/useImageProxy';
+import { nip19 } from 'nostr-tools';
+
+const NostrFeed = () => {
+    const router = useRouter();
+    const { communityNotes, error, isLoading } = useCommunityNotes();
+    const { ndk, addSigner } = useNDKContext();
+    const { returnImageProxy } = useImageProxy();
+
+    const [authorData, setAuthorData] = useState({});
+
+    useEffect(() => {
+        const fetchAuthors = async () => {
+            const authorDataMap = {};
+            for (const message of communityNotes) {
+                const author = await fetchAuthor(message.pubkey);
+                authorDataMap[message.pubkey] = author;
+            }
+            setAuthorData(authorDataMap);
+        };
+
+        if (communityNotes && communityNotes.length > 0) {
+            fetchAuthors();
+        }
+    }, [communityNotes]);
+
+    const fetchAuthor = async (pubkey) => {
+        try {
+            await ndk.connect();
+
+            const filter = {
+                kinds: [0],
+                authors: [pubkey]
+            }
+
+            const author = await ndk.fetchEvent(filter);
+            if (author) {
+                try {
+                    const fields = await findKind0Fields(JSON.parse(author.content));
+                    return fields;
+                } catch (error) {
+                    console.error('Error fetching author:', error);
+                }
+            } else {
+                return null;
+            }
+        } catch (error) {
+            console.error('Error fetching author:', error);
+        }
+    }
+
+    const renderHeader = (message) => {
+        const author = authorData[message.pubkey];
+
+        if (!author || Object.keys(author).length === 0 || !author.username || !author.avatar) {
+            return null;
+        }
+
+        return (
+            <div className="flex flex-row w-full items-center justify-between p-4 bg-gray-800 rounded-t-lg">
+                <div className="flex flex-row items-center">
+                    <Avatar image={author?.avatar} shape="circle" size="large" className="border-2 border-blue-400" />
+                    <p className="pl-4 font-bold text-xl text-white">{author?.username || author?.pubkey.substring(0, 12) + '...'}</p>
+                </div>
+                <div className="flex flex-col items-start justify-between">
+                    <div className="flex flex-row w-full justify-between items-center my-1 max-sidebar:flex-col max-sidebar:items-start">
+                        <Tag icon="pi pi-hashtag" value="plebdevs" severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2 max-sidebar:mr-0" />
+                        <Tag icon={<Image src={NostrIcon} alt="Nostr" width={14} height={14} className='mr-[1px]' />} value="nostr" className="w-fit text-[#f8f8ff] bg-blue-400 max-sidebar:mt-1" />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    const footer = (message) => (
+        <div className="w-full flex justify-between items-center">
+            <span className="bg-gray-800 rounded-lg p-2 text-sm text-gray-300">
+                {new Date(message.created_at * 1000).toLocaleString()}
+            </span>
+            <Button
+                label="View on Nostr"
+                icon="pi pi-external-link"
+                outlined
+                size="small"
+                className='my-2'
+                onClick={() => window.open(`https://nostr.band/${nip19.noteEncode(message.id)}`, '_blank')}
+            />
+        </div>
+    );
+
+    if (isLoading) {
+        return (
+            <div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
+                <ProgressSpinner className='w-full mt-24 mx-auto' />
+            </div>
+        );
+    }
+
+    if (error) {
+        return <div className="text-red-500 text-center p-4">Failed to load messages. Please try again later.</div>;
+    }
+
+    return (
+        <div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]">
+            <div className="mx-4 mt-4">
+                {communityNotes && communityNotes.length > 0 ? (
+                    communityNotes.map(message => (
+                        <Card
+                            key={message.id}
+                            header={renderHeader(message)}
+                            footer={() => footer(message)}
+                            className="w-full bg-gray-700 shadow-lg hover:shadow-xl transition-shadow duration-300 mb-4"
+                        >
+                            <p className="m-0 text-lg text-gray-200 overflow-hidden break-words">{message.content}</p>
+                        </Card>
+                    ))
+                ) : (
+                    <div className="text-gray-400 text-center p-4">No messages available.</div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default NostrFeed;

src/hooks/nostr/useCommunityNotes.js

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react';
+import { useNDKContext } from '@/context/NDKContext';
+
+export function useCommunityNotes() {
+    const [isClient, setIsClient] = useState(false);
+    const [communityNotes, setCommunityNotes] = useState();
+    // Add new state variables for loading and error
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const {ndk, addSigner} = useNDKContext();
+
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+
+    const fetchCommunityNotesFromNDK = async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            await ndk.connect();
+
+            const filter = { kinds: [1], "#t": ["plebdevs"] };
+            const events = await ndk.fetchEvents(filter);
+
+            if (events && events.size > 0) {
+                const eventsArray = Array.from(events);
+                setCommunityNotes(eventsArray);
+                setIsLoading(false);
+                return eventsArray;
+            }
+            setIsLoading(false);
+            return [];
+        } catch (error) {
+            console.error('Error fetching community notes from NDK:', error);
+            setError(error);
+            setIsLoading(false);
+            return [];
+        }
+    };
+
+    useEffect(() => {
+        if (isClient) {
+            fetchCommunityNotesFromNDK().then(fetchedCommunityNotes => {
+                if (fetchedCommunityNotes && fetchedCommunityNotes.length > 0) {
+                    setCommunityNotes(fetchedCommunityNotes);
+                }
+            });
+        }
+    }, [isClient]);
+
+    return { communityNotes, isLoading, error };
+}

src/pages/feed.js

@@ -2,15 +2,15 @@ import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 import { InputText } from 'primereact/inputtext';
 import CommunityMenuTab from '@/components/menutab/CommunityMenuTab';
-import NostrFeed from './nostr';
+import NostrFeed from '@/components/feeds/NostrFeed';
-import DiscordFeed from './discord';
+import DiscordFeed from '@/components/feeds/DiscordFeed';
-import StackerNewsFeed from './stackernews';
+import StackerNewsFeed from '@/components/feeds/StackerNewsFeed';
-import GlobalFeed from './global';
+import GlobalFeed from '@/components/feeds/GlobalFeed';
 import { useRouter } from 'next/router';
 import { Message } from 'primereact/message';
 import { Tag } from 'primereact/tag';
-import StackerNewsIcon from '../../../public/sn.svg';
+import StackerNewsIcon from '../../public/sn.svg';
-import NostrIcon from '../../../public/nostr.png';
+import NostrIcon from '../../public/nostr.png';
 
 const Feed = () => {
     const [selectedTopic, setSelectedTopic] = useState('global');

src/pages/feed/nostr.js

@@ -1,79 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Card } from 'primereact/card';
-import { Avatar } from 'primereact/avatar';
-import { Tag } from 'primereact/tag';
-import { Button } from 'primereact/button';
-import { ProgressSpinner } from 'primereact/progressspinner';
-import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery';
-import { useRouter } from 'next/router';
-
-const NostrFeed = () => {
-    const router = useRouter();
-    const { data, error, isLoading } = useDiscordQuery({page: router.query.page});
-
-    if (isLoading) {
-        return (
-            <div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
-                <ProgressSpinner className='w-full mt-24 mx-auto' />
-            </div>
-        );
-    }
-
-    if (error) {
-        return <div className="text-red-500 text-center p-4">Failed to load messages. Please try again later.</div>;
-    }
-
-    const header = (message) => (
-        <div className="flex flex-row w-full items-center justify-between p-4 bg-gray-800 rounded-t-lg">
-            <div className="flex flex-row items-center">
-                <Avatar image={message.avatar} shape="circle" size="large" className="border-2 border-blue-400" />
-                <p className="pl-4 font-bold text-xl text-white">{message.author}</p>
-            </div>
-            <div className="flex flex-col items-start justify-between">
-                <div className="flex flex-row w-full justify-between items-center my-1 max-sidebar:flex-col max-sidebar:items-start">
-                    <Tag value={message.channel} severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2 max-sidebar:mr-0" />
-                    <Tag icon="pi pi-discord" value="discord" className="w-fit text-[#f8f8ff] bg-blue-400 max-sidebar:mt-1" />
-                </div>
-            </div>
-        </div>
-    );
-
-    const footer = (message) => (
-        <div className="w-full flex justify-between items-center">
-            <span className="bg-gray-800 rounded-lg p-2 text-sm text-gray-300">
-                {new Date(message.timestamp).toLocaleString()}
-            </span>
-            <Button
-                label="View in Discord"
-                icon="pi pi-external-link"
-                outlined
-                size="small"
-                className='my-2'
-                onClick={() => window.open(`https://discord.com/channels/${message.channelId}/${message.id}`, '_blank')}
-            />
-        </div>
-    );
-
-    return (
-        <div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]">
-            <div className="mx-4 mt-4">
-            {data && data.length > 0 ? (
-                data.map(message => (
-                    <Card
-                    key={message.id}
-                    header={() => header(message)}
-                    footer={() => footer(message)}
-                    className="w-full bg-gray-700 shadow-lg hover:shadow-xl transition-shadow duration-300 mb-4"
-                    >
-                        <p className="m-0 text-lg text-gray-200">{message.content}</p>
-                    </Card>
-                ))
-            ) : (
-                <div className="text-gray-400 text-center p-4">No messages available.</div>
-            )}
-            </div>
-        </div>
-    );
-};
-
-export default NostrFeed;