React and socket IO changing route

Question

We have a dynamic route system in our chat app in react frontend and nestjs backend. when we are not refreshing the page but going to a different route, and calling socket event, then the app goes to the previous routes where we visited before. But when we refresh the page and stay in the one route, it stays there. the problem is, when we change the route, it remembers the previous routes where we visited and goes to that route when socket calling, when we do not refresh the page, this problem occurs.

import React, { useCallback, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import { userActiveStatusApi } from '../api/auth';
import { getAllMessageApi, makeReadApi, sendMessageApi } from '../api/chat';
import { selectUserProfile } from '../redux/features/authSlice';
import { selectActiveUser, setUpdateConversation, setUpdateUnreadCount } from '../redux/features/layoutSlice';
import ChattingHomeUi from '../ui/chattingHome/ChattingHomeUi';
import { newSocket } from '../utils/socket';
import { getDateWiseMessages } from '../utils/utils';


const ChattingHome = () => {
  let { chatId } = useParams();
  const [currentUserProfile, setCurrentUserProfile] = useState({})
  const [isLoading, setIsLoading] = useState(true);
  const [messagesText, setMessagesText] = useState('')
  const [allMessage, setAllMessage] = useState([])
  const userProfile = useSelector(selectUserProfile)
  const onlineUsers = useSelector(selectActiveUser)
  const dispatch = useDispatch();
  const userId = userProfile.id;

  // check user online status function
  function isOnline(id) {
    return onlineUsers.indexOf(id) !== -1;
  }

  // get current user profile function
  const getCurrentUserProfile = useCallback(async () => {
    async function successHandler(response) {
      const res = await response.json();
      setCurrentUserProfile(res.user)
      setIsLoading(false);
    }

    async function handleBadReq(response) {
      let error = await response.json();
      console.log(error.message);
      setIsLoading(false);
    }

    return await userActiveStatusApi(chatId, { successHandler, handleBadReq })
  }, [chatId])

  // get current user all message list function
  const getAllMessage = useCallback(async () => {
    async function successHandler(response) {
      const res = await response.json();
      let sortedData = getDateWiseMessages(res)
      setIsLoading(false)
      setAllMessage(sortedData)
    }

    async function handleBadReq(response) {
      let error = await response.json();
      console.log(error)
      setIsLoading(false);
    }

    return await getAllMessageApi(chatId, { userId: userId }, { successHandler, handleBadReq })
  }, [userId, chatId])


  // add or update message on conversations List
  const updateConversationList = (res) => {

    const newMessage = {
      users_id: parseInt(res.receiverId),
      users_profileImage: currentUserProfile.profileImage,
      users_fullname: currentUserProfile.fullname,
      message_Status_lastMessage: res?.content,
      message_Status_lastMessageTime: res?.createdAt,
      message_Status_unreadMessages: 0,
    }
    dispatch(setUpdateConversation(newMessage))
  }

  // Send message function
  async function handleSubmitMessage() {
    if (!messagesText.length) return;
    const messageData = {
      message: messagesText,
      senderId: userId,
      type: "text"
    }

    async function successHandler(response) {
      const res = await response.json();
      getDeliveryStatus()
      updateConversationList(res.result)
      setMessagesText('')
      getAllMessage();
    }

    async function handleBadReq(response) {
      let error = await response.json();
      console.log(error.message);
      setIsLoading(false);
    }

    return await sendMessageApi(chatId, messageData, { successHandler, handleBadReq })
  }

  const getDeliveryStatus = () => {
    newSocket.on('delevered/' + userId, (res) => {
      console.log(res)
    })
  }

  // make message as read message 
  const makeReadMessage = useCallback(async () => {
    newSocket.once('message-seen-status' + chatId, (msg) => {
      console.log("red", msg);
    })

    const payload = {
      senderId: chatId,
    }
    async function successHandler(response) {

      dispatch(setUpdateUnreadCount(chatId))
    }

    async function handleBadReq(response) {
      let error = await response.json();
      console.log(error);
    }

    return await makeReadApi(userProfile.id, payload, { successHandler, handleBadReq })
  }, [dispatch, chatId, userProfile.id])


  useEffect(() => {
    getCurrentUserProfile()
    makeReadMessage()
  }, [getCurrentUserProfile, makeReadMessage])

  useEffect(() => {
    console.log(chatId)
    newSocket.on('newMessage/user/' + userId, (msg) => {
      if (parseInt(msg.senderId) === parseInt(chatId)) {
        makeReadMessage();
      }
      getAllMessage();
    })
  }, [chatId, makeReadMessage, getAllMessage, userId])

  useEffect(() => {
    getAllMessage()
  }, [getAllMessage])

  return (

    
  );
};

export default ChattingHome;

React and socket IO changing route

0 Answers