test.js

 useEffect(() => {
    console.log({ url: process.env.REACT_APP_SOCKET_ENDPOINT });

    function onConnect() {
      console.log("Socket connected successfully");
      setIsConnected(true);
      console.log(personId); // Check if personId is logged correctly
      socket.emit("join", { person_id: personId });
    }

    function onDisconnect() {
      console.log("Socket disconnected");
      setIsConnected(false);
    }

    function onLogLoad(data) {
      console.log("Received log message:", data);
      setLogs((previous) => [...previous, data.data.message]);
    }

    function onError(error) {
      console.error("Connection Error:", error);
    }

    // Log socket events
    socket.on("connect", onConnect);
    socket.on("disconnect", onDisconnect);
    socket.on("log_message", onLogLoad);
    socket.on("connect_error", onError);
    socket.on("error", onError);

    // Clean up socket event listeners
    return () => {
      socket.off("connect", onConnect);
      socket.off("disconnect", onDisconnect);
      socket.off("log_message", onLogLoad);
      socket.off("connect_error", onError);
      socket.off("error", onError);
    };
  }, [personId, socket]);


import { io } from "socket.io-client";

const URL = process.env.REACT_APP_SOCKET_ENDPOINT;

export const socket = io(URL);