Merge pull request #1622 from fudgeu/issue/1618

#1618 - Widget filtering bug

src/components/catalog.jsx

@@ -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
@@ -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])
 
@@ -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'>