mirror of
https://github.com/smolgrrr/TAO.git
synced 2024-09-20 01:11:25 +00:00
progress
This commit is contained in:
commit
d320c6c389
@ -45,10 +45,13 @@ const NewNoteCard = ({
|
||||
|
||||
useEffect(() => {
|
||||
if (refEvent && tagType && unsigned.tags.length === 0) {
|
||||
const tags = tagMapping[tagType];
|
||||
if (tags) {
|
||||
tags.forEach(tag => unsigned.tags.push([tag, refEvent[tag === 'p' ? 'pubkey' : 'id']]));
|
||||
// Ref event should be the latest event they're replying to, and their event should include prev replies
|
||||
if (tagType === 'Reply' && unsigned.tags.length === 0) {
|
||||
unsigned.tags.push(['p', refEvent.pubkey]);
|
||||
unsigned.tags.push(['e', refEvent.id, 'root']);
|
||||
} else {
|
||||
unsigned.tags = refEvent.tags
|
||||
unsigned.tags.push(['p', refEvent.pubkey]);
|
||||
unsigned.tags.push(['e', refEvent.id]);
|
||||
}
|
||||
if (tagType === 'Quote') {
|
||||
setComment(comment + '\nnostr:' + nip19.noteEncode(refEvent.id));
|
||||
|
@ -6,6 +6,7 @@ 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;
|
||||
|
||||
@ -21,7 +22,7 @@ const useUniqEvents = () => {
|
||||
|
||||
const uniqEvents = uniqBy(events, "id");
|
||||
|
||||
const noteEvents = uniqEvents.filter(event => event.kind === 1);
|
||||
const noteEvents = uniqEvents.filter(event => event.kind === 1 || event.kind === 6);
|
||||
const metadataEvents = uniqEvents.filter(event => event.kind === 0);
|
||||
|
||||
return { noteEvents, metadataEvents };
|
||||
@ -74,40 +75,7 @@ const Home = () => {
|
||||
<div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
|
||||
<NewNoteCard />
|
||||
</div>
|
||||
<div className="flex w-full px-8 z-2">
|
||||
<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 ? 'Time' : 'PoW'}
|
||||
</div>
|
||||
</label>
|
||||
<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>
|
||||
<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 ?
|
||||
|
57
client/src/components/Modals/OptionsBar.tsx
Normal file
57
client/src/components/Modals/OptionsBar.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
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 ? 'Time' : 'PoW'}
|
||||
</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;
|
93
client/src/components/Notifications.tsx
Normal file
93
client/src/components/Notifications.tsx
Normal file
@ -0,0 +1,93 @@
|
||||
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 { 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 };
|
||||
};
|
||||
|
||||
const Notifications = () => {
|
||||
const [sortByTime, setSortByTime] = useState<boolean>(localStorage.getItem('sortBy') !== 'false');
|
||||
const [setAnon, setSetAnon] = useState<boolean>(localStorage.getItem('anonMode') !== 'false');
|
||||
const { noteEvents, metadataEvents } = useUniqEvents();
|
||||
|
||||
const postEvents = noteEvents
|
||||
.filter((event) =>
|
||||
event.kind !== 0 &&
|
||||
(event.kind !== 1)
|
||||
)
|
||||
|
||||
const sortedEvents = [...postEvents]
|
||||
.sort((a, b) =>
|
||||
sortByTime ? b.created_at - a.created_at : verifyPow(b) - verifyPow(a)
|
||||
)
|
||||
.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 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">
|
||||
<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 Notifications;
|
@ -10,6 +10,7 @@ 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';
|
||||
|
||||
type PostType = "" | "Reply" | "Quote" | undefined;
|
||||
|
||||
@ -49,9 +50,10 @@ const Thread = () => {
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasRun && events.length > 0) {
|
||||
let OPEvent = uniqEvents[0];
|
||||
let OPEvent = uniqEvents.find(event => event.id === hexID);
|
||||
setOPEvent(OPEvent);
|
||||
|
||||
console.log(OPEvent)
|
||||
if (OPEvent && OPEvent.id !== hexID) {
|
||||
OPEvent = events.find(e => e.id === hexID) as Event;
|
||||
}
|
||||
@ -126,7 +128,7 @@ const Thread = () => {
|
||||
))}
|
||||
{OPEvent && <PostCard event={OPEvent} metadata={getMetadataEvent(OPEvent)} replyCount={countReplies(OPEvent)} type={'OP'}/>}
|
||||
</div>
|
||||
<div className="col-span-full flex justify-center space-x-36">
|
||||
<div className="col-span-full flex justify-center space-x-36 pb-4">
|
||||
<DocumentTextIcon
|
||||
className="h-5 w-5 text-gray-200 cursor-pointer"
|
||||
onClick={() => {
|
||||
@ -153,36 +155,20 @@ const Thread = () => {
|
||||
</div>
|
||||
{(showForm && postType) &&
|
||||
<div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
|
||||
<span className='text-center'>{postType}-post</span>
|
||||
<NewNoteCard refEvent={uniqEvents[0]} tagType={postType}/>
|
||||
<div className='text-center'>
|
||||
<span >{postType}-post</span>
|
||||
</div>
|
||||
<NewNoteCard refEvent={OPEvent} tagType={postType}/>
|
||||
</div>}
|
||||
{showRepost && <div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
|
||||
<span className='text-center'>Repost note</span>
|
||||
<RepostNote refEvent={uniqEvents[0]}/>
|
||||
{showRepost && OPEvent && <div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
|
||||
<div className='text-center'>
|
||||
<span>Repost note</span>
|
||||
</div>
|
||||
<RepostNote refEvent={OPEvent}/>
|
||||
</div>}
|
||||
<div className="flex items-center justify-center w-full py-4">
|
||||
<label htmlFor="toggleB" className="flex items-center cursor-pointer">
|
||||
<div className="relative">
|
||||
<input
|
||||
id="toggleB"
|
||||
type="checkbox"
|
||||
className="sr-only"
|
||||
checked={sortByTime}
|
||||
onChange={toggleSort}
|
||||
/>
|
||||
<div className="block bg-gray-600 w-10 h-6 rounded-full"></div>
|
||||
<div
|
||||
className={`dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition ${sortByTime ? 'transform translate-x-full bg-blue-400' : ''
|
||||
}`}
|
||||
></div>
|
||||
</div>
|
||||
<div className={`ml-3 text-neutral-500 font-medium ${sortByTime ? 'text-neutral-500' : ''}`}>
|
||||
{sortByTime ? 'Sort by oldest' : 'Sort by PoW'}
|
||||
</div>
|
||||
</label>
|
||||
</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">
|
||||
<div className="col-span-full h-0.5 bg-neutral-900"></div> {/* This is the white line separator */}
|
||||
{displayedEvents.map((event, index) => (
|
||||
<PostCard key={index} event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)} repliedTo={repliedList(event)} />
|
||||
))}
|
||||
|
@ -29,15 +29,6 @@ export const subGlobalFeed = (onEvent: SubCallback) => {
|
||||
unsub: true
|
||||
});
|
||||
|
||||
// // New Callback to only add events that pass the PoW requirement
|
||||
// const powFilteredCallback = (evt: Event, relay: string) => {
|
||||
// if (getPow(evt.id) > 2) { // Replace '5' with your actual PoW requirement
|
||||
// pubkeys.add(evt.pubkey);
|
||||
// notes.add(evt.id);
|
||||
// onEvent(evt, relay);
|
||||
// }
|
||||
// };
|
||||
|
||||
setTimeout(() => {
|
||||
// get profile info
|
||||
sub({
|
||||
@ -91,20 +82,6 @@ export const subGlobalFeed = (onEvent: SubCallback) => {
|
||||
});
|
||||
};
|
||||
|
||||
/** subscribe to global feed */
|
||||
export const simpleSub24hFeed = (onEvent: SubCallback) => {
|
||||
unsubAll();
|
||||
sub({
|
||||
cb: onEvent,
|
||||
filter: {
|
||||
kinds: [1],
|
||||
//until: Math.floor(Date.now() * 0.001),
|
||||
since: Math.floor((Date.now() * 0.001) - (24 * 60 * 60)),
|
||||
limit: 1,
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** subscribe to a note id (nip-19) */
|
||||
export const subNote = (
|
||||
eventId: string,
|
||||
@ -236,6 +213,40 @@ export const subNotesOnce = (
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
// /** quick subscribe to a note id (nip-19) */
|
||||
// export const subNotifications = (
|
||||
// pubkeys: string[],
|
||||
// onEvent: SubCallback,
|
||||
// ) => {
|
||||
// const replyPubkeys = new Set<string>();
|
||||
// sub({
|
||||
// cb: (evt, relay) => {
|
||||
// replyPubkeys.add(evt.pubkey);
|
||||
// onEvent(evt, relay);
|
||||
// },
|
||||
// filter: {
|
||||
// "#p": pubkeys,
|
||||
// kinds: [1],
|
||||
// limit: 50,
|
||||
// },
|
||||
// unsub: true,
|
||||
// });
|
||||
|
||||
// setTimeout(() => {
|
||||
// // get profile info
|
||||
// sub({
|
||||
// cb: onEvent,
|
||||
// filter: {
|
||||
// authors: Array.from(replyPubkeys),
|
||||
// kinds: [0],
|
||||
// limit: replyPubkeys.size,
|
||||
// },
|
||||
// unsub: true,
|
||||
// });
|
||||
// replyPubkeys.clear();
|
||||
// }, 2000);
|
||||
// };
|
||||
|
||||
/** quick subscribe to a note id (nip-19) */
|
||||
export const subNotifications = (
|
||||
pubkeys: string[],
|
||||
@ -243,12 +254,9 @@ export const subNotifications = (
|
||||
) => {
|
||||
const replyPubkeys = new Set<string>();
|
||||
sub({
|
||||
cb: (evt, relay) => {
|
||||
replyPubkeys.add(evt.pubkey);
|
||||
onEvent(evt, relay);
|
||||
},
|
||||
cb: onEvent,
|
||||
filter: {
|
||||
"#p": pubkeys,
|
||||
authors: Array.from(pubkeys),
|
||||
kinds: [1],
|
||||
limit: 50,
|
||||
},
|
||||
@ -270,3 +278,68 @@ export const subNotifications = (
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
// const hasEventTag = (tag: string[]) => tag[0] === 'e';
|
||||
// const isReply = ([tag, , , marker]: string[]) => tag === 'e' && marker !== 'mention';
|
||||
|
||||
// export const getReplyTo = (evt: Event): string | null => {
|
||||
// const eventTags = evt.tags.filter(isReply);
|
||||
// const withReplyMarker = eventTags.filter(([, , , marker]) => marker === 'reply');
|
||||
// if (withReplyMarker.length === 1) {
|
||||
// return withReplyMarker[0][1];
|
||||
// }
|
||||
// const withRootMarker = eventTags.filter(([, , , marker]) => marker === 'root');
|
||||
// if (withReplyMarker.length === 0 && withRootMarker.length === 1) {
|
||||
// return withRootMarker[0][1];
|
||||
// }
|
||||
// // fallback to deprecated positional 'e' tags (nip-10)
|
||||
// const lastTag = eventTags.at(-1);
|
||||
// return lastTag ? lastTag[1] : null;
|
||||
// };
|
||||
|
||||
// export const subNotifications = (
|
||||
// pubkeys: string[],
|
||||
// onEvent: SubCallback,
|
||||
// ) => {
|
||||
// const authorsPrefixes = pubkeys.map(pubkey => pubkey.slice(0, 32));
|
||||
// console.info(`subscribe to homefeed ${authorsPrefixes}`);
|
||||
// unsubAll();
|
||||
|
||||
// const repliesTo = new Set<string>();
|
||||
// sub({
|
||||
// cb: (evt, relay) => {
|
||||
// if (
|
||||
// evt.tags.some(hasEventTag)
|
||||
// ) {
|
||||
// const note = getReplyTo(evt); // get all reply to events instead?
|
||||
// if (note && !repliesTo.has(note)) {
|
||||
// repliesTo.add(note);
|
||||
// subOnce({
|
||||
// cb: onEvent,
|
||||
// filter: {
|
||||
// ids: [note],
|
||||
// kinds: [1],
|
||||
// limit: 1,
|
||||
// },
|
||||
// relay,
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// onEvent(evt, relay);
|
||||
// },
|
||||
// filter: {
|
||||
// authors: authorsPrefixes,
|
||||
// kinds: [1],
|
||||
// limit: 20,
|
||||
// },
|
||||
// });
|
||||
// // get metadata
|
||||
// sub({
|
||||
// cb: onEvent,
|
||||
// filter: {
|
||||
// authors: pubkeys,
|
||||
// kinds: [0],
|
||||
// limit: pubkeys.length,
|
||||
// },
|
||||
// unsub: true,
|
||||
// });
|
||||
// };
|
||||
|
Loading…
Reference in New Issue
Block a user