Refactor useProtectData hook (#38637)

projects/plugins/protect/src/js/components/paid-plan-gate/index.tsx

@@ -0,0 +1,29 @@
+import { Navigate } from 'react-router-dom';
+import useProtectData from '../../hooks/use-protect-data';
+
+/**
+ * Paid Plan Gate
+ *
+ * Custom route that only renders when the user has a paid plan.
+ *
+ * @param {object}      props          - The component props.
+ * @param {JSX.Element} props.children - The component to render if the user has a paid plan.
+ * @param {string}      props.redirect - The alternate route to redirect to if the user does not have a paid plan.
+ *
+ * @returns {JSX.Element} The PaidPlanRoute component.
+ */
+export default function PaidPlanGate( {
+	children,
+	redirect = '/',
+}: {
+	children?: JSX.Element;
+	redirect?: string;
+} ): JSX.Element {
+	const { hasRequiredPlan } = useProtectData();
+
+	if ( ! hasRequiredPlan ) {
+		return <Navigate to={ redirect } replace />;
+	}
+
+	return children;
+}

projects/plugins/protect/src/js/components/summary/index.jsx

@@ -8,7 +8,13 @@ import OnboardingPopover from '../onboarding-popover';
 
 const Summary = () => {
 	const [ isSm ] = useBreakpointMatch( 'sm' );
-	const { numThreats, lastChecked, hasRequiredPlan } = useProtectData();
+	const {
+		counts: {
+			current: { threats: numThreats },
+		},
+		lastChecked,
+		hasRequiredPlan,
+	} = useProtectData();
 
 	// Popover anchors
 	const [ dailyScansPopoverAnchor, setDailyScansPopoverAnchor ] = useState( null );

projects/plugins/protect/src/js/components/threats-list/index.jsx

@@ -58,7 +58,7 @@ const ThreatsList = () => {
 					__( 'All %s threats', 'jetpack-protect' ),
 					list.length
 				);
-			case 'wordpress':
+			case 'core':
 				return sprintf(
 					/* translators: placeholder is the amount of WordPress threats found on the site. */
 					__( '%1$s WordPress %2$s', 'jetpack-protect' ),

projects/plugins/protect/src/js/components/threats-list/navigation.jsx

@@ -15,14 +15,17 @@ import Navigation, { NavigationItem, NavigationGroup } from '../navigation';
 
 const ThreatsNavigation = ( { selected, onSelect, sourceType = 'scan', statusFilter = 'all' } ) => {
 	const {
-		plugins,
-		themes,
-		numThreats,
-		numCoreThreats,
-		numFilesThreats,
-		numDatabaseThreats,
+		results: { plugins, themes },
+		counts: {
+			current: {
+				threats: numThreats,
+				core: numCoreThreats,
+				files: numFilesThreats,
+				database: numDatabaseThreats,
+			},
+		},
 		hasRequiredPlan,
-	} = useProtectData( { sourceType, statusFilter } );
+	} = useProtectData( { sourceType, filter: { status: statusFilter } } );
 
 	const { recordEvent } = useAnalyticsTracks();
 	const [ isSmallOrLarge ] = useBreakpointMatch( 'lg', '<' );
@@ -82,7 +85,7 @@ const ThreatsNavigation = ( { selected, onSelect, sourceType = 'scan', statusFil
 				checked={ true }
 			/>
 			<NavigationItem
-				id="wordpress"
+				id="core"
 				label={ __( 'WordPress', 'jetpack-protect' ) }
 				icon={ coreIcon }
 				badge={ numCoreThreats }

projects/plugins/protect/src/js/components/threats-list/paid-list.jsx

@@ -189,7 +189,6 @@ const PaidList = ( { list } ) => {
 						firstDetected,
 						fixedIn,
 						fixedOn,
-						fixed_on,
 						icon,
 						fixable,
 						id,
@@ -210,7 +209,7 @@ const PaidList = ( { list } ) => {
 							filename={ filename }
 							firstDetected={ firstDetected }
 							fixedIn={ fixedIn }
-							fixedOn={ fixedOn ?? fixed_on }
+							fixedOn={ fixedOn }
 							icon={ icon }
 							fixable={ fixable }
 							id={ id }

projects/plugins/protect/src/js/components/threats-list/use-threats-list.js

@@ -55,9 +55,11 @@ const flattenThreats = ( data, newData ) => {
  */
 const useThreatsList = ( { source, status } = { source: 'scan', status: 'all' } ) => {
 	const [ selected, setSelected ] = useState( 'all' );
-	const { plugins, themes, core, files, database } = useProtectData( {
+	const {
+		results: { plugins, themes, core, files, database },
+	} = useProtectData( {
 		sourceType: source,
-		statusFilter: status,
+		filter: { status, key: selected },
 	} );
 
 	const { unsortedList, item } = useMemo( () => {
@@ -66,19 +68,19 @@ const useThreatsList = ( { source, status } = { source: 'scan', status: 'all' }
 			// Core, files, and database data threats are already grouped together,
 			// so we just need to flatten them and add the appropriate icon.
 			switch ( selected ) {
-				case 'wordpress':
+				case 'core':
 					return {
 						unsortedList: flattenThreats( core, { icon: coreIcon } ),
 						item: core,
 					};
 				case 'files':
 					return {
-						unsortedList: flattenThreats( files, { icon: filesIcon } ),
+						unsortedList: flattenThreats( { threats: files }, { icon: filesIcon } ),
 						item: files,
 					};
 				case 'database':
 					return {
-						unsortedList: flattenThreats( database, { icon: databaseIcon } ),
+						unsortedList: flattenThreats( { threats: database }, { icon: databaseIcon } ),
 						item: database,
 					};
 				default:
@@ -109,8 +111,8 @@ const useThreatsList = ( { source, status } = { source: 'scan', status: 'all' }
 				...flattenThreats( core, { icon: coreIcon } ),
 				...flattenThreats( plugins, { icon: pluginsIcon } ),
 				...flattenThreats( themes, { icon: themesIcon } ),
-				...flattenThreats( files, { icon: filesIcon } ),
-				...flattenThreats( database, { icon: databaseIcon } ),
+				...flattenThreats( { threats: files }, { icon: filesIcon } ),
+				...flattenThreats( { threats: database }, { icon: databaseIcon } ),
 			],
 			item: null,
 		};