From 2c5622354784a261ac1e6004ccd088115f506a1a Mon Sep 17 00:00:00 2001 From: ingawei Date: Wed, 14 Aug 2024 17:38:01 -0700 Subject: [PATCH 1/3] message content --- .../messaging/message-content.tsx} | 12 ------------ web/components/messaging/messages-icon.tsx | 12 +++--------- web/components/nav/sidebar.tsx | 11 ----------- web/components/notifications-icon.tsx | 10 +++++++--- web/pages/notifications.tsx | 19 +++++++++++++------ 5 files changed, 23 insertions(+), 41 deletions(-) rename web/{pages/messages/index.tsx => components/messaging/message-content.tsx} (94%) diff --git a/web/pages/messages/index.tsx b/web/components/messaging/message-content.tsx similarity index 94% rename from web/pages/messages/index.tsx rename to web/components/messaging/message-content.tsx index 7e01f3f63d..5ab4fabbe2 100644 --- a/web/pages/messages/index.tsx +++ b/web/components/messaging/message-content.tsx @@ -20,14 +20,6 @@ import { MultipleOrSingleAvatars } from 'web/components/multiple-or-single-avata import { BannedBadge } from 'web/components/widgets/user-link' import { PrivateMessageChannel } from 'common/supabase/private-messages' -export default function MessagesPage() { - return ( - - - - ) -} - export function MessagesContent() { useRedirectIfSignedOut() const currentUser = useUser() @@ -37,10 +29,6 @@ export function MessagesContent() { return ( <> - - Messages - - {currentUser && channels && channels.length === 0 && (
diff --git a/web/components/messaging/messages-icon.tsx b/web/components/messaging/messages-icon.tsx index f35e093770..0cd872968e 100644 --- a/web/components/messaging/messages-icon.tsx +++ b/web/components/messaging/messages-icon.tsx @@ -21,23 +21,17 @@ export function UnseenMessagesBubble(props: { className?: string }) { ) } -export function PrivateMessagesIcon(props: { - className?: string - bubbleClassName?: string - solid?: boolean -}) { - const { solid, className, bubbleClassName } = props +export function UnreadPrivateMessages(props: { className?: string }) { + const { className } = props const privateUser = usePrivateUser() - const Icon = solid ? BiSolidEnvelope : BiEnvelope return ( {privateUser && ( )} - ) } diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx index f6fb83ac3d..d38996ac22 100644 --- a/web/components/nav/sidebar.tsx +++ b/web/components/nav/sidebar.tsx @@ -33,7 +33,6 @@ import { SidebarSignUpButton } from '../buttons/sign-up-button' import { ManifoldLogo } from './manifold-logo' import { ProfileSummary } from './profile-summary' import { NavItem, SidebarItem } from './sidebar-item' -import { PrivateMessagesIcon } from 'web/components/messaging/messages-icon' import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime' import { DAY_MS } from 'common/util/time' import { LiveTVIcon } from '../tv-icon' @@ -158,11 +157,6 @@ const getDesktopNav = ( // href: '/tv', // icon: PiTelevisionSimpleBold, // }, - { - name: 'Messages', - href: '/messages', - icon: PrivateMessagesIcon, - }, options.isAdminOrMod && { name: 'Reports', href: '/reports', @@ -211,11 +205,6 @@ const getMobileNav = ( href: '/tv', icon: isLiveTV ? LiveTVIcon : PiTelevisionSimpleBold, }, - { - name: 'Messages', - href: '/messages', - icon: PrivateMessagesIcon, - }, isAdminOrMod && { name: 'Reports', href: '/reports', diff --git a/web/components/notifications-icon.tsx b/web/components/notifications-icon.tsx index 2c8e57d224..553ccfd381 100644 --- a/web/components/notifications-icon.tsx +++ b/web/components/notifications-icon.tsx @@ -9,6 +9,7 @@ import { NOTIFICATIONS_PER_PAGE } from './notifications/notification-helpers' import { usePathname } from 'next/navigation' import { usePersistentLocalState } from 'web/hooks/use-persistent-local-state' +import { useUnseenPrivateMessageChannels } from 'web/hooks/use-private-messages' export function NotificationsIcon(props: { className?: string }) { const privateUser = usePrivateUser() @@ -36,21 +37,24 @@ function UnseenNotificationsBubble(props: { privateUser: PrivateUser }) { (ng) => ng.latestCreatedTime > lastSeenTime ).length + const unseenMessages = useUnseenPrivateMessageChannels(privateUser.id).length + useEffect(() => { if (pathname?.endsWith('notifications')) { setLastSeenTime(Date.now()) } }, [pathname, unseenNotifs]) - if (unseenNotifs === 0) { + const unseenTotalNotifs = unseenNotifs + unseenMessages + if (unseenTotalNotifs === 0) { return null } return (
- {unseenNotifs > NOTIFICATIONS_PER_PAGE + {unseenTotalNotifs > NOTIFICATIONS_PER_PAGE ? `${NOTIFICATIONS_PER_PAGE}+` - : unseenNotifs} + : unseenTotalNotifs}
) } diff --git a/web/pages/notifications.tsx b/web/pages/notifications.tsx index ab9a47819c..bbc409af40 100644 --- a/web/pages/notifications.tsx +++ b/web/pages/notifications.tsx @@ -1,27 +1,31 @@ +import { XIcon } from '@heroicons/react/outline' import clsx from 'clsx' import { Notification, ReactionNotificationTypes } from 'common/notification' import { PrivateUser, User } from 'common/user' import { groupBy, sortBy } from 'lodash' import { useRouter } from 'next/router' import { Fragment, ReactNode, useEffect, useMemo, useState } from 'react' +import { SEO } from 'web/components/SEO' +import { AppBadgesOrGetAppButton } from 'web/components/buttons/app-badges-or-get-app-button' import { Col } from 'web/components/layout/col' import { Page } from 'web/components/layout/page' import { Row } from 'web/components/layout/row' import { QueryUncontrolledTabs } from 'web/components/layout/tabs' +import { MessagesContent } from 'web/components/messaging/message-content' +import { UnreadPrivateMessages } from 'web/components/messaging/messages-icon' import { NotificationSettings } from 'web/components/notification-settings' import { combineAndSumIncomeNotifications } from 'web/components/notifications/income-summary-notifications' import { - combineReactionNotifications, NOTIFICATIONS_PER_PAGE, NUM_SUMMARY_LINES, ParentNotificationHeader, QuestionOrGroupLink, + combineReactionNotifications, } from 'web/components/notifications/notification-helpers' -import { api, markAllNotifications } from 'web/lib/api/api' import { NotificationItem } from 'web/components/notifications/notification-types' import { PushNotificationsModal } from 'web/components/push-notifications-modal' -import { SEO } from 'web/components/SEO' import { ShowMoreLessButton } from 'web/components/widgets/collapsible-content' +import { LoadingIndicator } from 'web/components/widgets/loading-indicator' import { Pagination } from 'web/components/widgets/pagination' import { Title } from 'web/components/widgets/title' import { @@ -31,10 +35,8 @@ import { import { useIsPageVisible } from 'web/hooks/use-page-visible' import { useRedirectIfSignedOut } from 'web/hooks/use-redirect-if-signed-out' import { usePrivateUser, useUser } from 'web/hooks/use-user' -import { XIcon } from '@heroicons/react/outline' +import { api, markAllNotifications } from 'web/lib/api/api' import { getNativePlatform } from 'web/lib/native/is-native' -import { AppBadgesOrGetAppButton } from 'web/components/buttons/app-badges-or-get-app-button' -import { LoadingIndicator } from 'web/components/widgets/loading-indicator' import { track } from 'web/lib/service/analytics' export default function NotificationsPage() { @@ -134,6 +136,11 @@ function NotificationsContent(props: { /> ), }, + { + title: 'Messages', + content: , + inlineTabIcon: , + }, { title: 'Following', inlineTabIcon: From 4394fce6c0657dd67d308c46f9f04d0a74c90297 Mon Sep 17 00:00:00 2001 From: ingawei Date: Wed, 14 Aug 2024 18:25:55 -0700 Subject: [PATCH 2/3] ig --- web/components/messaging/message-content.tsx | 3 +++ web/components/messaging/messages-icon.tsx | 22 ++++++------------- .../messaging/new-message-button.tsx | 20 ++++++++++++----- web/components/nav/bottom-nav-bar.tsx | 1 - web/pages/notifications.tsx | 4 ++-- 5 files changed, 27 insertions(+), 23 deletions(-) diff --git a/web/components/messaging/message-content.tsx b/web/components/messaging/message-content.tsx index 5ab4fabbe2..3a445ae697 100644 --- a/web/components/messaging/message-content.tsx +++ b/web/components/messaging/message-content.tsx @@ -29,6 +29,9 @@ export function MessagesContent() { return ( <> + + + {currentUser && channels && channels.length === 0 && (
diff --git a/web/components/messaging/messages-icon.tsx b/web/components/messaging/messages-icon.tsx index 0cd872968e..e42ebc18de 100644 --- a/web/components/messaging/messages-icon.tsx +++ b/web/components/messaging/messages-icon.tsx @@ -28,7 +28,7 @@ export function UnreadPrivateMessages(props: { className?: string }) { {privateUser && ( )} @@ -39,9 +39,8 @@ export function UnreadPrivateMessages(props: { className?: string }) { function InternalUnseenMessagesBubble(props: { privateUser: PrivateUser bubbleClassName?: string - className?: string }) { - const { privateUser, className, bubbleClassName } = props + const { privateUser, bubbleClassName } = props const unseenMessages = useUnseenPrivateMessageChannels(privateUser.id) const pathName = usePathname() @@ -55,20 +54,13 @@ function InternalUnseenMessagesBubble(props: { return null return ( - -
- {unseenMessages.length} -
- + {unseenMessages.length} +
) } diff --git a/web/components/messaging/new-message-button.tsx b/web/components/messaging/new-message-button.tsx index 206128ff8c..cae53fb862 100644 --- a/web/components/messaging/new-message-button.tsx +++ b/web/components/messaging/new-message-button.tsx @@ -1,5 +1,5 @@ import { PlusIcon } from '@heroicons/react/solid' -import { Button } from '../buttons/button' +import { Button, IconButton } from '../buttons/button' import { useState } from 'react' import { MODAL_CLASS, Modal } from '../layout/modal' import { Col } from '../layout/col' @@ -11,14 +11,24 @@ import { SelectUsers } from 'web/components/select-users' import { DisplayUser } from 'common/api/user-types' import { usePrivateUser } from 'web/hooks/use-user' import { buildArray } from 'common/util/array' +import { RiChatNewFill } from 'react-icons/ri' -export default function NewMessageButton() { +export default function NewMessageButton(props: { className?: string }) { const [open, setOpen] = useState(false) + const { className } = props return ( <> - diff --git a/web/components/nav/bottom-nav-bar.tsx b/web/components/nav/bottom-nav-bar.tsx index ce3d4b4b84..3b170205a6 100644 --- a/web/components/nav/bottom-nav-bar.tsx +++ b/web/components/nav/bottom-nav-bar.tsx @@ -117,7 +117,6 @@ export function BottomNavBar() { )} onClick={() => setSidebarOpen(true)} > -
, - inlineTabIcon: , + inlineTabIcon: , }, { title: 'Following', @@ -147,7 +147,7 @@ function NotificationsContent(props: { unseenNewMarketNotifs > 0 ? (
{unseenNewMarketNotifs} From 927a61c8e3de5bc12693caffccf4c79d0088f284 Mon Sep 17 00:00:00 2001 From: ingawei Date: Thu, 15 Aug 2024 14:52:40 -0700 Subject: [PATCH 3/3] hm --- web/hooks/use-private-messages.ts | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/web/hooks/use-private-messages.ts b/web/hooks/use-private-messages.ts index 63283c4ac1..869353e334 100644 --- a/web/hooks/use-private-messages.ts +++ b/web/hooks/use-private-messages.ts @@ -78,7 +78,7 @@ export const useHasUnseenPrivateMessage = ( export const useUnseenPrivateMessageChannels = (userId: string) => { const pathName = usePathname() - const lastSeenMessagesPageTime = useLastSeenMessagesPageTime() + const lastSeenMessagesPageTime = useLastSeenMessagesPageTime(true) const [lastSeenChatTimeByChannelId, setLastSeenChatTimeByChannelId] = usePersistentLocalState | undefined>( undefined, @@ -148,23 +148,18 @@ export const useUnseenPrivateMessageChannels = (userId: string) => { }) } -const useLastSeenMessagesPageTime = () => { - const pathname = usePathname() +const useLastSeenMessagesPageTime = (updateTime?: boolean) => { const isVisible = useIsPageVisible() const [lastSeenMessagesPageTime, setLastSeenMessagesPageTime] = usePersistentLocalState(0, 'last-seen-private-messages-page') - const [unloadingPage, setUnloadingPage] = usePersistentInMemoryState( - '', - 'unloading-page-private-messages-page' - ) + useEffect(() => { - if (pathname === '/messages' || unloadingPage === '/messages') { + if (updateTime) { setLastSeenMessagesPageTime(Date.now()) - track('view messages page') + track('view messages tab') } - setUnloadingPage(pathname) - }, [pathname, isVisible]) + }, [isVisible]) return lastSeenMessagesPageTime }