mirror of
https://github.com/smolgrrr/TAO.git
synced 2024-09-20 01:11:25 +00:00
fix render
This commit is contained in:
parent
acb3b4927e
commit
311ca3dbda
@ -3,6 +3,7 @@ import NewNoteCard from "../forms/PostFormCard";
|
|||||||
import { useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
import useProcessedEvents from "../../hooks/processedEvents";
|
import useProcessedEvents from "../../hooks/processedEvents";
|
||||||
import HashtagBar from "../modals/HashtagBar";
|
import HashtagBar from "../modals/HashtagBar";
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
|
||||||
const DEFAULT_DIFFICULTY = 0;
|
const DEFAULT_DIFFICULTY = 0;
|
||||||
|
|
||||||
@ -10,6 +11,23 @@ const HashtagPage = () => {
|
|||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
const filterDifficulty = DEFAULT_DIFFICULTY;
|
const filterDifficulty = DEFAULT_DIFFICULTY;
|
||||||
const { processedEvents } = useProcessedEvents(id as string, filterDifficulty);
|
const { processedEvents } = useProcessedEvents(id as string, filterDifficulty);
|
||||||
|
const [visibleEvents, setVisibleEvents] = useState(10);
|
||||||
|
const [isAnimating, setIsAnimating] = useState(true);
|
||||||
|
|
||||||
|
const handleScroll = () => {
|
||||||
|
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
|
||||||
|
setVisibleEvents((prev) => prev + 10);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setIsAnimating(false);
|
||||||
|
}, 4000);
|
||||||
|
|
||||||
|
window.addEventListener("scroll", handleScroll);
|
||||||
|
return () => window.removeEventListener("scroll", handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
// Render the component
|
// Render the component
|
||||||
return (
|
return (
|
||||||
@ -18,15 +36,14 @@ const HashtagPage = () => {
|
|||||||
<NewNoteCard hashtag={id as string} />
|
<NewNoteCard hashtag={id as string} />
|
||||||
<HashtagBar />
|
<HashtagBar />
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-1 max-w-xl mx-auto gap-1 px-4">
|
<div className={`grid grid-cols-1 max-w-xl mx-auto gap-1 ${isAnimating ? 'animate-pulse' : ''}`}>
|
||||||
{processedEvents.map((event) =>
|
{processedEvents.slice(0, visibleEvents).map((event) =>
|
||||||
<PostCard
|
<PostCard
|
||||||
key={event.postEvent.id}
|
key={event.postEvent.id}
|
||||||
event={event.postEvent}
|
event={event.postEvent}
|
||||||
metadata={event.metadataEvent}
|
metadata={event.metadataEvent}
|
||||||
replies={event.replies}
|
replies={event.replies}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
@ -12,13 +12,24 @@ const Home = () => {
|
|||||||
|
|
||||||
const { processedEvents } = useProcessedEvents(undefined, filterDifficulty);
|
const { processedEvents } = useProcessedEvents(undefined, filterDifficulty);
|
||||||
const [isAnimating, setIsAnimating] = useState(true);
|
const [isAnimating, setIsAnimating] = useState(true);
|
||||||
|
const [visibleEvents, setVisibleEvents] = useState(10);
|
||||||
|
|
||||||
|
const handleScroll = () => {
|
||||||
|
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
|
||||||
|
setVisibleEvents((prev) => prev + 10);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const timer = setTimeout(() => {
|
const timer = setTimeout(() => {
|
||||||
setIsAnimating(false);
|
setIsAnimating(false);
|
||||||
}, 4000);
|
}, 4000);
|
||||||
|
|
||||||
return () => clearTimeout(timer);
|
window.addEventListener("scroll", handleScroll);
|
||||||
|
return () => {
|
||||||
|
clearTimeout(timer);
|
||||||
|
window.removeEventListener("scroll", handleScroll);
|
||||||
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Render the component
|
// Render the component
|
||||||
@ -29,7 +40,7 @@ const Home = () => {
|
|||||||
<HashtagBar />
|
<HashtagBar />
|
||||||
</div>
|
</div>
|
||||||
<div className={`grid grid-cols-1 max-w-xl mx-auto gap-1 ${isAnimating ? 'animate-pulse' : ''}`}>
|
<div className={`grid grid-cols-1 max-w-xl mx-auto gap-1 ${isAnimating ? 'animate-pulse' : ''}`}>
|
||||||
{processedEvents.map((event) => (
|
{processedEvents.slice(0, visibleEvents).map((event) => (
|
||||||
<PostCard
|
<PostCard
|
||||||
key={event.postEvent.id}
|
key={event.postEvent.id}
|
||||||
event={event.postEvent}
|
event={event.postEvent}
|
||||||
|
@ -12,6 +12,7 @@ import ThreadPostModal from '../forms/ThreadPostModal';
|
|||||||
const Thread = () => {
|
const Thread = () => {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
const [prevMentions, setPrevMentions] = useState<Event[]>([]);
|
const [prevMentions, setPrevMentions] = useState<Event[]>([]);
|
||||||
|
const [visibleReplyEvents, setVisibleReplyEvents] = useState(10);
|
||||||
let decodeResult = nip19.decode(id as string);
|
let decodeResult = nip19.decode(id as string);
|
||||||
let hexID = decodeResult.data as string;
|
let hexID = decodeResult.data as string;
|
||||||
const { noteEvents, metadataEvents } = useFetchEvents(undefined,false,hexID);
|
const { noteEvents, metadataEvents } = useFetchEvents(undefined,false,hexID);
|
||||||
@ -39,6 +40,17 @@ const Thread = () => {
|
|||||||
}
|
}
|
||||||
}, [OPEvent]);
|
}, [OPEvent]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
|
||||||
|
setVisibleReplyEvents((prev) => prev + 10);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("scroll", handleScroll);
|
||||||
|
return () => window.removeEventListener("scroll", handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
if (OPEvent) {
|
if (OPEvent) {
|
||||||
const uniqEvents = uniqBy(prevMentions, "id");
|
const uniqEvents = uniqBy(prevMentions, "id");
|
||||||
const earlierEvents = uniqEvents
|
const earlierEvents = uniqEvents
|
||||||
@ -68,7 +80,7 @@ const Thread = () => {
|
|||||||
<ThreadPostModal OPEvent={OPEvent} />
|
<ThreadPostModal OPEvent={OPEvent} />
|
||||||
<div className="col-span-full h-0.5 bg-neutral-900 mb-2"/> {/* This is the white line separator */}
|
<div className="col-span-full h-0.5 bg-neutral-900 mb-2"/> {/* This is the white line separator */}
|
||||||
<div className="grid grid-cols-1 max-w-xl mx-auto gap-1">
|
<div className="grid grid-cols-1 max-w-xl mx-auto gap-1">
|
||||||
{replyEvents.map((event: Event) => (
|
{replyEvents.slice(0, visibleReplyEvents).map((event: Event) => (
|
||||||
<div className={`w-11/12 ${event.tags.find(tag => tag[0] === 'e' && tag[1] !== OPEvent.id) ? 'ml-auto' : 'mr-auto'}`}>
|
<div className={`w-11/12 ${event.tags.find(tag => tag[0] === 'e' && tag[1] !== OPEvent.id) ? 'ml-auto' : 'mr-auto'}`}>
|
||||||
<PostCard
|
<PostCard
|
||||||
key={event.id}
|
key={event.id}
|
||||||
|
@ -292,7 +292,7 @@ export const subHashtagFeed = (
|
|||||||
filter: {
|
filter: {
|
||||||
"#t": [hashtag],
|
"#t": [hashtag],
|
||||||
kinds: [1],
|
kinds: [1],
|
||||||
since: Math.floor(now - (3 * 60 * 60)),
|
since: Math.floor(now - (24 * 60 * 60)),
|
||||||
limit: 20,
|
limit: 20,
|
||||||
},
|
},
|
||||||
unsub: true
|
unsub: true
|
||||||
|
Loading…
Reference in New Issue
Block a user