Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(20432): select ref area by user's location #966

Conversation

Natallia-Harshunova
Copy link
Contributor

@Natallia-Harshunova Natallia-Harshunova commented Jan 22, 2025

https://kontur.fibery.io/Tasks/Task/FE-Add-new-feature-Select-current-location-in-Reference-section-of-Profile-20432

Summary by CodeRabbit

  • New Features

    • Added location selection functionality for reference areas
    • Introduced step-by-step tooltip for selecting reference areas
    • Added user location access feature
  • Localization

    • Updated English translation strings
    • Added new localization keys for location and reference area interactions
  • Improvements

    • Enhanced reference area selection process
    • Added error handling for location access
    • Improved styling for reference area settings
  • Bug Fixes

    • Made geometry hash optional to provide more flexibility

@Natallia-Harshunova Natallia-Harshunova requested a review from a team January 22, 2025 15:11
Copy link
Contributor

coderabbitai bot commented Jan 22, 2025

Walkthrough

The pull request introduces enhancements to location-related functionality and user interface components. The changes span multiple files, focusing on improving reference area selection, adding user location retrieval, and updating localization strings. The modifications include making the geometry hash optional, adding location access methods, introducing new translation keys, and updating CSS styles to support new user interaction features.

Changes

File Change Summary
src/core/focused_geometry/types.ts Made hash property optional in GeometryWithHash type
src/core/localization/translations/en/common.json Added new translation keys for location access, reference area selection, and notifications
src/core/shared_state/referenceArea.ts Updated hash computation to use existing hash if available
src/features/user_profile/components/SettingsForm/ReferenceAreaInfo/ReferenceAreaInfo.module.css Added new CSS classes for tooltips, location loading, and error states
src/features/user_profile/components/SettingsForm/ReferenceAreaInfo/ReferenceAreaInfo.tsx Implemented location selection functionality with loading and error states
src/utils/common/userLocation.ts Added getUserLocation() method to retrieve user's current location

Sequence Diagram

sequenceDiagram
    participant User
    participant ReferenceAreaInfo
    participant UserLocation
    participant Boundaries
    participant ReferenceArea

    User->>ReferenceAreaInfo: Select current location
    ReferenceAreaInfo->>UserLocation: getUserLocation()
    UserLocation-->>ReferenceAreaInfo: Return coordinates
    ReferenceAreaInfo->>Boundaries: getBoundaries(coordinates)
    Boundaries-->>ReferenceAreaInfo: Return boundary data
    ReferenceAreaInfo->>ReferenceArea: updateReferenceArea()
    ReferenceArea-->>ReferenceAreaInfo: Confirm update
Loading

Poem

🐰 A Rabbit's Location Quest

With coordinates light and free,
We hop and seek where we might be!
Geolocation's magic spell,
Brings boundaries near, can't you tell?
A reference area, now so clear! 🗺️

✨ Finishing Touches
  • 📝 Generate Docstrings (Beta)

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

Language To Recheck Fuzzy Untranslated Total
ar 3 24 101 128
de 2 24 101 127
es 3 24 101 128
id 2 24 101 127
ko 3 24 101 128
uk 0 7 8 15

Copy link

Bundle size diff

Old size New size Diff
5.16 MB 5.17 MB 4.48 KB (0.08%)

Copy link

Preview environments for this PR:

These previews are automatically updated with each commit.

Note: After a new deployment, it may take a few minutes for the changes to propagate and for caches to update. During this time, you might experience temporary loading issues or see an older version of the app. If the app fails to load, please wait a few minutes and try again.

Copy link

codecov bot commented Jan 22, 2025

Codecov Report

Attention: Patch coverage is 0% with 68 lines in your changes missing coverage. Please review.

Project coverage is 10.02%. Comparing base (d469784) to head (c889717).
Report is 3 commits behind head on main.

Files with missing lines Patch % Lines
...ttingsForm/ReferenceAreaInfo/ReferenceAreaInfo.tsx 0.00% 48 Missing and 1 partial ⚠️
src/utils/common/userLocation.ts 0.00% 15 Missing and 1 partial ⚠️
src/core/shared_state/referenceArea.ts 0.00% 3 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #966      +/-   ##
==========================================
- Coverage   10.04%   10.02%   -0.03%     
==========================================
  Files         668      669       +1     
  Lines       29398    29459      +61     
  Branches     1235     1236       +1     
==========================================
  Hits         2954     2954              
- Misses      25915    25975      +60     
- Partials      529      530       +1     
Components Coverage Δ
UI Components 0.26% <ø> (+<0.01%) ⬆️
Core Logic 17.81% <0.00%> (ø)
Features 1.13% <0.00%> (-0.01%) ⬇️
Utilities 45.49% <0.00%> (-0.28%) ⬇️

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link

codecov bot commented Jan 22, 2025

Bundle Report

Changes will increase total bundle size by 4.0kB (0.07%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
konturio/disaster-ninja-fe-esm 5.42MB 4.0kB (0.07%) ⬆️

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 9

🔭 Outside diff range comments (1)
src/core/shared_state/referenceArea.ts (1)

Line range hint 40-43: Consider adding type guard for hash comparison.

The hash comparison logic could be more type-safe by using a type guard.

     // update only in case if geometry source or hash has changed
     const referenceAreaOld = ctx.get(referenceAreaAtom);
-    if (!referenceAreaOld || !referenceAreaOld.hash || referenceAreaOld.hash !== hash) {
+    const hasHashChanged = (old: GeometryWithHash | null): boolean => {
+      return !old?.hash || old.hash !== hash;
+    };
+    if (!referenceAreaOld || hasHashChanged(referenceAreaOld)) {
📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0e63b26 and c889717.

📒 Files selected for processing (6)
  • src/core/focused_geometry/types.ts (1 hunks)
  • src/core/localization/translations/en/common.json (2 hunks)
  • src/core/shared_state/referenceArea.ts (1 hunks)
  • src/features/user_profile/components/SettingsForm/ReferenceAreaInfo/ReferenceAreaInfo.module.css (3 hunks)
  • src/features/user_profile/components/SettingsForm/ReferenceAreaInfo/ReferenceAreaInfo.tsx (3 hunks)
  • src/utils/common/userLocation.ts (1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/features/user_profile/components/SettingsForm/ReferenceAreaInfo/ReferenceAreaInfo.tsx

[error] 115-118: Provide an explicit type prop for the button element.

The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset

(lint/a11y/useButtonType)

🔇 Additional comments (7)
src/features/user_profile/components/SettingsForm/ReferenceAreaInfo/ReferenceAreaInfo.module.css (3)

7-11: LGTM! Well-structured layout and typography.

The flex layout and typography settings are properly implemented using design system variables.


22-22: LGTM! Consistent spacing and styling.

The use of design system variables for spacing and colors maintains visual consistency.

Also applies to: 29-29


49-56: LGTM! Clean loading indicator implementation.

The loading animation is well-implemented using keyframes and pseudo-elements, following best practices.

src/utils/common/userLocation.ts (1)

10-11: 🧹 Nitpick (assertive)

Verify the coordinate order convention.

The function returns coordinates in [longitude, latitude] order, which is common for GeoJSON but might be confusing for developers expecting [latitude, longitude]. Consider adding a comment or documentation to clarify this convention.

       (position) => {
         const { latitude, longitude } = position.coords;
+        // Using [longitude, latitude] order to match GeoJSON specification
         resolve([longitude, latitude]);
       },
✅ Verification successful

The [longitude, latitude] coordinate order is correct and follows GeoJSON specification

The coordinate order is consistent with GeoJSON specification and is used consistently throughout the codebase. Adding the suggested documentation comment would indeed improve code clarity for developers.

🏁 Scripts executed

The following scripts were executed for the analysis:

Error: No shell scripts found


Script:

#!/bin/bash
# Search for coordinate-related patterns and GeoJSON usage
echo "=== Searching for coordinate patterns ==="
rg -i "(\[longitude.*latitude\]|\[lat.*long\])" -g "!*.{json,md}" -A 2

echo -e "\n=== Searching for GeoJSON mentions ==="
rg -i "geojson" -g "*.{ts,js,tsx,jsx}" -A 2

echo -e "\n=== Looking for documentation about coordinates ==="
fd "README|CONTRIBUTING" -e md -X cat

Length of output: 73164

src/core/focused_geometry/types.ts (1)

38-38: Verify the impact of optional hash property.

Making the hash property optional could lead to inconsistent handling in the codebase. Ensure all consumers of this type properly handle the case when hash is undefined.

✅ Verification successful

The codebase already handles optional hash property safely

The identified usages already implement proper null checking and optional chaining, making them compatible with the optional hash property:

  • src/features/layers_in_area/atoms/areaLayersLegendsAndSources.ts: Uses optional chaining and explicit null check
  • src/features/layers_in_area/atoms/areaLayersDetailsResource/areaLayersDetailsParamsAtom.ts: Uses optional chaining
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for direct usage of the hash property without optional chaining
rg -l "geometry\.hash[^?]" --type ts

Length of output: 194


Script:

#!/bin/bash
# Check the actual implementation in the identified files
echo "=== areaLayersLegendsAndSources.ts ==="
rg "geometry\.hash" src/features/layers_in_area/atoms/areaLayersLegendsAndSources.ts -A 2 -B 2

echo -e "\n=== areaLayersDetailsParamsAtom.ts ==="
rg "geometry\.hash" src/features/layers_in_area/atoms/areaLayersDetailsResource/areaLayersDetailsParamsAtom.ts -A 2 -B 2

Length of output: 776

src/core/localization/translations/en/common.json (2)

5-5: LGTM!

The addition of the "or" translation key follows the existing pattern for simple conjunctions.


464-467: LGTM! Well-structured location-related messages.

The new messages provide clear feedback for:

  • Location access status
  • Error handling
  • Success confirmation with dynamic area name

Copy link
Contributor

@albaranau albaranau left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved with comments

src/utils/common/userLocation.ts Show resolved Hide resolved
@Natallia-Harshunova Natallia-Harshunova merged commit 9637565 into main Jan 28, 2025
14 of 22 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants