As stated in the previous blog although now completed, there are still a few final touches that need to be added to Course Assist😄. Some of these are optimizing socket performance, adding some improvements to the messages list and chat, adding notification badges to the navbar, adding picture placeholders, improvements to the UI, etc... Because some of these features and bug fixes took longer to implement than others, I've decided to divide this blog into two parts with this being the first part which focuses on optimizing socket performance and adding improvements to the messages list and chat. Let's dive right in🏊‍♂️!

We begin with optimizing socket performance which was more a bug fix than a new feature. Just a quick background for those who just started reading the blog, I use sockets in both Course Assist apps(a user app and an expert app) for real-time transfers between the two apps. For example, when sending a message from one app to the other, the message is sent to the other app via a NodeJs socket server which then sends a signal which is just some random text, to the receiving app which then automatically resets the data displayed once this text is received. The text is stored in UseState once it arrives and then causes UseEffect to refresh the page and display the newly sent data (If you're not familiar with React you can refer to this link to find out more about UseState and UseEffect😀). Now because the text sent from the NodeJs socket server was always the same, UseEffect was only called the first time the text was sent and therefore the page only refreshed once which isn't how its supposed to work🙄. To solve this I had to change the text so that it's no longer always the same. I did this by changing the text to the time (yes I mean the literal current time of day, seconds included😂) because it's always constantly changing. So now every time a message is sent to the Node server it, in turn, generates the time and sends it to the receiving app, because of this the UseEffect refreshes the page each time a message is sent thus fixing this first issue.

Next, I worked on adding improvements to the messages list and chat. Now, this statement is kinda broad so let me break it down😅. I first worked on indicating whether the messages in a user's messages list had been opened or not. This wasn't a new feature or bug fix but a re-implementation because I already added this feature sometime back. I was re-doing it now because of some changes made to the code. For this, I just added a has_opened boolean field to the conversation model in the database and changed it to false every time a message was added then changed it to true every time a message was opened. I also added some changes to the UI so that the text in an unopened message appears in bold while the text in a read message is just normal. The second was refreshing the messages list once a user receives a new message. For this, I just took the same socket code from the chat page and put it in the messages list so that the data received from the API is reset, now a new message is displayed once received. The third is just like the second one but instead of refreshing once a new message is received the message list page was supposed to reset once a new message is sent to indicate the latest message sent by the user. For this, I used UseContext which is another React feature that allows you to manage state across different components in your project. You can read more about it at this link😄.

Once done I tested it all and it worked as expected💪🏾. That being said there are just a couple more features and bug fixes to be added before I move on to deploying Course Assist. Make sure to read the next blog to find out how I'll go about doing that. Thanks for reading and see you in the next one🙏.