Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#1618 - Widget filtering bug #1622

Open
wants to merge 1 commit into
base: dev/10.3.0
Choose a base branch
from
Open

#1618 - Widget filtering bug #1622

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 17 additions & 8 deletions src/components/catalog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,17 +39,17 @@ const Catalog = ({widgets = [], isLoading = true}) => {
const [filteredWidgets, isFiltered] = useMemo(() => {
let isFiltered = false

// in_catalog widgets are already being rendered via featured widgets
// append remaining widgets that are playable but not in_catalog
// create initial set of widgets to filter from - only including playable widgets
let results = widgets.filter(w => {
return parseInt(w.is_playable) == 1 && parseInt(w.in_catalog) == 0
return parseInt(w.is_playable) === 1
})

// filters are active, only match active filters
if(state.activeFilters.length){
isFiltered = true

// find widgets that have all the active filters
results = widgets.filter(w => {
results = results.filter(w => {
const {features, supported_data, accessibility_keyboard, accessibility_reader} = w.meta_data
return state.activeFilters.every(f =>{
if (features.includes(f) || supported_data.includes(f)) return true
Expand All @@ -68,6 +68,12 @@ const Catalog = ({widgets = [], isLoading = true}) => {
results = results.filter(w => re.test(w.name))
}

// if there are no filters set, take out the featured widgets (those with in_catalog = 1)
// when no filter is present, a featured section appears already showing featured widgets
if (!isFiltered) {
results = results.filter(w => parseInt(w.in_catalog) !== 1)
}

return [results, isFiltered]
}, [widgets, state.searchText, state.activeFilters])

Expand Down Expand Up @@ -262,25 +268,28 @@ const Catalog = ({widgets = [], isLoading = true}) => {
className={`filter-toggle desktop-only ${state.showingFilters ? 'close-mode' : ''}`}
aria-label={state.showingFilters ? 'Feature filters drawer open' : 'Filter catalog by features'}
onClick={ filterLinkClickHandler }>
Feature</button>
Feature
</button>
<button
className={`filter-toggle desktop-only ${state.showingAccessibility ? 'close-mode' : ''}`}
aria-label={state.showingAccessibility ? 'Accessibility filters drawer open' : 'Filter catalog by accessibility'}
onClick={ accessibilityLinkClickHandler }>
Accessibility</button>
Accessibility
</button>
<div className={'search' + (state.searchText === '' ? '' : ' not-empty')}>
<input value={state.searchText} onChange={(e) => {setState({...state, searchText: e.target.value})}} type='text'/>
<div className='search-icon'>
<svg viewBox='0 0 250.313 250.313'>
<path d='m244.19 214.6l-54.379-54.378c-0.289-0.289-0.628-0.491-0.93-0.76 10.7-16.231 16.945-35.66 16.945-56.554 0-56.837-46.075-102.91-102.91-102.91s-102.91 46.075-102.91 102.91c0 56.835 46.074 102.91 102.91 102.91 20.895 0 40.323-6.245 56.554-16.945 0.269 0.301 0.47 0.64 0.759 0.929l54.38 54.38c8.169 8.168 21.413 8.168 29.583 0 8.168-8.169 8.168-21.413 0-29.582zm-141.28-44.458c-37.134 0-67.236-30.102-67.236-67.235 0-37.134 30.103-67.236 67.236-67.236 37.132 0 67.235 30.103 67.235 67.236s-30.103 67.235-67.235 67.235z'
clipRule='evenodd'
fillRule='evenodd'/>
fillRule='evenodd'
/>
</svg>
</div>
{ searchCloseRender }
</div>
</aside>

</div>

<div aria-hidden={!isMobileDevice()} className='mobile-filter-select mobile-only'>
Expand Down
Loading