mirror of
https://github.com/smolgrrr/TAO.git
synced 2024-09-20 09:21:25 +00:00
UI tings
This commit is contained in:
parent
ef574c4d2d
commit
30713ec56b
@ -12,9 +12,11 @@
|
|||||||
"@types/react": "^18.2.21",
|
"@types/react": "^18.2.21",
|
||||||
"@types/react-dom": "^18.2.7",
|
"@types/react-dom": "^18.2.7",
|
||||||
"@types/react-swipeable-views": "^0.13.2",
|
"@types/react-swipeable-views": "^0.13.2",
|
||||||
|
"link-preview-js": "^3.0.5",
|
||||||
"nostr-tools": "latest",
|
"nostr-tools": "latest",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
"react-linkify": "^1.0.0-alpha",
|
||||||
"react-pull-to-refresh": "^2.0.1",
|
"react-pull-to-refresh": "^2.0.1",
|
||||||
"react-router-dom": "^6.15.0",
|
"react-router-dom": "^6.15.0",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
|
@ -23,7 +23,7 @@ const Home = () => {
|
|||||||
|
|
||||||
const filteredAndSortedEvents = uniqEvents
|
const filteredAndSortedEvents = uniqEvents
|
||||||
.filter(event =>
|
.filter(event =>
|
||||||
getPow(event.id) > 20 &&
|
getPow(event.id) > 5 &&
|
||||||
event.kind === 1 &&
|
event.kind === 1 &&
|
||||||
!event.tags.some(tag => tag[0] === 'p')
|
!event.tags.some(tag => tag[0] === 'p')
|
||||||
)
|
)
|
||||||
|
@ -6,7 +6,7 @@ import { minePow } from '../../utils/mine';
|
|||||||
import { publish } from '../../utils/relays';
|
import { publish } from '../../utils/relays';
|
||||||
import NostrImg from '../../utils/ImgUpload';
|
import NostrImg from '../../utils/ImgUpload';
|
||||||
|
|
||||||
const difficulty = 20
|
const difficulty = 25
|
||||||
|
|
||||||
const NewThreadCard: React.FC = () => {
|
const NewThreadCard: React.FC = () => {
|
||||||
const [comment, setComment] = useState("");
|
const [comment, setComment] = useState("");
|
||||||
|
@ -6,6 +6,7 @@ import { nip19 } from 'nostr-tools';
|
|||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { subNote } from '../../utils/subscriptions';
|
import { subNote } from '../../utils/subscriptions';
|
||||||
import { getMetadata, uniqBy } from '../../utils/utils';
|
import { getMetadata, uniqBy } from '../../utils/utils';
|
||||||
|
import { getLinkPreview } from 'link-preview-js';
|
||||||
|
|
||||||
const colorCombos = [
|
const colorCombos = [
|
||||||
'from-red-400 to-yellow-500',
|
'from-red-400 to-yellow-500',
|
||||||
@ -60,12 +61,25 @@ const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Eve
|
|||||||
const numberOfComments = 10;
|
const numberOfComments = 10;
|
||||||
const { comment, file } = parseContent(event);
|
const { comment, file } = parseContent(event);
|
||||||
const colorCombo = getColorFromHash(event.pubkey, colorCombos);
|
const colorCombo = getColorFromHash(event.pubkey, colorCombos);
|
||||||
|
const [isExpanded, setIsExpanded] = useState(false);
|
||||||
|
const truncatedComment = comment.slice(0, 240);
|
||||||
|
|
||||||
let metadataParsed = null;
|
let metadataParsed = null;
|
||||||
if (metadata !== null) {
|
if (metadata !== null) {
|
||||||
metadataParsed = getMetadata(metadata);
|
metadataParsed = getMetadata(metadata);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const [linkPreview, setLinkPreview] = useState<LinkPreview | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const urls = comment.match(/\bhttps?:\/\/\S+/gi);
|
||||||
|
if (urls && urls.length > 0) {
|
||||||
|
getLinkPreview(urls[0])
|
||||||
|
.then((preview) => setLinkPreview(preview as LinkPreview))
|
||||||
|
.catch((error) => console.error(error));
|
||||||
|
}
|
||||||
|
}, [comment]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<CardContainer>
|
<CardContainer>
|
||||||
@ -92,7 +106,22 @@ const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Eve
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mr-2 flex flex-col break-words">
|
<div className="mr-2 flex flex-col break-words">
|
||||||
{comment}
|
{isExpanded ? comment : truncatedComment}
|
||||||
|
{comment.length > 240 && (
|
||||||
|
<button className="text-gray-500">
|
||||||
|
... Read more
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{linkPreview && linkPreview.images && linkPreview.images.length > 0 && (
|
||||||
|
<div className="link-preview p-1 bg-neutral-800 rounded-lg border border-neutral-800">
|
||||||
|
<a href={linkPreview.url} target="_blank" rel="noopener noreferrer" className="">
|
||||||
|
<img src={linkPreview.images[0]} alt={linkPreview.title} className="rounded-lg"/>
|
||||||
|
<div className="font-semibold text-xs text-gray-300">
|
||||||
|
{linkPreview.title}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
{file !== "" && (
|
{file !== "" && (
|
||||||
<div className="file">
|
<div className="file">
|
||||||
@ -109,4 +138,23 @@ const PostCard = ({ event, metadata, replyCount }: { event: Event, metadata: Eve
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
interface LinkPreview {
|
||||||
|
url: string;
|
||||||
|
title: string;
|
||||||
|
siteName?: string;
|
||||||
|
description?: string;
|
||||||
|
mediaType: string;
|
||||||
|
contentType?: string;
|
||||||
|
images: string[];
|
||||||
|
videos: {
|
||||||
|
url?: string;
|
||||||
|
secureUrl?: string;
|
||||||
|
type?: string;
|
||||||
|
width?: string;
|
||||||
|
height?: string;
|
||||||
|
[key: string]: any;
|
||||||
|
}[];
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
export default PostCard;
|
export default PostCard;
|
158
client/src/components/Thread/OPCard.tsx
Normal file
158
client/src/components/Thread/OPCard.tsx
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
import CardContainer from '../PostCard/CardContainer';
|
||||||
|
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';
|
||||||
|
import { getLinkPreview } from 'link-preview-js';
|
||||||
|
|
||||||
|
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);
|
||||||
|
if (days < 7) return `${days}d`;
|
||||||
|
|
||||||
|
const weeks = Math.floor(days / 7);
|
||||||
|
return `${weeks}w`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const OPCard = ({ 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 colorCombo = getColorFromHash(event.pubkey, colorCombos);
|
||||||
|
const [isExpanded, setIsExpanded] = useState(false);
|
||||||
|
const truncatedComment = comment.slice(0, 240);
|
||||||
|
|
||||||
|
let metadataParsed = null;
|
||||||
|
if (metadata !== null) {
|
||||||
|
metadataParsed = getMetadata(metadata);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [linkPreview, setLinkPreview] = useState<LinkPreview | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const urls = comment.match(/\bhttps?:\/\/\S+/gi);
|
||||||
|
if (urls && urls.length > 0) {
|
||||||
|
getLinkPreview(urls[0])
|
||||||
|
.then((preview) => setLinkPreview(preview as LinkPreview))
|
||||||
|
.catch((error) => console.error(error));
|
||||||
|
}
|
||||||
|
}, [comment]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<CardContainer>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="flex items-center">
|
||||||
|
{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">{replyCount}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mr-2 flex flex-col break-words">
|
||||||
|
{isExpanded ? comment : truncatedComment}
|
||||||
|
{comment.length > 240 && (
|
||||||
|
<button className="text-gray-500" onClick={() => setIsExpanded(!isExpanded)}>
|
||||||
|
{isExpanded ? 'Read less' : '... Read more'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{linkPreview && linkPreview.images && linkPreview.images.length > 0 && (
|
||||||
|
<div className="link-preview p-1 bg-neutral-800 rounded-lg border border-neutral-800">
|
||||||
|
<a href={linkPreview.url} target="_blank" rel="noopener noreferrer" className="">
|
||||||
|
<img src={linkPreview.images[0]} alt={linkPreview.title} className="rounded-lg"/>
|
||||||
|
<div className="font-semibold text-xs text-gray-300">
|
||||||
|
{linkPreview.title}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{file !== "" && (
|
||||||
|
<div className="file">
|
||||||
|
<img
|
||||||
|
src={file}
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContainer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface LinkPreview {
|
||||||
|
url: string;
|
||||||
|
title: string;
|
||||||
|
siteName?: string;
|
||||||
|
description?: string;
|
||||||
|
mediaType: string;
|
||||||
|
contentType?: string;
|
||||||
|
images: string[];
|
||||||
|
videos: {
|
||||||
|
url?: string;
|
||||||
|
secureUrl?: string;
|
||||||
|
type?: string;
|
||||||
|
width?: string;
|
||||||
|
height?: string;
|
||||||
|
[key: string]: any;
|
||||||
|
}[];
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default OPCard;
|
@ -12,6 +12,7 @@ import { minePow } from '../../utils/mine';
|
|||||||
import { publish } from '../../utils/relays';
|
import { publish } from '../../utils/relays';
|
||||||
import ThreadPost from './ThreadPost';
|
import ThreadPost from './ThreadPost';
|
||||||
import ReplyCard from './ReplyCard';
|
import ReplyCard from './ReplyCard';
|
||||||
|
import OPCard from './OPCard';
|
||||||
|
|
||||||
|
|
||||||
const difficulty = 20
|
const difficulty = 20
|
||||||
@ -110,7 +111,7 @@ const Thread = () => {
|
|||||||
<>
|
<>
|
||||||
<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">
|
||||||
<PostCard event={uniqEvents[0]} metadata={getMetadataEvent(uniqEvents[0])} replyCount={countReplies(uniqEvents[0])} />
|
<OPCard event={uniqEvents[0]} metadata={getMetadataEvent(uniqEvents[0])} replyCount={countReplies(uniqEvents[0])} />
|
||||||
<div className="col-span-full flex justify-center space-x-36 ">
|
<div className="col-span-full flex justify-center space-x-36 ">
|
||||||
<DocumentTextIcon
|
<DocumentTextIcon
|
||||||
className="h-5 w-5 text-gray-200"
|
className="h-5 w-5 text-gray-200"
|
||||||
|
Loading…
Reference in New Issue
Block a user