add fetch events when follow user

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"

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"

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"

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">
+									<div className="flex flex-col gap-1">
-										<Dialog.Title
+										<div className="flex items-center justify-between">
-											as="h3"
+											<Dialog.Title
-											className="text-lg font-semibold leading-none text-zinc-100"
+												as="h3"
-										>
+												className="text-lg font-semibold leading-none text-zinc-100"
-											24 hours ago
+											>
-										</Dialog.Title>
+												Notification
-										<button
+											</Dialog.Title>
-											type="button"
+											<button
-											onClick={closeModal}
+												type="button"
-											className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
+												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>
+												<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))
 									)}

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 };