highperfocused/lume
1
0
Fork 0
mirror of https://github.com/lumehq/lume.git synced 2025-04-01 16:38:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

add fetch events when follow user

Browse Source
This commit is contained in:
Ren Amamiya 2023-07-04 11:16:39 +07:00
parent 1b8eaa2988
commit 744fbd5683
5 changed files with 53 additions and 20 deletions
src
app
chat/components
modal.tsx
space/components
addFeed.tsxaddImage.tsx
shared/notification
modal.tsx
utils/hooks
useSocial.tsx

2
src/app/chat/components/modal.tsx

@ -64,7 +64,7 @@ export function NewMessageModal() {
>
<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900">
<div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between">
<Dialog.Title
as="h3"

4
src/app/space/components/addFeed.tsx

@ -1,7 +1,7 @@
import { User } from "@app/auth/components/user";
import { Dialog, Transition } from "@headlessui/react";
import { Combobox } from "@headlessui/react";
import { createBlock, getPlebs } from "@libs/storage";
import { createBlock } from "@libs/storage";
import { CancelIcon, CheckCircleIcon, CommandIcon } from "@shared/icons";
import { DEFAULT_AVATAR } from "@stores/constants";
import { ADD_FEEDBLOCK_SHORTCUT } from "@stores/shortcuts";
@ -115,7 +115,7 @@ export function AddFeedBlock() {
>
<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-xl border-t border-zinc-800/50 bg-zinc-900">
<div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between">
<Dialog.Title
as="h3"

2
src/app/space/components/addImage.tsx

@ -178,7 +178,7 @@ export function AddImageBlock() {
>
<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-xl border-t border-zinc-800/50 bg-zinc-900">
<div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between">
<Dialog.Title
as="h3"

42
src/shared/notification/modal.tsx

@ -21,7 +21,7 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
const filter: NDKFilter = {
"#p": [pubkey],
kinds: [1, 6, 7, 9735],
since: dateToUnix(getHourAgo(100, now.current)),
since: dateToUnix(getHourAgo(48, now.current)),
};
const events = await ndk.fetchEvents(filter);
return [...events];
@ -118,20 +118,25 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
>
<Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900">
<div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
<div className="flex items-center justify-between">
<Dialog.Title
as="h3"
className="text-lg font-semibold leading-none text-zinc-100"
>
24 hours ago
</Dialog.Title>
<button
type="button"
onClick={closeModal}
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
>
<CancelIcon className="w-5 h-5 text-zinc-300" />
</button>
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between">
<Dialog.Title
as="h3"
className="text-lg font-semibold leading-none text-zinc-100"
>
Notification
</Dialog.Title>
<button
type="button"
onClick={closeModal}
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
>
<CancelIcon className="w-5 h-5 text-zinc-300" />
</button>
</div>
<Dialog.Description className="text-sm leading-tight text-zinc-400">
All things happen when you rest in 48 hours ago
</Dialog.Description>
</div>
</div>
<div className="h-[500px] flex flex-col pb-5 overflow-x-hidden overflow-y-auto">
@ -139,6 +144,13 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
<div className="px-4 py-3 inline-flex items-center justify-center">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
</div>
) : data.length < 1 ? (
<div className="flex flex-col items-center justify-center w-full h-full">
<p className="text-4xl mb-1">🎉</p>
<p className="text-zinc-500 font-medium">
Yo!, you've no new notifications
</p>
</div>
) : (
data.map((event) => renderItem(event))
)}

23
src/utils/hooks/useSocial.tsx

@ -1,7 +1,10 @@
import { useAccount } from "./useAccount";
import { usePublish } from "@libs/ndk";
import { createNote } from "@libs/storage";
import { NDKEvent, NDKFilter } from "@nostr-dev-kit/ndk";
import { RelayContext } from "@shared/relayProvider";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { dateToUnix, getHourAgo } from "@utils/date";
import { nip02ToArray } from "@utils/transform";
import { useContext } from "react";
@ -47,7 +50,7 @@ export function useSocial() {
});
};
const follow = (pubkey: string) => {
const follow = async (pubkey: string) => {
const followsAsSet = new Set(userFollows);
followsAsSet.add(pubkey);
@ -62,6 +65,24 @@ export function useSocial() {
queryClient.invalidateQueries({
queryKey: ["userFollows", account.pubkey],
});
// fetch events
const filter: NDKFilter = {
authors: [pubkey],
kinds: [1, 6],
since: dateToUnix(getHourAgo(48, new Date())),
};
const events = await ndk.fetchEvents(filter);
events.forEach((event: NDKEvent) => {
createNote(
event.id,
event.pubkey,
event.kind,
event.tags,
event.content,
event.created_at,
);
});
};
return { status, userFollows, follow, unfollow };