Update chat functionality

[martin-markovic]

Summary

This pull request introduces several significant updates to the frontend chat feature, including setting up Babel, configuring Webpack, and integrating Socket.io with React components. It also includes improvements to the chat functionality and state management.

Changes

1. Babel Setup

   • Navigate to the frontend repository and run:

     npm install @babel/core @babel/preset-react babel-loader

   • Installed Babel packages for compiling JavaScript and JSX files.

2. Webpack Configuration

   • Implemented Webpack configuration for bundling JavaScript and JSX files in webpack.config.js.

3. Socket.io Client Installation

   • Run:

   • npm i socket.io-client

   • Installed Socket.io client in the learn-connect/frontend repository.

4. Socket.io Integration

   • Moved Socket.io logic from main.js to Chat.jsx.
   • Integrated useEffect, useState, and useRef from React and io from Socket.io-client to handle chat messages and activity in Chat.jsx.

5. HTML Elements Integration

   • Moved HTML elements from index.html to Chat.jsx to render chat messages.

6. React Integration

   • Integrated React, createRoot, and Chat component to render chat component in main.js.

7. Chat Component Integration

   • Integrated Chat into Dashboard.jsx.

8. Mock Data for Testing

   • Added a mock list of friends to Chat.jsx to test chat selection functionality.

9. State Management

   • Implemented state management for selected friend and chat messages.

10. Message Handling

    • Implemented message handling to display chat history with selected friend.
    • Updated chat message event functionality by broadcasting a message to a friend in server.js.

Testing

• Manual Testing:

  • Verified the setup of Babel and Webpack configurations.
  • Tested the integration of Socket.io logic in Chat.jsx.
  • Confirmed that chat messages are rendered correctly and the chat history is maintained.
  • Tested the selection of friends and the display of chat messages with the selected friend.
  • Verified the broadcasting of messages to a friend in server.js.

• Integration Testing:

  • pending.

• Unit Testing:

  • pending.

Additional Information

• These updates enhance the chat functionality, improve the maintainability of the codebase, and ensure a smoother user experience.