diff --git a/src/pages/api/socket/chat/[id].ts b/src/pages/api/socket/chat/[id].ts index ee4d925..6757976 100644 --- a/src/pages/api/socket/chat/[id].ts +++ b/src/pages/api/socket/chat/[id].ts @@ -3,7 +3,7 @@ import prismaClient from '@/lib/prismaClient'; import type {Chat, Message as Message} from '@prisma/client'; export default async function SocketHandler(req: any, res: any) { - const {id: chatId} = req.query; + const {id} = req.query; if (res.socket.server.io) { console.log('Already set up'); @@ -16,8 +16,9 @@ export default async function SocketHandler(req: any, res: any) { io.on('connection', async (socket): Promise => { - await prismaClient.chat.findFirst({ - where: {id: chatId}, include: {Message: true}, + prismaClient.chat.findFirst({ + where: {id}, + include: {Message: true, User: true} }).then((chat: (Chat & { Message: Message[] }) | null) => {if (chat) socket.emit('allOldMessages', chat.Message)} ); @@ -27,7 +28,7 @@ export default async function SocketHandler(req: any, res: any) { data: { text: msgInput.text, User: {connect: {id: msgInput.sender}}, - Chat: {connect: {id: chatId}}, + Chat: {connect: {id}}, }, }).then((newMessage: Message) => socket.emit('newIncomingMessage', newMessage)); }); diff --git a/src/pages/chat/[id].tsx b/src/pages/chat/[id].tsx index 086ee62..92d4a6a 100644 --- a/src/pages/chat/[id].tsx +++ b/src/pages/chat/[id].tsx @@ -1,4 +1,4 @@ -import {Button, Container, Flex, Input, Text} from '@chakra-ui/react'; +import {Button, Container, Flex, Input} from '@chakra-ui/react'; import Head from 'next/head'; import {websiteName} from '@/lib/constants'; import {useSession} from 'next-auth/react'; @@ -9,44 +9,41 @@ import MessageList from '@/components/chat/MessageList'; import {io, Socket} from 'socket.io-client'; import {Message, User} from '@prisma/client'; +import LoadingPage from '@/components/LoadingPage'; export default function ChatId() { const router = useRouter(); - const {data: session, status} = useSession(); + const {data: session, status} = useSession({required: true}); const {id: chatId} = router.query; const [messages, setMessages] = useState([]); const [text, setText] = useState(''); - const [socket, setSocket] = useState() + const [socket, setSocket] = useState(); useEffect(() => { - if (status === 'authenticated') socketInitializer() + if (status === 'authenticated') socketInitializer(); }, [status]); + const socketInitializer = () => { + fetch(`/api/socket/chat/${chatId}`) + .then(() => { + const soc = io(); - const socketInitializer = async () => { - await fetch(`/api/socket/chat/${chatId}`) - const soc = io(); - - soc.on('connect', () => console.log('connected')) - soc.on("allOldMessages", (allOldMessages: Message[]) => setMessages(allOldMessages)) - soc.on("newIncomingMessage", (newIncomingMessage: Message) => - setMessages(messages => [...messages, newIncomingMessage]) - ); - - setSocket(soc); - } - - if (status === 'loading') return Loading...; + soc.on('connect', () => console.log('connected')); + soc.on('allOldMessages', (allOldMessages: Message[]) => setMessages(allOldMessages)); + soc.on('newIncomingMessage', (newIncomingMessage: Message) => setMessages(messages => [...messages, newIncomingMessage])); + setSocket(soc); + }); + }; const handleSubmit = () => { - if (text !== "" && socket) { - socket.emit("createdMessage", {text, sender: session.user.id}) - setText(""); + if (text !== '' && socket && session?.user) { + socket.emit('createdMessage', {text, sender: session.user.id}); + setText(''); } - } + }; - if (session && session.user && messages) + if (status === 'loading') return ; return ( <> {websiteName} @@ -55,8 +52,10 @@ export default function ChatId() { - setText(evt.target.value)} value={text} /> - + setText(evt.target.value)} value={text}/> +