Improve Map View UX and Refactor React Services#172
Merged
Conversation
Refactor frontend codebase to adhere to React best practices and resolve Service Worker development issues. React Best Practice Fixes: - Implement `useFlickrImages` hook to replace manual data fetching in `DiveDetail` and `DiveSiteDetail`, resolving waterfall fetching and race conditions. - Create `useClickOutside` hook to centralize click-outside logic in `NotificationBell` and `ResponsiveFilterBar`. - Standardize responsive logic with `useResponsive` hook across multiple components. - Optimize high-frequency updates in `Home.js` using `AnimatedCounter`. - Add passive event listeners for scroll and resize events to improve scroll performance. - Optimize SVG animations in `IndependentMapView` using GPU acceleration. PWA & Service Worker Improvements: - Update `vite.config.js` to remove conflicting Workbox options and disable SW in development by default. - Fix `PWAUpdater` double-mount issue in Strict Mode using refs. - Remove redundant manual Service Worker registration in `index.html`. - Configure Nginx proxy to correctly serve Service Worker in dev mode. This commit resolves 9/10 identified architectural violations.
This commit addresses multiple technical debt items: 1. Refactor Monolithic API (Violation #3): - Extract `services/auth.js` for authentication logic. - Extract `utils/apiErrors.js` for error handling utilities. - Update `AuthContext` and 15+ other files to use these modular imports. - Remove unused code from `api.js` while preserving internal usage. 2. Fix Ant Design Deprecations: - Update `Card` props: `bordered` -> `variant`, `bodyStyle` -> `styles.body`. - Update `Progress` props: `width` -> `size`. - Update `Avatar.Group` props: `maxCount` -> `max={{ count }}`. - Update `Statistic` props: `valueStyle` -> `styles.content`. - Resolve `Spin` tip warning by separating text from spinner. 3. Fix Import Errors: - Restore accidentally removed imports in `CreateDive`, `EditDive`, etc. - Fix syntax error in `DiveDetail.js`. Verified with full test suite and manual page navigation. No console warnings remain.
Move notification-related API functions from `frontend/src/api.js` to a new `frontend/src/services/notifications.js` file to improve modularity and separation of concerns. Update all dependent components, hooks, and pages to import from the new service location. Clean up unused imports (including `React`, `SEO`, and `antd` components) in the modified files. Fix `NotificationBell` tests to mock the correct hook path.
Move dive-related API functions from `frontend/src/api.js` to a new `frontend/src/services/dives.js` file to improve modularity and reduce the size of `api.js`. Update imports in all dependent files: - `CreateDive.js`, `DiveDetail.js`, `Dives.js`, `EditDive.js` - `ImportDivesModal.js` - `flickrHelpers.js` Clean up unused imports in `DiveDetail.js` and `CreateDive.js`. Resolve "api is not defined" error in `DiveDetail.js` by ensuring `api` is correctly imported for profile data fetching.
Move system, storage, metrics, statistics, and settings API functions from `frontend/src/api.js` to a new `frontend/src/services/admin.js` file to improve modularity and reduce the size of `api.js`. Update imports in: - `AdminGeneralStatistics.js` - `AdminGrowthVisualizations.js` - `AdminRecentActivity.js` - `AdminSystemMetrics.js` - `useSettings.js` Clean up unused imports in admin pages (Recharts, React, etc.) and fix JSDoc and signature in `useSettings.js`.
This commit introduces several user experience improvements to the Map
View and includes code style fixes for Admin pages related to the
ongoing React architecture cleanup.
Map View Improvements:
- **Persist Filter:** The 'selectedEntityType' (e.g., 'Dive Trips') is
now synced to the URL query parameters, ensuring it persists during
map navigation (scrolling/zooming).
- **Clustering:** Disabled marker clustering for all entity types at
zoom level 11 and higher to improve visibility of individual points.
- **Mobile UX:**
- Replaced the native select dropdown with Ant Design Mobile
components for a better native-like experience.
- **Desktop UX:**
- Upgraded the header controls to use Ant Design components.
- Grouped the "Show on map" label with the dropdown.
- Added descriptive text to the "Map Controls" button.
- Optimize map popup layout for mobile and desktop:
- Unified compact view with icons for key weather metrics.
- Expandable "More Info" tooltip for detailed reasoning to prevent
popup resizing and map shifting.
- Suitability badge moved to header for better space utilization.
- **Visual Consistency:**
- Replaced unicode emojis in 'Dive' popups with SVG icons (Lucide)
and the custom shell image for ratings, matching the Dive Detail page.
- Fixed horizontal scrollbar issues in popups by wrapping content.
- Reduce map auto-panning aggressiveness when opening popups to prevent
popup closure issues.
React Best Practices (Refactor):
- **Admin Pages:** Reordered imports in AdminGrowthVisualizations,
AdminRecentActivity, and AdminSystemMetrics. This aligns with the
cleanup of Barrel File Imports (Violation #3 in react-violations.md),
ensuring consistent ordering following the extraction of specific
service files (e.g., 'services/admin.js').
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This pull request introduces significant User Experience (UX) improvements to the interactive map, specifically targeting mobile usability, filter persistence, and visual consistency. It also continues the ongoing refactor to address React best practice violations, including the extraction of API logic into dedicated service files and code style standardization in Admin pages.
Changes Made
Map View Improvements
selectedEntityTypeis now correctly synced to the URLtypequery parameter.DiveDetailpage design.React Architecture & Code Quality
react-violations.md):services/admin.jsservices/dives.jsservices/notifications.jsservices/auth.jsAdminGrowthVisualizations,AdminRecentActivity,AdminSystemMetrics) to align with project linting standards.Testing
npm test(frontend) andpytest(backend) to ensure no regressions.make lint-frontend.Related Issues
Additional Notes
absolutepositioning to "pop up" (bottom-full), ensuring it doesn't expand the container height.