Socket.io - Terminal returning data as "null" - reactjs

Question

I'm building a forum app using reactjs, nodejs, express and mongoDB, where users can create account, login and then post a post text. I want this post to be displayed instantly To all others users, for that i am using socket.io server.
I would appreciate if you check my whole project here in github: (https://github.com/darkpsinight/forum)
However, whenever a user login or connect to the app, i get this null in socket terminal:
Connected user.✅
null
I tried to investigate this null message, and i discovered that data is returning null.
How to make data returns data of createdPostsocket instead of null ?
Edit:
createdPostsocket is initialized as null, and my catch statement returns null, so either i am not assigning a value to createdPostsocket or i am throwing an error in my promise.
Meanwhile, i already assigned a value in Slice at fulfilled case :
[createPost.fulfilled]: (state, action) => {
console.log(action.payload);
window.location.reload(false);
state.createdPostsocket= action.payload.data.data
}
Which means createdPostsocket assigned the value of payload.data.data, right?
My codes:
- Back:
app.js (socket server)
const io = require("socket.io")(4000, {
cors: {
origin: "http://localhost:3000",
},
});
io.on('connection', (socket) => {
console.log('Connected user.✅');
socket.on('addPost', data => {
console.log(data); //returning null in terminal
io.emit('newPost', data)
})
socket.on('disconnect', function (socket) {
console.log('Disconnected user.⛔️');
});
});
- Front:
postsSlice.js:
const initialState = {
posts: [],
createdPostsocket: null
};
const postsSlice = createSlice({
name: "posts",
initialState,
reducers: {},
extraReducers: {
//Create http request 3 cases
[createPost.pending]: (state, action) => {
},
[createPost.fulfilled]: (state, action) => {
console.log(action.payload);
window.location.reload(false);
state.createdPostsocket= action.payload.data.data
},
[createPost.rejected]: (state, action) => {
},
},
});
export const { } = postsSlice.actions;
export const selectPosts = (state) => state.posts
export default postsSlice.reducer;
index.jsx:
const posts = useSelector(selectPosts)
const socket = useRef()
useEffect(() => {
socket.current = io("ws://localhost:4000")
}, [])
useEffect(() => {
socket.current.emit("addPost", posts.createdPostsocket);
console.log (posts.createdPostsocket) //returning null in console developper
}, [posts.createdPostsocket])
postsAPI.js
import { axiosInstance } from "../../config/axios";
import { requests } from "../../config/requests";
//post service
export const PostsService = {
// Create post request
create: (data) => {
console.log(data);
return axiosInstance
.post(requests.postapi.create, data, { credentials: "include" })
.then((res) => {
return res;
})
.catch((err) => {
return err;
});
},
};
- back:
controller.js:
module.exports = {
create: (req, res) => {
const data = {
user: req.user.sub,
text: req.body.text,
/* image: req.file && req.file.filename */
}
console.log(data) //returning user and text
const t = new post(data)
t.save().then(t => t
.populate('user')
.then(post => {
res.status(200).json({
message: 'post created',
data: post
})
})
.catch(err => {
res.status(500).json({
message: 'post not created',
data: null
})
})
)
},
}

Answer 1

Remove window.location.reload(false); so you wont lose your data. window.location.reload(false); will reload your page and delete all the data. However it is not recommanded to use vanilla JavaScript to call the reload method to tell the browser to reload the current page and you will loose any data.