+
- {filteredAndSortedEvents.map((event, index) => (
-
+
+
+ {filteredAndSortedEvents.map((event) => (
+
))}
diff --git a/client/src/components/Modals/QuoteEmbed.tsx b/client/src/components/Modals/QuoteEmbed.tsx
index 327718d..0c31361 100644
--- a/client/src/components/Modals/QuoteEmbed.tsx
+++ b/client/src/components/Modals/QuoteEmbed.tsx
@@ -1,25 +1,25 @@
-import { parseContent } from '../../utils/content';
-import { Event } from 'nostr-tools';
-import { getMetadata, uniqBy } from '../../utils/utils';
-import ContentPreview from './TextModal';
-import { renderMedia } from '../../utils/FileUpload';
+import { parseContent } from "../../utils/content";
+import { Event } from "nostr-tools";
+import { getMetadata, uniqBy } from "../../utils/utils";
+import ContentPreview from "./TextModal";
+import { renderMedia } from "../../utils/FileUpload";
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'
+ "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 => {
@@ -35,10 +35,10 @@ const getColorFromHash = (id: string, colors: string[]): string => {
};
const timeAgo = (unixTime: number) => {
- const seconds = Math.floor((new Date().getTime() / 1000) - unixTime);
-
+ 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`;
@@ -52,40 +52,52 @@ const timeAgo = (unixTime: number) => {
return `${weeks}w`;
};
-const QuoteEmbed = ({ event, metadata }: { event: Event, metadata: Event | null}) => {
- const { comment, file } = parseContent(event);
- const colorCombo = getColorFromHash(event.pubkey, colorCombos);
+const QuoteEmbed = ({
+ event,
+ metadata,
+}: {
+ event: Event;
+ metadata: Event | null;
+}) => {
+ const { comment, file } = parseContent(event);
+ const colorCombo = getColorFromHash(event.pubkey, colorCombos);
- let metadataParsed = null;
- if (metadata !== null) {
- metadataParsed = getMetadata(metadata);
- }
+ let metadataParsed = null;
+ if (metadata !== null) {
+ metadataParsed = getMetadata(metadata);
+ }
return (
-
-
-
-
- {metadataParsed ?
+
+
+
+
+ {metadataParsed ? (
<>
-
-
{metadataParsed.name}
+
+
{metadataParsed.name}
>
- :
+ ) : (
<>
-
-
Anonymous
+
+
Anonymous
>
- }
-
+ )}
-
-
-
- {renderMedia(file)}
+
+
+
+ {renderMedia(file)}
+
);
};
-export default QuoteEmbed;
\ No newline at end of file
+export default QuoteEmbed;
diff --git a/client/src/components/Modals/TextModal.tsx b/client/src/components/Modals/TextModal.tsx
index 52444fe..9e21aa7 100644
--- a/client/src/components/Modals/TextModal.tsx
+++ b/client/src/components/Modals/TextModal.tsx
@@ -1,15 +1,15 @@
import QuoteEmbed from "./QuoteEmbed";
-import { Event } from 'nostr-tools';
+import { Event } from "nostr-tools";
import { useEffect, useState } from "react";
-import { subNoteOnce } from '../../utils/subscriptions';
+import { subNoteOnce } from "../../utils/subscriptions";
import { nip19 } from "nostr-tools";
import LinkModal from "./LinkPreview";
-const ContentPreview = ({ key, comment }: { key: string, comment: string }) => {
- const [finalComment, setFinalComment] = useState(comment)
+const ContentPreview = ({ key, comment }: { key: string; comment: string }) => {
+ const [finalComment, setFinalComment] = useState(comment);
const [quoteEvents, setQuoteEvents] = useState
([]); // Initialize state
const [isExpanded, setIsExpanded] = useState(false);
- const [url, setUrl] = useState('')
+ const [url, setUrl] = useState("");
// Define your callback function for subGlobalFeed
const onEvent = (event: Event, relay: string) => {
@@ -19,8 +19,8 @@ const ContentPreview = ({ key, comment }: { key: string, comment: string }) => {
useEffect(() => {
const findUrl = comment.match(/\bhttps?:\/\/\S+/gi);
if (findUrl && findUrl.length > 0) {
- setUrl(findUrl[0])
- setFinalComment(finalComment.replace(findUrl[0], '').trim())
+ setUrl(findUrl[0]);
+ setFinalComment(finalComment.replace(findUrl[0], "").trim());
}
const match = comment.match(/\bnostr:([a-z0-9]+)/i);
@@ -28,39 +28,43 @@ const ContentPreview = ({ key, comment }: { key: string, comment: string }) => {
if (nostrQuoteID && nostrQuoteID.length > 0) {
let id_to_hex = String(nip19.decode(nostrQuoteID as string).data);
subNoteOnce(id_to_hex, onEvent);
- setFinalComment(finalComment.replace('nostr:' + nostrQuoteID, '').trim())
+ setFinalComment(finalComment.replace("nostr:" + nostrQuoteID, "").trim());
}
}, [comment, finalComment]);
const getMetadataEvent = (event: Event) => {
- const metadataEvent = quoteEvents.find(e => e.pubkey === event.pubkey && e.kind === 0);
+ const metadataEvent = quoteEvents.find(
+ (e) => e.pubkey === event.pubkey && e.kind === 0
+ );
if (metadataEvent) {
return metadataEvent;
}
return null;
- }
+ };
return (
-
+
{isExpanded ? finalComment : finalComment.slice(0, 240)}
{finalComment.length > 240 && (
setIsExpanded(!isExpanded)}
>
- {isExpanded ? '...Read less' : '...Read more'}
+ {isExpanded ? "...Read less" : "...Read more"}
)}
- {url !== '' && (
-
- )}
+ {url !== "" &&
}
{quoteEvents[0] && quoteEvents.length > 0 && (
-
+
)}
);
-}
+};
export default ContentPreview;
diff --git a/client/src/components/PostCard/CardContainer.tsx b/client/src/components/PostCard/CardContainer.tsx
index cc0467b..c9829cb 100644
--- a/client/src/components/PostCard/CardContainer.tsx
+++ b/client/src/components/PostCard/CardContainer.tsx
@@ -1,9 +1,9 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren } from "react";
export default function CardContainer({ children }: PropsWithChildren) {
return (
-
-
{children}
+
);
-}
\ No newline at end of file
+}
diff --git a/client/src/components/PostCard/NewThreadCard.tsx b/client/src/components/PostCard/NewThreadCard.tsx
index 2781461..f89b85d 100644
--- a/client/src/components/PostCard/NewThreadCard.tsx
+++ b/client/src/components/PostCard/NewThreadCard.tsx
@@ -1,22 +1,31 @@
-import CardContainer from './CardContainer';
-import { ArrowUpTrayIcon, CpuChipIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
-import { XCircleIcon } from '@heroicons/react/24/solid';
-import { useState, useEffect, useMemo } from 'react';
-import { generatePrivateKey, getPublicKey, finishEvent } from 'nostr-tools';
-import { publish } from '../../utils/relays';
-import FileUpload from '../../utils/FileUpload';
-import { renderMedia } from '../../utils/FileUpload';
+import CardContainer from "./CardContainer";
+import {
+ ArrowUpTrayIcon,
+ CpuChipIcon,
+ ArrowPathIcon,
+} from "@heroicons/react/24/outline";
+import { XCircleIcon } from "@heroicons/react/24/solid";
+import { useState, useEffect, useMemo } from "react";
+import { generatePrivateKey, getPublicKey, finishEvent } from "nostr-tools";
+import { publish } from "../../utils/relays";
+import FileUpload from "../../utils/FileUpload";
+import { renderMedia } from "../../utils/FileUpload";
const NewThreadCard: React.FC = () => {
const [comment, setComment] = useState("");
const [file, setFile] = useState("");
const [sk, setSk] = useState(generatePrivateKey());
- const [difficulty, setDifficulty] = useState(localStorage.getItem('difficulty') || '21');
+ const [difficulty, setDifficulty] = useState(
+ localStorage.getItem("difficulty") || "21"
+ );
const [uploadingFile, setUploadingFile] = useState(false);
const [messageFromWorker, setMessageFromWorker] = useState(null);
const [doingWorkProp, setDoingWorkProp] = useState(false);
// Initialize the worker outside of any effects
- const worker = useMemo(() => new Worker(new URL('../../powWorker', import.meta.url)), []);
+ const worker = useMemo(
+ () => new Worker(new URL("../../powWorker", import.meta.url)),
+ []
+ );
useEffect(() => {
worker.onmessage = (event) => {
@@ -29,10 +38,10 @@ const NewThreadCard: React.FC = () => {
setDifficulty(difficulty);
};
- window.addEventListener('difficultyChanged', handleDifficultyChange);
+ window.addEventListener("difficultyChanged", handleDifficultyChange);
return () => {
- window.removeEventListener('difficultyChanged', handleDifficultyChange);
+ window.removeEventListener("difficultyChanged", handleDifficultyChange);
};
}, []);
@@ -46,12 +55,12 @@ const NewThreadCard: React.FC = () => {
created_at: Math.floor(Date.now() / 1000),
pubkey: getPublicKey(sk),
},
- difficulty
+ difficulty,
});
};
useEffect(() => {
- setDoingWorkProp(false)
+ setDoingWorkProp(false);
if (messageFromWorker) {
try {
const signedEvent = finishEvent(messageFromWorker, sk);
@@ -66,17 +75,17 @@ const NewThreadCard: React.FC = () => {
worker.terminate();
};
} catch (error) {
- setComment(error + ' ' + comment);
+ setComment(error + " " + comment);
}
}
}, [messageFromWorker]);
async function attachFile(file_input: File | null) {
- setUploadingFile(true); // start loading
+ setUploadingFile(true); // start loading
try {
if (file_input) {
const rx = await FileUpload(file_input);
- setUploadingFile(false); // stop loading
+ setUploadingFile(false); // stop loading
if (rx.url) {
setFile(rx.url);
} else if (rx?.error) {
@@ -84,87 +93,101 @@ const NewThreadCard: React.FC = () => {
}
}
} catch (error: unknown) {
- setUploadingFile(false); // stop loading
+ setUploadingFile(false); // stop loading
if (error instanceof Error) {
setFile(error?.message);
}
}
}
-
return (
- <>
-
-