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

fix key prop stuff

Browse Source
This commit is contained in:
smolgrrr 2023-10-27 23:53:36 +11:00
parent 7080e2cfe8
commit 686875e203
4 changed files with 11 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/components/Modals/LinkPreview.tsx
View File

@ -2,17 +2,14 @@ import { getLinkPreview } from 'link-preview-js';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
const LinkModal = ({ key, url }: { key: string, url: string}) => { const LinkModal = ({ url }: { url: string}) => {
const [linkPreview, setLinkPreview] = useState<LinkPreview | null>(null); const [linkPreview, setLinkPreview] = useState<LinkPreview | null>(null);
useEffect(() => { useEffect(() => {
const fetchLinkPreview = async () => {
getLinkPreview(url) getLinkPreview(url)
.then((preview) => setLinkPreview(preview as LinkPreview)) .then((preview) => setLinkPreview(preview as LinkPreview))
.catch((error) => console.error(error)); .catch((error) => console.error(error));
};
fetchLinkPreview();
}, [url]); }, [url]);
if (!linkPreview) { if (!linkPreview) {

12
client/src/components/Modals/TextModal.tsx
View File

@ -20,10 +20,10 @@ const ContentPreview = ({ key, comment }: { key: string, comment: string }) => {
}; };
useEffect(() => { useEffect(() => {
const urls = comment.match(/\bhttps?:\/\/\S+/gi); const findUrl = comment.match(/\bhttps?:\/\/\S+/gi);
if (urls && urls.length > 0) { if (findUrl && findUrl.length > 0) {
setUrl(url) setUrl(findUrl[0])
setFinalComment(finalComment.replace(url, '').trim()) // setFinalComment(finalComment.replace(findUrl[0], '').trim())
} }
const match = comment.match(/\bnostr:([a-z0-9]+)/i); const match = comment.match(/\bnostr:([a-z0-9]+)/i);
@ -47,7 +47,7 @@ const ContentPreview = ({ key, comment }: { key: string, comment: string }) => {
<div className="mr-2 flex flex-col break-words"> <div className="mr-2 flex flex-col break-words">
{isExpanded ? finalComment : finalComment.slice(0, 240)} {isExpanded ? finalComment : finalComment.slice(0, 240)}
{finalComment.length > 240 && ( {finalComment.length > 240 && (
<button className="text-gray-500"> <button className="text-gray-500" onClick={() => setIsExpanded(true)}>
... Read more ... Read more
</button> </button>
)} )}
@ -55,7 +55,7 @@ const ContentPreview = ({ key, comment }: { key: string, comment: string }) => {
<LinkModal key={key} url={url} /> <LinkModal key={key} url={url} />
)} )}
{quoteEvents[0] && quoteEvents.length > 0 && ( {quoteEvents[0] && quoteEvents.length > 0 && (
<QuoteEmbed event={quoteEvents[0]} metadata={getMetadataEvent(quoteEvents[0])} /> <QuoteEmbed key={key} event={quoteEvents[0]} metadata={getMetadataEvent(quoteEvents[0])} />
)} )}
</div> </div>
); );

18
client/src/components/Thread/OPCard.tsx
View File

@ -7,6 +7,7 @@ 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'; import { getLinkPreview } from 'link-preview-js';
import ContentPreview from '../Modals/TextModal';
const colorCombos = [ const colorCombos = [
'from-red-400 to-yellow-500', 'from-red-400 to-yellow-500',
@ -105,22 +106,7 @@ const OPCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event
</div> </div>
</div> </div>
<div className="mr-2 flex flex-col break-words"> <div className="mr-2 flex flex-col break-words">
{isExpanded ? comment : truncatedComment} <ContentPreview key={event.id} comment={comment} />
{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> </div>
{file !== "" && ( {file !== "" && (
<div className="file"> <div className="file">

3
client/src/components/Thread/ReplyCard.tsx
View File

@ -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 ContentPreview from '../Modals/TextModal';
const colorCombos = [ const colorCombos = [
'from-red-400 to-yellow-500', 'from-red-400 to-yellow-500',
@ -106,7 +107,7 @@ const ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, m
))} ))}
</div> </div>
<div className="mr-2 flex flex-col break-words"> <div className="mr-2 flex flex-col break-words">
{comment} <ContentPreview key={event.id} comment={comment} />
</div> </div>
{file !== "" && ( {file !== "" && (
<div className="file"> <div className="file">