(
+ { queryKey: ['messages', roomId] },
+ data => {
+ if (!data) {
+ return data
+ }
+
+ const updatedData = produce(data, draft => {
+ draft?.pages[0].data.unshift(message)
+ })
+ return updatedData
+ },
+ )
setTimeout(scrollToBottom, 100)
}
@@ -42,23 +63,29 @@ export const MessageList = ({ roomId }: MessageListProps) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
- const scrollElement = useInfiniteScroll(listRef, fetchMore, hasMore)
+ const scrollElement = useInView(listRef, fetchNextPage, hasNextPage)
let content
- if (loading) {
+ if (error) {
+ content = {error.message}
+ } else if (isLoading) {
content = new Array(5).map((_, index) => (
))
- } else if (messages?.length) {
- content = messages.map(message => (
-
+ } else if (data?.pages.length) {
+ content = data.pages.map((page, i) => (
+
+ {page.data.map(message => (
+
+ ))}
+
))
- } else if (Array.isArray(messages)) {
+ } else if (isSuccess) {
content = Be the first one to message
}
diff --git a/client/src/features/message/message.interface.ts b/client/src/features/message/message.interface.ts
new file mode 100644
index 0000000..defd1e5
--- /dev/null
+++ b/client/src/features/message/message.interface.ts
@@ -0,0 +1,26 @@
+import {
+ IPaginatedResult,
+ TPaginatedParams,
+} from '@/interfaces/common.interface'
+import { InfiniteData } from '@tanstack/react-query'
+
+export interface IMessage {
+ _id: string
+ roomId: string
+ sender: {
+ _id: string
+ username: string
+ }
+ text: string
+ createdAt: string
+ updatedAt: string
+}
+
+export interface IGetRoomMessagesArgs extends TPaginatedParams {
+ roomId: string
+}
+
+export type TMessageInfiniteData = InfiniteData<
+ IPaginatedResult,
+ string
+>
diff --git a/client/src/features/message/message.service.ts b/client/src/features/message/message.service.ts
new file mode 100644
index 0000000..8e916f3
--- /dev/null
+++ b/client/src/features/message/message.service.ts
@@ -0,0 +1,9 @@
+import { IPaginatedResult } from '@/interfaces/common.interface'
+import { fetcher, stringifyQueryParams } from '@/utils/api'
+import { IGetRoomMessagesArgs, IMessage } from './message.interface'
+
+export const fetchRoomMessages = async ({
+ roomId,
+ ...params
+}: IGetRoomMessagesArgs): Promise> =>
+ fetcher(`rooms/${roomId}/messages?${stringifyQueryParams(params)}`)
diff --git a/client/src/features/room/components/CreateRoom.tsx b/client/src/features/room/components/CreateRoom.tsx
index ce8f379..e247094 100644
--- a/client/src/features/room/components/CreateRoom.tsx
+++ b/client/src/features/room/components/CreateRoom.tsx
@@ -1,26 +1,34 @@
+import { Button } from '@/components/Button'
+import { Dialog } from '@/components/Dialog'
+import { Input } from '@/components/Input'
+import { useAutoFocus } from '@/hooks/useAutoFocus'
+import { useDisclosure } from '@/hooks/useDisclosure'
+import { useToast } from '@/hooks/useToast'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
import { useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
-import { Button } from '../../../components/Button'
-import { Dialog } from '../../../components/Dialog'
-import { Input } from '../../../components/Input'
-import { useAuthState } from '../../../hooks/useAuth'
-import { useAutoFocus } from '../../../hooks/useAutoFocus'
-import { useDisclosure } from '../../../hooks/useDisclosure'
-import { useMutation } from '../../../hooks/useMutation'
-import { useInvalidateQueryCache } from '../../../hooks/useQueryCache'
-import { useToast } from '../../../hooks/useToast'
-import { IRoom } from '../../../interfaces/room.interface'
+import { createNewRoom } from '../room.service'
const CreateRoomForm = ({ onComplete }: { onComplete: () => void }) => {
const [name, setName] = useState('')
const { toast } = useToast()
const navigate = useNavigate()
- const auth = useAuthState()
const inputRef = useRef(null)
- const invalidateQueryCache = useInvalidateQueryCache()
- const { mutate: createRoom, loading } = useMutation(
- '/api/rooms',
- )
+ const queryClient = useQueryClient()
+ const { mutate: createRoom, isPending } = useMutation({
+ mutationFn: createNewRoom,
+ onSuccess: result => {
+ if (result._id) {
+ toast({ title: `Room "${name}" created`, severity: 'success' })
+ onComplete()
+ queryClient.invalidateQueries({ queryKey: ['userRooms'] })
+ navigate(`/chat/${result._id}`)
+ }
+ },
+ onError: error => {
+ toast({ title: (error as Error).message, severity: 'error' })
+ },
+ })
useAutoFocus(inputRef, [])
@@ -29,17 +37,7 @@ const CreateRoomForm = ({ onComplete }: { onComplete: () => void }) => {
if (!name.trim()) {
return toast({ title: 'Room name is required', severity: 'error' })
}
- try {
- const result = await createRoom({ name })
- if (result._id) {
- toast({ title: `Room "${name}" created`, severity: 'success' })
- onComplete()
- invalidateQueryCache(`/api/users/${auth!._id}/rooms`)
- navigate(`/chat/${result._id}`)
- }
- } catch (error) {
- toast({ title: (error as Error).message, severity: 'error' })
- }
+ createRoom({ name })
}
return (
@@ -53,7 +51,7 @@ const CreateRoomForm = ({ onComplete }: { onComplete: () => void }) => {
autoFocus
onChange={e => setName(e.target.value)}
/>
-
+