mirror of
https://github.com/smolgrrr/TAO.git
synced 2024-09-20 09:21:25 +00:00
start threads pages
This commit is contained in:
parent
0fde0ed7d4
commit
46a6186580
@ -3,6 +3,8 @@ import './App.css';
|
|||||||
import Home from './components/Home';
|
import Home from './components/Home';
|
||||||
import Settings from './components/Settings';
|
import Settings from './components/Settings';
|
||||||
import SwipeableViews from 'react-swipeable-views';
|
import SwipeableViews from 'react-swipeable-views';
|
||||||
|
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
|
||||||
|
import Thread from './components/Thread/Thread';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [index, setIndex] = React.useState(1);
|
const [index, setIndex] = React.useState(1);
|
||||||
@ -13,14 +15,19 @@ function App() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SwipeableViews index={index} onChangeIndex={handleChangeIndex}>
|
<Router>
|
||||||
<div>
|
<Routes>
|
||||||
<Settings />
|
<Route path="/settings" element={<Settings />} />
|
||||||
</div>
|
<Route path="/home" element={<Home />} />
|
||||||
<div>
|
<Route path='/thread/:id' element={<Thread />} />
|
||||||
<Home />
|
<Route path="/" element={
|
||||||
</div>
|
<SwipeableViews index={index} onChangeIndex={handleChangeIndex}>
|
||||||
</SwipeableViews>
|
<Settings />
|
||||||
|
<Home />
|
||||||
|
</SwipeableViews>
|
||||||
|
} />
|
||||||
|
</Routes>
|
||||||
|
</Router>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
41
client/src/components/Thread/Thread.tsx
Normal file
41
client/src/components/Thread/Thread.tsx
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import { useParams } from 'react-router-dom';
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Event } from "nostr-tools"
|
||||||
|
import { subNote } from '../../utils/subscriptions';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import PostCard from '../PostCard/PostCard';
|
||||||
|
|
||||||
|
const Thread = () => {
|
||||||
|
const { id } = useParams();
|
||||||
|
const [events, setEvents] = useState<Event[]>([]); // Initialize state
|
||||||
|
|
||||||
|
// Define your callback function for subGlobalFeed
|
||||||
|
const onEvent = (event: Event, relay: string) => {
|
||||||
|
setEvents((prevEvents) => [...prevEvents, event]);
|
||||||
|
console.log(event.id + ' ' + event.kind + ' ' + event.tags);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Subscribe to global feed when the component mounts
|
||||||
|
subNote(id as string, onEvent);
|
||||||
|
|
||||||
|
// Optionally, return a cleanup function to unsubscribe when the component unmounts
|
||||||
|
return () => {
|
||||||
|
// Your cleanup code here
|
||||||
|
};
|
||||||
|
}, []); // Empty dependency array means this useEffect runs once when the component mounts
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<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">
|
||||||
|
{events.sort((a, b) => b.created_at - a.created_at).map((event, index) => (
|
||||||
|
<PostCard key={index} event={event} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Thread;
|
@ -82,7 +82,7 @@ export const subGlobalFeed = (onEvent: SubCallback) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
/** subscribe to global feed */
|
/** subscribe to global feed */
|
||||||
export const simpleSub24hFeed = (onEvent: SubCallback) => {
|
export const simpleSub24hFeed = (onEvent: SubCallback) => {
|
||||||
unsubAll();
|
unsubAll();
|
||||||
sub({
|
sub({
|
||||||
@ -95,3 +95,48 @@ export const simpleSub24hFeed = (onEvent: SubCallback) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/** subscribe to a note id (nip-19) */
|
||||||
|
export const subNote = (
|
||||||
|
eventId: string,
|
||||||
|
onEvent: SubCallback,
|
||||||
|
) => {
|
||||||
|
unsubAll();
|
||||||
|
sub({
|
||||||
|
cb: onEvent,
|
||||||
|
filter: {
|
||||||
|
ids: [eventId],
|
||||||
|
kinds: [1],
|
||||||
|
limit: 1,
|
||||||
|
},
|
||||||
|
unsub: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const replies = new Set<string>();
|
||||||
|
|
||||||
|
const onReply = (evt: Event, relay: string) => {
|
||||||
|
replies.add(evt.id)
|
||||||
|
onEvent(evt, relay);
|
||||||
|
unsubAll();
|
||||||
|
sub({
|
||||||
|
cb: onEvent,
|
||||||
|
filter: {
|
||||||
|
'#e': Array.from(replies),
|
||||||
|
kinds: [1],
|
||||||
|
},
|
||||||
|
unsub: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
replies.add(eventId);
|
||||||
|
setTimeout(() => {
|
||||||
|
sub({
|
||||||
|
cb: onReply,
|
||||||
|
filter: {
|
||||||
|
'#e': [eventId],
|
||||||
|
kinds: [1],
|
||||||
|
},
|
||||||
|
unsub: true, // TODO: probably keep this subscription also after onReply/unsubAll
|
||||||
|
});
|
||||||
|
}, 200);
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user