mirror of
https://github.com/smolgrrr/TAO.git
synced 2024-09-20 09:21:25 +00:00
add threads
This commit is contained in:
parent
46a6186580
commit
93c0eb5e77
97
client/src/components/PostCard/OPPostCard.tsx
Normal file
97
client/src/components/PostCard/OPPostCard.tsx
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
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;
|
@ -2,6 +2,7 @@ import CardContainer from './CardContainer';
|
|||||||
import { FolderIcon } from '@heroicons/react/24/outline';
|
import { FolderIcon } from '@heroicons/react/24/outline';
|
||||||
import { parseContent } from '../../utils/content';
|
import { parseContent } from '../../utils/content';
|
||||||
import { Event } from 'nostr-tools';
|
import { Event } from 'nostr-tools';
|
||||||
|
import { nip19 } from 'nostr-tools';
|
||||||
|
|
||||||
const colorCombos = [
|
const colorCombos = [
|
||||||
'from-red-400 to-yellow-500',
|
'from-red-400 to-yellow-500',
|
||||||
@ -60,11 +61,12 @@ const PostCard = ({ event}: { event: Event }) => {
|
|||||||
// limit: 200,
|
// limit: 200,
|
||||||
// },
|
// },
|
||||||
// ]);
|
// ]);
|
||||||
const colorCombo = getColorFromHash(event.id, colorCombos);
|
const colorCombo = getColorFromHash(event.pubkey, colorCombos);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<CardContainer>
|
<CardContainer>
|
||||||
|
<a href={`/thread/${nip19.noteEncode(event.id)}`}>
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<div className="flex justify-between items-center">
|
<div className="flex justify-between items-center">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
@ -89,6 +91,7 @@ const PostCard = ({ event}: { event: Event }) => {
|
|||||||
</div>
|
</div>
|
||||||
)} */}
|
)} */}
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
</CardContainer>
|
</CardContainer>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -1,13 +1,18 @@
|
|||||||
import { useParams } from 'react-router-dom';
|
import { useParams } from 'react-router-dom';
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { Event } from "nostr-tools"
|
import { Event, nip19 } from "nostr-tools"
|
||||||
import { subNote } from '../../utils/subscriptions';
|
import { subNote } from '../../utils/subscriptions';
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import PostCard from '../PostCard/PostCard';
|
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 = () => {
|
const Thread = () => {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
const [events, setEvents] = useState<Event[]>([]); // Initialize state
|
const [events, setEvents] = useState<Event[]>([]); // Initialize state
|
||||||
|
let decodeResult = nip19.decode(id as string);
|
||||||
|
|
||||||
|
|
||||||
// Define your callback function for subGlobalFeed
|
// Define your callback function for subGlobalFeed
|
||||||
const onEvent = (event: Event, relay: string) => {
|
const onEvent = (event: Event, relay: string) => {
|
||||||
@ -16,20 +21,54 @@ const Thread = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (decodeResult.type === 'note') {
|
||||||
|
let id_to_hex: string = decodeResult.data;
|
||||||
|
// Call your subNote function or do whatever you need to do with id_to_hex
|
||||||
|
subNote(id_to_hex, onEvent);
|
||||||
|
}
|
||||||
// Subscribe to global feed when the component mounts
|
// Subscribe to global feed when the component mounts
|
||||||
subNote(id as string, onEvent);
|
|
||||||
|
|
||||||
// Optionally, return a cleanup function to unsubscribe when the component unmounts
|
// Optionally, return a cleanup function to unsubscribe when the component unmounts
|
||||||
return () => {
|
return () => {
|
||||||
// Your cleanup code here
|
// Your cleanup code here
|
||||||
};
|
};
|
||||||
}, []); // Empty dependency array means this useEffect runs once when the component mounts
|
}, []); // Empty dependency array means this useEffect runs once when the component mounts
|
||||||
|
|
||||||
|
const uniqEvents = events.length > 0 ? uniqBy(events, "id") : [];
|
||||||
|
|
||||||
|
if (!uniqEvents[0]) {
|
||||||
|
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">
|
||||||
|
<div className="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
|
||||||
|
<div className="animate-pulse flex space-x-4">
|
||||||
|
<div className="rounded-full bg-slate-700 h-10 w-10"></div>
|
||||||
|
<div className="flex-1 space-y-6 py-1">
|
||||||
|
<div className="h-2 bg-slate-700 rounded"></div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
<div className="h-2 bg-slate-700 rounded col-span-2"></div>
|
||||||
|
<div className="h-2 bg-slate-700 rounded col-span-1"></div>
|
||||||
|
</div>
|
||||||
|
<div className="h-2 bg-slate-700 rounded"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<main className="bg-black text-white min-h-screen">
|
<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">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
|
||||||
{events.sort((a, b) => b.created_at - a.created_at).map((event, index) => (
|
<OPPostCard event={uniqEvents[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} />
|
<PostCard key={index} event={event} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user