release: categories count update

Release

Author: preda-bogdan

assets/src/Components/CategoriesTabs.js

@@ -8,6 +8,7 @@ const CategoriesTabs = ( {
 	count,
 	category,
 	setCurrentCategory,
+	showCount = false,
 } ) => {
 	return (
 		<div className="editor-tabs">
@@ -31,7 +32,9 @@ const CategoriesTabs = ( {
 						} }
 					>
 						<span className="editor">{ categories[ key ] }</span>
-						<span className="count">{ count[ key ] }</span>
+						{ showCount && (
+							<span className="count">{ count[ key ] }</span>
+						) }
 					</a>
 				);
 			} ) }

assets/src/Components/CategorySelector.js

@@ -10,6 +10,7 @@ const CategorySelector = ( {
 	count,
 	category,
 	setCurrentCategory,
+	showCount = false,
 } ) => {
 	const [ open, setOpen ] = useState( false );
 	const toggleDropdown = () => setOpen( ! open );
@@ -22,7 +23,7 @@ const CategorySelector = ( {
 		<div className={ wrapClasses }>
 			<Button onClick={ toggleDropdown } className="select ob-dropdown">
 				<span>{ categories[ category ] }</span>
-				<span className="count">{ count[ category ] }</span>
+				<span className="count">{ showCount ? count[ category ] : '' }</span>
 				<Dashicon
 					size={ 14 }
 					icon={ open ? 'arrow-up-alt2' : 'arrow-down-alt2' }
@@ -58,9 +59,11 @@ const CategorySelector = ( {
 													<span>
 														{ categories[ key ] }
 													</span>
-													<span className="count">
-														{ count[ key ] }
-													</span>
+													{ showCount && (
+														<span className="count">
+															{ count[ key ] }
+														</span>
+													) }
 												</a>
 											</li>
 										);

assets/src/Components/Search.js

@@ -19,6 +19,7 @@ const Search = ( {
 	setCurrentEditor,
 	query,
 	className,
+	showCount = false,
 } ) => {
 	const [ open, setOpen ] = useState( false );
 	const toggleDropdown = () => setOpen( ! open );
@@ -72,9 +73,11 @@ const Search = ( {
 																]
 															}
 														</span>
-														<span className="count">
-															{ count[ key ] }
-														</span>
+														{ showCount && (
+															<span className="count">
+																{ count[ key ] }
+															</span>
+														) }
 													</a>
 												</li>
 											);
@@ -189,9 +192,11 @@ const Search = ( {
 																	.niceName
 															}
 														</span>
-														<span className="count">
-															{ count[ key ] }
-														</span>
+														{ showCount && (
+															<span className="count">
+																{ count[ key ] }
+															</span>
+														) }
 													</a>
 												</li>
 											);

assets/src/Components/StarterSites/Filters.js

@@ -71,6 +71,9 @@ const Filters = ( {
 
 	const counted = getCounts();
 
+	const activeCount = getSitesForBuilder( editor ).length;
+	const showCount = 50 <= activeCount;
+
 	return (
 		<>
 			{ ! isOnboarding && ! migration && (
@@ -89,6 +92,7 @@ const Filters = ( {
 							categories={ CATEGORIES }
 							editors={ EDITOR_MAP }
 							onlyProSites={ onlyProBuilders }
+							showCount={ showCount }
 						/>
 						{ isTabbedEditor && (
 							<EditorSelector
@@ -101,6 +105,7 @@ const Filters = ( {
 							<CategorySelector
 								count={ counted.categories }
 								categories={ CATEGORIES }
+								showCount={ showCount }
 							/>
 						) }
 					</div>
@@ -121,10 +126,19 @@ const Filters = ( {
 							{ tiobDash.strings.starterSitesTabDescription }
 						</p>
 					) }
-					<EditorSelector
-						count={ counted.builders }
-						EDITOR_MAP={ EDITOR_MAP }
-					/>
+					{ isTabbedEditor && (
+						<EditorSelector
+							count={ counted.builders }
+							EDITOR_MAP={ EDITOR_MAP }
+						/>
+					) }
+					{ ! isTabbedEditor && (
+						<CategorySelector
+							count={ counted.categories }
+							categories={ CATEGORIES }
+							showCount={ showCount }
+						/>
+					) }
 
 					<Search
 						count={
@@ -135,6 +149,7 @@ const Filters = ( {
 						categories={ CATEGORIES }
 						editors={ EDITOR_MAP }
 						onlyProSites={ onlyProBuilders }
+						showCount={ showCount }
 					/>
 
 					{ isTabbedEditor && (
@@ -148,6 +163,7 @@ const Filters = ( {
 						<CategoriesTabs
 							categories={ CATEGORIES }
 							count={ counted.categories }
+							showCount={ showCount }
 						/>
 					) }
 					{ ! tiobDash.isValidLicense && (