search

Giveth / giveth-dapps-v2

This project is the aggregation of GIVeconomy and Giveth.io DApps in a single repo
https://staging.giveth.io
GNU General Public License v3.0
54 stars 32 forks source link

Add google react map new api library #4354

Closed kkatusic closed 1 day ago

kkatusic commented 3 days ago

Resolve #4317

@MohammadPCh this is PR for replacing google map libraries. Please note that I needed to remove two packages: react-google-maps and react-places-autocomplete.

I lost time to handle all states, so you will need to check state management in three files am I placed it goods. Also test does map is showing to you, I needed to create my api key to enable Place API.

This new package has searchbox already implemented I used it and removed old one.

thx

Summary by CodeRabbit

vercel[bot] commented 3 days ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
giveth-dapps-v2 ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 28, 2024 5:09pm
coderabbitai[bot] commented 3 days ago

Walkthrough

The update replaces the deprecated react-google-maps and react-places-autocomplete libraries with @react-google-maps/api across multiple components. This includes refactoring components to use React hooks and simplifying the handling of Google Maps and Places API integration.

Changes

File Change Summary
package.json Added @react-google-maps/api, removed react-google-maps and react-places-autocomplete.
.../views/create/locationInput/GoogleMap.tsx Updated to use @react-google-maps/api and refactored GoogleMapComponent.
.../views/create/locationInput/Location.index.tsx Removed googleMapURL and loadingElement usage.
.../views/create/locationInput/LocationInput.tsx Converted class component to functional component using hooks, updated imports and functionality for Google Maps API.
.../views/create/locationInput/SearchPlaces.tsx Refactored to utilize StandaloneSearchBox from @react-google-maps/api, updated state management.

Assessment against linked issues

Objective Addressed Explanation
Replace react-google-maps with @react-google-maps/api (#4317) ✅

Poem

In code’s vast field, we took a leap,
With APIs fresh, old scripts asleep. 🌟
Maps now load with a seamless grace,
Hooks in place, functions ace.
A rabbit’s cheer, for work well done,
Our journey forward has just begun! 🐇✨

Recent review details **Configuration used: CodeRabbit UI** **Review profile: CHILL**
Commits Files that changed from the base of the PR and between 3a85dfd04c1da3afb900b7d580a4efbc9d4fb4f3 and 529092c3b67d218efb46a80d33018f736ca0932d.
Files ignored due to path filters (1) * `yarn.lock` is excluded by `!**/yarn.lock`, `!**/*.lock`
Files selected for processing (5) * package.json (2 hunks) * src/components/views/create/locationInput/GoogleMap.tsx (1 hunks) * src/components/views/create/locationInput/Location.index.tsx (2 hunks) * src/components/views/create/locationInput/LocationInput.tsx (2 hunks) * src/components/views/create/locationInput/SearchPlaces.tsx (1 hunks)
Files skipped from review due to trivial changes (2) * package.json * src/components/views/create/locationInput/Location.index.tsx
Additional context used
Biome
src/components/views/create/locationInput/LocationInput.tsx
[error] 31-34: This else clause can be omitted because previous branches break early. Unsafe fix: Omit the else clause. (lint/style/noUselessElse)
Additional comments not posted (7)
src/components/views/create/locationInput/GoogleMap.tsx (3)
`2-2`: **Updated import statement to use new Google Maps API.** The import change from `react-google-maps` to `@react-google-maps/api` aligns with the PR objectives of updating the library for better support and features. --- `6-12`: **Proper use of GoogleMap component with updated props.** The `GoogleMap` component is correctly implemented with `mapContainerStyle`, `center`, and `zoom` properties. The `options` object correctly disables unwanted UI elements and makes the map non-draggable, which might be intended for static display purposes. --- `16-21`: **Check consistency of mapContainerStyle across different resolutions.** Given the fixed height and width, ensure that the map displays correctly across various device resolutions and orientations.
src/components/views/create/locationInput/LocationInput.tsx (1)
`1-10`: **Refactored to use React hooks and updated imports.** The transition from class-based to functional components using hooks (`useState`, `useEffect`, `useCallback`) is a modern React practice that enhances readability and maintainability.
src/components/views/create/locationInput/SearchPlaces.tsx (3)
`1-11`: **Updated component to use `StandaloneSearchBox`.** The use of `StandaloneSearchBox` from `@react-google-maps/api` for handling place searches directly aligns with the PR's goal to leverage more modern and maintained libraries. --- `14-56`: **Review the handling of search box state and place selection.** The component effectively manages the state of the search box, places, and selected place. It also correctly handles the event when a place is selected, ensuring that the address and coordinates are passed to the parent component. --- `86-115`: **Custom styles for Google Places autocomplete are well-defined.** The custom styles for the autocomplete dropdown are specific and ensure that the UI element is visually consistent with the rest of the application. The use of `z-index` and `box-shadow` enhances the dropdown's visibility and aesthetic.
--- 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 - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `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 generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@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 as 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 resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration 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](https://docs.coderabbit.ai/guides/configure-coderabbit) 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](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.