From 82bd388b2a58d21113768a3d306efbbbe5c76627 Mon Sep 17 00:00:00 2001 From: greatsamist Date: Mon, 19 Feb 2024 18:16:40 +0100 Subject: [PATCH 1/6] Chat does not persist message --- .../[event]/stage/[stage]/page.tsx | 7 +- .../app/components/plugins/Chat/index.tsx | 70 +++++-- packages/app/lib/actions/chat.ts | 23 +++ packages/app/lib/services/chatService.ts | 54 ++++++ packages/app/lib/types.ts | 4 + .../src/controllers/chat.controller.ts | 47 +++++ .../src/dtos/chat/create-chat.dto.ts | 20 ++ .../src/interfaces/chat.interface.ts | 14 ++ packages/new-server/src/models/chat.model.ts | 14 ++ packages/new-server/src/routes/routes.ts | 103 ++++++++++ .../new-server/src/services/chat.service.ts | 22 +++ packages/new-server/src/swagger/swagger.json | 179 ++++++++++++++++++ 12 files changed, 545 insertions(+), 12 deletions(-) create mode 100644 packages/app/lib/actions/chat.ts create mode 100644 packages/app/lib/services/chatService.ts create mode 100644 packages/new-server/src/controllers/chat.controller.ts create mode 100644 packages/new-server/src/dtos/chat/create-chat.dto.ts create mode 100644 packages/new-server/src/interfaces/chat.interface.ts create mode 100644 packages/new-server/src/models/chat.model.ts create mode 100644 packages/new-server/src/services/chat.service.ts diff --git a/packages/app/app/[organization]/[event]/stage/[stage]/page.tsx b/packages/app/app/[organization]/[event]/stage/[stage]/page.tsx index d7b8da7e0..8d54a3175 100644 --- a/packages/app/app/[organization]/[event]/stage/[stage]/page.tsx +++ b/packages/app/app/[organization]/[event]/stage/[stage]/page.tsx @@ -9,6 +9,7 @@ import UpcomingSession from '../components/UpcomingSession' import { notFound } from 'next/navigation' import { generalMetadata, stageMetadata } from '@/lib/utils/metadata' import { Metadata } from 'next' +import { fetchChat } from '@/lib/services/chatService' export default async function Stage({ params }: EventPageProps) { if (!params.event || !params.stage) { @@ -28,6 +29,7 @@ export default async function Stage({ params }: EventPageProps) { return notFound() } + const prevChatMessages = await fetchChat({ stageId: stage?._id }) const sessionsData = await fetchAllSessions({ stageId: stage._id }) const currentSession = sessionsData.sessions[0] @@ -53,7 +55,10 @@ export default async function Stage({ params }: EventPageProps) { event={event} currentSession={currentSession} /> - + ) diff --git a/packages/app/components/plugins/Chat/index.tsx b/packages/app/components/plugins/Chat/index.tsx index a17a6f519..d4bd0b936 100644 --- a/packages/app/components/plugins/Chat/index.tsx +++ b/packages/app/components/plugins/Chat/index.tsx @@ -1,5 +1,8 @@ 'use client' -import { LiveKitRoom } from '@livekit/components-react' +import { + LiveKitRoom, + ReceivedChatMessage, +} from '@livekit/components-react' import { ConnectionState } from '@livekit/components-react' import { cn } from '@/lib/utils/utils' import { useChat } from '@livekit/components-react' @@ -21,11 +24,22 @@ import Image from 'next/image' import { Skeleton } from '@/components/ui/skeleton' import { useAccount, useEnsName } from 'wagmi' import { ConnectWalletButton } from '@/components/misc/ConnectWalletButton' +import { IExtendedChat } from '@/lib/types' +import { createChatAction } from '@/lib/actions/chat' +import { useSIWE } from 'connectkit' interface Props { participantName: string + stageId: string + prevChatMessages: IExtendedChat[] } -const ChatBar = ({ conversationId }: { conversationId: string }) => { +const ChatBar = ({ + stageId, + prevChatMessages, +}: { + stageId: string + prevChatMessages: IExtendedChat[] +}) => { const serverUrl = 'wss://streameth-fjjg03ki.livekit.cloud' const [viewerToken, setViewerToken] = useState('') const [viewerName, setViewerName] = useState('') @@ -37,7 +51,7 @@ const ChatBar = ({ conversationId }: { conversationId: string }) => { }) const fakeName = data ? data : account.address - const slug = conversationId + const slug = stageId useEffect(() => { if (!account || loadingEns) { @@ -111,7 +125,13 @@ const ChatBar = ({ conversationId }: { conversationId: string }) => {
- {} + { + + }
@@ -121,17 +141,43 @@ const ChatBar = ({ conversationId }: { conversationId: string }) => { export default ChatBar -function Chat({ participantName }: Props) { +function Chat({ participantName, stageId, prevChatMessages }: Props) { const { chatMessages: messages, send } = useChat() - + const [chatMessages, setChatMessages] = useState< + Array + >([]) const reverseMessages = useMemo( - () => messages.sort((a, b) => b.timestamp - a.timestamp), - [messages] + () => chatMessages.sort((a, b) => b.timestamp - a.timestamp), + [chatMessages] ) + + useEffect(() => { + // Merge prevChatMessages and reverseMessages + const mergedMessages = [...prevChatMessages, ...messages] as ( + | IExtendedChat + | ReceivedChatMessage + )[] + setChatMessages(mergedMessages) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [messages]) + const { isSignedIn } = useSIWE() const account = useAccount() const [message, setMessage] = useState('') + const sendMessage = useCallback(async () => { + await createChatAction({ + chat: { + stageId, + message, + from: { + identity: participantName, + }, + timestamp: new Date().getTime(), + }, + }) + }, [stageId, message, participantName]) + const onEnter = useCallback( (e: KeyboardEvent) => { if (e.key === 'Enter' && !e.shiftKey) { @@ -139,18 +185,20 @@ function Chat({ participantName }: Props) { if (message.trim().length > 0 && send) { send(message).catch((err) => console.error(err)) setMessage('') + sendMessage() } } }, - [message, send] + [message, sendMessage, send] ) const onSend = useCallback(() => { if (message.trim().length > 0 && send) { send(message).catch((err) => console.error(err)) setMessage('') + sendMessage() } - }, [message, send]) + }, [message, sendMessage, send]) return ( <> @@ -192,7 +240,7 @@ function Chat({ participantName }: Props) { ))} - {account.isConnected ? ( + {account.isConnected && isSignedIn ? (