Update preview logic, render select dialog conditionally

src/components/select-dialog.tsx

@@ -2,27 +2,16 @@
  * WordPress dependencies
  */
 import * as React from 'react';
-import { Button, Modal, FocusableIframe } from '@wordpress/components';
+import { Modal, FocusableIframe } from '@wordpress/components';
 
 import { baseUrl } from '@/globals';
 
 type DialogProps = {
+	setOpen: Function;
   onSelectForm: Function;
 };
 
-type DialogState = {
-  isOpen: boolean;
-};
-
-class SelectDialog extends React.Component<DialogProps, DialogState> {
-	constructor( props: any ) {
-		super( props );
-
-		this.state = {
-			isOpen: false,
-		};
-	}
-
+class SelectDialog extends React.Component<DialogProps> {
 	componentDidMount() {
 		window.addEventListener( 'message', this.handlePostMessage, false );
 	}
@@ -32,32 +21,25 @@ class SelectDialog extends React.Component<DialogProps, DialogState> {
 	}
 
 	handlePostMessage = ( event: MessageEvent ) => {
-		if (event.origin === baseUrl && event.data.type === 'cog-form-selected') {
+		if ( event.origin === baseUrl && event.data.type === 'cog-form-selected' ) {
 			this.props.onSelectForm( event.data );
-			this.setState({ isOpen: false }); // Close Dialog
+			this.props.setOpen( false );
 		}
 	}
 
 	render() {
 		return (
-			<div>
-				<Button isPrimary={true} onClick={ () => this.setState( { isOpen: true } ) }>
-					Choose a form
-				</Button>
-				{ this.state.isOpen && (
-					<Modal
-						title="Cognito Forms"
-						className="cognito-modal"
-						onRequestClose={ () => this.setState( { isOpen: false } ) }
-						shouldCloseOnClickOutside={ false }
-					>
-						<FocusableIframe
-							style={ { width: '500px', height: '500px', display: 'block' } }
-							src={ `${ baseUrl }/integrations/cms` }
-						></FocusableIframe>
-					</Modal>
-				) }
-			</div>
+			<Modal
+				title="Cognito Forms"
+				className="cognito-modal"
+				onRequestClose={ () => this.props.setOpen( false ) }
+				shouldCloseOnClickOutside={ false }
+			>
+				<FocusableIframe
+					style={ { width: '500px', height: '500px', display: 'block' } }
+					src={ `${ baseUrl }/integrations/cms` }
+				></FocusableIframe>
+			</Modal>
 		);
 	}
 }