Add in group chat bubble

This commit is contained in:
Ian Philips 2022-08-02 15:39:40 -06:00
parent b83caf4dd9
commit 538dd8dae0
4 changed files with 124 additions and 47 deletions

View File

@ -1,6 +1,6 @@
import { Row } from 'web/components/layout/row'
import { Col } from 'web/components/layout/col'
import { User } from 'common/user'
import { PrivateUser, User } from 'common/user'
import React, { useEffect, memo, useState, useMemo } from 'react'
import { Avatar } from 'web/components/avatar'
import { Group } from 'common/group'
@ -23,6 +23,8 @@ import { Tipper } from 'web/components/tipper'
import { sum } from 'lodash'
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'
export function GroupChat(props: {
messages: Comment[]
@ -107,9 +109,7 @@ export function GroupChat(props: {
// Subtract bottom bar when it's showing (less than lg screen)
const bottomBarHeight = (width ?? 0) < 1024 ? 58 : 0
const remainingHeight =
(height ?? window.innerHeight) -
(containerRef?.offsetTop ?? 0) -
bottomBarHeight
(height ?? 0) - (containerRef?.offsetTop ?? 0) - bottomBarHeight
return (
<Col ref={setContainerRef} style={{ height: remainingHeight }}>
@ -175,6 +175,94 @@ export function GroupChat(props: {
)
}
export function GroupChatInBubble(props: {
messages: Comment[]
user: User | null | undefined
privateUser: PrivateUser | null | undefined
group: Group
tips: CommentTipMap
}) {
const { messages, user, group, tips, privateUser } = props
const [shouldShowChat, setShouldShowChat] = useState(false)
return (
<Col
className={clsx(
'fixed right-0 bottom-[20px] h-screen w-full sm:right-28 sm:bottom-[20px] sm:w-2/3 md:w-1/2 lg:w-1/3 xl:w-1/4',
shouldShowChat ? 'z-10 bg-white p-2' : ''
)}
>
{shouldShowChat && (
<GroupChat messages={messages} user={user} group={group} tips={tips} />
)}
<button
type="button"
className={clsx(
'fixed right-3 inline-flex items-center rounded-full border' +
' border-transparent p-3 text-white shadow-sm' +
' focus:outline-none focus:ring-2 focus:ring-offset-2 ' +
' bottom-[70px] lg:right-10',
shouldShowChat
? 'bottom-auto top-2 bg-gray-600 hover:bg-gray-400 focus:ring-gray-500 sm:bottom-[70px] sm:top-auto '
: ' bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500'
)}
onClick={() => {
// router.push('/chat')
setShouldShowChat(!shouldShowChat)
track('mobile group chat button')
}}
>
{!shouldShowChat ? (
<ChatIcon className="h-10 w-10" aria-hidden="true" />
) : (
<ChevronDownIcon className={'h-10 w-10'} aria-hidden={'true'} />
)}
{privateUser && !shouldShowChat && (
<GroupChatNotificationsIcon group={group} privateUser={privateUser} />
)}
</button>
</Col>
)
}
function GroupChatNotificationsIcon(props: {
group: Group
privateUser: PrivateUser
}) {
// 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])
return (
<div
className={
'absolute right-4 top-4 h-3 w-3 rounded-full border-2 border-white bg-red-500'
}
></div>
)
}
const GroupMessage = memo(function GroupMessage_(props: {
user: User | null | undefined
comment: Comment

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, { useEffect, useState } from 'react'
import React, { 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'
@ -27,7 +27,6 @@ import { trackCallback, withTracking } from 'web/lib/service/analytics'
import { Group, GROUP_CHAT_SLUG } from 'common/group'
import { Spacer } from '../layout/spacer'
import { useUnseenPreferredNotifications } from 'web/hooks/use-notifications'
import { setNotificationsAsSeen } from 'web/pages/notifications'
import { PrivateUser } from 'common/user'
import { useWindowSize } from 'web/hooks/use-window-size'
@ -294,25 +293,6 @@ function GroupsList(props: {
memberItems.length > 0 ? memberItems.length : undefined
)
// 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 { height } = useWindowSize()
const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
const remainingHeight =

View File

@ -81,6 +81,7 @@ export async function createCommentOnGroup(
function getCommentsCollection(contractId: string) {
return collection(db, 'contracts', contractId, 'comments')
}
function getCommentsOnGroupCollection(groupId: string) {
return collection(db, 'groups', groupId, 'comments')
}
@ -91,6 +92,14 @@ export async function listAllComments(contractId: string) {
return comments
}
export async function listAllCommentsOnGroup(groupId: string) {
const comments = await getValues<Comment>(
getCommentsOnGroupCollection(groupId)
)
comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
return comments
}
export function listenForCommentsOnContract(
contractId: string,
setComments: (comments: Comment[]) => void

View File

@ -16,7 +16,7 @@ import { Row } from 'web/components/layout/row'
import { UserLink } from 'web/components/user-page'
import { firebaseLogin, getUser, User } from 'web/lib/firebase/users'
import { Col } from 'web/components/layout/col'
import { useUser } from 'web/hooks/use-user'
import { usePrivateUser, useUser } from 'web/hooks/use-user'
import { listMembers, useGroup, useMembers } from 'web/hooks/use-group'
import { useRouter } from 'next/router'
import { scoreCreators, scoreTraders } from 'common/scoring'
@ -30,7 +30,7 @@ import { fromPropz, usePropz } from 'web/hooks/use-propz'
import { Tabs } from 'web/components/layout/tabs'
import { CreateQuestionButton } from 'web/components/create-question-button'
import React, { useState } from 'react'
import { GroupChat } from 'web/components/groups/group-chat'
import { GroupChat, GroupChatInBubble } from 'web/components/groups/group-chat'
import { LoadingIndicator } from 'web/components/loading-indicator'
import { Modal } from 'web/components/layout/modal'
import { getSavedSort } from 'web/hooks/use-sort-and-query-params'
@ -45,11 +45,12 @@ import { SearchIcon } from '@heroicons/react/outline'
import { useTipTxns } from 'web/hooks/use-tip-txns'
import { JoinOrLeaveGroupButton } from 'web/components/groups/groups-button'
import { searchInAny } from 'common/util/parse'
import { useWindowSize } from 'web/hooks/use-window-size'
import { CopyLinkButton } from 'web/components/copy-link-button'
import { ENV_CONFIG } from 'common/envs/constants'
import { useSaveReferral } from 'web/hooks/use-save-referral'
import { Button } from 'web/components/button'
import { listAllCommentsOnGroup } from 'web/lib/firebase/comments'
import { Comment } from 'common/comment'
export const getStaticProps = fromPropz(getStaticPropz)
export async function getStaticPropz(props: { params: { slugs: string[] } }) {
@ -65,6 +66,7 @@ export async function getStaticPropz(props: { params: { slugs: string[] } }) {
const bets = await Promise.all(
contracts.map((contract: Contract) => listAllBets(contract.id))
)
const messages = group && (await listAllCommentsOnGroup(group.id))
const creatorScores = scoreCreators(contracts)
const traderScores = scoreTraders(contracts, bets)
@ -86,6 +88,7 @@ export async function getStaticPropz(props: { params: { slugs: string[] } }) {
topTraders,
creatorScores,
topCreators,
messages,
},
revalidate: 60, // regenerate after a minute
@ -123,6 +126,7 @@ export default function GroupPage(props: {
topTraders: User[]
creatorScores: { [userId: string]: number }
topCreators: User[]
messages: Comment[]
}) {
props = usePropz(props, getStaticPropz) ?? {
group: null,
@ -132,6 +136,7 @@ export default function GroupPage(props: {
topTraders: [],
creatorScores: {},
topCreators: [],
messages: [],
}
const {
creator,
@ -149,19 +154,18 @@ export default function GroupPage(props: {
const group = useGroup(props.group?.id) ?? props.group
const tips = useTipTxns({ groupId: group?.id })
const messages = useCommentsOnGroup(group?.id)
const messages = useCommentsOnGroup(group?.id) ?? props.messages
const user = useUser()
const privateUser = usePrivateUser(user?.id)
useSaveReferral(user, {
defaultReferrer: creator.username,
groupId: group?.id,
})
const { width } = useWindowSize()
const chatDisabled = !group || group.chatDisabled
const showChatSidebar = !chatDisabled && (width ?? 1280) >= 1280
const showChatTab = !chatDisabled && !showChatSidebar
const showChatBubble = !chatDisabled
if (group === null || !groupSubpages.includes(page) || slugs[2]) {
return <Custom404 />
@ -217,15 +221,6 @@ export default function GroupPage(props: {
)
const tabs = [
...(!showChatTab
? []
: [
{
title: 'Chat',
content: chatTab,
href: groupPath(group.slug, GROUP_CHAT_SLUG),
},
]),
{
title: 'Markets',
content: questionsTab,
@ -246,17 +241,13 @@ export default function GroupPage(props: {
const tabIndex = tabs.map((t) => t.title).indexOf(page ?? GROUP_CHAT_SLUG)
return (
<Page
rightSidebar={showChatSidebar ? chatTab : undefined}
rightSidebarClassName={showChatSidebar ? '!top-0' : ''}
className={showChatSidebar ? '!max-w-7xl !pb-0' : ''}
>
<Page>
<SEO
title={group.name}
description={`Created by ${creator.name}. ${group.about}`}
url={groupPath(group.slug)}
/>
<Col className="px-3">
<Col className="relative px-3">
<Row className={'items-center justify-between gap-4'}>
<div className={'sm:mb-1'}>
<div
@ -283,6 +274,15 @@ export default function GroupPage(props: {
defaultIndex={tabIndex > 0 ? tabIndex : 0}
tabs={tabs}
/>
{showChatBubble && (
<GroupChatInBubble
group={group}
user={user}
privateUser={privateUser}
tips={tips}
messages={messages}
/>
)}
</Page>
)
}