allow edit of user name

[vinmaster]

Which Issue was this PR made for?

• Closes [Feature]: Change username #166

What is within the scope with this PR

Allow changing of user name by prompting user response and then send web socket event for the change and then all users in the room receive the event to change name in user context

[siberowl]

2022-10-16.21-05-28.mp4

Thanks for the awesome work! It looks great.
I just saw this bug where pressing a button on the bottom bar caused the name to be reset.

[Njima1572]

Thank you @vinmaster for finding and contributing to the project.
Since this project was not very well documented what goes where, I think there are some confusions on what exactly is needed to update things.
In this particular issue, the user information is shared among all the people through webRTC protocol, after the initial handshake, it was needed to be updated through src/classes/PeerProcessor.ts, the example can be found in pages/RoomPage/index.tsx under updateSelfUserInfo. (Sorry about addUserInfo being a bad naming, should probably be updateUserInfo)

mochatto/client/src/pages/RoomPage/index.tsx

Lines 41 to 46 in e813cde

	const updateSelfUserInfo = (info) => {
	const newInfo = { ...selfUserInfoRef.current, ...info };
	selfUserInfoRef.current = newInfo;
	setSelfUserInfo(newInfo);
	addUserInfo(socket.id)(newInfo);
	};

What I would do instead is to reuse updateSelfUserInfo and change name through this.

It would be some props passing involved if this were to happen, but feel free to create follow up issue to avoid this props passing too!

Thank you again for your work!

[siberowl]

Thank you @vinmaster for finding and contributing to the project. Since this project was not very well documented what goes where, I think there are some confusions on what exactly is needed to update things. In this particular issue, the user information is shared among all the people through webRTC protocol, after the initial handshake, it was needed to be updated through src/classes/PeerProcessor.ts, the example can be found in pages/RoomPage/index.tsx under updateSelfUserInfo. (Sorry about addUserInfo being a bad naming, should probably be updateUserInfo)

mochatto/client/src/pages/RoomPage/index.tsx

Lines 41 to 46 in e813cde

	const updateSelfUserInfo = (info) => {
	const newInfo = { ...selfUserInfoRef.current, ...info };
	selfUserInfoRef.current = newInfo;
	setSelfUserInfo(newInfo);
	addUserInfo(socket.id)(newInfo);
	};

What I would do instead is to reuse updateSelfUserInfo and change name through this.

It would be some props passing involved if this were to happen, but feel free to create follow up issue to avoid this props passing too!

Thank you again for your work!

I'm personally ok with keeping the editUserName but yeah I totally missed that.
@vinmaster We don't actually hold any value for userInfos (reducers are confusing 😭) so you need to pass in the current userInfo as a parameter to the reducer like we do with addUser. If just re-using addUser in the RoomPage seems easier like @Njima1572 suggested, that totally works for me too.

[vinmaster]

I've updated to re-use addUserInfo. Not 100% sure if this is what you guys meant 😅

[siberowl]

Once you make these changes it should be ready to go! Sorry it got so confusing🙏

[siberowl]

LGTM thanks for the awesome work and good luck with hacktoberfest!!