/** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; import { useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { desktop, closeSmall } from '@wordpress/icons'; /** * SolidWP dependencies */ import { Text, TextWeight } from '@ithemes/ui'; /** * Internal dependencies */ import { trustedDevicesStore } from '@ithemes/security.packages.data'; import { getSelf } from '@ithemes/security-utils'; import { useLocalStorage } from '@ithemes/security-hocs'; import Device from './components/device'; import TrustedDevicesPagination from './components/pagination'; import TrustedDevicesHeader from './components/header'; import { StyledApp, StyledHeadingSection, StyledHeading, StyledSpinner, StyledNotice, StyledDevices, StyledNoDevices, StyledDismissButton, StyledSaveButton, } from './styles'; import './styles.scss'; export function isImmutableDevice( device ) { return device.status.raw === 'approved' || device.status.raw === 'denied'; } export default function App( { userId } ) { const [ isDismissed, setIsDismissed ] = useLocalStorage( 'itsecNoTrustedDevices' ); const [ hideImmutableDeviceNotice, setHideImmutableDeviceNotice ] = useLocalStorage( 'itsecImmutableTrustedDeviceNotice' ); const { query, saveEditedItems } = useDispatch( trustedDevicesStore ); useEffect( () => { query( 'profile', userId, { per_page: 6 } ); }, [ query, userId ] ); const { devices, isQuerying, hasChanges, isSaving } = useSelect( ( select ) => ( { devices: select( trustedDevicesStore ).getQueryResults( 'profile' ), isQuerying: select( trustedDevicesStore ).isQuerying( 'profile' ), hasChanges: select( trustedDevicesStore ).getDirtyItems().length > 0, isSaving: select( trustedDevicesStore ).isSavingAnyItems(), } ), [] ); const showNotice = devices.find( isImmutableDevice ); return ( { isQuerying && ( } iconPosition="right" weight={ TextWeight.HEAVY } text={ __( 'Fetching devices…', 'it-l10n-ithemes-security-pro' ) } /> ) } { devices.length > 0 && ( <> { ( showNotice && ! hideImmutableDeviceNotice ) && setHideImmutableDeviceNotice( true ) } text={ __( 'Devices set to “Approved” or “Denied” statuses can not be changed or edited', 'it-l10n-ithemes-security-pro' ) } /> } { devices.map( ( device, i ) => ( ) ) } ) } { ( ! isQuerying && devices.length === 0 && ! isDismissed ) && ( setIsDismissed( true ) } /> ) } { saveEditedItems(); } } text={ __( 'Save Changes', 'it-l10n-ithemes-security-pro' ) } /> ); }