{websiteName}

import { Box, Button, Container, Flex, FormControl, IconButton, Input, } from '@chakra-ui/react'; import Head from 'next/head'; import {websiteName} from '@/lib/constants'; import {useSession} from 'next-auth/react'; import {useRouter} from 'next/router'; import {useEffect, useRef, useState} from 'react'; import MessageList from '@/components/chat/MessageList'; import {io, Socket} from 'socket.io-client'; import {Chat, Message, User} from '@prisma/client'; import LoadingPage from '@/components/LoadingPage'; import Navbar from '@/components/Navbar'; import {ArrowForwardIcon} from '@chakra-ui/icons'; import {FaMapMarkedAlt} from 'react-icons/fa'; export default function ChatId() { const router = useRouter(); const {data: session, status} = useSession({required: true}); const {id: chatId} = router.query; const [chatInfo, setChatInfo] = useState(); const [otherUser, setOtherUser] = useState() const [messages, setMessages] = useState([]); const [text, setText] = useState(''); const [socket, setSocket] = useState(); useEffect(() => { if (status === 'authenticated' && session) { const user = session.user as User socketInitializer(); fetch(`/api/chats/${chatId}?include=User`) .then(res => res.json()) .then((chat: Chat & { User: User[] }) => { setChatInfo(chat); const other = chat.User.find(u => u.id !== user.id); setOtherUser(other) }); } }, [status]); const socketInitializer = () => { fetch(`/api/socket/chat/${chatId}`) .then(() => { 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); }); }; const handleSubmit = (evt) => { evt.preventDefault(); if (text !== '' && socket && session?.user) { socket.emit('createdMessage', {text, sender: session.user.id}); setText(''); } }; const AlwaysScrollToBottom = () => { const elementRef = useRef(); useEffect(() => elementRef.current.scrollIntoView()); return

; }; if (status === 'loading') return ; return ( {websiteName} ); }