Enhance Authentication, State Management, and CRUD Operations with Redux

[martin-markovic]

Summary

This pull request involves reorganizing components for better clarity, enhancing user authentication flow, integrating notifications, and implementing CRUD operations with Redux state management and token authorization.

Changes

1. File Organization

   • Moved Dashboard.jsx, Login.jsx, and Register.jsx from the components directory to the pages directory for clarity.

2. Package Installation

   • Installed react-toastify package for notification handling.

3. Form Enhancements

   • Added id, name, and autoComplete attributes to input elements in Chat.jsx.

4. Authentication Enhancements

   • Imported useDispatch and useSelector from React Redux for dispatching actions and accessing authentication state.
   • Implemented useEffect to handle login side effects, showing error messages, and navigating on success in Login.jsx.
   • Dispatched loginUser action with user credentials on form submission in Login.jsx.
   • Reset authentication state after successful login in Login.jsx.

5. Logout Functionality

   • Implemented logoutUser function to remove user from local storage in authService.js.
   • Implemented async thunk logoutUser to log out user, handling success and error cases.
   • Integrated navigation, user access from Redux, dispatching logoutUser action, and resetting authentication state in Header.jsx.
   • Rendered login or register links based on user authentication status and current location in Header.jsx.

6. Integration with App

   • Integrated ToastContainer and Header.jsx in App.js.

7. Code Cleanup

   • Cleaned up redundant async and await from logoutUser thunk in authSlice.js.
   • Removed redundant logoutUser goal resetting from case in authSlice.js.

8. Dashboard Enhancements

   • Integrated necessary hooks for rerouting unauthorized users and resetting Redux state in Dashboard.jsx.

9. CRUD Operations

   • Implemented CRUD functions using axios with token authorization and error handling in quizService.js.
   • Implemented initial state, CRUD async thunks, token authorization, and different state management handling in quizSlice.js.

Testing

• Verified proper file organization and component functionality after moving files.
• Ensured authentication flows work correctly, including login, logout, and state management.
• Performed manual tests for CRUD operations with token authorization in quizService.js and quizSlice.js.

Additional Information

• These changes enhance the code structure, improve user authentication flow, and add CRUD functionality with secure token management.