2023-11-08 01:54:46 +00:00
|
|
|
import { useEffect, useState, useCallback } from "react";
|
|
|
|
import PostCard from "./Modals/Card";
|
2023-11-08 11:23:57 +00:00
|
|
|
import { uniqBy } from "../utils/otherUtils"; // Assume getPow is a correct import now
|
2023-11-02 01:57:04 +00:00
|
|
|
import { subGlobalFeed } from "../utils/subscriptions";
|
2023-11-07 23:10:27 +00:00
|
|
|
import { verifyPow } from "../utils/mine";
|
|
|
|
import { Event } from "nostr-tools";
|
2023-11-08 10:06:18 +00:00
|
|
|
import NewNoteCard from "./Forms/PostFormCard";
|
2023-09-02 07:24:30 +00:00
|
|
|
|
2023-11-08 01:54:46 +00:00
|
|
|
const DEFAULT_DIFFICULTY = 20;
|
|
|
|
|
2023-11-07 23:10:27 +00:00
|
|
|
const useUniqEvents = () => {
|
2023-09-24 13:22:51 +00:00
|
|
|
const [events, setEvents] = useState<Event[]>([]);
|
2023-09-15 07:06:37 +00:00
|
|
|
|
2023-09-15 15:56:25 +00:00
|
|
|
useEffect(() => {
|
2023-11-07 23:10:27 +00:00
|
|
|
const onEvent = (event: Event) => setEvents((prevEvents) => [...prevEvents, event]);
|
|
|
|
const unsubscribe = subGlobalFeed(onEvent);
|
2023-11-01 02:34:17 +00:00
|
|
|
|
2023-11-07 23:10:27 +00:00
|
|
|
return unsubscribe;
|
2023-09-24 13:22:51 +00:00
|
|
|
}, []);
|
2023-09-02 07:24:30 +00:00
|
|
|
|
2023-11-07 23:10:27 +00:00
|
|
|
return uniqBy(events, "id");
|
|
|
|
};
|
2023-11-02 01:57:04 +00:00
|
|
|
|
2023-11-07 23:10:27 +00:00
|
|
|
const Home = () => {
|
2023-11-08 01:54:46 +00:00
|
|
|
const filterDifficulty = localStorage.getItem("filterDifficulty") || DEFAULT_DIFFICULTY;
|
2023-11-07 23:10:27 +00:00
|
|
|
const [sortByTime, setSortByTime] = useState(true);
|
|
|
|
const uniqEvents = useUniqEvents();
|
|
|
|
|
|
|
|
const postEvents = uniqEvents
|
2023-11-06 04:25:52 +00:00
|
|
|
.filter((event) =>
|
2023-11-07 23:10:27 +00:00
|
|
|
verifyPow(event) >= Number(filterDifficulty) &&
|
2023-11-06 04:25:52 +00:00
|
|
|
event.kind === 1 &&
|
|
|
|
!event.tags.some((tag) => tag[0] === "e")
|
2023-09-24 13:22:51 +00:00
|
|
|
)
|
|
|
|
|
2023-11-07 23:10:27 +00:00
|
|
|
const sortedEvents = [...postEvents].sort((a, b) =>
|
|
|
|
sortByTime ? b.created_at - a.created_at : verifyPow(b) - verifyPow(a)
|
|
|
|
);
|
|
|
|
|
2023-11-08 01:54:46 +00:00
|
|
|
const toggleSort = useCallback(() => {
|
2023-11-06 10:14:17 +00:00
|
|
|
setSortByTime(prev => !prev);
|
2023-11-08 01:54:46 +00:00
|
|
|
}, []);
|
2023-11-06 04:25:52 +00:00
|
|
|
|
2023-09-24 13:22:51 +00:00
|
|
|
const getMetadataEvent = (event: Event) => {
|
2023-11-06 04:25:52 +00:00
|
|
|
return uniqEvents.find((e) => e.pubkey === event.pubkey && e.kind === 0) || null;
|
2023-11-02 01:57:04 +00:00
|
|
|
};
|
2023-09-24 13:22:51 +00:00
|
|
|
|
|
|
|
const countReplies = (event: Event) => {
|
2023-11-06 04:25:52 +00:00
|
|
|
return uniqEvents.filter((e) => e.tags.some((tag) => tag[0] === "e" && tag[1] === event.id)).length;
|
2023-11-02 01:57:04 +00:00
|
|
|
};
|
2023-09-02 07:24:30 +00:00
|
|
|
|
2023-11-06 04:25:52 +00:00
|
|
|
// Render the component
|
2023-09-02 07:24:30 +00:00
|
|
|
return (
|
2023-11-02 01:57:04 +00:00
|
|
|
<main className="text-white mb-20">
|
2023-11-02 12:58:13 +00:00
|
|
|
<div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
|
2023-11-08 10:06:18 +00:00
|
|
|
<NewNoteCard />
|
2023-11-02 01:57:04 +00:00
|
|
|
</div>
|
2023-11-06 04:25:52 +00:00
|
|
|
<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"
|
2023-11-06 10:14:17 +00:00
|
|
|
checked={sortByTime}
|
2023-11-06 04:25:52 +00:00
|
|
|
onChange={toggleSort}
|
|
|
|
/>
|
|
|
|
<div className="block bg-gray-600 w-10 h-6 rounded-full"></div>
|
2023-11-07 23:10:27 +00:00
|
|
|
<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>
|
2023-11-06 04:25:52 +00:00
|
|
|
</div>
|
2023-11-06 10:14:17 +00:00
|
|
|
<div className={`ml-3 text-neutral-500 font-medium ${sortByTime ? 'text-neutral-500' : ''}`}>
|
|
|
|
{sortByTime ? 'Sort by recent' : 'Sort by PoW'}
|
2023-11-06 04:25:52 +00:00
|
|
|
</div>
|
|
|
|
</label>
|
|
|
|
</div>
|
2023-11-02 12:58:13 +00:00
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
|
2023-11-07 23:10:27 +00:00
|
|
|
{sortedEvents.map((event) => (
|
2023-11-02 01:57:04 +00:00
|
|
|
<PostCard
|
|
|
|
key={event.id}
|
|
|
|
event={event}
|
|
|
|
metadata={getMetadataEvent(event)}
|
|
|
|
replyCount={countReplies(event)}
|
|
|
|
/>
|
2023-09-02 07:24:30 +00:00
|
|
|
))}
|
|
|
|
</div>
|
2023-09-03 12:46:07 +00:00
|
|
|
</main>
|
2023-09-02 07:24:30 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Home;
|