Feature/ Major Refactor, Feature Enhancements, and UI/UX Improvements

[egenerse]

Summary

In this pull request, I undertook a large refactor of the project, transitioning from class components to functional components, updating the state management approach, and removing outdated packages. Additionally, I fixed several issues and improved the user experience.

Key Changes

• Removed Class Components:
  All class components have been replaced with functional components using React hooks, improving the overall maintainability and readability of the codebase.
• Updated Redux State Management:
  • Removed redux (4.2.1) and redux-observable (2.0.0), which previously added complexity through observable dispatch actions.
  • Installed @reduxjs/toolkit (2.2.7) to simplify the store setup and streamline state management, reducing boilerplate code.
• Custom Hooks Implementation:
  Introduced new custom hooks to encapsulate complex logic, making the code easier to follow, particularly in user interactions like button clicks.

Feature Enhancements

• GIVE_FEEDBACK and SEE_FEEDBACK fix:
  Give and see feedback was not working and fixed. Users can see their given feedback instantly.
• Fixed Share and New Diagram Issues:
  Resolved bugs related to sharing, loading and creating new diagrams during share with any view to improve functionality.
• Updated Create New Diagram Modal:
  Made the modal easier to use, enabling selection of new elements with double clicks for a smoother user experience.
• Collaboration Modal Improvement:
  Added support for using the Enter key to submit inputs in the collaboration modal, improving accessibility and usability.

Motivation

• Code Simplicity and Readability:
  The previous state management with redux-observable made it difficult for developers to trace the flow of actions and state changes. By moving to Redux Toolkit and functional components, the code is now more predictable and easier for new contributors to understand.
• Future Scalability:
  This refactor prepares the codebase for easier implementation of future features. The adoption of hooks and Redux Toolkit offers a cleaner, more modern development experience.
• Developer Experience:
  With a simpler structure, developers will find it easier to maintain and contribute to the project, enabling faster iterations and clearer separation of concerns.

UI/UX Improvements

• Improved UI/UX:
  General improvements to the user interface and experience, including better element selection, modal updates, and input handling.

quick demo

Screen.Recording.2024-10-18.at.22.34.28.mov

[farisd16]

after fixing minor bugs found during testing, retested all functionality and everything worked as expected

[FelixTJDietrich]

It's a lot of code but looks really good. Thank you for migrating away from class components :) Really good job, also the simplification of state management looks good.

I found two issues, see below. Functionality wise it works great. Thanks for the additional fixes!

[FelixTJDietrich]

I tested the functionality extensively now myself and can verify that everything worked as expected. I think this can be merged now.

Now even the "Give Feedback" and "See Feedback" is also not useless since it keeps the feedback in sync with the server. Great job!