added redirect from dialog to chat

src/containers/chat/chat-item/ChatItem.tsx

@@ -10,6 +10,7 @@ import { useAppSelector } from '~/hooks/use-redux'
 import { styles } from '~/containers/chat/chat-item/ChatItem.styles'
 import { ChatResponse, ComponentEnum, OverlapEnum, PositionEnum } from '~/types'
 import { getFormattedDate } from '~/utils/helper-functions'
+import { useChatContext } from '~/context/chat-context'
 
 interface ItemOfChatProps {
   isActiveChat: boolean
@@ -25,6 +26,7 @@ const ChatItem: FC<ItemOfChatProps> = ({
   closeDrawer
 }) => {
   const { t } = useTranslation()
+  const { setCurrentChatId } = useChatContext()
   const { userId } = useAppSelector((state) => state.appMain)
 
   const { firstName, lastName, photo } = chat.members[0].user
@@ -34,6 +36,7 @@ const ChatItem: FC<ItemOfChatProps> = ({
 
   const handleSelectedChat = () => {
     setSelectedChat(chat)
+    setCurrentChatId(null)
     closeDrawer && closeDrawer()
   }
 

src/containers/offer-page/chat-dialog-window/ChatDialogWindow.tsx

@@ -6,6 +6,7 @@ import {
   useRef,
   FC
 } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import SimpleBar from 'simplebar-react'
 import Box from '@mui/material/Box'
@@ -26,6 +27,7 @@ import { getGroupedMessages } from '~/utils/helper-functions'
 
 import { ChatInfo, MessageInterface } from '~/types'
 import { defaultResponses } from '~/constants'
+import { authRoutes } from '~/router/constants/authRoutes'
 import { styles } from '~/containers/offer-page/chat-dialog-window/ChatDialogWindow.styles'
 import { questions } from '~/containers/offer-page/chat-dialog-window/ChatDialogWindow.constants'
 
@@ -36,8 +38,9 @@ interface ChatDialogWindow {
 const ChatDialogWindow: FC<ChatDialogWindow> = ({ chatInfo }) => {
   const [textAreaValue, setTextAreaValue] = useState<string>('')
   const { t } = useTranslation()
+  const navigate = useNavigate()
   const scrollRef = useRef<HTMLDivElement | null>(null)
-  const { setChatInfo } = useChatContext()
+  const { setChatInfo, setCurrentChatId } = useChatContext()
 
   const onTextAreaChange = (e: ChangeEvent<HTMLInputElement>) => {
     setTextAreaValue(e.target.value)
@@ -97,6 +100,12 @@ const ChatDialogWindow: FC<ChatDialogWindow> = ({ chatInfo }) => {
 
   const closeChatWindow = () => setChatInfo(null)
 
+  const handleRedirectToChat = () => {
+    setCurrentChatId(chatInfo.chatId)
+    closeChatWindow()
+    navigate(authRoutes.chat.path)
+  }
+
   return (
     <Box sx={styles.root}>
       <Box sx={styles.chatContent}>
@@ -112,7 +121,7 @@ const ChatDialogWindow: FC<ChatDialogWindow> = ({ chatInfo }) => {
           />
           <Box>
             {chatInfo.chatId && (
-              <IconButton onClick={() => undefined} sx={styles.icons}>
+              <IconButton onClick={handleRedirectToChat} sx={styles.icons}>
                 <MessageIcon />
               </IconButton>
             )}

src/context/chat-context.tsx

@@ -7,17 +7,20 @@ interface ChatProviderProps {
 
 interface ChatProvideContext {
   chatInfo: ChatInfo | null
+  currentChatId: string | null
   setChatInfo: (chatInfo: ChatInfo | null) => void
+  setCurrentChatId: (currentChatId: string | null) => void
 }
 
 const ChatContext = createContext<ChatProvideContext>({} as ChatProvideContext)
 
 const ChatProvider = ({ children }: ChatProviderProps) => {
   const [chatInfo, setChatInfo] = useState<ChatInfo | null>(null)
+  const [currentChatId, setCurrentChatId] = useState<string | null>(null)
 
   const contextValue = useMemo(
-    () => ({ chatInfo, setChatInfo }),
-    [chatInfo, setChatInfo]
+    () => ({ chatInfo, setChatInfo, currentChatId, setCurrentChatId }),
+    [chatInfo, setChatInfo, currentChatId, setCurrentChatId]
   )
 
   return (

src/pages/chat/Chat.tsx

@@ -9,6 +9,7 @@ import { messageService } from '~/services/message-service'
 import { useDrawer } from '~/hooks/use-drawer'
 import useAxios from '~/hooks/use-axios'
 import useBreakpoints from '~/hooks/use-breakpoints'
+import { useChatContext } from '~/context/chat-context'
 import PageWrapper from '~/components/page-wrapper/PageWrapper'
 import AppDrawer from '~/components/app-drawer/AppDrawer'
 import AppChip from '~/components/app-chip/AppChip'
@@ -27,6 +28,7 @@ import { ChatResponse, MessageInterface, PositionEnum } from '~/types'
 const Chat = () => {
   const { t } = useTranslation()
   const { isMobile } = useBreakpoints()
+  const { currentChatId } = useChatContext()
   const { openDrawer, closeDrawer, isOpen } = useDrawer()
   const [selectedChat, setSelectedChat] = useState<ChatResponse | null>(null)
   const [messages, setMessages] = useState<MessageInterface[]>([])
@@ -92,6 +94,14 @@ const Chat = () => {
     }
   }, [selectedChat, messages.length])
 
+  useEffect(() => {
+    if (currentChatId) {
+      listOfChats.forEach((chat: ChatResponse) => {
+        if (chat._id === currentChatId) setSelectedChat(chat)
+      })
+    }
+  }, [currentChatId, listOfChats])
+
   if (loading) {
     return <Loader size={100} />
   }