Add in group chat bubble
This commit is contained in:
Ian Philips
parent
b83caf4dd9
commit
538dd8dae0
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 =
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user