saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-05 08:42:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
austinkelsay 2024-09-02 18:23:40 -05:00
parent dd5187eec4
commit 2051513927
8 changed files with 278 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/BottomBar.js
View File

@ -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>

0
src/pages/feed/discord.js → src/components/feeds/DiscordFeed.js
View File

97
src/pages/feed/global.js → src/components/feeds/GlobalFeed.js
View File

@ -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' }))
].sort((a, b) => new Date(b.timestamp || b.createdAt) - new Date(a.timestamp || a.createdAt));
...(stackerNewsData || []).map(item => ({ ...item, type: 'stackernews' })),
...(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" />
<p className="pl-4 font-bold text-xl text-white">{item.type === 'discord' ? item.author : item.user.name}</p>
<Avatar
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' ?
`https://discord.com/channels/${item.channelId}/${item.id}` :
`https://stacker.news/items/${item.id}`, '_blank')}
onClick={() => window.open(
item.type === 'discord' ? `https://discord.com/channels/${item.channelId}/${item.id}` :
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' ? (
<p className="m-0 text-lg text-gray-200">{item.content}</p>
{item.type === 'discord' || item.type === 'nostr' ? (
<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>

137
src/components/feeds/NostrFeed.js Normal file
View File

@ -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;

0
src/pages/feed/stackernews.js → src/components/feeds/StackerNewsFeed.js
View File

52
src/hooks/nostr/useCommunityNotes.js Normal file
View File

@ -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 };
}

12
src/pages/feed/index.js → src/pages/feed.js
View File

@ -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 DiscordFeed from './discord';
import StackerNewsFeed from './stackernews';
import GlobalFeed from './global';
import NostrFeed from '@/components/feeds/NostrFeed';
import DiscordFeed from '@/components/feeds/DiscordFeed';
import StackerNewsFeed from '@/components/feeds/StackerNewsFeed';
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 NostrIcon from '../../../public/nostr.png';
import StackerNewsIcon from '../../public/sn.svg';
import NostrIcon from '../../public/nostr.png';
const Feed = () => {
const [selectedTopic, setSelectedTopic] = useState('global');

79
src/pages/feed/nostr.js
View File

@ -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;