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

start clean up

Browse Source
This commit is contained in:
smolgrrr 2024-08-16 13:37:40 +10:00
parent 11628443cf
commit 9e28d9dba6
26 changed files with 259 additions and 479 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/App.tsx
View File

@ -1,14 +1,13 @@
import "./App.css";
import Home from "./components/Home";
import Settings from "./components/Settings";
import "./styles/App.css";
import Home from "./components/routes/Home";
import Settings from "./components/routes/Settings";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Thread from "./components/Thread";
import Header from "./components/Header/Header";
import AddToHomeScreenPrompt from "./components/Modals/CheckMobile/CheckMobile";
import Notifications from "./components/Notifications";
// import TestUI from "./components/TestUI";
import Hashtags from "./components/Hashtags";
import HashtagPage from "./components/HashtagPage";
import Thread from "./components/routes/Thread";
import Header from "./components/modals/Header";
import AddToHomeScreenPrompt from "./components/modals/CheckMobile/CheckMobile";
import Notifications from "./components/routes/Notifications";
import Hashtags from "./components/routes/Hashtags";
import HashtagPage from "./components/routes/HashtagPage";
function App() {
return (
@ -21,7 +20,6 @@ function App() {
<Route path="/notifications" element={<Notifications />} />
<Route path="/hashtags" element={<Hashtags />} />
<Route path="/hashtag/:id" element={<HashtagPage />} />
{/* <Route path="/test" element={<TestUI />} /> */}
</Routes>
<AddToHomeScreenPrompt/>
</Router>

4
client/src/components/Forms/PostFormCard.tsx
View File

@ -8,10 +8,10 @@ import { XCircleIcon } from "@heroicons/react/24/solid";
import { useState, useEffect, useRef } from "react";
import { UnsignedEvent, Event as NostrEvent, nip19 } from "nostr-tools";
import { renderMedia, attachFile } from "../../utils/FileUpload";
import { EmojiPicker } from "./Emojis/emoji-picker";
import EmojiPicker from "@emoji-mart/react";
import customEmojis from './custom_emojis.json';
import { useSubmitForm } from "./handleSubmit";
import "./Form.css";
import "../../styles/Form.css";
interface FormProps {
refEvent?: NostrEvent;

2
client/src/components/Forms/RepostNote.tsx
View File

@ -4,7 +4,7 @@ import {
import { useState, useEffect } from "react";
import { UnsignedEvent, Event as NostrEvent, nip19 } from "nostr-tools";
import { useSubmitForm } from "./handleSubmit";
import "./Form.css";
import "../../styles/Form.css";
interface FormProps {
refEvent: NostrEvent;

114
client/src/components/HashtagPage.tsx
View File

@ -1,114 +0,0 @@
import { useEffect, useState, useCallback } from "react";
import PostCard from "./Modals/NoteCard";
import { uniqBy } from "../utils/otherUtils"; // Assume getPow is a correct import now
import { subHashtagFeed, subProfile} from "../utils/subscriptions";
import { verifyPow } from "../utils/mine";
import { Event, nip19 } from "nostr-tools";
import NewNoteCard from "./Forms/PostFormCard";
import RepostCard from "./Modals/RepostCard";
import OptionsBar from "./Modals/OptionsBar";
import { useParams } from "react-router-dom";
const DEFAULT_DIFFICULTY = 0;
const useUniqEvents = (hashtag: string) => {
const [events, setEvents] = useState<Event[]>([]);
const age = Number(localStorage.getItem("age")) || 24;
useEffect(() => {
const onEvent = (event: Event) => setEvents((prevEvents) => [...prevEvents, event]);
console.log(events)
const unsubscribe = subHashtagFeed(hashtag, onEvent, age);
return unsubscribe;
}, [hashtag]);
const uniqEvents = uniqBy(events, "id");
const noteEvents = uniqEvents.filter(event => event.kind === 1 || event.kind === 6);
const metadataEvents = uniqEvents.filter(event => event.kind === 0);
return { noteEvents, metadataEvents };
};
const HashtagPage = () => {
const { id } = useParams();
const filterDifficulty = localStorage.getItem("filterHashtagDifficulty") || DEFAULT_DIFFICULTY;
const [sortByTime, setSortByTime] = useState<boolean>(localStorage.getItem('sortBy') !== 'true');
const [setAnon, setSetAnon] = useState<boolean>(localStorage.getItem('anonMode') !== 'false');
const {noteEvents, metadataEvents } = useUniqEvents(id as string);
const [delayedSort, setDelayedSort] = useState(false)
const postEvents: Event[] = noteEvents
.filter((event) =>
verifyPow(event) >= Number(filterDifficulty) &&
event.kind !== 0 &&
(event.kind !== 1 || !event.tags.some((tag) => tag[0] === "e"))
)
let sortedEvents = [...postEvents]
.sort((a, b) => {
// Sort by PoW in descending order
const powDiff = verifyPow(b) - verifyPow(a);
if (powDiff !== 0) return powDiff;
// If PoW is the same, sort by created_at in descending order
return b.created_at - a.created_at;
});
if (delayedSort) {
sortedEvents = sortedEvents.filter(
!setAnon ? (e) => !metadataEvents.some((metadataEvent) => metadataEvent.pubkey === e.pubkey) : () => true
);
} else {
sortedEvents = sortedEvents.filter((e) => setAnon || e.tags.some((tag) => tag[0] === "client" && tag[1] === 'getwired.app'));
}
const toggleSort = useCallback(() => {
setSortByTime(prev => {
const newValue = !prev;
localStorage.setItem('sortBy', String(newValue));
return newValue;
});
}, []);
const toggleAnon = useCallback(() => {
setSetAnon(prev => {
const newValue = !prev;
localStorage.setItem('anonMode', String(newValue));
return newValue;
});
}, []);
const countReplies = (event: Event) => {
return noteEvents.filter((e) => e.tags.some((tag) => tag[0] === "e" && tag[1] === event.id)).length;
};
// Render the component
return (
<main className="text-white mb-20">
<div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
<NewNoteCard hashtag={id as string}/>
</div>
<OptionsBar sortByTime={sortByTime} setAnon={setAnon} toggleSort={toggleSort} toggleAnon={toggleAnon} />
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
{sortedEvents.map((event) => (
event.kind === 1 ?
<PostCard
event={event}
metadata={metadataEvents.find((e) => e.pubkey === event.pubkey && e.kind === 0) || null}
replyCount={countReplies(event)}
/>
:
<RepostCard
event={event}
/>
))}
</div>
</main>
);
};
export default HashtagPage;

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

@ -1,145 +0,0 @@
import { useEffect, useState, useCallback, useMemo } from "react";
import PostCard from "./Modals/NoteCard";
import { uniqBy } from "../utils/otherUtils"; // Assume getPow is a correct import now
import { subGlobalFeed } from "../utils/subscriptions";
import { verifyPow } from "../utils/mine";
import { Event } from "nostr-tools";
import NewNoteCard from "./Forms/PostFormCard";
import RepostCard from "./Modals/RepostCard";
import OptionsBar from "./Modals/OptionsBar";
const DEFAULT_DIFFICULTY = 20;
const useUniqEvents = () => {
const [events, setEvents] = useState<Event[]>([]);
const age = Number(localStorage.getItem("age")) || 24;
// Load cached metadataEvents from localStorage
const [cachedMetadataEvents, setCachedMetadataEvents] = useState<Event[]>(
JSON.parse(localStorage.getItem("cachedMetadataEvents") || "[]")
);
useEffect(() => {
const onEvent = (event: Event) => {
setEvents((prevEvents) => [...prevEvents, event]);
// If the new event is a metadata event, add it to the cached metadata events
if (event.kind === 0) {
setCachedMetadataEvents((prevMetadataEvents) => {
// Check if the event already exists in the cached metadata events
const existingEvent = prevMetadataEvents.find((e) => e.id === event.id || e.pubkey === event.pubkey)
if (!existingEvent) {
// If the event doesn't exist, add it to the cached metadata events
return [...prevMetadataEvents, event];
} else if (existingEvent && existingEvent.created_at < event.created_at) {
// Remove any existing metadata event with the same pubkey and id
const updatedMetadataEvents = prevMetadataEvents.filter(
(e) => e.id !== existingEvent.id
);
// Add the new metadata event
return [...updatedMetadataEvents, event];
}
// If the event already exists, return the previous cached metadata events
return prevMetadataEvents;
});
}
};
const unsubscribe = subGlobalFeed(onEvent, age);
return unsubscribe;
}, []);
const uniqEvents = uniqBy(events, "id");
const noteEvents = uniqEvents.filter(event => event.kind === 1 || event.kind === 6);
const metadataEvents = [...cachedMetadataEvents, ...uniqEvents.filter(event => event.kind === 0)];
// Save the cached metadataEvents to localStorage
useEffect(() => {
localStorage.setItem("cachedMetadataEvents", JSON.stringify(cachedMetadataEvents));
}, [cachedMetadataEvents]);
return { noteEvents, metadataEvents };
};
const Home = () => {
const filterDifficulty = localStorage.getItem("filterDifficulty") || DEFAULT_DIFFICULTY;
const [sortByTime, setSortByTime] = useState<boolean>(localStorage.getItem('sortBy') !== 'true');
const [setAnon, setSetAnon] = useState<boolean>(localStorage.getItem('anonMode') !== 'true');
const {noteEvents, metadataEvents } = useUniqEvents();
const [delayedSort, setDelayedSort] = useState(false)
const postEvents: Event[] = noteEvents
.filter((event) =>
verifyPow(event) >= Number(filterDifficulty) &&
event.kind !== 0 &&
(event.kind !== 1 || !event.tags.some((tag) => tag[0] === "e" || tag[0] === "a"))
)
// Delayed filtering
useEffect(() => {
const timer = setTimeout(() => {
setDelayedSort(true);
}, 3000);
return () => clearTimeout(timer);
}, []);
let sortedEvents = [...postEvents]
.sort((a, b) =>
sortByTime ? verifyPow(b) - verifyPow(a) : b.created_at - a.created_at
)
if (delayedSort) {
sortedEvents = sortedEvents.filter(
!setAnon ? (e) => !metadataEvents.some((metadataEvent) => metadataEvent.pubkey === e.pubkey) : () => true
);
} else {
sortedEvents = sortedEvents.filter((e) => setAnon || e.tags.some((tag) => tag[0] === "client" && tag[1] === 'getwired.app'));
}
const toggleSort = useCallback(() => {
setSortByTime(prev => {
const newValue = !prev;
localStorage.setItem('sortBy', String(newValue));
return newValue;
});
}, []);
const toggleAnon = useCallback(() => {
setSetAnon(prev => {
const newValue = !prev;
localStorage.setItem('anonMode', String(newValue));
return newValue;
});
}, []);
const countReplies = (event: Event) => {
return noteEvents.filter((e) => e.tags.some((tag) => tag[0] === "e" && tag[1] === event.id)).length;
};
// Render the component
return (
<main className="text-white mb-20">
<div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
<NewNoteCard />
</div>
<OptionsBar sortByTime={sortByTime} setAnon={setAnon} toggleSort={toggleSort} toggleAnon={toggleAnon} />
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
{sortedEvents.map((event) => (
event.kind === 1 ?
<PostCard
event={event}
metadata={metadataEvents.find((e) => e.pubkey === event.pubkey && e.kind === 0) || null}
replyCount={countReplies(event)}
/>
:
<RepostCard
event={event}
/>
))}
</div>
</main>
);
};
export default Home;

2
client/src/components/Modals/CardModals/QuoteEmbed.tsx
View File

@ -1,6 +1,6 @@
import { parseContent } from "../../../utils/content";
import { Event } from "nostr-tools";
import { getMetadata } from "../../../utils/otherUtils";
import { getMetadata } from "../../../utils/getMetadata";
import ContentPreview from "./TextModal";
import { renderMedia } from "../../../utils/FileUpload";
import { getIconFromHash, timeAgo } from "../../../utils/cardUtils";

4
client/src/components/Modals/CardModals/TextModal.tsx
View File

@ -1,11 +1,11 @@
import React from "react";
import QuoteEmbed from "./QuoteEmbed";
import { Event } from "nostr-tools";
import { useEffect, useState } from "react";
import { subNoteOnce } from "../../../utils/subscriptions";
import { nip19 } from "nostr-tools";
import LinkModal from "./LinkPreview";
import { parseContent } from "../../../utils/content";
import QuoteEmbed from "./QuoteEmbed";
import LinkModal from "./LinkPreview";
const RichText = ({ text, isExpanded, emojiMap }: { text: string; isExpanded: boolean; emojiMap: Record<string, any> }) => {
const content = isExpanded ? text.split('\n') : text.slice(0, 350).split('\n');

0
client/src/components/Header/Header.tsx → client/src/components/Modals/Header.tsx
View File

8
client/src/components/Modals/NoteCard.tsx
View File

@ -2,7 +2,7 @@ import CardContainer from "./CardContainer";
import { FolderIcon, CpuChipIcon } from "@heroicons/react/24/outline";
// import { parseContent } from "../../utils/content";
import { Event, nip19 } from "nostr-tools";
import { getMetadata } from "../../utils/otherUtils";
import { getMetadata } from "../../utils/getMetadata";
import ContentPreview from "./CardModals/TextModal";
// import { renderMedia } from "../../utils/FileUpload";
import { getIconFromHash, timeAgo } from "../../utils/cardUtils";
@ -13,7 +13,7 @@ interface CardProps {
key?: string | number;
event: Event;
metadata: Event | null;
replyCount: number;
replies: Event[];
repliedTo?: Event[]
type?: 'OP' | 'Reply' | 'Post';
}
@ -22,7 +22,7 @@ const PostCard = ({
key,
event,
metadata,
replyCount,
replies,
repliedTo,
type
}: CardProps) => {
@ -77,7 +77,7 @@ const PostCard = ({
<span className="text-neutral-700">·</span>
<div className="inline-flex items-center gap-1">
<FolderIcon className="h-4 w-4 text-neutral-600" />
<span className="text-xs text-neutral-600">{replyCount}</span>
<span className="text-xs text-neutral-600">{replies.length}</span>
</div>
</div>
</div>

57
client/src/components/Modals/OptionsBar.tsx
View File

@ -1,57 +0,0 @@
import React from 'react';
import { useState } from 'react';
interface OptionsBarProps {
sortByTime?: boolean;
setAnon?: boolean;
toggleSort?: () => void;
toggleAnon?: () => void;
}
const OptionsBar: React.FC<OptionsBarProps> = ({ sortByTime, setAnon, toggleSort, toggleAnon }) => {
const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
return (
<div className="px-8">
<span onClick={() => setShowAdvancedSettings(!showAdvancedSettings)} className="text-xs text-neutral-600">
{">"} Alter Feed
</span>
<div className={`transition-height duration-200 ease-in-out overflow-hidden ${showAdvancedSettings ? 'h-auto' : 'h-0'} flex w-full z-2`}>
{toggleSort && <label htmlFor="toggleA" className="flex items-center cursor-pointer">
<div className="relative">
<input
id="toggleA"
type="checkbox"
className="sr-only"
checked={sortByTime}
onChange={toggleSort}
/>
<div className="block bg-gray-600 w-8 h-4 rounded-full"></div>
<div className={`dot absolute left-1 top-0.5 bg-white w-3 h-3 rounded-full transition ${sortByTime ? 'transform translate-x-full bg-blue-400' : ''}`} ></div>
</div>
<div className={`ml-2 text-neutral-500 text-sm ${sortByTime ? 'text-neutral-500' : ''}`}>
{sortByTime ? 'Sort by Work' : 'Sort by Time'}
</div>
</label>}
{toggleAnon && <label htmlFor="toggleB" className="flex items-center cursor-pointer ml-4"> {/* Add margin-left here */}
<div className="relative">
<input
id="toggleB"
type="checkbox"
className="sr-only"
checked={setAnon}
onChange={toggleAnon}
/>
<div className="block bg-gray-600 w-8 h-4 rounded-full"></div>
<div className={`dot absolute left-1 top-0.5 bg-white w-3 h-3 rounded-full transition ${setAnon ? 'transform translate-x-full bg-blue-400' : ''}`} ></div>
</div>
<div className={`ml-2 text-neutral-500 text-sm ${setAnon ? 'text-neutral-500' : ''}`}>
{setAnon ? 'Namefags' : 'Anon'}
</div>
</label>}
</div>
</div>
);
};
export default OptionsBar;

2
client/src/components/Modals/RepostCard.tsx
View File

@ -2,7 +2,7 @@
import { CpuChipIcon } from "@heroicons/react/24/outline";
// import { parseContent } from "../../utils/content";
import { Event, nip19 } from "nostr-tools";
import { getMetadata, Metadata } from "../../utils/otherUtils";
import { getMetadata, Metadata } from "../../utils/getMetadata";
import ContentPreview from "./CardModals/TextModal";
// import { renderMedia } from "../../utils/FileUpload";
import { getIconFromHash, timeAgo } from "../../utils/cardUtils";

21
client/src/components/TestUI.tsx
View File

@ -1,21 +0,0 @@
import { useState } from "react";
import Placeholder from "./Modals/Placeholder";
import OptionsBar from "./Modals/OptionsBar";
const TestUI = () => {
const [sortByTime, setSortByTime] = useState(true);
const toggleSort = () => {
setSortByTime(prev => !prev);
};
return (
<>
<Placeholder />
<div className="col-span-full h-0.5 bg-neutral-900"/> {/* This is the white line separator */}
<OptionsBar sortByTime={sortByTime} toggleSort={toggleSort} />
</>
);
};
export default TestUI;

57
client/src/components/routes/HashtagPage.tsx Normal file
View File

@ -0,0 +1,57 @@
import PostCard from "../modals/NoteCard";
import { verifyPow } from "../../utils/mine";
import { Event } from "nostr-tools";
import NewNoteCard from "../forms/PostFormCard";
import RepostCard from "../modals/RepostCard";
import { useParams } from "react-router-dom";
import { useUniqEvents } from "../../hooks/useUniqEvents";
const DEFAULT_DIFFICULTY = 0;
const HashtagPage = () => {
const { id } = useParams();
const filterDifficulty = localStorage.getItem("filterHashtagDifficulty") || DEFAULT_DIFFICULTY;
const { noteEvents, metadataEvents } = useUniqEvents(id as string, false);
const postEvents: Event[] = noteEvents
.filter((event) =>
verifyPow(event) >= Number(filterDifficulty) &&
event.kind !== 0 &&
(event.kind !== 1 || !event.tags.some((tag) => tag[0] === "e"))
)
let sortedEvents = [...postEvents]
.sort((a, b) => {
// Sort by PoW in descending order
const powDiff = verifyPow(b) - verifyPow(a);
if (powDiff !== 0) return powDiff;
// If PoW is the same, sort by created_at in descending order
return b.created_at - a.created_at;
});
// Render the component
return (
<main className="text-white mb-20">
<div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
<NewNoteCard hashtag={id as string} />
</div>
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
{sortedEvents.map((event) => (
event.kind === 1 ?
<PostCard
event={event}
metadata={metadataEvents.find((e) => e.pubkey === event.pubkey && e.kind === 0) || null}
replies={sortedEvents.filter((e) => e.tags.some((tag) => tag[0] === "e" && tag[1] === event.id))}
/>
:
<RepostCard
event={event}
/>
))}
</div>
</main>
);
};
export default HashtagPage;

0
client/src/components/Hashtags.tsx → client/src/components/routes/Hashtags.tsx
View File

54
client/src/components/routes/Home.tsx Normal file
View File

@ -0,0 +1,54 @@
import PostCard from "../modals/NoteCard";
import { verifyPow } from "../../utils/mine";
import { Event } from "nostr-tools";
import NewNoteCard from "../forms/PostFormCard";
import RepostCard from "../modals/RepostCard";
import { DEFAULT_DIFFICULTY } from "../../config";
import { useUniqEvents } from "../../hooks/useUniqEvents";
const Home = () => {
const filterDifficulty = localStorage.getItem("filterDifficulty") || DEFAULT_DIFFICULTY;
const { noteEvents, metadataEvents } = useUniqEvents();
const postEvents: Event[] = noteEvents
.filter((event) =>
verifyPow(event) >= Number(filterDifficulty) &&
event.kind !== 0 &&
(event.kind !== 1 || !event.tags.some((tag) => tag[0] === "e" || tag[0] === "a"))
)
let sortedEvents = [...postEvents]
.sort((a, b) => {
// Sort by PoW in descending order
const powDiff = verifyPow(b) - verifyPow(a);
if (powDiff !== 0) return powDiff;
// If PoW is the same, sort by created_at in descending order
return b.created_at - a.created_at;
});
// Render the component
return (
<main className="text-white mb-20">
<div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
<NewNoteCard />
</div>
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
{sortedEvents.map((event) => (
event.kind === 1 ?
<PostCard
event={event}
metadata={metadataEvents.find((e) => e.pubkey === event.pubkey && e.kind === 0) || null}
replies={sortedEvents.filter((e) => e.tags.some((tag) => tag[0] === "e" && tag[1] === event.id))}
/>
:
<RepostCard
event={event}
/>
))}
</div>
</main>
);
};
export default Home;

70
client/src/components/Notifications.tsx → client/src/components/routes/Notifications.tsx
View File

@ -1,39 +1,12 @@
import { useEffect, useState, useCallback } from "react";
import PostCard from "./Modals/NoteCard";
import { uniqBy } from "../utils/otherUtils"; // Assume getPow is a correct import now
import { subGlobalFeed } from "../utils/subscriptions";
import { verifyPow } from "../utils/mine";
import { useState, useCallback } from "react";
import PostCard from "../modals/NoteCard";
import { Event } from "nostr-tools";
import NewNoteCard from "./Forms/PostFormCard";
import RepostCard from "./Modals/RepostCard";
import OptionsBar from "./Modals/OptionsBar";
import { subNotifications } from "../utils/subscriptions";
const useUniqEvents = () => {
const [events, setEvents] = useState<Event[]>([]);
let storedKeys = JSON.parse(localStorage.getItem('usedKeys') || '[]');
let storedPubkeys = storedKeys.map((key: any[]) => key[1]);
useEffect(() => {
const onEvent = (event: Event) => setEvents((prevEvents) => [...prevEvents, event]);
const unsubscribe = subNotifications(storedPubkeys, onEvent);
return unsubscribe;
}, []);
const uniqEvents = uniqBy(events, "id");
const noteEvents = uniqEvents.filter(event => event.kind === 1 || event.kind === 6);
const metadataEvents = uniqEvents.filter(event => event.kind === 0);
return { noteEvents, metadataEvents };
};
import RepostCard from "../modals/RepostCard";
import { useUniqEvents } from "../../hooks/useUniqEvents";
const Notifications = () => {
const [sortByTime, setSortByTime] = useState<boolean>(localStorage.getItem('sortBy') !== 'false');
const [setAnon, setSetAnon] = useState<boolean>(localStorage.getItem('anonMode') !== 'false');
const [notifsView, setNotifsView] = useState(false);
const { noteEvents, metadataEvents } = useUniqEvents();
const { noteEvents, metadataEvents } = useUniqEvents(undefined,true);
const storedKeys = JSON.parse(localStorage.getItem('usedKeys') || '[]');
const storedPubkeys = storedKeys.map((key: any[]) => key[1]);
@ -45,11 +18,8 @@ const Notifications = () => {
const sortedEvents = [...postEvents]
.sort((a, b) =>
sortByTime ? b.created_at - a.created_at : verifyPow(b) - verifyPow(a)
b.created_at - a.created_at
)
.filter(
!setAnon ? (e) => !metadataEvents.some((metadataEvent) => metadataEvent.pubkey === e.pubkey) : () => true
);
const mentions = noteEvents
.filter((event) =>
@ -59,40 +29,20 @@ const Notifications = () => {
const sortedMentions = [...mentions]
.sort((a, b) =>
sortByTime ? b.created_at - a.created_at : verifyPow(b) - verifyPow(a)
b.created_at - a.created_at
)
.filter(
!setAnon ? (e) => !metadataEvents.some((metadataEvent) => metadataEvent.pubkey === e.pubkey) : () => true
);
const toggleSort = useCallback(() => {
setSortByTime(prev => {
const newValue = !prev;
localStorage.setItem('sortBy', String(newValue));
return newValue;
});
}, []);
const toggleAnon = useCallback(() => {
setSetAnon(prev => {
const newValue = !prev;
localStorage.setItem('anonMode', String(newValue));
return newValue;
});
}, []);
const toggleNotifs = useCallback(() => {
setNotifsView(prev => !prev);
}, []);
const countReplies = (event: Event) => {
return noteEvents.filter((e) => e.tags.some((tag) => tag[0] === "e" && tag[1] === event.id)).length;
return noteEvents.filter((e) => e.tags.some((tag) => tag[0] === "e" && tag[1] === event.id));
};
// Render the component
return (
<main className="text-white mb-20">
<OptionsBar sortByTime={sortByTime} setAnon={setAnon} toggleSort={toggleSort} toggleAnon={toggleAnon} />
<div className="block sm:hidden">
<label htmlFor="toggleC" className="p-4 flex items-center cursor-pointer">
<div className="relative">
@ -119,7 +69,7 @@ const Notifications = () => {
<PostCard
event={event}
metadata={metadataEvents.find((e) => e.pubkey === event.pubkey && e.kind === 0) || null}
replyCount={countReplies(event)}
replies={countReplies(event)}
/>
:
<RepostCard
@ -134,7 +84,7 @@ const Notifications = () => {
<PostCard
event={event}
metadata={metadataEvents.find((e) => e.pubkey === event.pubkey && e.kind === 0) || null}
replyCount={countReplies(event)}
replies={countReplies(event)}
/>
:
<RepostCard

0
client/src/components/Settings.tsx → client/src/components/routes/Settings.tsx
View File

52
client/src/components/Thread.tsx → client/src/components/routes/Thread.tsx
View File

@ -1,16 +1,14 @@
import { useParams } from 'react-router-dom';
import { useState } from "react";
import { Event, nip19 } from "nostr-tools"
import { subNote, subNotesOnce } from '../utils/subscriptions';
import { subNote, subNotesOnce } from '../../utils/subscriptions';
import { useEffect } from 'react';
import { uniqBy } from '../utils/otherUtils';
import { uniqBy } from '../../utils/otherUtils';
import { DocumentTextIcon, FolderPlusIcon, DocumentDuplicateIcon, ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
import { getPow } from '../utils/mine';
import PostCard from './Modals/NoteCard';
import Placeholder from './Modals/Placeholder';
import NewNoteCard from './Forms/PostFormCard';
import RepostNote from './Forms/RepostNote';
import OptionsBar from './Modals/OptionsBar';
import PostCard from '../modals/NoteCard';
import Placeholder from '../modals/Placeholder';
import NewNoteCard from '../forms/PostFormCard';
import RepostNote from '../forms/RepostNote';
type PostType = "" | "Reply" | "Quote" | undefined;
@ -23,9 +21,8 @@ const Thread = () => {
const [postType, setPostType] = useState<PostType>("");
const [hasRun, setHasRun] = useState(false);
const [preOPEvents, setPreOPEvents] = useState(['']);
const [sortByTime, setSortByTime] = useState(true);
const filterDifficulty = useState(localStorage.getItem("filterDifficulty") || "20");
// Load cached metadataEvents from localStorage
// const filterDifficulty = useState(localStorage.getItem("filterDifficulty") || "20");
// Load cached metadataEvents from localStorage
const [cachedMetadataEvents, setCachedMetadataEvents] = useState<Event[]>(
JSON.parse(localStorage.getItem("cachedMetadataEvents") || "[]")
);
@ -96,7 +93,7 @@ const Thread = () => {
}, [uniqEvents, hasRun]);
const countReplies = (event: Event) => {
return uniqEvents.filter(e => e.tags.some(tag => tag[0] === 'e' && tag[1] === event.id)).length;
return uniqEvents.filter(e => e.tags.some(tag => tag[0] === 'e' && tag[1] === event.id));
}
const repliedList = (event: Event): Event[] => {
@ -109,34 +106,18 @@ const Thread = () => {
preOPEvents.includes(event.id)
).sort((a, b) => (b.created_at as any) - (a.created_at as any));
const toggleSort = () => {
setSortByTime(prev => !prev);
};
const eventsSortedByTime = [...uniqEvents].slice(1)
const displayedEvents = [...uniqEvents].slice(1)
.filter(event =>
event.kind === 1 &&
!earlierEvents.map(e => e.id).includes(event.id) &&
(OPEvent ? OPEvent.id !== event.id : true)
).sort((a, b) => a.created_at - b.created_at);
// Events sorted by PoW (assuming `getPow` returns a numerical representation of the PoW)
const eventsSortedByPow = [...uniqEvents].slice(1)
.filter((event) =>
getPow(event.id) > Number(filterDifficulty) &&
event.kind === 1 &&
!earlierEvents.map(e => e.id).includes(event.id) &&
(OPEvent ? OPEvent.id !== event.id : true)
).sort((a, b) => getPow(b.id) - getPow(a.id));
const displayedEvents = sortByTime ? eventsSortedByTime : eventsSortedByPow;
if (uniqEvents.length === 0) {
return (
<>
<Placeholder />
<div className="col-span-full h-0.5 bg-neutral-900"/> {/* This is the white line separator */}
<OptionsBar sortByTime={sortByTime} toggleSort={toggleSort} />
</>
);
}
@ -147,9 +128,9 @@ const Thread = () => {
{earlierEvents
.filter(event => event.kind === 1)
.sort((a, b) => a.created_at - b.created_at).map((event, index) => (
<PostCard event={event} metadata={metadataEvents.find((e) => e.pubkey === event.pubkey && e.kind === 0) || null} replyCount={countReplies(event)} />
<PostCard event={event} metadata={metadataEvents.find((e) => e.pubkey === event.pubkey && e.kind === 0) || null} replies={countReplies(event)} />
))}
{OPEvent && <PostCard event={OPEvent} metadata={metadataEvents.find((e) => e.pubkey === OPEvent.pubkey && e.kind === 0) || null} replyCount={countReplies(OPEvent)} type={'OP'}/>}
{OPEvent && <PostCard event={OPEvent} metadata={metadataEvents.find((e) => e.pubkey === OPEvent.pubkey && e.kind === 0) || null} replies={countReplies(OPEvent)} type={'OP'}/>}
</div>
<div className="col-span-full flex justify-center space-x-16 pb-4">
<DocumentTextIcon
@ -195,10 +176,15 @@ const Thread = () => {
<RepostNote refEvent={OPEvent}/>
</div>}
<div className="col-span-full h-0.5 bg-neutral-900"/> {/* This is the white line separator */}
<OptionsBar sortByTime={sortByTime} toggleSort={toggleSort} />
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
{displayedEvents.map((event, index) => (
<PostCard key={index} event={event} metadata={metadataEvents.find((e) => e.pubkey === event.pubkey && e.kind === 0) || null} replyCount={countReplies(event)} repliedTo={repliedList(event)} />
<PostCard
key={index}
event={event}
metadata={metadataEvents.find((e) => e.pubkey === event.pubkey && e.kind === 0) || null}
replies={displayedEvents.filter((e) => e.tags.some((tag) => tag[0] === "e" && tag[1] === event.id))}
repliedTo={repliedList(event)}
/>
))}
</div>
</main>

1
client/src/config.ts Normal file
View File

@ -0,0 +1 @@
export const DEFAULT_DIFFICULTY = 20;

72
client/src/hooks/useUniqEvents.ts Normal file
View File

@ -0,0 +1,72 @@
import { useState, useEffect } from "react";
import { subGlobalFeed, subHashtagFeed, subNotifications } from "../utils/subscriptions";
import { uniqBy } from "../utils/otherUtils";
import { Event } from "nostr-tools";
import { } from "../utils/subscriptions";
export const useUniqEvents = (hashtag?: string, notifications?: boolean) => {
const [events, setEvents] = useState<Event[]>([]);
const age = Number(localStorage.getItem("age")) || 24;
// Load cached metadataEvents from localStorage
const [cachedMetadataEvents, setCachedMetadataEvents] = useState<Event[]>(
JSON.parse(localStorage.getItem("cachedMetadataEvents") || "[]")
);
useEffect(() => {
const onEvent = (event: Event) => {
setEvents((prevEvents) => [...prevEvents, event]);
// If the new event is a metadata event, add it to the cached metadata events
if (event.kind === 0) {
setCachedMetadataEvents((prevMetadataEvents) => {
// Check if the event already exists in the cached metadata events
const existingEvent = prevMetadataEvents.find(
(e) => e.id === event.id || e.pubkey === event.pubkey
);
if (!existingEvent) {
// If the event doesn't exist, add it to the cached metadata events
return [...prevMetadataEvents, event];
} else if (existingEvent && existingEvent.created_at < event.created_at) {
// Remove any existing metadata event with the same pubkey and id
const updatedMetadataEvents = prevMetadataEvents.filter(
(e) => e.id !== existingEvent.id
);
// Add the new metadata event
return [...updatedMetadataEvents, event];
}
// If the event already exists, return the previous cached metadata events
return prevMetadataEvents;
});
}
};
let unsubscribe;
if (hashtag) {
// Code from the second function
unsubscribe = subHashtagFeed(hashtag, onEvent, age);
} else if (notifications) {
// Code from the third function
let storedKeys = JSON.parse(localStorage.getItem("usedKeys") || "[]");
let storedPubkeys = storedKeys.map((key: any[]) => key[1]);
unsubscribe = subNotifications(storedPubkeys, onEvent);
} else {
// Code from the first function
unsubscribe = subGlobalFeed(onEvent, age);
}
return unsubscribe;
}, [hashtag]);
const uniqEvents = uniqBy(events, "id");
const noteEvents = uniqEvents.filter((event) => event.kind === 1 || event.kind === 6);
const metadataEvents = [...cachedMetadataEvents, ...uniqEvents.filter((event) => event.kind === 0)];
// Save the cached metadataEvents to localStorage
useEffect(() => {
localStorage.setItem("cachedMetadataEvents", JSON.stringify(cachedMetadataEvents));
}, [cachedMetadataEvents]);
return { noteEvents, metadataEvents };
};

2
client/src/index.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './styles/index.css';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';

0
client/src/App.css → client/src/styles/App.css
View File

0
client/src/components/Forms/Form.css → client/src/styles/Form.css
View File

0
client/src/index.css → client/src/styles/index.css
View File

25
client/src/utils/getMetadata.ts Normal file
View File

@ -0,0 +1,25 @@
import { Event } from "nostr-tools"
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) => {
try {
const content = event.content.replace(/[\n\r\t]/g, '')
const metadata: Metadata = JSON.parse(content)
return metadata
} catch (error) {
console.error(`Error parsing metadata for event: ${event.id}`, error)
return {}
}
}

26
client/src/utils/otherUtils.ts
View File

@ -1,5 +1,3 @@
import { Event } from "nostr-tools"
export const uniqBy = <T>(arr: T[], key: keyof T): T[] => {
return Object.values(
arr.reduce(
@ -20,28 +18,4 @@ export const dateToUnix = (_date?: Date) => {
const date = _date || new Date()
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) => {
try {
const content = event.content.replace(/[\n\r\t]/g, '')
const metadata: Metadata = JSON.parse(content)
return metadata
} catch (error) {
console.error(`Error parsing metadata for event: ${event.id}`, error)
return {}
}
}