Skip to content

Ali-Amir-code/Chatly-Client

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Documentation for Chatly Application

Overview

This documentation explains the functionality of the provided JavaScript code for the Chatly application. Chatly is a real-time chat application built with Electron.js and Node.js, which includes features like contact management, messaging, notifications, and user status checking.


Code Structure and Key Components

Variables and Constants

  • modal, closeModal, addContactModalBtn, etc.: References to HTML elements in the DOM for managing UI components like modals, buttons, and containers.
  • serverURL: Base URL for backend API requests (http://localhost:3000).
  • selectedContactId: Tracks the currently selected contact for messaging.
  • myData: Stores user information and contacts.
  • contactMap: A Map to associate contact IDs with their respective DOM elements.

Event Listeners

  • electronAPI.onReceiveData: Updates user data (myData), displays user information, loads notifications, and contacts when new data is received from the backend.
  • electronAPI.onRecieveMessage: Handles incoming messages, updates the UI, and notifies users of unread messages.
  • electronAPI.onRecieveNotification: Adds incoming notifications to the user interface.
  • contactIdInput.addEventListener('input'): Validates the contact ID entered in the modal input field.
  • addContactModalBtn.addEventListener('click'): Sends a contact request notification.
  • sendMessageBtn.addEventListener('click') and messageInputField.addEventListener('keypress'): Sends messages when the "Send" button is clicked or the Enter key is pressed.

Functions

Display Functions

  • displayInfo(data): Displays user information on the screen.
  • loadContacts(contacts): Renders the contact list in the UI.
  • showMessages(messages): Displays chat messages with a specific contact.
  • addNotification(notification): Adds a notification element to the notifications container.
  • loadNotifications(notifications): Loads all notifications into the UI.

Utility Functions

  • checkStatus(id, callback): Fetches and updates the online/offline status of a user by ID.
  • makeContactElement(contact): Creates a DOM element for a contact with details like name, status, and messages.
  • makeMessageElement(message): Creates a DOM element for an individual message.
  • addMessage(data, isFromMe, addToMessageScreen): Adds a message to the contact's message list and optionally displays it in the chat screen.
  • showInfo(text, color, time): Displays temporary informational messages on the screen.
  • addUserToContacts(user): Adds a user to the contact list and updates the DOM.
  • removeNotification(notification, notificationElement): Removes a notification from the UI and myData.
  • makeNotificationElement(notification): Creates a DOM element for a notification with associated actions.
  • areObjectsEqual(obj1, obj2): Compares two objects for equality.

API Interaction

  • sendNotification(type, sender, receiverId, status): Sends a notification to a specific user via the backend API.

Modal and UI Management

  • modal.style.display: Shows or hides the modal.
  • window.onclick: Closes the modal when clicked outside of it.

Message and Contact Management

  • addContactHandler(): Placeholder for adding contacts (currently unused).
  • closeMessageScreen(): Closes the chat window and returns to the user info screen.

Workflow

  1. Initialization: Event listeners are set up, and electronAPI starts listening for incoming data, messages, and notifications.
  2. User Data Loading: On receiving user data, the app displays user info, loads contacts, and initializes notifications.
  3. Messaging: Users can send and receive messages. New messages are displayed in real time, with unread message indicators for inactive chats.
  4. Contacts Management: Users can add contacts by entering a valid contact ID and sending a request.
  5. Notifications: Notifications inform users about incoming friend requests and their responses.
  6. UI Updates: Dynamic updates to DOM elements ensure real-time responsiveness to user actions and backend events.

Error Handling

  • API Requests: Handles errors in API requests and JSON parsing by logging them and providing fallback responses.
  • Validation: Ensures only valid IDs are entered for adding contacts.

Future Considerations

  • Error Messages: Enhance error messages for better user understanding.
  • Code Modularity: Break down large functions into smaller, reusable modules for improved readability and maintainability.
  • Testing: Add unit tests for key functionalities to ensure robustness.

About

Client code for Chatly app.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published