Back

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useDispatch, useSelect } from '@wordpress/data';
import { useCallback, useEffect, useState } from '@wordpress/element';
import { acceptBlockSuggestion } from '../lib/dom';
import { getBlockModalTextarea } from '../lib/drafts';
import { recordGuidelinesEvent } from '../lib/tracks';
import { AI_STORE_NAME } from '../store';
import DiffView from './diff-view';
 
// Renders only the diff view. Accept/Dismiss and Improve buttons live in
// BlockSuggestionButtons, injected as a separate row above the modal action bar.
export default function BlockSuggestionActions( { blockName, blockModal } ) {
	const suggestion = useSelect(
		select => select( AI_STORE_NAME ).getSuggestion( blockName ),
		[ blockName ]
	);
	const blockLoading = useSelect(
		select => select( AI_STORE_NAME ).isSectionLoading( blockName ),
		[ blockName ]
	);
	const { clearSuggestion } = useDispatch( AI_STORE_NAME );
 
	const [ original, setOriginal ] = useState( '' );
	const [ textareaHeight, setTextareaHeight ] = useState( null );
 
	// Clear stale suggestion when the modal closes (component unmounts).
	useEffect( () => {
		return () => clearSuggestion( blockName );
	}, [ blockName, clearSuggestion ] );
 
	// Toggle shimmer and suggestion classes on the modal.
	useEffect( () => {
		if ( ! blockModal ) {
			return;
		}
 
		// Capture textarea content and height before hiding it.
		if ( suggestion && ! blockModal.classList.contains( 'has-jetpack-suggestion' ) ) {
			const textarea = getBlockModalTextarea( blockModal );
			if ( textarea ) {
				setOriginal( textarea.value || '' );
				if ( textarea.offsetHeight > 0 ) {
					setTextareaHeight( textarea.offsetHeight );
				} else {
					const rows = parseInt( textarea.getAttribute( 'rows' ), 10 ) || 6;
					setTextareaHeight( rows * 20 + 20 );
				}
			}
		}
 
		blockModal.classList.toggle( 'has-jetpack-suggestion', !! suggestion );
		blockModal.classList.toggle( 'is-jetpack-loading', blockLoading && ! suggestion );
		return () => {
			blockModal.classList.remove( 'has-jetpack-suggestion', 'is-jetpack-loading' );
		};
	}, [ blockModal, suggestion, blockLoading ] );
 
	const handleAccept = useCallback( () => {
		recordGuidelinesEvent( 'accept', { type: 'block', slug: blockName } );
		acceptBlockSuggestion( blockModal, blockName, suggestion, clearSuggestion );
	}, [ blockModal, blockName, suggestion, clearSuggestion ] );
 
	if ( ! suggestion ) {
		return null;
	}
 
	return (
		<DiffView
			original={ original }
			suggestion={ suggestion }
			onAccept={ handleAccept }
			height={ textareaHeight }
		/>
	);
}