fix(web): use unique keys for duplicate search results#1886
Conversation
…ross trackers, etc. Defined result key using the same method as the backend to ensure unique GUID for each result
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughThis PR adds ChangesSelection and rendering update
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web/src/pages/Search.tsx`:
- Around line 1311-1314: selectedResultGuid currently holds only result.guid
causing ambiguous selection across indexers; update the selection state and
comparisons to use the same composite key used for React keys (e.g.
`${result.indexerId}-${result.guid}`). Change handleToggleResultSelection to
compute and toggle that composite id, update any place comparing
selectedResultGuid === result.guid to compare against the composite id instead,
and ensure selectedResult (lookup/filter) uses the composite id when resolving
the currently selected item; apply this change consistently for both the Search
result list rendering and the other occurrence around
handleToggleResultSelection/selectedResult usage.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: e1a670fc-8aa6-412f-b11d-eabf13ce53b4
📒 Files selected for processing (1)
web/src/pages/Search.tsx
There was a problem hiding this comment.
🧹 Nitpick comments (2)
web/src/pages/Search.tsx (2)
1312-1328: ⚡ Quick winConsider computing the result key once per iteration.
The mobile view calls
getSearchResultKey(result)twice (lines 1314 and 1316). While the function is inexpensive, computing it once improves clarity and avoids redundant work.♻️ Refactor to compute key once
<div className="sm:hidden space-y-2 max-h-150 overflow-auto"> {filteredAndSortedResults.map((result) => { + const resultKey = getSearchResultKey(result) return ( <SearchResultCard - key={getSearchResultKey(result)} + key={resultKey} result={result} - isSelected={selectedResultKey === getSearchResultKey(result)} + isSelected={selectedResultKey === resultKey} onSelect={() => handleToggleResultSelection(result)}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/src/pages/Search.tsx` around lines 1312 - 1328, Compute the search result key once per iteration instead of calling getSearchResultKey(result) twice: inside the map over filteredAndSortedResults, call getSearchResultKey(result) once into a local variable (e.g., resultKey) and then pass that variable as the SearchResultCard key and use it to compute isSelected (compare resultKey === selectedResultKey) and any other places that used getSearchResultKey(result); update usages in the JSX where SearchResultCard is rendered (key, isSelected, and any handlers referencing the key) so the expensive or duplicate call is eliminated.
1585-1694: ⚡ Quick winConsider computing the result key once per iteration.
The desktop table row calls
getSearchResultKey(result)twice (lines 1586 and 1589). Computing it once at the start of the map callback improves clarity.♻️ Refactor to compute key once
{filteredAndSortedResults.map((result) => { - const isSelected = selectedResultKey === getSearchResultKey(result) + const resultKey = getSearchResultKey(result) + const isSelected = selectedResultKey === resultKey return ( <TableRow - key={getSearchResultKey(result)} + key={resultKey} className={cn(🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/src/pages/Search.tsx` around lines 1585 - 1694, Compute the search result key once inside the filteredAndSortedResults.map callback by adding a local const (e.g., const resultKey = getSearchResultKey(result)) at the top of the map body and then use resultKey for the TableRow key prop and for the isSelected comparison (selectedResultKey === resultKey); update any other references in that callback that call getSearchResultKey(result) to use resultKey instead (references: getSearchResultKey, selectedResultKey, TableRow key).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@web/src/pages/Search.tsx`:
- Around line 1312-1328: Compute the search result key once per iteration
instead of calling getSearchResultKey(result) twice: inside the map over
filteredAndSortedResults, call getSearchResultKey(result) once into a local
variable (e.g., resultKey) and then pass that variable as the SearchResultCard
key and use it to compute isSelected (compare resultKey === selectedResultKey)
and any other places that used getSearchResultKey(result); update usages in the
JSX where SearchResultCard is rendered (key, isSelected, and any handlers
referencing the key) so the expensive or duplicate call is eliminated.
- Around line 1585-1694: Compute the search result key once inside the
filteredAndSortedResults.map callback by adding a local const (e.g., const
resultKey = getSearchResultKey(result)) at the top of the map body and then use
resultKey for the TableRow key prop and for the isSelected comparison
(selectedResultKey === resultKey); update any other references in that callback
that call getSearchResultKey(result) to use resultKey instead (references:
getSearchResultKey, selectedResultKey, TableRow key).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: f32f0e51-bbfb-4910-a8bb-7395a19cf66a
📒 Files selected for processing (1)
web/src/pages/Search.tsx
Fixes duplicate React keys in search results when multiple indexers return results with the same GUID. Now key results using the same method as the backend to ensure unique GUID for each result.
Fixes #1777
Summary by CodeRabbit