React Socket NodeJs SocketManager not pulling through - node.js

Question

Stuck in a problem, unable to understand why it is not working.
Everything seems okay.
Please advice.
This is Server.js
var app = module.exports.ie=require('http').createServer()
var io = require('socket.io')(app)
const PORT = process.env.PORT || 3231
const socketManager = require('./socketManager')
io.on('connection', socketManager)
app.listen(PORT, () =>
console.log(`Connected to Port ${PORT}`)
)
Below is the my Layout file which holds the main render.
import React, {Component} from 'react';
import io from 'socket.io-client';
import { USER_CONNECTED, LOGOUT } from './ConstEvents';
import ChatNameForm from './ChatNameForm';
const socketUrl = "http://localhost:3231"
export default class chatPane extends Component{
constructor(props){
super(props);
this.state ={
socket:null,
user: null
};
}
componentDidMount(){
this.initSocket()
}
/*
*
* Connect to 'socketUrl' and initialise the socket.
*
*/
initSocket =() =>{
const socket = io(socketUrl)
socket.on('connect', () =>{
console.log("Connected");
})
this.setState({socket})
}
/*
* Sets the user property in state
* #Param user {id:number, name:string}
*/
setUser = (user) =>{
const { socket } = this.state
socket.emit(USER_CONNECTED, user);
this.setState({user})
}
/**
* Sets the user property in state to Null.
*
*/
logout = () => {
const { socket } = this.state
socket.emit(LOGOUT);
this.setState({user:null})
}
render(){
const { socket } = this.state
return(
<div>
<ChatNameForm socket={socket} setUser={this.setUser} />
</div>
);
}
}
Below is the UserName form. No Passwords only setting up the user name here.
import React, {Component} from 'react';
import VERIFY_USER from './ConstEvents';
export default class ChatNameForm extends Component {
constructor(props){
super(props);
this.state = {
userChatName:"",
error:""
};
}
setUser = ({user, isUser}) => {
console.log(user, isUser);
if(isUser){
this.setError("User name Taken")
}
else {
this.props.setUser(user)
this.setError("")
}
}
handleSubmit = (e) => {
e.preventDefault()
const { socket } = this.props
const {userChatName} = this.state
socket.emit (VERIFY_USER, userChatName, this.setUser)
}
handleChange = (e) => {
this.setState({userChatName:e.target.value})
}
setError = (error) => {
this.setState({error})
}
render() {
const {userChatName, error} = this.state
return (
<div className='login'>
<form onSubmit = {this.handleSubmit} >
<label htmlFor= "userChatName">
<h2>Enter User Chat Name</h2>
</label>
<input
ref = {(input) => { this.textinput = input}}
type = "text"
id ="userChatName"
value = {userChatName}
onChange={this.handleChange}
placeholder={'userChatName'}
/>
<input type="submit" value= "ok" />
<div className= "error">
{error ? error:null}
</div>
</form>
</div>
)
}
}
And lastly My SocketManager..
const io = require('./Server.js').io
const { VERIFY_USER, USER_CONNECTED, LOGOUT } = require('../ConstEvents');
const { createUser, createMessage, createChat} = require('../ChatFunctions');
let connectedUsers = { }
module.exports = function(socket){
console.log(`Socket Id = ${socket.id}`)
// verify chatName
socket.on(VERIFY_USER, (userChatName, callback) => {
if (isUser (connectedUsers, userChatName)) {
callback ({ isUser:true, user:null })
} else{
callback ({ isUser:false, user:createUser({name:userChatName})})
}
})
//User connects with userName
socket.on(USER_CONNECTED, (user) => {
connectedUsers= addUser(connectedUsers, user)
socket.user = user
io.emit(USER_CONNECTED, connectedUsers)
})
}
function addUser (userList, user){
let newList = Object.assign({}, userList)
newList[user.name] = user
return newList
}
function removeUser(userList, username){
let newList = Object.assign({}, userList)
delete newList[username]
return newList
}
function isUser(userList, userChatName){
return userChatName in userList
}
Issue; I can get the socket working fine. Value from Form fine however I this values are not being pushed over to socketManager. I have done some tests in Form Js to see if the handleSubmit is working or not.. I can see socket, userChatName and socket.emit is working fine. however when I go to socket manager and look into the triggered Event in this case VERIFY_USER... I don't see any results after that. tried testing it but not sure how too get its value out on console to test. If you can help me out plz. Thank you.