From 1362dfadda8dcd37e829c54deba85709da5b473d Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Tue, 25 Jul 2023 13:25:14 +0700 Subject: [PATCH] update urls and user page --- src/app.tsx | 8 +- src/app/{chat => chats}/components/item.tsx | 2 +- src/app/{chat => chats}/components/list.tsx | 6 +- .../components/messages/form.tsx | 0 .../components/messages/item.tsx | 2 +- src/app/{chat => chats}/components/modal.tsx | 4 +- src/app/{chat => chats}/components/self.tsx | 4 +- .../{chat => chats}/components/sidebar.tsx | 2 +- .../hooks/useDecryptMessage.tsx | 0 src/app/{chat => chats}/index.tsx | 6 +- src/app/user/index.tsx | 147 ------------------ src/app/{user => users}/components/feed.tsx | 0 .../{user => users}/components/metadata.tsx | 0 src/app/users/components/profile.tsx | 125 +++++++++++++++ src/app/users/index.tsx | 98 ++++++++++++ src/shared/accounts/active.tsx | 2 +- src/shared/navigation.tsx | 2 +- src/shared/user.tsx | 4 +- src/shared/userProfile.tsx | 4 +- 19 files changed, 246 insertions(+), 170 deletions(-) rename src/app/{chat => chats}/components/item.tsx (97%) rename src/app/{chat => chats}/components/list.tsx (93%) rename src/app/{chat => chats}/components/messages/form.tsx (100%) rename src/app/{chat => chats}/components/messages/item.tsx (95%) rename src/app/{chat => chats}/components/modal.tsx (97%) rename src/app/{chat => chats}/components/self.tsx (93%) rename src/app/{chat => chats}/components/sidebar.tsx (97%) rename src/app/{chat => chats}/hooks/useDecryptMessage.tsx (100%) rename src/app/{chat => chats}/index.tsx (95%) delete mode 100644 src/app/user/index.tsx rename src/app/{user => users}/components/feed.tsx (100%) rename src/app/{user => users}/components/metadata.tsx (100%) create mode 100644 src/app/users/components/profile.tsx create mode 100644 src/app/users/index.tsx diff --git a/src/app.tsx b/src/app.tsx index 509838f4..e63da582 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -15,7 +15,7 @@ import { OnboardingScreen } from '@app/auth/onboarding'; import { UnlockScreen } from '@app/auth/unlock'; import { WelcomeScreen } from '@app/auth/welcome'; import { ChannelScreen } from '@app/channel'; -import { ChatScreen } from '@app/chat'; +import { ChatScreen } from '@app/chats'; import { ErrorScreen } from '@app/error'; import { NoteScreen } from '@app/note'; import { Root } from '@app/root'; @@ -24,7 +24,7 @@ import { GeneralSettingsScreen } from '@app/settings/general'; import { ShortcutsSettingsScreen } from '@app/settings/shortcuts'; import { SpaceScreen } from '@app/space'; import { TrendingScreen } from '@app/trending'; -import { UserScreen } from '@app/user'; +import { UserScreen } from '@app/users'; import { AppLayout } from '@shared/appLayout'; import { AuthLayout } from '@shared/authLayout'; @@ -84,8 +84,8 @@ const router = createBrowserRouter([ { path: 'space', element: }, { path: 'trending', element: }, { path: 'note/:id', element: }, - { path: 'user/:pubkey', element: }, - { path: 'chat/:pubkey', element: }, + { path: 'users/:pubkey', element: }, + { path: 'chats/:pubkey', element: }, { path: 'channel/:id', element: }, ], }, diff --git a/src/app/chat/components/item.tsx b/src/app/chats/components/item.tsx similarity index 97% rename from src/app/chat/components/item.tsx rename to src/app/chats/components/item.tsx index f75015a8..f1fb4848 100644 --- a/src/app/chat/components/item.tsx +++ b/src/app/chats/components/item.tsx @@ -22,7 +22,7 @@ export function ChatsListItem({ data }: { data: any }) { return ( twMerge( diff --git a/src/app/chat/components/list.tsx b/src/app/chats/components/list.tsx similarity index 93% rename from src/app/chat/components/list.tsx rename to src/app/chats/components/list.tsx index b4ffed92..27afb3c2 100644 --- a/src/app/chat/components/list.tsx +++ b/src/app/chats/components/list.tsx @@ -1,8 +1,8 @@ import { useQuery } from '@tanstack/react-query'; -import { ChatsListItem } from '@app/chat/components/item'; -import { NewMessageModal } from '@app/chat/components/modal'; -import { ChatsListSelfItem } from '@app/chat/components/self'; +import { ChatsListItem } from '@app/chats/components/item'; +import { NewMessageModal } from '@app/chats/components/modal'; +import { ChatsListSelfItem } from '@app/chats/components/self'; import { getChats } from '@libs/storage'; diff --git a/src/app/chat/components/messages/form.tsx b/src/app/chats/components/messages/form.tsx similarity index 100% rename from src/app/chat/components/messages/form.tsx rename to src/app/chats/components/messages/form.tsx diff --git a/src/app/chat/components/messages/item.tsx b/src/app/chats/components/messages/item.tsx similarity index 95% rename from src/app/chat/components/messages/item.tsx rename to src/app/chats/components/messages/item.tsx index 29aa1115..527b41cf 100644 --- a/src/app/chat/components/messages/item.tsx +++ b/src/app/chats/components/messages/item.tsx @@ -1,4 +1,4 @@ -import { useDecryptMessage } from '@app/chat/hooks/useDecryptMessage'; +import { useDecryptMessage } from '@app/chats/hooks/useDecryptMessage'; import { MentionNote } from '@shared/notes/mentions/note'; import { ImagePreview } from '@shared/notes/preview/image'; diff --git a/src/app/chat/components/modal.tsx b/src/app/chats/components/modal.tsx similarity index 97% rename from src/app/chat/components/modal.tsx rename to src/app/chats/components/modal.tsx index 018c3210..5a5f26dd 100644 --- a/src/app/chat/components/modal.tsx +++ b/src/app/chats/components/modal.tsx @@ -13,7 +13,7 @@ export function NewMessageModal() { const [isOpen, setIsOpen] = useState(false); const { status, account } = useAccount(); - const follows = account ? JSON.parse(account.follows) : []; + const follows = account ? JSON.parse(account.follows as string) : []; const closeModal = () => { setIsOpen(false); @@ -25,7 +25,7 @@ export function NewMessageModal() { const openChat = (pubkey: string) => { closeModal(); - navigate(`/app/chat/${pubkey}`); + navigate(`/app/chats/${pubkey}`); }; return ( diff --git a/src/app/chat/components/self.tsx b/src/app/chats/components/self.tsx similarity index 93% rename from src/app/chat/components/self.tsx rename to src/app/chats/components/self.tsx index f1a29ac2..54f9a834 100644 --- a/src/app/chat/components/self.tsx +++ b/src/app/chats/components/self.tsx @@ -8,7 +8,7 @@ import { DEFAULT_AVATAR } from '@stores/constants'; import { useProfile } from '@utils/hooks/useProfile'; import { shortenKey } from '@utils/shortenKey'; -export function ChatsListSelfItem({ data }: { data: any }) { +export function ChatsListSelfItem({ data }: { data: { pubkey: string } }) { const { status, user } = useProfile(data.pubkey); if (status === 'loading') { @@ -24,7 +24,7 @@ export function ChatsListSelfItem({ data }: { data: any }) { return ( twMerge( diff --git a/src/app/chat/components/sidebar.tsx b/src/app/chats/components/sidebar.tsx similarity index 97% rename from src/app/chat/components/sidebar.tsx rename to src/app/chats/components/sidebar.tsx index 56f9cb7a..d417a1f1 100644 --- a/src/app/chat/components/sidebar.tsx +++ b/src/app/chats/components/sidebar.tsx @@ -33,7 +33,7 @@ export function ChatSidebar({ pubkey }: { pubkey: string }) {

{user?.bio || user?.about}

View full profile diff --git a/src/app/chat/hooks/useDecryptMessage.tsx b/src/app/chats/hooks/useDecryptMessage.tsx similarity index 100% rename from src/app/chat/hooks/useDecryptMessage.tsx rename to src/app/chats/hooks/useDecryptMessage.tsx diff --git a/src/app/chat/index.tsx b/src/app/chats/index.tsx similarity index 95% rename from src/app/chat/index.tsx rename to src/app/chats/index.tsx index 7036bc37..9cfa8436 100644 --- a/src/app/chat/index.tsx +++ b/src/app/chats/index.tsx @@ -4,9 +4,9 @@ import { useCallback, useEffect, useRef } from 'react'; import { useParams } from 'react-router-dom'; import { Virtuoso } from 'react-virtuoso'; -import { ChatMessageForm } from '@app/chat/components/messages/form'; -import { ChatMessageItem } from '@app/chat/components/messages/item'; -import { ChatSidebar } from '@app/chat/components/sidebar'; +import { ChatMessageForm } from '@app/chats/components/messages/form'; +import { ChatMessageItem } from '@app/chats/components/messages/item'; +import { ChatSidebar } from '@app/chats/components/sidebar'; import { useNDK } from '@libs/ndk/provider'; import { createChat, getChatMessages } from '@libs/storage'; diff --git a/src/app/user/index.tsx b/src/app/user/index.tsx deleted file mode 100644 index 860a668e..00000000 --- a/src/app/user/index.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import { useEffect, useState } from 'react'; -import { Link, useParams } from 'react-router-dom'; - -import { UserFeed } from '@app/user/components/feed'; -import { UserMetadata } from '@app/user/components/metadata'; - -import { EditProfileModal } from '@shared/editProfileModal'; -import { ZapIcon } from '@shared/icons'; -import { Image } from '@shared/image'; - -import { DEFAULT_AVATAR } from '@stores/constants'; - -import { useAccount } from '@utils/hooks/useAccount'; -import { useProfile } from '@utils/hooks/useProfile'; -import { useSocial } from '@utils/hooks/useSocial'; -import { shortenKey } from '@utils/shortenKey'; - -export function UserScreen() { - const { pubkey } = useParams(); - const { user } = useProfile(pubkey); - const { account } = useAccount(); - const { status, userFollows, follow, unfollow } = useSocial(); - - const [followed, setFollowed] = useState(false); - - const followUser = (pubkey: string) => { - try { - follow(pubkey); - - // update state - setFollowed(true); - } catch (error) { - console.log(error); - } - }; - - const unfollowUser = (pubkey: string) => { - try { - unfollow(pubkey); - - // update state - setFollowed(false); - } catch (error) { - console.log(error); - } - }; - - useEffect(() => { - if (status === 'success' && userFollows) { - if (userFollows.includes(pubkey)) { - setFollowed(true); - } - } - }, [status]); - - return ( -
-
-
- {'banner'} -
-
-
- {pubkey} -
-
-
-
- {user?.displayName || user?.name || 'No name'} -
- - {user?.nip05 || shortenKey(pubkey)} - -
-
- {status === 'loading' ? ( - - ) : followed ? ( - - ) : ( - - )} - - Message - - - - {account && account.pubkey === pubkey && } -
-
-
-

- {user?.about} -

- -
-
-
-
-
-

Latest posts

- 48 hours ago -
- -
-
-
- ); -} diff --git a/src/app/user/components/feed.tsx b/src/app/users/components/feed.tsx similarity index 100% rename from src/app/user/components/feed.tsx rename to src/app/users/components/feed.tsx diff --git a/src/app/user/components/metadata.tsx b/src/app/users/components/metadata.tsx similarity index 100% rename from src/app/user/components/metadata.tsx rename to src/app/users/components/metadata.tsx diff --git a/src/app/users/components/profile.tsx b/src/app/users/components/profile.tsx new file mode 100644 index 00000000..916ce9b2 --- /dev/null +++ b/src/app/users/components/profile.tsx @@ -0,0 +1,125 @@ +import { useEffect, useState } from 'react'; +import { Link } from 'react-router-dom'; + +import { UserMetadata } from '@app/users/components/metadata'; + +import { EditProfileModal } from '@shared/editProfileModal'; +import { Image } from '@shared/image'; + +import { DEFAULT_AVATAR } from '@stores/constants'; + +import { useAccount } from '@utils/hooks/useAccount'; +import { useProfile } from '@utils/hooks/useProfile'; +import { useSocial } from '@utils/hooks/useSocial'; +import { shortenKey } from '@utils/shortenKey'; + +export function UserProfile({ pubkey }: { pubkey: string }) { + const { user } = useProfile(pubkey); + const { account } = useAccount(); + const { status, userFollows, follow, unfollow } = useSocial(); + + const [followed, setFollowed] = useState(false); + + const followUser = (pubkey: string) => { + try { + follow(pubkey); + + // update state + setFollowed(true); + } catch (error) { + console.log(error); + } + }; + + const unfollowUser = (pubkey: string) => { + try { + unfollow(pubkey); + + // update state + setFollowed(false); + } catch (error) { + console.log(error); + } + }; + + useEffect(() => { + if (status === 'success' && userFollows) { + if (userFollows.includes(pubkey)) { + setFollowed(true); + } + } + }, [status]); + + return ( + <> +
+ {'banner'} +
+
+ {pubkey} +
+
+
+
+ {user?.displayName || user?.name || 'No name'} +
+ + {user?.nip05 || shortenKey(pubkey)} + +
+
+ {status === 'loading' ? ( + + ) : followed ? ( + + ) : ( + + )} + + Message + + + {account && account.pubkey === pubkey && } +
+
+
+

+ {user?.about || user?.bio} +

+ +
+
+
+ + ); +} diff --git a/src/app/users/index.tsx b/src/app/users/index.tsx new file mode 100644 index 00000000..6f97a6db --- /dev/null +++ b/src/app/users/index.tsx @@ -0,0 +1,98 @@ +import { useQuery } from '@tanstack/react-query'; +import { useVirtualizer } from '@tanstack/react-virtual'; +import { useRef } from 'react'; +import { useParams } from 'react-router-dom'; + +import { useNDK } from '@libs/ndk/provider'; + +import { NoteKind_1, NoteSkeleton } from '@shared/notes'; + +import { nHoursAgo } from '@utils/date'; +import { LumeEvent } from '@utils/types'; + +import { UserProfile } from './components/profile'; + +export function UserScreen() { + const parentRef = useRef(); + + const { pubkey } = useParams(); + const { fetcher, relayUrls } = useNDK(); + const { status, data } = useQuery(['user-feed', pubkey], async () => { + const events = await fetcher.fetchAllEvents( + relayUrls, + { kinds: [1], authors: [pubkey] }, + { since: nHoursAgo(48) }, + { sort: true } + ); + return events as unknown as LumeEvent[]; + }); + + const rowVirtualizer = useVirtualizer({ + count: data ? data.length : 0, + getScrollElement: () => parentRef.current, + estimateSize: () => 400, + }); + + const itemsVirtualizer = rowVirtualizer.getVirtualItems(); + + return ( +
+
+ +
+
+

Latest posts

+ 48 hours ago +
+
+ {status === 'loading' ? ( +
+
+ +
+
+ ) : itemsVirtualizer.length === 0 ? ( +
+
+
+

+ No new posts about this hashtag in 48 hours ago +

+
+
+
+ ) : ( +
+
+ {itemsVirtualizer.map((virtualRow) => ( +
+ +
+ ))} +
+
+ )} +
+
+
+ ); +} diff --git a/src/shared/accounts/active.tsx b/src/shared/accounts/active.tsx index 6d97df22..60eb1d7f 100644 --- a/src/shared/accounts/active.tsx +++ b/src/shared/accounts/active.tsx @@ -92,7 +92,7 @@ export function ActiveAccount({ data }: { data: any }) { } return ( - +
View profile Message diff --git a/src/shared/userProfile.tsx b/src/shared/userProfile.tsx index 9163607d..4edee537 100644 --- a/src/shared/userProfile.tsx +++ b/src/shared/userProfile.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; -import { UserMetadata } from '@app/user/components/metadata'; +import { UserMetadata } from '@app/users/components/metadata'; import { ZapIcon } from '@shared/icons'; import { Image } from '@shared/image'; @@ -97,7 +97,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) { )} Message