[OSDEV-1374] SLC. Connect search & result page for name and address search with Backend API (integration) #483
Conversation
# Conflicts: # src/react/src/util/util.js
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
React App | Jest test suite - Code coverage reportTotal: 28.27%Your code coverage diff: -0.06% ▾ ✅ All code changes are covered |
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Dedupe Hub App | Unittest test suite - Code coverage reportTotal: 56.14%Your code coverage diff: 0.00% ▴ ✅ All code changes are covered |
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Countries App | Unittest test suite - Code coverage reportTotal: 100%Your code coverage diff: 0.00% ▴ ✅ All code changes are covered |
Contricleaner App | Unittest test suite - Code coverage reportTotal: 98.91%Your code coverage diff: 0.00% ▴ ✅ All code changes are covered |
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Django App | Unittest test suite - Code coverage reportTotal: 80.09%Your code coverage diff: 0.00% ▴ ✅ All code changes are covered |
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
requested review from
mazursasha1990,
vladsha-dev and
VadimKovalenkoSNF
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
|
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
📝 WalkthroughWalkthroughThis pull request introduces several enhancements to the Open Supply Hub platform, focusing on improving the contribution and search functionality. The changes include a new Changes
Sequence DiagramsequenceDiagram
participant User
participant ContributePage
participant SearchComponent
participant API
User->>ContributePage: Navigate to /contribute
User->>SearchComponent: Enter search parameters
SearchComponent->>API: Fetch production locations
API-->>SearchComponent: Return location results
SearchComponent->>User: Display search results
User->>SearchComponent: Select location or add new
alt Add New Location
SearchComponent->>ContributePage: Navigate to location info page
end
Possibly related PRs
Suggested reviewers
Finishing Touches
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
src/react/src/components/Contribute/ProductionLocationInfo.jsx (1)
Critical: Implement form submission handler
The review comment is valid. The component properly collects and validates all required data (name, address, country) but lacks the implementation of the submit handler. According to OSDEV-1374 release notes, this form should integrate with the
/contribute/production-location/searchendpoint.🔗 Analysis chain
Line range hint
485-489: Critical: Implement form submission handler.The submit button handler is empty, but according to the PR objectives, this should connect with the backend API endpoint
/contribute/production-location/search. Please implement the form submission logic.Let's verify if the API endpoint is properly configured:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if the API endpoint is defined in the codebase rg -l "production-location/search" --type js --type jsxLength of output: 83
Script:
#!/bin/bash # Search for production-location endpoint variations without type filtering rg -i "production.?location.?search" # Search for API-related files that might contain endpoint definitions fd -e js -e jsx "api|config|constant" --exec rg -l "production.?location" # Look for any form submission logic in the ProductionLocationInfo component ast-grep --pattern 'const ProductionLocationInfo = $_ => { $$$ }'Length of output: 55656
🧹 Nitpick comments (2)
src/react/src/components/Contribute/ProductionLocationInfo.jsx (1)
480-480: Consider handling unsaved form changes.While the back navigation works correctly, users might lose form data unexpectedly. Consider:
- Adding a confirmation dialog when there are unsaved changes
- Persisting form state in case users want to return to the form
Example implementation:
-onClick={() => history.goBack()} +onClick={() => { + if (hasUnsavedChanges()) { + if (window.confirm('You have unsaved changes. Are you sure you want to leave?')) { + history.goBack(); + } + } else { + history.goBack(); + } +}}Where
hasUnsavedChangescould check if any form fields were modified:const hasUnsavedChanges = () => { return nameTouched || addressTouched || inputCountry !== null || isExpanded; };src/react/src/actions/contributeProductionLocation.js (1)
56-73: Add parameter validation to prevent API errors.While the API integration looks good, consider adding validation for the destructured parameters to handle cases where they might be undefined.
export function fetchProductionLocations(data) { return async dispatch => { dispatch(startFetchProductionLocations()); const { name, address, country, size } = data; + // Validate required parameters + if (!name && !address && !country) { + return dispatch( + logErrorAndDispatchFailure( + new Error('At least one search parameter is required'), + 'Please provide at least one search parameter', + failFetchProductionLocations, + ), + ); + } return apiRequest
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
doc/release/RELEASE-NOTES.md(2 hunks)src/react/src/actions/contributeProductionLocation.js(2 hunks)src/react/src/components/Contribute/ConfirmNotFoundLocationDialog.jsx(2 hunks)src/react/src/components/Contribute/ProductionLocationInfo.jsx(3 hunks)src/react/src/components/Contribute/SearchByNameAndAddressNotFoundResult.jsx(2 hunks)src/react/src/components/Contribute/SearchByNameAndAddressResult.jsx(4 hunks)src/react/src/components/Contribute/SearchByNameAndAddressSuccessResult.jsx(6 hunks)src/react/src/util/constants.jsx(1 hunks)src/react/src/util/util.js(1 hunks)
🧰 Additional context used
🪛 Markdownlint (0.37.0)
doc/release/RELEASE-NOTES.md
31-31: Expected: asterisk; Actual: dash
Unordered list style
(MD004, ul-style)
31-31: Expected: 2; Actual: 4
Unordered list indentation
(MD007, ul-indent)
41-41: Expected: asterisk; Actual: dash
Unordered list style
(MD004, ul-style)
42-42: Expected: asterisk; Actual: dash
Unordered list style
(MD004, ul-style)
43-43: Expected: asterisk; Actual: dash
Unordered list style
(MD004, ul-style)
41-41: Expected: 2; Actual: 4
Unordered list indentation
(MD007, ul-indent)
42-42: Expected: 2; Actual: 4
Unordered list indentation
(MD007, ul-indent)
43-43: Expected: 2; Actual: 4
Unordered list indentation
(MD007, ul-indent)
⏰ Context from checks skipped due to timeout of 90000ms (10)
- GitHub Check: run-integration-test-code-quality
- GitHub Check: run-flake8-linter
- GitHub Check: run-django-code-quality
- GitHub Check: run-dd-code-quality
- GitHub Check: run-countries-code-quality
- GitHub Check: run-contricleaner-code-quality
- GitHub Check: get-base-branch-contricleaner-cov
- GitHub Check: get-base-branch-django-cov
- GitHub Check: get-base-branch-dd-cov
- GitHub Check: get-base-branch-countries-cov
🔇 Additional comments (11)
src/react/src/components/Contribute/ProductionLocationInfo.jsx (2)
2-2: LGTM! Clean import addition.The addition of
useHistoryhook is consistent with the component's routing needs.
59-59: LGTM! Proper hook initialization.The
useHistoryhook is correctly initialized at the component level.src/react/src/components/Contribute/SearchByNameAndAddressNotFoundResult.jsx (1)
6-9: LGTM! Good simplification of navigation logic.The removal of the intermediary function and direct use of
history.pushsimplifies the code without losing functionality.Also applies to: 48-48
src/react/src/components/Contribute/ConfirmNotFoundLocationDialog.jsx (1)
13-16: LGTM! Good sequencing of operations.The changes maintain a proper flow by cleaning up (closing dialog and clearing locations) before navigation.
Also applies to: 27-27
src/react/src/components/Contribute/SearchByNameAndAddressResult.jsx (1)
92-92: Verify error handling in fetchLocations.The action creator should properly handle and propagate errors to allow the component to show error states.
✅ Verification successful
Error handling implementation verified.
The action creator properly handles errors by:
- Catching API errors using .catch()
- Dispatching failure actions with user-friendly messages
- Using the centralized error handling utility logErrorAndDispatchFailure
- Properly propagating error states to allow component error handling
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if fetchProductionLocations has error handling ast-grep --pattern 'fetchProductionLocations($_, $_) { $$$ return apiRequest .$$$ .catch($_) }'Length of output: 109
Script:
#!/bin/bash # Find fetchProductionLocations implementation ast-grep --pattern 'export const fetchProductionLocations = $_' # Also search with ripgrep for more context rg "fetchProductionLocations" -A 10Length of output: 65729
Script:
#!/bin/bash # Search for fetchProductionLocations in React source directory rg "fetchProductionLocations" src/react/src/ --type js -C 5Length of output: 3240
Script:
#!/bin/bash # Get full implementation of fetchProductionLocations with more context rg "export function fetchProductionLocations" src/react/src/actions/contributeProductionLocation.js -A 20Length of output: 764
Script:
#!/bin/bash # Get complete implementation with more context lines rg "export function fetchProductionLocations" src/react/src/actions/contributeProductionLocation.js -A 30 # Also check the error handling utility rg "logErrorAndDispatchFailure" src/react/src/ --type js -C 5Length of output: 83244
src/react/src/components/Contribute/SearchByNameAndAddressSuccessResult.jsx (3)
40-51: LGTM! Clean implementation of location selection handler.The function properly extracts location data, builds the URL with parameters, and handles navigation.
86-89: LGTM! Proper implementation of results count display.The code correctly caps the display at MAX_LOCATIONS_TO_SHOW while preserving the actual count.
109-109: LGTM! Proper event handler implementation.The onClick handler correctly passes the location object to handleSelectLocation.
src/react/src/util/util.js (1)
274-288: LGTM! Clean implementation of URL builder.The function properly handles optional parameters and follows URL construction best practices.
src/react/src/util/constants.jsx (1)
1511-1511: LGTM! Clear constant definition.The MAX_LOCATIONS_TO_SHOW constant is well-named and its value (100) aligns with the specified requirements.
doc/release/RELEASE-NOTES.md (1)
40-43: LGTM! Clear and comprehensive release notes.The notes properly document the search results integration, routing configuration, and max result limit.
🧰 Tools
🪛 Markdownlint (0.37.0)
41-41: Expected: asterisk; Actual: dash
Unordered list style(MD004, ul-style)
42-42: Expected: asterisk; Actual: dash
Unordered list style(MD004, ul-style)
43-43: Expected: asterisk; Actual: dash
Unordered list style(MD004, ul-style)
41-41: Expected: 2; Actual: 4
Unordered list indentation(MD007, ul-indent)
42-42: Expected: 2; Actual: 4
Unordered list indentation(MD007, ul-indent)
43-43: Expected: 2; Actual: 4
Unordered list indentation(MD007, ul-indent)
| const location = useLocation(); | ||
|
|
||
| useEffect(() => { | ||
| fetchLocations(); | ||
| }, [fetchLocations]); | ||
| const searchParams = new URLSearchParams(location.search); | ||
| const name = searchParams.get('name'); | ||
| const address = searchParams.get('address'); | ||
| const country = searchParams.get('country'); | ||
| fetchLocations({ name, address, country, size: MAX_LOCATIONS_TO_SHOW }); | ||
| }, [location.search, fetchLocations]); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling and cleanup for search parameters.
Consider these improvements:
- Add error handling for missing URL parameters
- Add cleanup function to useEffect to handle unmounting during fetch
- Consider showing loading state when search parameters change
const location = useLocation();
useEffect(() => {
const searchParams = new URLSearchParams(location.search);
const name = searchParams.get('name');
const address = searchParams.get('address');
const country = searchParams.get('country');
- fetchLocations({ name, address, country, size: MAX_LOCATIONS_TO_SHOW });
+ let isSubscribed = true;
+
+ // Only fetch if at least one parameter is provided
+ if (name || address || country) {
+ fetchLocations({ name, address, country, size: MAX_LOCATIONS_TO_SHOW })
+ .catch(error => {
+ if (isSubscribed) {
+ console.error('Failed to fetch locations:', error);
+ }
+ });
+ }
+
+ return () => {
+ isSubscribed = false;
+ };
}, [location.search, fetchLocations]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const location = useLocation(); | |
| useEffect(() => { | |
| fetchLocations(); | |
| }, [fetchLocations]); | |
| const searchParams = new URLSearchParams(location.search); | |
| const name = searchParams.get('name'); | |
| const address = searchParams.get('address'); | |
| const country = searchParams.get('country'); | |
| fetchLocations({ name, address, country, size: MAX_LOCATIONS_TO_SHOW }); | |
| }, [location.search, fetchLocations]); | |
| const location = useLocation(); | |
| useEffect(() => { | |
| const searchParams = new URLSearchParams(location.search); | |
| const name = searchParams.get('name'); | |
| const address = searchParams.get('address'); | |
| const country = searchParams.get('country'); | |
| let isSubscribed = true; | |
| // Only fetch if at least one parameter is provided | |
| if (name || address || country) { | |
| fetchLocations({ name, address, country, size: MAX_LOCATIONS_TO_SHOW }) | |
| .catch(error => { | |
| if (isSubscribed) { | |
| console.error('Failed to fetch locations:', error); | |
| } | |
| }); | |
| } | |
| return () => { | |
| isSubscribed = false; | |
| }; | |
| }, [location.search, fetchLocations]); |
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
Innavin369
temporarily deployed
to
Quality Environment
GitHub Actions
Inactive
OSDEV-1374 Implemented integration for the
Search resultspage to show results of searching by name and address (/contribute/production-location/search):Notes: I recommend avoiding loading 20 locations for each iteration of scrolling since the maximum limit is capped at 100 locations. On my end, the endpoint executes locally within 300-500 milliseconds, and the scroll works smoothly. Given this, I believe further complicating the component’s logic is unnecessary.