doot/TAO
1
0
Fork 0
mirror of https://github.com/smolgrrr/TAO.git synced 2024-09-20 01:11:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

add metadata to notes

Browse Source
This commit is contained in:
smolgrrr 2023-09-24 23:22:51 +10:00
parent 93c0eb5e77
commit 116e709177
6 changed files with 105 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
client/src/components/Home.tsx
View File

@ -3,48 +3,54 @@ import PostCard from './PostCard/PostCard';
import NewThreadCard from './PostCard/NewThreadCard';
import { getPow } from '../utils/mine';
import { relayInit, Event } from 'nostr-tools';
import { subGlobalFeed, simpleSub24hFeed } from '../utils/subscriptions';
import { subGlobalFeed } from '../utils/subscriptions';
import { uniqBy } from '../utils/utils';
const Home = () => {
const [events, setEvents] = useState<Event[]>([]); // Initialize state
const [events, setEvents] = useState<Event[]>([]);
// Define your callback function for subGlobalFeed
const onEvent = (event: Event, relay: string) => {
const onEvent = (event: Event) => {
setEvents((prevEvents) => [...prevEvents, event]);
console.log(event.id + ' ' + event.kind + ' ' + event.tags);
console.log(`${event.id} ${event.kind} ${event.tags}`);
};
useEffect(() => {
// Subscribe to global feed when the component mounts
subGlobalFeed(onEvent);
// Optionally, return a cleanup function to unsubscribe when the component unmounts
return () => {
// Your cleanup code here
};
}, []); // Empty dependency array means this useEffect runs once when the component mounts
// If you eventually need a cleanup function, put it here
}, []);
const uniqEvents = events.length > 0 ? uniqBy(events, "id") : [];
const filteredEvents1 = uniqEvents.filter(event => getPow(event.id) > 3);
const filteredEvents2 = filteredEvents1.filter(event => event.kind == 1);
const filteredEvents3 = filteredEvents2.filter(event =>
const filteredAndSortedEvents = uniqEvents
.filter(event =>
getPow(event.id) > 3 &&
event.kind === 1 &&
!event.tags.some(tag => tag[0] === 'p')
);
const sortedEvents = filteredEvents3.sort((a, b) => (b.created_at as any) - (a.created_at as any));
)
.sort((a, b) => (b.created_at as any) - (a.created_at as any));
const getMetadataEvent = (event: Event) => {
const metadataEvent = uniqEvents.find(e => e.pubkey === event.pubkey && e.kind === 0);
if (metadataEvent) {
return metadataEvent;
}
return null;
}
const countReplies = (event: Event) => {
return uniqEvents.filter(e => e.tags.some(tag => tag[0] === 'e' && tag[1] === event.id)).length;
}
return (
<>
<main className="bg-black text-white min-h-screen">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
<NewThreadCard />
{sortedEvents.sort((a, b) => b.created_at - a.created_at).map((event, index) => (
<PostCard key={index} event={event}/>
{filteredAndSortedEvents.map((event, index) => (
<PostCard key={index} event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)}/>
))}
</div>
</main>
{/* <Header /> */}
</>
);
};

97
client/src/components/PostCard/OPPostCard.tsx
View File

@ -1,97 +0,0 @@
import CardContainer from './CardContainer';
import { FolderIcon } from '@heroicons/react/24/outline';
import { parseContent } from '../../utils/content';
import { Event } from 'nostr-tools';
const colorCombos = [
'from-red-400 to-yellow-500',
'from-green-400 to-blue-500',
'from-purple-400 to-pink-500',
'from-yellow-400 to-orange-500',
'from-indigo-400 to-purple-500',
'from-pink-400 to-red-500',
'from-blue-400 to-indigo-500',
'from-orange-400 to-red-500',
'from-teal-400 to-green-500',
'from-cyan-400 to-teal-500',
'from-lime-400 to-green-500',
'from-amber-400 to-orange-500',
'from-rose-400 to-pink-500',
'from-violet-400 to-purple-500',
'from-sky-400 to-cyan-500'
];
const getColorFromHash = (id: string, colors: string[]): string => {
// Create a simple hash from the event.id
let hash = 0;
for (let i = 0; i < id.length; i++) {
hash = (hash << 5) - hash + id.charCodeAt(i);
}
// Use the hash to pick a color from the colors array
const index = Math.abs(hash) % colors.length;
return colors[index];
};
const timeAgo = (unixTime: number) => {
const seconds = Math.floor((new Date().getTime() / 1000) - unixTime);
if (seconds < 60) return `now`;
const minutes = Math.floor(seconds / 60);
if (minutes < 60) return `${minutes}m`;
const hours = Math.floor(minutes / 60);
if (hours < 24) return `${hours}h`;
const days = Math.floor(hours / 24);
return `${days} days ago`;
};
const PostCard = ({ event}: { event: Event }) => {
// Replace 10 with the actual number of comments for each post
const numberOfComments = 10;
const { comment, file } = parseContent(event);
// const replyList = await relay.list([
// {
// kinds: [1],
// limit: 200,
// },
// ]);
const colorCombo = getColorFromHash(event.pubkey, colorCombos);
return (
<>
<CardContainer>
<div className="flex flex-col">
<div className="flex justify-between items-center">
<div className="flex items-center">
<div className={`h-5 w-5 bg-gradient-to-r ${colorCombo} rounded-full`} />
<div className="ml-2 text-md font-semibold">Anonymous</div>
</div>
<div className="flex items-center ml-auto">
<div className="text-xs font-semibold text-gray-500 mr-2">{timeAgo(event.created_at)}</div>
<FolderIcon className="h-5 w-5 mr-1 text-gray-500" />
<span className="text-xs text-gray-500">{numberOfComments}</span>
</div>
</div>
<div className="mr-2 flex flex-col break-words">
{comment}
</div>
{file !== "" && (
<div className="file">
<img
src={file}
loading="lazy"
/>
</div>
)}
</div>
</CardContainer>
</>
);
};
export default PostCard;

36
client/src/components/PostCard/PostCard.tsx
View File

@ -3,6 +3,9 @@ import { FolderIcon } from '@heroicons/react/24/outline';
import { parseContent } from '../../utils/content';
import { Event } from 'nostr-tools';
import { nip19 } from 'nostr-tools';
import { useEffect, useState } from 'react';
import { subNote } from '../../utils/subscriptions';
import { getMetadata, uniqBy } from '../../utils/utils';
const colorCombos = [
'from-red-400 to-yellow-500',
@ -46,23 +49,23 @@ const timeAgo = (unixTime: number) => {
if (hours < 24) return `${hours}h`;
const days = Math.floor(hours / 24);
return `${days} days ago`;
if (days < 7) return `${days}d`;
const weeks = Math.floor(days / 7);
return `${weeks}w`;
};
const PostCard = ({ event}: { event: Event }) => {
const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event | null, replyCount: number}) => {
// Replace 10 with the actual number of comments for each post
const numberOfComments = 10;
const { comment, file } = parseContent(event);
// const replyList = await relay.list([
// {
// kinds: [1],
// limit: 200,
// },
// ]);
const colorCombo = getColorFromHash(event.pubkey, colorCombos);
let metadataParsed = null;
if (metadata !== null) {
metadataParsed = getMetadata(metadata);
}
return (
<>
<CardContainer>
@ -70,13 +73,22 @@ const PostCard = ({ event}: { event: Event }) => {
<div className="flex flex-col">
<div className="flex justify-between items-center">
<div className="flex items-center">
<div className={`h-5 w-5 bg-gradient-to-r ${colorCombo} rounded-full`} />
{metadataParsed ?
<>
<img className={`h-8 w-8 rounded-full`} src={metadataParsed.picture} />
<div className="ml-2 text-md font-semibold">{metadataParsed.name}</div>
</>
:
<>
<div className={`h-8 w-8 bg-gradient-to-r ${colorCombo} rounded-full`} />
<div className="ml-2 text-md font-semibold">Anonymous</div>
</>
}
</div>
<div className="flex items-center ml-auto">
<div className="text-xs font-semibold text-gray-500 mr-2">{timeAgo(event.created_at)}</div>
<FolderIcon className="h-5 w-5 mr-1 text-gray-500" />
<span className="text-xs text-gray-500">{numberOfComments}</span>
<span className="text-xs text-gray-500">{replyCount}</span>
</div>
</div>
<div className="mr-2 flex flex-col break-words">

7
client/src/components/Thread/Thread.tsx
View File

@ -5,7 +5,6 @@ import { subNote } from '../../utils/subscriptions';
import { useEffect } from 'react';
import PostCard from '../PostCard/PostCard';
import { uniqBy } from '../../utils/utils';
import OPPostCard from '../PostCard/OPPostCard';
import { DocumentTextIcon, FolderPlusIcon } from '@heroicons/react/24/outline';
const Thread = () => {
@ -62,14 +61,14 @@ const Thread = () => {
<>
<main className="bg-black text-white min-h-screen">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
<OPPostCard event={uniqEvents[0]} />
<PostCard event={uniqEvents[0]} metadata={null} replyCount={0}/>
<div className="col-span-full flex justify-center space-x-36 ">
<DocumentTextIcon className="h-5 w-5 text-gray-200" />
<FolderPlusIcon className="h-5 w-5 text-gray-200" />
</div>
<div className="col-span-full h-0.5 bg-neutral-900"></div> {/* This is the white line separator */}
{uniqEvents.sort((a, b) => b.created_at - a.created_at).map((event, index) => (
<PostCard key={index} event={event} />
{uniqEvents.slice(1).sort((a, b) => b.created_at - a.created_at).map((event, index) => (
<PostCard key={index} event={event} metadata={null} replyCount={0}/>
))}
</div>
</main>

29
client/src/utils/subscriptions.ts
View File

@ -14,6 +14,7 @@ export const subGlobalFeed = (onEvent: SubCallback) => {
const now = Math.floor(Date.now() * 0.001);
const pubkeys = new Set<string>();
const notes = new Set<string>();
const replies = new Set<string>();
const prefix = Math.floor(16 / 4); // 4 bits in each '0' character
sub({ // get past events
cb: (evt, relay) => {
@ -30,19 +31,19 @@ export const subGlobalFeed = (onEvent: SubCallback) => {
unsub: true
});
// New Callback to only add events that pass the PoW requirement
const powFilteredCallback = (evt: Event, relay: string) => {
if (getPow(evt.id) > 2) { // Replace '5' with your actual PoW requirement
pubkeys.add(evt.pubkey);
notes.add(evt.id);
onEvent(evt, relay);
}
};
// // New Callback to only add events that pass the PoW requirement
// const powFilteredCallback = (evt: Event, relay: string) => {
// if (getPow(evt.id) > 2) { // Replace '5' with your actual PoW requirement
// pubkeys.add(evt.pubkey);
// notes.add(evt.id);
// onEvent(evt, relay);
// }
// };
setTimeout(() => {
// get profile info
sub({
cb: powFilteredCallback,
cb: onEvent,
filter: {
authors: Array.from(pubkeys),
kinds: [0],
@ -51,6 +52,16 @@ export const subGlobalFeed = (onEvent: SubCallback) => {
unsub: true,
});
pubkeys.clear();
sub({
cb: onEvent,
filter: {
'#e': Array.from(notes),
kinds: [1],
},
unsub: true,
});
notes.clear();
}, 2000);

20
client/src/utils/utils.ts
View File

@ -1,3 +1,5 @@
import { Event } from "nostr-tools"
export const uniqBy = <T>(arr: T[], key: keyof T): T[] => {
return Object.values(
arr.reduce(
@ -19,3 +21,21 @@ export const uniqBy = <T>(arr: T[], key: keyof T): T[] => {
return Math.floor(date.getTime() / 1000)
}
export interface Metadata {
name?: string
username?: string
display_name?: string
picture?: string
banner?: string
about?: string
website?: string
lud06?: string
lud16?: string
nip05?: string
}
export const getMetadata = (event: Event) => {
const metadata: Metadata = JSON.parse(event.content)
return metadata
}