Show chat bubble on nav with unseen notifs

This commit is contained in:
Ian Philips 2022-08-03 13:26:31 -06:00
parent 538dd8dae0
commit 91a6d1ef5d
2 changed files with 74 additions and 46 deletions

View File

@ -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>
)

View File

@ -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>
</>