Chat

[martin-markovic]

Summary

This pull request includes significant updates and improvements to the frontend and backend codebases. The changes involve removing redundant files and dependencies, installing necessary packages, integrating Redux for state management, setting up authentication components, and updating server configurations to support CORS with credentials.

Changes

1. File and Dependency Cleanup

   • Deleted main.js file.
   • Removed Socket.IO integration from index.html.
   • Removed main.js integration from index.html.
   • Uninstalled redundant Babel dependencies: @babel/core and @babel/preset-react.

2. Package Installation

   • Installed necessary packages: @reduxjs/toolkit, axios, react-icons, react-redux.

3. Server Updates

   • Removed /js/main.js redundant API endpoint from server.js.
   • Added credentials: true option to CORS origin in server.js.
   • Integrated CORS with credentials support to allow requests from the frontend address in server.js.

4. Frontend Integration

   • Integrated ./index.css into index.js.
   • Implemented Register.jsx and Login.jsx to render authentication form data.
   • Integrated Login and Register components into their respective route paths in App.js.
   • Removed the redundant React import from Chat.jsx.
   • Added simple layout styling in index.css.

5. Authentication Handling

   • Implemented registerUser function to send POST requests with axios and set user data to local storage in authService.js.
   • Implemented async thunk registerUser for user registration, handling success and error cases.
   • Implemented initialState, reducers, and extraReducers to handle redux state management in authSlice.js.
   • Implemented reset reducer to reset authentication state in authSlice.js.

6. Component Updates

   • Integrated necessary hooks from React, React Redux, and React Router DOM in Register.jsx.
   • Implemented useEffect side effects handling for different registration states in Register.jsx.
   • Implemented registration form submission logic along with user data to handleSubmit in Register.jsx.
   • Added id attributes and matching labels for input elements in Register.jsx.

7. Store Integration

   • Integrated Provider, store, and index.css in index.js.

Testing

• Verified that redundant files and dependencies were successfully removed.
• Tested the new package installations to ensure they work as expected.
• Checked the server configurations for CORS support and functionality.
• Manual Testing:
  • Validated the authentication forms and their integration with the backend.
  • Ensured proper state management with Redux for the authentication flow.

Additional Information

• These changes aim to streamline the codebase, enhance state management, and improve the overall user authentication process.
• Notes :
  • Efforts to make Babel work and transpile Socket.IO chat functionality into index.html were unsuccessful. This led to the removal of related integrations and dependencies.
  • Efforts to configure Express to serve static files from the public folder and allow the Socket.io integration were also unsuccessful, . As a result, the static file serving setup was not included in this implementation.