Using Zustand for state management

[gitwikc]

Added Zustand state management

This pull reques includes the addition of state management for the app using Zustand. Changes introduced are:

• No need to pass username, room name and profile pic in the chat page URL
• Manage roommates in state
• Includes sender profile pic in notification
• Manages messages in state

Note

Persistent state may be added later, if required, which would enable the user to view the messages even after reloading the chats page

⚠️ This PR includes changes to server code. Please REDEPLOY to Heroku

Roommates list 🧑‍🤝‍🧑 🧑‍🤝‍🧑

The list of roommates is stored in the Zustand store and can be accessed by

import useStore from "../utils/store";

// ... Inside component
const roommates = useStore(state => state.roommates);

Uses

💡 Using the list of roommates, a new component can be created which would display all the users in the current room. The roommates list comes from the server's server/src/users.js: getUsersInRoom(room) function. So the format of each roommate in the list is of the form

{
  id: <socket id>,
  name: <user name>,
  room: <room name>,
  pfpSrc: <profile pic URL>
}

Also, in each admin type message from the server, the roommate list is passed and set in the client's store.

Auto Profile pic 🐱

If no profile pic URL is specified, a cute kitty profile pic is automatically assigned to the user using https://robohash.org/<username>?set=set4

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @manuelalferez on Vercel.

@manuelalferez first needs to authorize it.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

chat – ./client

🔍 Inspect: https://vercel.com/manuelalferez/chat/5BtC7CnHzhjPJxTKkBmz69i8gJ3x
✅ Preview: https://chat-git-fork-gitwikc-add-state-management-manuelalferez.vercel.app

chatcus – ./client

🔍 Inspect: https://vercel.com/manuelalferez/chatcus/EdR9bkakUXndUXjV9BLzwKrd5nsd
✅ Preview: https://chatcus-git-fork-gitwikc-add-state-management-manuelalferez.vercel.app

[gitwikc]

@manuelalferez If you merge this PR, please also redeploy the server code to Heroku to update the changes to server code

[gitwikc]

Changes

Persistent state

State is maintained even on refresh = Your messages won't disappear when you refresh your tab

Roommates

No. of roommates and the roommates' names along with their profile pics are shown on the right of the messages

Fixed bugs

• Clears state on exiting the room
• Server removes user from room and informs roommates on exiting room

⚠️ This PR includes changes to the server code as well. Please redeploy server code to Heroku

[manuelalferez]

Thanks for your patient @gitwikc, I will read everything in depth when I have a second. I will try to do it today

[manuelalferez]

Awesome @gitwikc!!!
Now, when you click in share, the room does not complete itself in the join page. Apart of that, I love the new feature 🤩

Do you know why it can be?

[gitwikc]

@manuelalferez I tried to fix the bug. Please check if everything works fine and report any other bugs I may have overlooked.

[manuelalferez]

Perfect @gitwikc, problem solved.

I was checking the Responsive Design:

Does not look as it should.

We have three options:

• We can do it together tomorrow
• You can do it by yourself
• Or merge (with the latent problem) and add it to issues.

You decide 😊

[gitwikc]

Perfect @gitwikc, problem solved.

I was checking the Responsive Design:

Does not look as it should.

We have three options:

• We can do it together tomorrow
• You can do it by yourself
• Or merge (with the latent problem) and add it to issues.

You decide 😊

@manuelalferez I think merging this PR now and creating an issue for the responsive feature is appropriate since it's a different topic from state management

[iamvishal345]

@manuelalferez we need to change session storage to other storage solution.
You can create a seperate ticket for that also.

[manuelalferez]

@iamvishal345 Do you mean instead of using a sessionStorage, store the data in a database?