42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import { useDispatch, useSelect } from '@wordpress/data';
|
|
import { useEffect } from '@wordpress/element';
|
|
import { storeName } from '../../store';
|
|
import { recordEvent } from '../../events';
|
|
|
|
/**
|
|
* This component is simplified version of the original one from @wordpress/editor package.
|
|
* The original component can be found here: https://github.com/WordPress/gutenberg/blob/46446b853d740c309c0675c7bf2ca4170a618c42/packages/editor/src/components/autosave-monitor/index.js
|
|
* The main reason for the own solution is that the original component needs to initialize the @wordpress/editor store.
|
|
* We could use the action `setEditedPost` from the editor package, but it is only in a newer version of the editor package.
|
|
*/
|
|
export function AutosaveMonitor() {
|
|
const { hasEdits, autosaveInterval } = useSelect(
|
|
( select ) => ( {
|
|
hasEdits: select( storeName ).hasEdits(),
|
|
autosaveInterval: select( storeName ).getAutosaveInterval(),
|
|
} ),
|
|
[]
|
|
);
|
|
|
|
const { saveEditedEmail } = useDispatch( storeName );
|
|
|
|
useEffect( () => {
|
|
let autosaveTimer: NodeJS.Timeout | undefined;
|
|
|
|
if ( hasEdits && autosaveInterval > 0 ) {
|
|
autosaveTimer = setTimeout( () => {
|
|
void saveEditedEmail();
|
|
recordEvent( 'editor_content_auto_saved' );
|
|
}, autosaveInterval * 1000 );
|
|
}
|
|
|
|
return () => {
|
|
if ( autosaveTimer ) {
|
|
clearTimeout( autosaveTimer );
|
|
}
|
|
};
|
|
}, [ hasEdits, autosaveInterval, saveEditedEmail ] );
|
|
|
|
return null;
|
|
}
|