TypeError: Cannot read property 'room' of undefined at Socket.<anonymous> (C:\CHAT\server\index.js:22:21)

Question

I have been getting this error and I tried all I can To solve it but none. I feel the User is not being fetched from Users.js file. here is Index.js file

const socketio = require("socket.io");
const router = require("./router");
const http = require("http");
const cors = require("cors");
const port = process.env.PORT || 5000;
const app = express();
const server = http.createServer(app);

const { addUser, removeUser, getUser, getUserInRoom } = require("./users");
const io = socketio(server);
app.use(cors());
// app.use(router);
io.on("connection", (socket) => {
  console.log("We have a new connection!");
  socket.on("join", ({ name, room }, callback) => {
    const { user } = addUser({ id: socket.id, name, room });
    console.log(user);
    // if (error) return callback(error);
    socket.emit("message", {
      user: "admin",
      text: `${user.name}, welcome to the room ${user.room}.`,
    });
    socket.broadcast
      .to(user.room)
      .emit("message", { user: "admin", text: `${user.name} has joined` });
    socket.join(user.room);
    callback();
  });
  socket.on("sendMessage", (message, callback) => {
    const user = getUser(socket.id);
    console.log(user);
    io.to(user.room).emit("message", { user: user.name, text: message });
    callback();
  });
  socket.on("disconnect", () => {
    console.log("User had just left!");
  });
});

server.listen(port, () => console.log(`Server has started on port ${port}`));

Here is My Users.js file

const users = [];
const addUser = ({ id, name, room }) => {
  name = name.trim().toLowerCase();
  room = room.trim().toLowerCase();
  const existingUser = users.find((user) => {
    user.room === room && user.name === name;
  });
  if (existingUser) {
    return { error: "Username is taken" };
  }
  const user = { id, name, room };
  users.push(user);
  return { user };
};

const removeUser = (id) => {
  const index = users.findIndex((user) => {
    user.id === id;
  });
  if (index !== -1) {
    return users.splice(index, 1)[0];
  }
};

const getUser = (id) => {
  users.find((user) => user.id === id);
};

const getUserInRoom = (room) => {
  users.filter((user) => user.room === room);
};
module.exports = { addUser, removeUser, getUser, getUserInRoom };

I have searched through for any possible misplaced variable but i found none. And Lastly, My client side

import "./Chat.css";
import queryString from "query-string";
import io from "socket.io-client";
import { InfoBar } from "../InfoBar/InfoBar";
import { Input } from "../Input/Input";
import { Messages } from "../Messages/Messages";
let socket;
export const Chat = ({ location }) => {
  const [name, setName] = useState("");
  const [message, setMessage] = useState("");
  const [messages, setMessages] = useState([]);
  const [room, setRoom] = useState("");

  const ENDPOINT = "localhost:5000";
  // ("ws://localhost:5000", { transports: ["websocket", "polling"] });

  useEffect(() => {
    socket = io(ENDPOINT);
    const { name, room } = queryString.parse(location.search);
    // console.log(name, room);
    setName(name);
    setRoom(room);

    // console.log(socket);
    socket.emit("join", { name, room }, () => {});
    return () => {
      socket.emit("disconnect");
      socket.off();
    };
  }, [ENDPOINT, location.search]);

  //UseEffect for the messages
  useEffect(() => {
    socket.on("message", (message) => {
      setMessages(messages=>[...messages, message]);
    });
  }, []);
  const sendMessage = (event) => {
    event.preventDefault();
    if (message) {
      socket.emit("sendMessage", message, () => setMessage(""));
    }
  };
  console.log(message, messages);
  return (
    <div className="outerContainer">
      <div className="container">
        <InfoBar room={room} />
        <Input
          setMessage={setMessage}
          message={message}
          sendMessage={sendMessage}
        />
        <Messages messages={messages} />
        {/* <input
          value={message}
          onChange={(event) => setMessage(event.target.value)}
          onKeyPress={(event) =>
            event.key === "Enter" ? sendMessage(event) : null
          }
        /> */}
      </div>
    </div>
  );
};

I will appreciate every available help

Answer 1

You don't have a variable named user , thus user is undefined and you can't get a property of an undefined object.

const { user } = addUser({ id: socket.id, name, room });

does not create a user variable, but an unnamed object, which has a property named user .

I don't know, why your addUser function does not just return the created user object but encapsulates it in an object. Maybe you could just do

const addUser = ({ id, name, room }) => {
  ...
  const user = { id, name, room };
  users.push(user);        
  return user;
}

and then

const user = addUser(....) 

If that is not possible and the return type of addUser can't be changed, you could do the following

const user = addUser(...).user;
socket.emit("message", {
  user: "admin",
  text: `${user.name}, welcome to the room ${user.room}.`,
});

Answer 2

You do not really need the {} around the return

const addUser = ({ id, name, room }) => {
  name = name.trim().toLowerCase();
  room = room.trim().toLowerCase();
  const existingUser = users.find((user) => {
    user.room === room && user.name === name;
  });
  if (existingUser) {
    return { error: "Username is taken" };
  }
  const user = { id, name, room };
  users.push(user);
  return { user };
};

Instead do it like this:

const addUser = ({ id, name, room }) => {
  name = name.trim().toLowerCase();
  room = room.trim().toLowerCase();
  const existingUser = users.find((user) => {
    user.room === room && user.name === name;
  });
  if (existingUser) {
    return { error: "Username is taken" };
  }
  const user = { id, name, room };
  users.push(user);
  return user;
};