Fully-Integrated Group Chat Functionality (Front-end + Back-end), Refactored Application Code and Revised Application System Design

ColinLefter commented 3 months ago

Summary of Changes

Optimized query response times by integrating contexts and refactoring code at the application level (RootLayout.tsx and _app,tsx
Added an "Add Friend" component (AddFriendModal) that enables users to add friends that exist on the platform
Implemented client-side validation by handling cases where the user does not enter any username or enters a non-existent user in the "Add Friend" search box
Implemented real-time asynchronous updates with a useCache context that wraps the whole application, propagating changes across all components and re-triggering queries to reflect real-time updates
Implemented a draft of caching across backend API endpoints (temporarily disabled) to keep the results obtained from previous queries readily accessible on component remount
Implemented a "Send DM" component (NewChatModal) where the current user can choose users to add to a group chat via a dropdown combobox that is synced to their friends list
Restructured backend API endpoints to reflect updated data structures (particularly the use of IDs within the friendList component rather than usernames to ensure referential integrity)
Implemented minor UI adjustments: made all primary components black and added our logo gradient to special action buttons like "Add Friend" or "Create chat"
Removed the UserButton component from the top right of the application shell as it was found to be redundant given its existing presence within the FooterTab component
Added docstrings across all fully-integrated and functional components
Migrated all interface declarations to a dedicated accordTypes.ts file that will be used to store all data types moving forward
Patched non-functional privacy toggle due to a hardcoded value in one of the components part of the chat creation pipeline (accord -> (FriendsTab || NewChatModal) Chat -> MessagingInterface)
Removed the User Settings tab given its redundancy in view of the UserButton component in the FooterProfile already handling that responsibility
Patched non-functional message history after the introduction of group chats due to a malformed key (sender was being included twice due to the outdated system design of the project in relation to the chat creation pipeline)
Introduced SHA-256 encryption for the creation of all messaging channels (both direct messages and group chats) to enforce key uniqueness and to compress long key values to a fixed 256-bit (32-byte) key, ensuring a deterministic length for optimized database storage
Added account-specific user profiles across text channels by including the profile picture source of the sender as part of the internal message data within text channels
Removed hardcoded friendList in the registration backend API endpoint in favour of an empty array as users can add friends once they join the platform
Created several backend API endpoints to facilitate the above changes: add-friend, get-ids-of-friends, get-usernames-of-friends
Removed the send message component that was next to the text message bar to reflect a more minimalistic UI as users can send messages via the enter button on their keyboard

Tests Performed

Conducted extensive, rigorous ad-hoc testing across all features above
Ensured all text channels have a valid key and that message history can be retrieved upon component re-mount (if the privacy toggle is off)
Ensured profile pictures are associated to the sender of the message and not of the currently signed-in user

Visual Summary of Changes

Group Chat Functionality (3 users tested in real-time)

ngs across all fully-integrated components

Add Friend Modal

Select Friends Modal (create a group chat and add friends to it)

Storage of Chat History in MongoDB (privacy toggle off)

Documentation

See the newly added docstrings across all fully-integrated components

Notes

Although this pull request is very large, all of this actually addresses only the group chat functionality (along with some minor UI adjustments). Although I could have split this pull request into one per each modal created, I am creating just one pull request to align with what has been documented in our scrum report
When a user adds a friend via the AddFriend modal, both the sender and the receiver of that friend request accept it automatically. That means that the receiving party has no decision on whether they accept the friend request. This needs to be changed in future updates.

notbaopham commented 3 months ago

Looks bloody amazing - the only thing that is wrong about this is it is in Lightmode