For my 3rd and 4th pull request of Hacktoberfest, I didn’t work on much new technology, like in my previous pull request’s. Instead I thought I would fix a bug that was added during the move from a jQuery site to a React site. And I added some styling to the messages on the NodeChat app.
In the original jQuery site the original creator designed it to display a greeting message when a user logs in. From testing the original site, the greeting message only displayed the first time someone logged in. This is were the React app had a bug, it would always display the greeting message when you enter the chat.
In order to fix this bug I needed to have the idea of a previous user inside the chat page component. I was able to do this by creating a Boolean inside the login page and sending that over to the chat page through props. This allowed my to conditionally show the greeting message.
Since the chat app can handle more then just 2 people at a time, I wanted to show who is sending each message. I was already receiving the username of the sender so it wasn’t technically that hard to get the username to display. Their was a bug in receiving the username but it was quick to fix.
The more involved part of this PR was probably all the CSS required to make the messages look nice.
Here’s a picture of the end result: