Fix/Add search filter options to channel page search#3437
Open
bhavyagor12 wants to merge 5 commits intomasterfrom
Open
Fix/Add search filter options to channel page search#3437bhavyagor12 wants to merge 5 commits intomasterfrom
bhavyagor12 wants to merge 5 commits intomasterfrom
Conversation
Issue #2855 Add search filter options to channel page search Integrate SearchOptions into channel content tab, allowing users to filter search results by media type, upload date, sort order, duration, and exact match. Adds isChannelSearch mode to SearchOptions component with a dedicated media type filter UI.
📝 WalkthroughWalkthroughAdds an isChannelSearch flag to claim search filter context and propagates channel-search-aware behavior and new filter params (contentType, freshness, duration, sortBy) through claim list header, content tab view, and SearchResults to adjust UI control states and API query parameters. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ContentView as ContentTab/View
participant FilterCtx as ClaimSearchFilterContext
participant SearchResults
participant LighthouseAPI as Lighthouse API
User->>ContentView: enter search / set filters (query, contentType, freshness, duration, sort)
ContentView->>FilterCtx: set isChannelSearch based on query length
ContentView->>SearchResults: pass props (contentType, freshness, durationParam, sortByParam, customMin/Max)
SearchResults->>LighthouseAPI: query with mediaType/time_filter/duration_min/duration_max/sort
LighthouseAPI-->>SearchResults: return results
SearchResults-->>ContentView: render results
ContentView-->>User: display results
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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 |
Wire existing ClaimListDiscover filters (content type, sort order, freshness, duration) into the lighthouse search used on channel pages. Grey out filters not supported by lighthouse (price, tags, hide reposts, hide members-only). Removes the duplicate SearchOptions UI that was added previously.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsx`:
- Around line 113-114: The current merge for duration bounds uses logical OR
which lets filter params override base constraints; change the logic for
effectiveMinDuration and effectiveMaxDuration to compute the intersection: set
effectiveMinDuration to the greater of minDuration and durationMinParam (when
present) and effectiveMaxDuration to the lesser of maxDuration and
durationMaxParam (when present), making sure to coerce/validate numeric values
and handle undefined/null so you don't relax enforced caps (use
Math.max/Math.min semantics or equivalent around
durationMinParam/durationMaxParam and minDuration/maxDuration).
In
`@ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/view.jsx`:
- Line 103: isChannelSearch currently uses raw searchQuery length which treats
whitespace-only input as a search; change the detection to use trimmed input by
checking searchQuery.trim().length > 2 instead of searchQuery.length > 2 so
channel-search mode aligns with the existing trimmed search triggering logic
(update the isChannelSearch declaration that references searchQuery).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: b5f9e77b-183f-4eab-b34b-0af03fb18201
📒 Files selected for processing (5)
ui/component/claimListHeader/internal/additionalFilters/view.jsxui/component/claimListHeader/view.jsxui/contexts/claimSearchFilterContext.jsxui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsxui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/view.jsx
.../internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsx
Outdated
Show resolved
Hide resolved
ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/view.jsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
🧹 Nitpick comments (1)
ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsx (1)
86-101: Consider extracting magic numbers to named constants.The values
240(4 minutes) and1200(20 minutes) represent duration thresholds in seconds. For maintainability and consistency, consider using constants (possibly fromCS.DURATIONorSETTINGS) if they're defined elsewhere, or defining them locally.♻️ Example refactor
+const SHORT_DURATION_SECONDS = 240; // 4 minutes +const LONG_DURATION_SECONDS = 1200; // 20 minutes + const durationMinParam = React.useMemo(() => { if (!durationParam || durationParam === CS.DURATION.ALL) return null; if (durationParam === CS.DURATION.SHORT) return null; - if (durationParam === CS.DURATION.LONG) return 1200; + if (durationParam === CS.DURATION.LONG) return LONG_DURATION_SECONDS; if (durationParam === CS.DURATION.CUSTOM && customMinMinutes) return customMinMinutes * 60; return null; }, [durationParam, customMinMinutes]); const durationMaxParam = React.useMemo(() => { if (!durationParam || durationParam === CS.DURATION.ALL) return null; - if (durationParam === CS.DURATION.SHORT) return 240; + if (durationParam === CS.DURATION.SHORT) return SHORT_DURATION_SECONDS; if (durationParam === CS.DURATION.LONG) return null; if (durationParam === CS.DURATION.CUSTOM && customMaxMinutes) return customMaxMinutes * 60; return null; }, [durationParam, customMaxMinutes]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsx` around lines 86 - 101, The hard-coded thresholds 240 and 1200 in the duration mapping should be replaced with named constants for clarity and reuse; update the logic in the React.useMemo blocks that compute durationMinParam and durationMaxParam to use descriptive constants (e.g., DURATION_THRESHOLD_SHORT_MAX and DURATION_THRESHOLD_LONG_MIN) instead of 240 and 1200, or reference existing values on CS.DURATION/SETTINGS if available, keeping the same conditional behavior with customMinMinutes/customMaxMinutes unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsx`:
- Around line 86-101: The hard-coded thresholds 240 and 1200 in the duration
mapping should be replaced with named constants for clarity and reuse; update
the logic in the React.useMemo blocks that compute durationMinParam and
durationMaxParam to use descriptive constants (e.g.,
DURATION_THRESHOLD_SHORT_MAX and DURATION_THRESHOLD_LONG_MIN) instead of 240 and
1200, or reference existing values on CS.DURATION/SETTINGS if available, keeping
the same conditional behavior with customMinMinutes/customMaxMinutes unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 30117fef-4008-4a40-a1c4-edfec8f2b58e
📒 Files selected for processing (2)
ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsxui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/view.jsx
🚧 Files skipped from review as they are similar to previous changes (1)
- ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/view.jsx
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsx (1)
116-119:⚠️ Potential issue | 🟡 MinorDuration bound merge still drops explicit
0bounds and can relax constraints.
effectiveMinDuration/effectiveMaxDurationand query emission treat0as “absent”. That can skip an explicit bound and alter intersection behavior for edge inputs. Use nullish checks instead of truthy checks end-to-end.Suggested fix
- const effectiveMinDuration = - durationMinParam && minDuration ? Math.max(durationMinParam, minDuration) : durationMinParam || minDuration || null; - const effectiveMaxDuration = - durationMaxParam && maxDuration ? Math.min(durationMaxParam, maxDuration) : durationMaxParam || maxDuration || null; + const effectiveMinDuration = + durationMinParam == null + ? minDuration ?? null + : minDuration == null + ? durationMinParam + : Math.max(durationMinParam, minDuration); + + const effectiveMaxDuration = + durationMaxParam == null + ? maxDuration ?? null + : maxDuration == null + ? durationMaxParam + : Math.min(durationMaxParam, maxDuration); ... - (effectiveMinDuration ? `&${SEARCH_OPTIONS.MIN_DURATION}=${effectiveMinDuration}` : '') + - (effectiveMaxDuration ? `&${SEARCH_OPTIONS.MAX_DURATION}=${effectiveMaxDuration}` : '') + + (effectiveMinDuration != null ? `&${SEARCH_OPTIONS.MIN_DURATION}=${effectiveMinDuration}` : '') + + (effectiveMaxDuration != null ? `&${SEARCH_OPTIONS.MAX_DURATION}=${effectiveMaxDuration}` : '') +Also applies to: 151-152
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsx` around lines 116 - 119, The merge logic for effectiveMinDuration and effectiveMaxDuration treats 0 as falsy and can drop explicit zero bounds; update the calculations to use nullish checks instead of truthy checks (e.g., test durationMinParam != null and minDuration != null, and durationMaxParam != null and maxDuration != null) so you compute Math.max/Math.min only when both are non-null and otherwise pick the non-null value (or null if both null). Apply the same nullish-check fix to the duplicate logic at the other occurrence (the code around the second pair at lines 151-152).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsx`:
- Around line 90-104: The duration memoizers (durationMinParam and
durationMaxParam) convert customMinMinutes/customMaxMinutes to seconds without
validating values or the min>max relationship; update the React.useMemo blocks
to first validate that customMinMinutes and customMaxMinutes are finite numbers
>= 0 before converting, produce null if invalid, and enforce the range (e.g., if
computed minSeconds > maxSeconds return null or normalize/swap) so invalid or
inverted ranges don’t propagate; reference the durationMinParam and
durationMaxParam useMemo callbacks and their dependency arrays when making this
change.
---
Duplicate comments:
In
`@ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsx`:
- Around line 116-119: The merge logic for effectiveMinDuration and
effectiveMaxDuration treats 0 as falsy and can drop explicit zero bounds; update
the calculations to use nullish checks instead of truthy checks (e.g., test
durationMinParam != null and minDuration != null, and durationMaxParam != null
and maxDuration != null) so you compute Math.max/Math.min only when both are
non-null and otherwise pick the non-null value (or null if both null). Apply the
same nullish-check fix to the duplicate logic at the other occurrence (the code
around the second pair at lines 151-152).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: b570e5a7-6718-4c2b-a9f2-c5eed94d198a
📒 Files selected for processing (1)
ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsx
Comment on lines
+90
to
+104
| const durationMinParam = React.useMemo(() => { | ||
| if (!durationParam || durationParam === CS.DURATION.ALL) return null; | ||
| if (durationParam === CS.DURATION.SHORT) return null; | ||
| if (durationParam === CS.DURATION.LONG) return LONG_DURATION_SECONDS; | ||
| if (durationParam === CS.DURATION.CUSTOM && customMinMinutes) return customMinMinutes * 60; | ||
| return null; | ||
| }, [durationParam, customMinMinutes]); | ||
|
|
||
| const durationMaxParam = React.useMemo(() => { | ||
| if (!durationParam || durationParam === CS.DURATION.ALL) return null; | ||
| if (durationParam === CS.DURATION.SHORT) return SHORT_DURATION_SECONDS; | ||
| if (durationParam === CS.DURATION.LONG) return null; | ||
| if (durationParam === CS.DURATION.CUSTOM && customMaxMinutes) return customMaxMinutes * 60; | ||
| return null; | ||
| }, [durationParam, customMaxMinutes]); |
There was a problem hiding this comment.
Guard custom duration inputs before converting to seconds.
customMinMinutes / customMaxMinutes are converted without validating finite, non-negative values, and there’s no guard for min > max. Invalid ranges can produce unstable or empty result sets unexpectedly.
Suggested fix
+ const toSeconds = (minutes) => {
+ if (minutes == null) return null;
+ if (!Number.isFinite(minutes) || minutes < 0) return null;
+ return Math.floor(minutes * 60);
+ };
const durationMinParam = React.useMemo(() => {
if (!durationParam || durationParam === CS.DURATION.ALL) return null;
if (durationParam === CS.DURATION.SHORT) return null;
if (durationParam === CS.DURATION.LONG) return LONG_DURATION_SECONDS;
- if (durationParam === CS.DURATION.CUSTOM && customMinMinutes) return customMinMinutes * 60;
+ if (durationParam === CS.DURATION.CUSTOM) return toSeconds(customMinMinutes);
return null;
}, [durationParam, customMinMinutes]);
const durationMaxParam = React.useMemo(() => {
if (!durationParam || durationParam === CS.DURATION.ALL) return null;
if (durationParam === CS.DURATION.SHORT) return SHORT_DURATION_SECONDS;
if (durationParam === CS.DURATION.LONG) return null;
- if (durationParam === CS.DURATION.CUSTOM && customMaxMinutes) return customMaxMinutes * 60;
+ if (durationParam === CS.DURATION.CUSTOM) return toSeconds(customMaxMinutes);
return null;
}, [durationParam, customMaxMinutes]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsx`
around lines 90 - 104, The duration memoizers (durationMinParam and
durationMaxParam) convert customMinMinutes/customMaxMinutes to seconds without
validating values or the min>max relationship; update the React.useMemo blocks
to first validate that customMinMinutes and customMaxMinutes are finite numbers
>= 0 before converting, produce null if invalid, and enforce the range (e.g., if
computed minSeconds > maxSeconds return null or normalize/swap) so invalid or
inverted ranges don’t propagate; reference the durationMinParam and
durationMaxParam useMemo callbacks and their dependency arrays when making this
change.
There was a problem hiding this comment.
♻️ Duplicate comments (1)
ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsx (1)
90-104:⚠️ Potential issue | 🟡 MinorValidate custom duration inputs before converting to seconds.
At Line 94 and Line 102, truthy checks still allow invalid numeric inputs (e.g. negative values) and silently drop
0. Please guard for finite, non-negative numbers before conversion.Suggested fix
+ const toSeconds = (minutes) => { + if (minutes == null) return null; + if (!Number.isFinite(minutes) || minutes < 0) return null; + return Math.floor(minutes * 60); + }; + const durationMinParam = React.useMemo(() => { if (!durationParam || durationParam === CS.DURATION.ALL) return null; if (durationParam === CS.DURATION.SHORT) return null; if (durationParam === CS.DURATION.LONG) return LONG_DURATION_SECONDS; - if (durationParam === CS.DURATION.CUSTOM && customMinMinutes) return customMinMinutes * 60; + if (durationParam === CS.DURATION.CUSTOM) return toSeconds(customMinMinutes); return null; }, [durationParam, customMinMinutes]); const durationMaxParam = React.useMemo(() => { if (!durationParam || durationParam === CS.DURATION.ALL) return null; if (durationParam === CS.DURATION.SHORT) return SHORT_DURATION_SECONDS; if (durationParam === CS.DURATION.LONG) return null; - if (durationParam === CS.DURATION.CUSTOM && customMaxMinutes) return customMaxMinutes * 60; + if (durationParam === CS.DURATION.CUSTOM) return toSeconds(customMaxMinutes); return null; }, [durationParam, customMaxMinutes]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsx` around lines 90 - 104, The durationMinParam and durationMaxParam use truthy checks that drop 0 and allow invalid numbers; update the guards in the React.useMemo blocks for durationMinParam and durationMaxParam to validate customMinMinutes/customMaxMinutes with a finite, non-negative numeric check (e.g. Number.isFinite(value) && value >= 0) before converting minutes to seconds, and keep the existing branches for CS.DURATION.SHORT, CS.DURATION.LONG, CS.DURATION.CUSTOM and the constants LONG_DURATION_SECONDS/SHORT_DURATION_SECONDS unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In
`@ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsx`:
- Around line 90-104: The durationMinParam and durationMaxParam use truthy
checks that drop 0 and allow invalid numbers; update the guards in the
React.useMemo blocks for durationMinParam and durationMaxParam to validate
customMinMinutes/customMaxMinutes with a finite, non-negative numeric check
(e.g. Number.isFinite(value) && value >= 0) before converting minutes to
seconds, and keep the existing branches for CS.DURATION.SHORT, CS.DURATION.LONG,
CS.DURATION.CUSTOM and the constants
LONG_DURATION_SECONDS/SHORT_DURATION_SECONDS unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: d63556a3-2010-4c94-bf8e-8ea9b281e44b
📒 Files selected for processing (1)
ui/page/claim/internal/claimPageComponent/internal/channelPage/tabs/contentTab/internal/searchResults.jsx
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.
Issue #2855
Add search filter options to channel page search
Integrate SearchOptions into channel content tab, allowing users to filter search results by media type, upload date, sort order, duration, and exact match.
Adds isChannelSearch mode to SearchOptions component with a dedicated media type filter UI.
Summary by CodeRabbit
New Features
Improvements