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.

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

Protect: Refactor useProtectData hook #38637

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -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;
}
8 changes: 7 additions & 1 deletion projects/plugins/protect/src/js/components/summary/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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' ),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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', '<' );
Expand Down Expand Up @@ -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 }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,6 @@ const PaidList = ( { list } ) => {
firstDetected,
fixedIn,
fixedOn,
fixed_on,
icon,
fixable,
id,
Expand All @@ -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 }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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( () => {
Expand All @@ -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:
Expand Down Expand Up @@ -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,
};
Expand Down
Loading
Loading