LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Only show subscription filter when more subs than initial limit

Browse source
This commit is contained in:
David Granado 2022-01-27 22:25:31 -06:00 committed by Thomas Zarebczan
parent 652d98f6c6
commit c7a23058c8
2 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/component/common/debounced-input.jsx
View file

@ -6,15 +6,15 @@ import useDebounce from 'effects/use-debounce';
const FILTER_DEBOUNCE_MS = 300; const FILTER_DEBOUNCE_MS = 300;
interface Props { interface Props {
defaultValue?: string;
icon?: string; icon?: string;
value?: string;
placeholder?: string; placeholder?: string;
onChange: (newValue: string) => any; onChange: (newValue: string) => any;
} }
export default function DebouncedInput(props: Props) { export default function DebouncedInput(props: Props) {
const { icon, value = '', placeholder = '', onChange } = props; const { defaultValue = '', icon, placeholder = '', onChange } = props;
const [rawValue, setRawValue] = useState(value); const [rawValue, setRawValue] = useState(defaultValue);
const debouncedValue: string = useDebounce(rawValue, FILTER_DEBOUNCE_MS); const debouncedValue: string = useDebounce(rawValue, FILTER_DEBOUNCE_MS);
useEffect(() => { useEffect(() => {

2
ui/component/sideNavigation/view.jsx
View file

@ -304,9 +304,11 @@ function SideNavigation(props: Props) {
return ( return (
<> <>
<ul className="navigation__secondary navigation-links"> <ul className="navigation__secondary navigation-links">
{subscriptions.length > FOLLOWED_ITEM_INITIAL_LIMIT && (
<li className="navigation-item"> <li className="navigation-item">
<DebouncedInput icon={ICONS.SEARCH} placeholder={__('Filter')} onChange={setSubscriptionFilter} /> <DebouncedInput icon={ICONS.SEARCH} placeholder={__('Filter')} onChange={setSubscriptionFilter} />
</li> </li>
)}
{displayedSubscriptions.map((subscription) => ( {displayedSubscriptions.map((subscription) => (
<SubscriptionListItem key={subscription.uri} subscription={subscription} /> <SubscriptionListItem key={subscription.uri} subscription={subscription} />
))} ))}