Refactor

projects/js-packages/components/components/threats-data-views/index.tsx

@@ -23,68 +23,56 @@ import ThreatSeverityBadge from '../threat-severity-badge';
 import { THREAT_STATUSES, THREAT_TYPES } from './constants';
 import FixerStatusIcon, { FixerStatusBadge } from './fixer-status';
 import styles from './styles.module.scss';
-import { type Threat } from './types';
+import { type Threat, type ThreatStatus } from './types';
 import { getThreatIcon, getThreatSubtitle, getThreatType } from './utils';
 
 /**
  * ToggleGroupControl component for filtering threats by status.
- * @param {object}   props          - Component props.
- * @param {Filter[]} props.filters  - Current filters value.
- * @param {Function} props.onChange - Callback function to update the filter value.
- * @param {Array}    props.data     - Array of threats data with status values.
+ * @param {object}   props                          - Component props.
+ * @param {number}   props.activeThreatsCount       - Number of active threats.
+ * @param {number}   props.historicThreatsCount     - Number of historic threats.
+ * @param {boolean}  props.isViewingActiveThreats   - Whether the active status is selected.
+ * @param {boolean}  props.isViewingHistoricThreats - Whether the historic status is selected.
+ * @param {Function} props.onStatusFilterChange     - Callback function to handle the status filter change.
  * @return {JSX.Element|null} The component or null.
  */
-export function ThreatsStatusFilter( {
-	filters,
-	onChange,
-	data,
+export function ThreatsStatusToggleGroupControl( {
+	activeThreatsCount,
+	historicThreatsCount,
+	isViewingActiveThreats,
+	isViewingHistoricThreats,
+	onStatusFilterChange,
 }: {
-	filters: Filter[];
-	onChange: ( newValue: string ) => void;
-	data: Threat[];
+	activeThreatsCount: number;
+	historicThreatsCount: number;
+	isViewingActiveThreats: boolean;
+	isViewingHistoricThreats: boolean;
+	onStatusFilterChange: ( newValue: string ) => void;
 } ): JSX.Element {
-	const activeCount = useMemo(
-		() => data.filter( item => item.status === 'current' ).length,
-		[ data ]
-	);
-	const historicCount = useMemo(
-		() => data.filter( item => [ 'fixed', 'ignored' ].includes( item.status ) ).length,
-		[ data ]
-	);
-
-	if ( ! ( activeCount && historicCount ) ) {
+	if ( ! ( activeThreatsCount && historicThreatsCount ) ) {
 		return null;
 	}
 
-	const isExactStatusSelected = ( statuses: string[] ) =>
-		filters.some(
-			filter =>
-				filter.field === 'status' &&
-				Array.isArray( filter.value ) &&
-				filter.value.length === statuses.length &&
-				statuses.every( status => filter.value.includes( status ) )
-		);
-
 	let selectedValue = '';
-	if ( isExactStatusSelected( [ 'current' ] ) ) {
+	if ( isViewingActiveThreats ) {
 		selectedValue = 'active';
-	} else if ( isExactStatusSelected( [ 'fixed', 'ignored' ] ) ) {
+	} else if ( isViewingHistoricThreats ) {
 		selectedValue = 'historic';
 	}
 
 	return (
 		<ToggleGroupControl
 			className={ styles[ 'toggle-group-control' ] }
 			value={ selectedValue }
-			onChange={ onChange }
+			onChange={ onStatusFilterChange }
 		>
 			<ToggleGroupControlOption
 				value="active"
 				label={
 					<span>
 						{ sprintf(
 							/* translators: %d: number of active threats */ __( 'Active (%d)', 'jetpack' ),
-							activeCount
+							activeThreatsCount
 						) }
 					</span>
 				}
@@ -96,7 +84,7 @@ export function ThreatsStatusFilter( {
 						{ sprintf(
 							/* translators: %d: number of historic threats */
 							__( 'Historic (%d)', 'jetpack' ),
-							historicCount
+							historicThreatsCount
 						) }
 					</span>
 				}
@@ -450,6 +438,18 @@ export default function ThreatsDataViews( {
 		return result;
 	}, [ extensions, signatures, dataFields, view ] );
 
+	const isStatusFilterSelected = ( threatStatuses: ThreatStatus[] ) =>
+		view.filters.some(
+			filter =>
+				filter.field === 'status' &&
+				Array.isArray( filter.value ) &&
+				filter.value.length === threatStatuses.length &&
+				threatStatuses.every( threatStatus => filter.value.includes( threatStatus ) )
+		);
+
+	const isViewingActiveThreats = isStatusFilterSelected( [ 'current' ] );
+	const isViewingHistoricThreats = isStatusFilterSelected( [ 'fixed', 'ignored' ] );
+
 	/**
 	 * DataView actions - collection of operations that can be performed upon each record.
 	 *
@@ -556,7 +556,7 @@ export default function ThreatsDataViews( {
 	 *
 	 * @param {string} newStatus - The new status filter value.
 	 */
-	const handleStatusChange = useCallback(
+	const onStatusFilterChange = useCallback(
 		( newStatus: string ) => {
 			const updatedFilters = view.filters.filter( filter => filter.field !== 'status' );
 
@@ -582,6 +582,22 @@ export default function ThreatsDataViews( {
 		[ view ]
 	);
 
+	/**
+	 * Compute the number of active and historic threats.
+	 */
+	const activeThreatsCount = useMemo(
+		() => data.filter( item => item.status === 'current' ).length,
+		[ data ]
+	);
+
+	/**
+	 * Compute the number of active and historic threats.
+	 */
+	const historicThreatsCount = useMemo(
+		() => data.filter( item => [ 'fixed', 'ignored' ].includes( item.status ) ).length,
+		[ data ]
+	);
+
 	return (
 		<DataViews
 			actions={ actions }
@@ -594,10 +610,12 @@ export default function ThreatsDataViews( {
 			paginationInfo={ paginationInfo }
 			view={ view }
 			header={
-				<ThreatsStatusFilter
-					filters={ view.filters }
-					onChange={ handleStatusChange }
-					data={ data }
+				<ThreatsStatusToggleGroupControl
+					activeThreatsCount={ activeThreatsCount }
+					historicThreatsCount={ historicThreatsCount }
+					isViewingActiveThreats={ isViewingActiveThreats }
+					isViewingHistoricThreats={ isViewingHistoricThreats }
+					onStatusFilterChange={ onStatusFilterChange }
 				/>
 			}
 		/>