Show chat bubble on nav with unseen notifs

web/components/groups/group-chat.tsx

@@ -25,6 +25,7 @@ import { formatMoney } from 'common/util/format'
 import { useWindowSize } from 'web/hooks/use-window-size'
 import { useUnseenPreferredNotifications } from 'web/hooks/use-notifications'
 import { ChatIcon, ChevronDownIcon } from '@heroicons/react/outline'
+import { setNotificationsAsSeen } from 'web/pages/notifications'
 
 export function GroupChat(props: {
   messages: Comment[]
@@ -83,6 +84,10 @@ export function GroupChat(props: {
     }
   }, [messages, router.asPath])
 
+  useEffect(() => {
+    if (inputRef) inputRef.focus()
+  }, [inputRef])
+
   function onReplyClick(comment: Comment) {
     setReplyToUsername(comment.userUsername)
   }
@@ -100,9 +105,6 @@ export function GroupChat(props: {
     setReplyToUsername('')
     inputRef?.focus()
   }
-  function focusInput() {
-    inputRef?.focus()
-  }
 
   const { width, height } = useWindowSize()
   const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
@@ -140,7 +142,7 @@ export function GroupChat(props: {
             No messages yet. Why not{isMember ? ` ` : ' join and '}
             <button
               className={'cursor-pointer font-bold text-gray-700'}
-              onClick={() => focusInput()}
+              onClick={() => inputRef?.focus()}
             >
               add one?
             </button>
@@ -184,6 +186,17 @@ export function GroupChatInBubble(props: {
 }) {
   const { messages, user, group, tips, privateUser } = props
   const [shouldShowChat, setShouldShowChat] = useState(false)
+  const router = useRouter()
+
+  useEffect(() => {
+    if (router.asPath.includes('/chat')) {
+      setShouldShowChat(true)
+    }
+    // Leave chat open between groups if user is using chat?
+    // else {
+    //   setShouldShowChat(false)
+    // }
+  }, [router.asPath])
 
   return (
     <Col
@@ -217,8 +230,12 @@ export function GroupChatInBubble(props: {
         ) : (
           <ChevronDownIcon className={'h-10 w-10'} aria-hidden={'true'} />
         )}
-        {privateUser && !shouldShowChat && (
-          <GroupChatNotificationsIcon group={group} privateUser={privateUser} />
+        {privateUser && (
+          <GroupChatNotificationsIcon
+            group={group}
+            privateUser={privateUser}
+            setAsSeen={shouldShowChat}
+          />
         )}
       </button>
     </Col>
@@ -228,36 +245,34 @@ export function GroupChatInBubble(props: {
 function GroupChatNotificationsIcon(props: {
   group: Group
   privateUser: PrivateUser
+  setAsSeen: boolean
 }) {
-  // const { privateUser, group } = props
-  // const router = useRouter()
-  // const preferredNotifications = useUnseenPreferredNotifications(privateUser, {
-  //   customHref: '/group/',
-  // })
-  // TODO: set notifications to seen when user clicks on chat
-  // // Set notification as seen if our current page is equal to the isSeenOnHref property
-  // useEffect(() => {
-  //   const currentPageWithoutQuery = currentPage.split('?')[0]
-  //   const currentPageGroupSlug = currentPageWithoutQuery.split('/')[2]
-  //   preferredNotifications.forEach((notification) => {
-  //     if (
-  //       notification.isSeenOnHref === currentPage ||
-  //       // Old chat style group chat notif was just /group/slug
-  //       (notification.isSeenOnHref &&
-  //         currentPageWithoutQuery.includes(notification.isSeenOnHref)) ||
-  //       // They're on the home page, so if they've a chat notif, they're seeing the chat
-  //       (notification.isSeenOnHref?.endsWith(GROUP_CHAT_SLUG) &&
-  //         currentPageWithoutQuery.endsWith(currentPageGroupSlug))
-  //     ) {
-  //       setNotificationsAsSeen([notification])
-  //     }
-  //   })
-  // }, [currentPage, preferredNotifications])
+  const { privateUser, group, setAsSeen } = props
+  const preferredNotificationsForThisGroup = useUnseenPreferredNotifications(
+    privateUser,
+    {
+      customHref: `/group/${group.slug}`,
+    }
+  )
+  // Set notification as seen if our current page is equal to the isSeenOnHref property
+  useEffect(() => {
+    preferredNotificationsForThisGroup.forEach((notification) => {
+      if (
+        (setAsSeen && notification.isSeenOnHref?.includes('chat')) ||
+        // old style chat notif that simply ended with the group slug
+        notification.isSeenOnHref?.endsWith(group.slug)
+      ) {
+        setNotificationsAsSeen([notification])
+      }
+    })
+  }, [group.slug, preferredNotificationsForThisGroup, setAsSeen])
 
   return (
     <div
       className={
-        'absolute right-4 top-4 h-3 w-3 rounded-full border-2 border-white bg-red-500'
+        preferredNotificationsForThisGroup.length > 0 && !setAsSeen
+          ? 'absolute right-4 top-4 h-3 w-3 rounded-full border-2 border-white bg-red-500'
+          : 'hidden'
       }
     ></div>
   )

web/components/nav/sidebar.tsx

@@ -18,7 +18,7 @@ import { ManifoldLogo } from './manifold-logo'
 import { MenuButton } from './menu'
 import { ProfileSummary } from './profile-menu'
 import NotificationsIcon from 'web/components/notifications-icon'
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
 import { CreateQuestionButton } from 'web/components/create-question-button'
 import { useMemberGroups } from 'web/hooks/use-group'
@@ -215,7 +215,7 @@ export default function Sidebar(props: { className?: string }) {
     ) ?? []
   ).map((group: Group) => ({
     name: group.name,
-    href: `${groupPath(group.slug)}/${GROUP_CHAT_SLUG}`,
+    href: `${groupPath(group.slug)}`,
   }))
 
   return (
@@ -298,6 +298,17 @@ function GroupsList(props: {
   const remainingHeight =
     (height ?? window.innerHeight) - (containerRef?.offsetTop ?? 0)
 
+  const notifIsForThisItem = useMemo(
+    () => (itemHref: string) =>
+      preferredNotifications.some(
+        (n) =>
+          !n.isSeen &&
+          (n.isSeenOnHref === itemHref ||
+            n.isSeenOnHref?.replace('/chat', '') === itemHref)
+      ),
+    [preferredNotifications]
+  )
+
   return (
     <>
       <SidebarItem
@@ -311,21 +322,23 @@ function GroupsList(props: {
         ref={setContainerRef}
       >
         {memberItems.map((item) => (
-          <a
+          <Link
+            href={
+              item.href +
+              (notifIsForThisItem(item.href) ? '/' + GROUP_CHAT_SLUG : '')
+            }
             key={item.href}
-            href={item.href}
-            className={clsx(
-              'group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900',
-              preferredNotifications.some(
-                (n) =>
-                  !n.isSeen &&
-                  (n.isSeenOnHref === item.href ||
-                    n.isSeenOnHref === item.href.replace('/chat', ''))
-              ) && 'font-bold'
-            )}
           >
-            <span className="truncate">{item.name}</span>
-          </a>
+            <span
+              className={clsx(
+                'cursor-pointer truncate',
+                'group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900',
+                notifIsForThisItem(item.href) && 'font-bold'
+              )}
+            >
+              {item.name}
+            </span>
+          </Link>
         ))}
       </div>
     </>