Added token to socket auth

.env

@@ -1 +1 @@
-REACT_APP_BASE_API_URL=https://trampa-api-test.dilig.net/
+REACT_APP_BASE_API_URL=http://192.168.88.143:3001/

src/App.js

@@ -6,7 +6,7 @@ import { StyledEngineProvider } from "@mui/material";
 import { useSelector } from "react-redux";
 import i18next from "i18next";
 
-import { selectUserId } from "./store/selectors/loginSelectors";
+import { selectJwtToken, selectUserId } from "./store/selectors/loginSelectors";
 import history from "./store/utils/history";
 import AppRoutes from "./AppRoutes";
 import { socketInit } from "./socket/socket";
@@ -18,10 +18,11 @@ import "react-toastify/dist/ReactToastify.css";
 
 const App = () => {
   const userId = useSelector(selectUserId);
+  const token = useSelector(selectJwtToken);
 
   useEffect(() => {
-    socketInit(userId);
-  }, [userId]);
+    socketInit(userId, token);
+  }, [userId, token]);
   return (
     <Router history={history}>
       <Helmet>

src/components/Cards/RequestExchangeCard/RequestExchangeMessage/RequestExchangeMessage.js

@@ -20,12 +20,14 @@ import {
 import { addNewMessage } from "../../../../store/actions/chat/chatActions";
 import { convertLocalDateToUTCDate } from "../../../../util/helpers/dateHelpers";
 import requesterStatus from "../../../../constants/requesterStatus";
+import { selectJwtToken } from "../../../../store/selectors/loginSelectors";
 
 const RequestExchangeMessage = (props) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const exchange = useSelector(selectExchange);
   const requester = useSelector(selectRequester);
+  const token = useSelector(selectJwtToken)
 
   const handleAcceptExchangeSuccess = () => {
     console.log("accept salje i prima 3 POZVANA RESPONSE FUNKCIJA");
@@ -33,6 +35,7 @@ const RequestExchangeMessage = (props) => {
       props.chatId,
       props.userId,
       props.interlocutorUserId,
+      token,
       () => {
         console.log("accept salje i prima 4 SOCKET FUNKCIJA");
         dispatch(

src/components/DirectChat/DirectChat.js

@@ -21,7 +21,10 @@ import { fetchOneOffer } from "../../store/actions/offers/offersActions";
 import SkeletonDirectChat from "./SkeletonDirectChat/SkeletonDirectChat";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
 import { CHAT_SCOPE } from "../../store/actions/chat/chatActionConstants";
-import { selectUserId } from "../../store/selectors/loginSelectors";
+import {
+  selectJwtToken,
+  selectUserId,
+} from "../../store/selectors/loginSelectors";
 import {
   acceptExchangeSocket,
   addMessageListener,
@@ -51,6 +54,7 @@ const DirectChat = () => {
   const location = useLocation();
   const dispatch = useDispatch();
   const { t } = useTranslation();
+  const token = useSelector(selectJwtToken);
   const exchange = useSelector(selectExchange);
   const requester = useSelector(selectRequester);
 
@@ -176,6 +180,7 @@ const DirectChat = () => {
       chat?._id,
       userId,
       chat?.participants[interlocutor]._id,
+      token,
       () => {
         dispatch(
           addNewMessage({
@@ -197,7 +202,7 @@ const DirectChat = () => {
     );
   };
   const handleAcceptExchange = () => {
-    console.log("accept salje i prima 1 POZVANA FUNKCIJA")
+    console.log("accept salje i prima 1 POZVANA FUNKCIJA");
     dispatch(
       acceptExchange({
         exchangeId: exchange._id,

src/components/DirectChat/DirectChatNewMessage/DirectChatNewMessage.js

@@ -10,7 +10,7 @@ import selectedTheme from "../../../themes";
 import { useDispatch } from "react-redux";
 import { sendMessage } from "../../../socket/socket";
 import { useSelector } from "react-redux";
-import { selectUserId } from "../../../store/selectors/loginSelectors";
+import { selectJwtToken, selectUserId } from "../../../store/selectors/loginSelectors";
 import {
   addNewMessage,
   startNewChat,
@@ -31,13 +31,14 @@ const DirectChatNewMessage = (props) => {
   const { t } = useTranslation();
   const location = useLocation();
   const history = useHistory();
+  const token = useSelector(selectJwtToken)
   const userId = useSelector(selectUserId);
   const handleSend = useCallback(
     (newChatId = undefined) => {
       if (typedValue?.length === 0) return;
       if (props?.chat?._id) {
         const chatId = props.chat?._id || newChatId;
-        sendMessage(chatId, userId, typedValue, props.interlocutor._id);
+        sendMessage(chatId, userId, typedValue, props.interlocutor._id, token);
         dispatch(
           addNewMessage({
             _id: chatId,
@@ -100,9 +101,9 @@ const DirectChatNewMessage = (props) => {
   if (props?.chat?.offer?._deleted) {
     return <NotAllowedChat />;
   }
-  if (props?.interlocutor?._blocked) {
-    return <NotAllowedChat blocked />;
-  }
+  // if (props?.interlocutor?._blocked) {
+  //   return <NotAllowedChat blocked />;
+  // }
   return (
     <>
       <DirectChatNewMessageContainer>

src/socket/socket.js

@@ -1,16 +1,17 @@
 import io from "socket.io-client";
 
 // export const socket = io("https://trampa-api-test.dilig.net/", {
-  // export const socket = io("http://localhost:3001/", {
-  export const socket = io(process.env.REACT_APP_BASE_API_URL, {
+// export const socket = io("http://localhost:3001/", {
+export const socket = io(process.env.REACT_APP_BASE_API_URL, {
   transports: ["websocket"],
   reconnectionAttempts: 5,
 });
 
-export const socketInit = (userId) => {
+export const socketInit = (userId, token) => {
   if (socket.connected) socket.disconnect();
   socket.auth = {
     userId,
+    token,
   };
   socket.connect();
 };
@@ -38,7 +39,7 @@ export const acceptExchangeSocket = (
     receiverUserId,
     message: {
       user: {
-        _id: userId
+        _id: userId,
       },
       isAcceptRequest: true,
       text: "",

src/store/saga/chatSaga.js

@@ -35,7 +35,7 @@ import {
 } from "../actions/exchange/exchangeActions";
 import { selectSelectedChat } from "../selectors/chatSelectors";
 import { selectExchange } from "../selectors/exchangeSelector";
-import { selectUserId } from "../selectors/loginSelectors";
+import { selectJwtToken, selectUserId } from "../selectors/loginSelectors";
 import { sendMessage as SendMessageSocket } from "../../socket/socket";
 import { KEY_PAGE, KEY_SIZE } from "../../constants/queryStringConstants";
 import { setQueryStringRedux } from "../actions/queryString/queryStringActions";
@@ -134,6 +134,7 @@ function* startNewChat(payload) {
       userId,
     });
     const queryString = yield select(selectQueryString);
+    const token = yield select(selectJwtToken);
     const data = yield call(attemptFetchChats, { userId, queryString });
     yield put(setChats([...data.data.chats]));
     yield put(setChatsTotal(data.data.total));
@@ -144,7 +145,8 @@ function* startNewChat(payload) {
       newChatData.data.chatId,
       userId,
       payload.payload.message,
-      payload.payload.interlocutorUserId
+      payload.payload.interlocutorUserId,
+      token
     );
     yield put(
       addNewMessage({

src/store/selectors/loginSelectors.js

@@ -13,3 +13,7 @@ export const selectRoles = createSelector(
   loginSelector,
   (state) => state.jwtToken.roles
 );
+export const selectJwtToken = createSelector(
+  loginSelector,
+  (state) => state.jwtToken.token
+);