Chat window component (partially working) + linting with ESLint

chingu-voyages / v36-bears-team-20

A social media website where you can find people to share activities with. | Voyage-36 | https://chingu.io/ | Twitter: https://twitter.com/ChinguCollabs

https://chingu-buddies.netlify.app/

MIT License

0 stars 0 forks source link

Chat window component (partially working) + linting with ESLint #48

Closed elliotwutingfeng closed 2 years ago

elliotwutingfeng commented 2 years ago

Adding a React component for chat between user and organizer, it currently uses dummy data stored in hooks in-lieu of the chat backend. #26 Peek 2022-01-27 23-24 Current features

Show organizer profile picture, name and online status
Groups consecutive chat messages by the same person together
Auto scroll to bottom whenever current user sends a new message.

It is still a work-in-progress... Upcoming features

[ ] Timestamp for each message.

<Need clarification on how we should proceed. Is it better to have a chat popup on the map itself, or to open up a chat window with an inbox like this?>

For #19, I am also proposing that we use ESLint to format our JS code, it can help to keep things neat and also catch bugs. I've run the linter once in this PR, and updated the npm packages, things still run as they should from my end, let me know if anything is broken.

alvitoraidhy commented 2 years ago

Hey, I noticed that the semicolons are omitted. I think the semicolons should stay as a good practice

For example, this doesnt work without a semicolon (at least the last time I tried):

foo()
(() => doSomething())()  // error

elliotwutingfeng commented 2 years ago

Alright, I've restored semicolons in the lint files.

alvitoraidhy commented 2 years ago

The chat window would have 2 tabs: "My Created Events" and "Attended Events"
"My Created Events" tab would list the events that was created, and when one is clicked it would list the participants in a dropdown. When one of the participants is clicked, it would show the chat with that participant
"Attended Events" tab would list the events that is attended, and when one is clicked it would show the chat with the organizer
Clicking the message button on the event popup would show the chat with the organizer of that event directly on the chat window
There would be a floating chat button on the right side of the map and on the homepage
Alternatively, there would be a chat button on the navbar of the map and on the homepage

alvitoraidhy commented 2 years ago

Will use this point as a base for #29

elliotwutingfeng commented 2 years ago

Chat Window Updates

Scrolls down conversation automatically when current user sends a message out, or when the conversation is loaded.
Latest message timestamp shown on sidebar

alvitoraidhy commented 2 years ago

Can confirm that it works