Added intial socket functions

src/App.js

@@ -1,6 +1,5 @@
 /*eslint-disable*/
 import React, { useState, useEffect } from "react";
-import io from "socket.io-client";
 import { Router } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import i18next from "i18next";
@@ -11,120 +10,13 @@ import { StyledEngineProvider } from "@mui/material";
 import GlobalStyle from "./components/Styles/globalStyles";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import { socketInit } from "./socket/socket";
+import { useSelector } from "react-redux";
+import { selectUserId } from "./store/selectors/loginSelectors";
 
-const URL = "https://trampa-api-test.dilig.net";
-const socket2 = io("https://trampa-api-test.dilig.net", { autoConnect: true, reconnectionAttempts: 5 });
-const socket = io("https://trampa-api-test.dilig.net", {
-  autoConnect: true,
-  transports: ["websocket"],
-  reconnectionAttempts: 5,
-});
-const socket4 = io("https://trampa-api-test.dilig.net", { autoConnect: true, reconnectionAttempts: 5 });
-const socket3 = io("https://trampa-api-test.dilig.net", {
-  autoConnect: true,
-  transports: ["websocket"],
-  reconnectionAttempts: 5,
-});
 const App = () => {
-  console.log(socket);
-  console.log(socket2);
-
-  const [isConnected, setIsConnected] = useState(socket.connected);
-  const [lastPong, setLastPong] = useState(null);
-  console.log();
-  useEffect(() => {
-    socket.auth = {
-      // userId: "62de57c6dff6f986e43d14ec",
-      userId: "62ff762554ec55060e3a456b",
-      sessionID: localStorage.getItem("sessionID"),
-    };
-    socket.on("connect", (client) => {
-      console.log("client: ", client);
-      setIsConnected(true);
-    });
-    socket2.on("connect", (client) => {
-      console.log("client: ", client);
-      setIsConnected(true);
-    });
-    socket3.on("connect", (client) => {
-      console.log("client: ", client);
-      setIsConnected(true);
-    });
-    socket4.on("connect", (client) => {
-      console.log("client: ", client);
-      setIsConnected(true);
-    });
-    
-    socket.on("session", ({ sessionID, userID }) => {
-      localStorage.setItem("sessionID", sessionID);
-      localStorage.setItem("userID", userID);
-      console.log("sessionID: ", sessionID);
-      console.log("userID: ", userID);
-    });
-    // socket.on("connect_error", (err) => {
-    //   console.log(err);
-    // });
-
-    socket.on("connection", (client) => {
-      console.log(client);
-    });
-
-    socket.on("disconnect", () => {
-      setIsConnected(false);
-    });
-
-  //   socket.on("user disconnected", (userID) => {
-  //     console.log(userID);
-  //   });
-
-  //   // socket.on('emit', (client) => {
-  //   //   console.log(client);
-  //   // })
-  //   socket.on("sokkk", (clg) => {
-  //     console.log(clg);
-  //   });
-  //   // socket.onAny((event, ...args) => {
-  //   //   console.log(event, args);
-  //   // });
-  //   socket.on("povratna", (data) => {
-  //     console.log(data);
-  //   });
-  //   socket.on("private_message", (data) => {
-  //     console.log(data);
-  //   });
-
-  //   // socket.open;
-
-  //   socket.on("pong", () => {
-  //     setLastPong(new Date().toISOString());
-  //   });
-
-  //   // socket.connect();
-
-    return () => {
-      socket.off("connect");
-      socket.off("disconnect");
-      socket.off("pong");
-      socket.off("reconnection_attempt")
-    };
-  }, []);
-  const handleClick = () => {
-    // socket.connect();
-    // socket.emit("sokkk 2", "sock");
-    // socket.emit("sock")
-  };
-  const sendPing = () => {
-    socket.emit("private_message", {
-      text: "Probica",
-      // toUserId: "62de5844dff6f986e43d14f6",
-      toUserId: "62de57c6dff6f986e43d14ec",
-      chatId: "62eb8424632e1112ef467750",
-    });
-  };
-  const disconnect = () => {
-    // socket.disconnect();
-    socket.disconnect();
-  };
+  const userId = useSelector(selectUserId);
+  socketInit(userId);
   return (
     <Router history={history}>
       <Helmet>
@@ -134,15 +26,6 @@ const App = () => {
         <Header />
         <GlobalStyle />
         <ToastContainer />
-        {/* <div style={{ position: "relative", top: "100px", left: "400px" }}>
-          <p>Connected: {"" + isConnected}</p>
-          <br />
-          <p>Last pong: {lastPong || "-"}</p>
-          <br />
-          <button onClick={sendPing}>Send ping</button>
-          <br />
-          <button onClick={disconnect}>Disconnect</button>
-        </div> */}
         <AppRoutes />
       </StyledEngineProvider>
     </Router>

src/socket/socket.js

@@ -0,0 +1,13 @@
+import io from "socket.io-client";
+
+export const socket = io("https://trampa-api-test.dilig.net/", {
+  autoConnect: true,
+  transports: ["websocket"],
+  reconnectionAttempts: 5,
+});
+
+export const socketInit = (userId) => {
+    socket.auth = {
+        userId
+    }
+}

src/util/helpers/imageUrlGetter.js

@@ -0,0 +1,6 @@
+const variants = {
+    offerCard: 
+}
+const getImageUrl = (imageUrl, variant, isMobile) => {
+    if ()
+}