Refactor AreasContextProvider & Changes to TypesContextProvider

[alphazee09]

Refactor AreasContextProvider: Add context export, custom hook, PropTypes validation, and error handling

• Added **AreasContext** export and created useAreasContext custom hook for safer and easier context access.
• Integrated **PropTypes** to validate children prop in AreasContextProvider component.
• Refactored **addArea** function by breaking it into addExistingArea and addNewArea for improved readability and maintainability. - Added error handling in deleteArea function to prevent operations with invalid IDs. - Extracted logic to clear selected element into a separate function for better separation of concerns. - Ensured proper default export for AreasContextProvider to facilitate correct imports.

Enhance TypesContext and useFullscreen with improvements for robustness and usability

Changes to TypesContextProvider:

1. Added TypeScript Type Annotations:

   • Added TypeScript types for props and state to improve type safety and maintainability.

2. Improved History Management:

   • Ensured that changes are properly handled with undo and redo stacks and consistent state updates.

3. Updated Add and Delete Methods:

   • Improved addType and deleteType methods to correctly manage history and ensure consistent state updates.

4. Adjusted State Management:

   • Ensured state updates are correctly handled and unnecessary operations are minimized.

Changes to useFullscreen Hook:

1. Replaced useEventListener with Native DOM API:

   • Switched from useEventListener to document.addEventListener for clearer control over event listener lifecycle and to avoid potential issues with third-party hooks.

2. Utilized useEffect for Cleanup:

   • Moved event listener management into useEffect for proper attachment and cleanup, preventing potential memory leaks and ensuring efficient event handling.

3. Improved State Initialization:

   • Used a function for initializing state to ensure it is computed only once, improving performance.

Why These Changes:

• Type Safety and Clarity: Adding TypeScript annotations and improving state management helps in catching potential issues early and makes the code more predictable and easier to maintain.
• Event Listener Management: Using native DOM methods and useEffect ensures that event listeners are properly managed and cleaned up, reducing the risk of memory leaks and improving performance.
• State Initialization: Efficient state initialization improves performance and ensures that the initial state is set correctly.

These changes improve the robustness, maintainability, and performance of the TypesContext and useFullscreen components.

[vercel[bot]]

@alphazee09 is attempting to deploy a commit to the dottle's projects Team on Vercel.

A member of the Team first needs to authorize it.

[alphazee09]

Hey There ! Thank you for the feedback. I appreciate you pointing out these issues.

1. Export and Hook Not Being Called:

   • It seems I misunderstood the context in which the hook is utilized. I’ll review the code to ensure that the newly added hook is correctly integrated and called where necessary.

2. Handling Invalid IDs in deleteArea:

   • I understand that if an invalid ID is passed to deleteArea, it won’t affect the state. I’ll implement additional checks to ensure that invalid IDs are handled gracefully or log a warning if an attempt is made to delete a non-existent area.

3. Adding Existing Areas:

   • You’re right that adding an area with an existing ID isn’t logically correct. I’ll revise the addArea function to ensure it handles new areas correctly and that existing ones are managed based on the undo/redo functionality. I’ll also check if the data is correctly passed down from undo or redo.

Thank You Dude

[1ilit]

I appreciate the effort, brother. If you're planning to make another PR for this, don't worry about it.