From 861b04100a05b2f7bf11391359dc2a36cd6bb2e5 Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Mon, 3 Jul 2023 15:23:31 +0700 Subject: [PATCH] add notification modal --- src/app/chat/components/messages/item.tsx | 25 +-- src/app/chat/components/modal.tsx | 6 +- src/app/trending/components/profile.tsx | 35 ++-- .../trending/components/trendingProfiles.tsx | 2 +- src/shared/accounts/active.tsx | 6 +- src/shared/lumeBar.tsx | 13 +- src/shared/notification.tsx | 58 ------- src/shared/notification/modal.tsx | 153 ++++++++++++++++++ src/shared/notification/user.tsx | 42 +++++ 9 files changed, 235 insertions(+), 105 deletions(-) delete mode 100644 src/shared/notification.tsx create mode 100644 src/shared/notification/modal.tsx create mode 100644 src/shared/notification/user.tsx diff --git a/src/app/chat/components/messages/item.tsx b/src/app/chat/components/messages/item.tsx index e99a4c64..e4eed145 100644 --- a/src/app/chat/components/messages/item.tsx +++ b/src/app/chat/components/messages/item.tsx @@ -35,28 +35,13 @@ export function ChatMessageItem({

{content.parsed}

- {Array.isArray(content.images) && content.images.length ? ( - - ) : ( - <> - )} - {Array.isArray(content.videos) && content.videos.length ? ( - - ) : ( - <> - )} - {Array.isArray(content.links) && content.links.length ? ( - - ) : ( - <> - )} - {Array.isArray(content.notes) && content.notes.length ? ( + {content.images.length > 0 && } + {content.videos.length > 0 && } + {content.links.length > 0 && } + {content.notes.length > 0 && content.notes.map((note: string) => ( - )) - ) : ( - <> - )} + ))} diff --git a/src/app/chat/components/modal.tsx b/src/app/chat/components/modal.tsx index 7ee350ee..6b3c1416 100644 --- a/src/app/chat/components/modal.tsx +++ b/src/app/chat/components/modal.tsx @@ -1,6 +1,6 @@ import { User } from "@app/auth/components/user"; import { Dialog, Transition } from "@headlessui/react"; -import { CancelIcon, PlusIcon } from "@shared/icons"; +import { CancelIcon, LoaderIcon, PlusIcon } from "@shared/icons"; import { useAccount } from "@utils/hooks/useAccount"; import { Fragment, useState } from "react"; import { useNavigate } from "react-router-dom"; @@ -92,7 +92,9 @@ export function NewMessageModal() {
{status === "loading" ? ( -

Loading...

+
+ +
) : ( follows.map((follow) => (
-
-
- +
+
+
+
+ +
+
+

+ {profile.display_name || profile.name} +

+

+ {profile.nip05 || shortenKey(data.pubkey)} +

+
-
-

- {profile.display_name || profile.name} -

-

- {profile.nip05 || shortenKey(data.pubkey)} -

+
+
diff --git a/src/app/trending/components/trendingProfiles.tsx b/src/app/trending/components/trendingProfiles.tsx index 55b389af..50365513 100644 --- a/src/app/trending/components/trendingProfiles.tsx +++ b/src/app/trending/components/trendingProfiles.tsx @@ -24,7 +24,7 @@ export function TrendingProfiles() {
) : ( -
+
{data.profiles.map((item) => ( ))} diff --git a/src/shared/accounts/active.tsx b/src/shared/accounts/active.tsx index 12198783..282778ca 100644 --- a/src/shared/accounts/active.tsx +++ b/src/shared/accounts/active.tsx @@ -50,7 +50,7 @@ export function ActiveAccount({ data }: { data: any }) { const since = lastLogin > 0 ? lastLogin : Math.floor(Date.now() / 1000); const sub = ndk.subscribe( { - kinds: [1, 4], + kinds: [4], "#p": [data.pubkey], since: since, }, @@ -61,10 +61,6 @@ export function ActiveAccount({ data }: { data: any }) { sub.addListener("event", (event) => { switch (event.kind) { - case 1: - // send native notifiation - sendNativeNotification("Someone mention you"); - break; case 4: // update state chat.mutate({ diff --git a/src/shared/lumeBar.tsx b/src/shared/lumeBar.tsx index 292c095a..47d409b3 100644 --- a/src/shared/lumeBar.tsx +++ b/src/shared/lumeBar.tsx @@ -1,7 +1,7 @@ import { ActiveAccount } from "@shared/accounts/active"; import { SettingsIcon } from "@shared/icons"; import { Logout } from "@shared/logout"; -import { Notification } from "@shared/notification"; +import { NotificationModal } from "@shared/notification/modal"; import { useAccount } from "@utils/hooks/useAccount"; import { Link } from "react-router-dom"; @@ -12,11 +12,16 @@ export function LumeBar() {
{status === "loading" ? ( -
+ <> +
+
+ ) : ( - + <> + + + )} - { - setIsOpen(false); - }; - - const openModal = () => { - setIsOpen(true); - }; - - return ( - <> - - - - -
- -
- - -

OK

- - -
-
- - - ); -} diff --git a/src/shared/notification/modal.tsx b/src/shared/notification/modal.tsx new file mode 100644 index 00000000..5a9d846f --- /dev/null +++ b/src/shared/notification/modal.tsx @@ -0,0 +1,153 @@ +import { NotificationUser } from "./user"; +import { Dialog, Transition } from "@headlessui/react"; +import { NDKEvent, NDKFilter } from "@nostr-dev-kit/ndk"; +import { BellIcon, CancelIcon, LoaderIcon } from "@shared/icons"; +import { RelayContext } from "@shared/relayProvider"; +import { User } from "@shared/user"; +import { useQuery } from "@tanstack/react-query"; +import { dateToUnix, getHourAgo } from "@utils/date"; +import { Fragment, useContext, useRef, useState } from "react"; + +export function NotificationModal({ pubkey }: { pubkey: string }) { + const ndk = useContext(RelayContext); + const now = useRef(new Date()); + + const [isOpen, setIsOpen] = useState(false); + const [refresh, setRefresh] = useState(false); + + const { status, data } = useQuery( + ["user-notification", pubkey], + async () => { + const filter: NDKFilter = { + "#p": [pubkey], + kinds: [1, 6, 7, 9735], + since: dateToUnix(getHourAgo(100, now.current)), + }; + const events = await ndk.fetchEvents(filter); + return [...events]; + }, + { + refetchOnMount: false, + refetchOnReconnect: false, + refetchOnWindowFocus: false, + staleTime: Infinity, + }, + ); + + const closeModal = () => { + setIsOpen(false); + }; + + const openModal = () => { + setIsOpen(true); + }; + + const renderItem = (event: NDKEvent) => { + if (event.kind === 1) { + return ( +
+ +
+

+ {event.content} +

+
+
+ ); + } + + if (event.kind === 6) { + return ( +
+ +
+ ); + } + + if (event.kind === 7) { + return ( +
+ +
+ ); + } + + if (event.kind === 9735) { + return ( +
+ +
+ ); + } + + return
{event.content}
; + }; + + return ( + <> + + + + +
+ +
+ + +
+
+ + 24 hours ago + + +
+
+
+ {status === "loading" ? ( +
+ +
+ ) : ( + data.map((event) => renderItem(event)) + )} +
+ + +
+
+ + + ); +} diff --git a/src/shared/notification/user.tsx b/src/shared/notification/user.tsx new file mode 100644 index 00000000..39c2550b --- /dev/null +++ b/src/shared/notification/user.tsx @@ -0,0 +1,42 @@ +import { Image } from "@shared/image"; +import { DEFAULT_AVATAR } from "@stores/constants"; +import { useProfile } from "@utils/hooks/useProfile"; +import { shortenKey } from "@utils/shortenKey"; + +export function NotificationUser({ + pubkey, + desc, +}: { pubkey: string; desc: string }) { + const { status, user } = useProfile(pubkey); + + if (status === "loading") { + return ( +
+
+
+ + +
+
+ ); + } + + return ( +
+
+ {pubkey} +
+
+ + {user.nip05 || user.name || user.displayName || shortenKey(pubkey)} + + {desc} +
+
+ ); +}