added main store, which contains the selectors from mindData variable

classes/class-assets.php

@@ -60,8 +60,8 @@ class Mind_Assets {
 			'mind-editor',
 			'mindData',
 			array(
-				'connected'   => ! ! $openai_key,
-				'settingsURL' => admin_url( 'admin.php?page=mind' ),
+				'connected'       => ! ! $openai_key,
+				'settingsPageURL' => admin_url( 'admin.php?page=mind' ),
 			)
 		);
 

src/index.js

@@ -6,6 +6,7 @@ import './style.scss';
 /**
  * Internal dependencies
  */
+import './store/core';
 import './store/blocks';
 import './store/popup';
 import './popup';

src/popup/components/not-connected-screen/index.js

@@ -7,10 +7,17 @@ import './style.scss';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-
-const { settingsURL } = window.mindData;
+import { useSelect } from '@wordpress/data';
 
 export default function NotConnectedScreen() {
+	const { settingsPageURL } = useSelect((select) => {
+		const { getSettingsPageURL } = select('mind');
+
+		return {
+			settingsPageURL: getSettingsPageURL(),
+		};
+	});
+
 	return (
 		<div className="mind-popup-connected-screen">
 			<h2>{__('OpenAI Key', 'mind')}</h2>
@@ -25,7 +32,7 @@ export default function NotConnectedScreen() {
 			<div>
 				<a
 					className="mind-popup-connected-screen-button"
-					href={settingsURL}
+					href={settingsPageURL}
 				>
 					{__('Go to Settings', 'mind')}
 				</a>

src/popup/index.js

@@ -22,17 +22,15 @@ import Content from './components/content';
 import Footer from './components/footer';
 import NotConnectedScreen from './components/not-connected-screen';
 
-const { connected } = window.mindData;
-
 const POPUP_CONTAINER_CLASS = 'mind-popup-container';
 
 export default function Popup() {
 	const { setHighlightBlocks } = useDispatch('mind/blocks');
-
 	const { close, reset } = useDispatch('mind/popup');
 
-	const { isOpen, insertionPlace, loading, response } = useSelect(
+	const { connected, isOpen, insertionPlace, loading, response } = useSelect(
 		(select) => {
+			const { isConnected } = select('mind');
 			const {
 				isOpen: checkIsOpen,
 				getInsertionPlace,
@@ -41,6 +39,7 @@ export default function Popup() {
 			} = select('mind/popup');
 
 			return {
+				connected: isConnected(),
 				isOpen: checkIsOpen(),
 				insertionPlace: getInsertionPlace(),
 				loading: getLoading(),

src/store/core/index.js

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import * as selectors from './selectors';
+
+/**
+ * WordPress dependencies
+ */
+import { createReduxStore, register } from '@wordpress/data';
+
+const store = createReduxStore('mind', {
+	selectors,
+	reducer(state) {
+		return state;
+	},
+});
+
+register(store);

src/store/core/selectors.js

@@ -0,0 +1,9 @@
+const { connected, settingsPageURL } = window.mindData;
+
+export function isConnected() {
+	return connected === '1';
+}
+
+export function getSettingsPageURL() {
+	return settingsPageURL;
+}

src/store/popup/actions.js

@@ -8,6 +8,7 @@ import apiFetch from '@wordpress/api-fetch';
  * Internal dependencies.
  */
 import getSelectedBlocksContent from '../../utils/get-selected-blocks-content';
+import { isConnected } from '../core/selectors';
 
 export function open() {
 	return {
@@ -78,6 +79,10 @@ export function setError(error) {
 
 export function requestAI() {
 	return ({ dispatch, select }) => {
+		if (!isConnected) {
+			return;
+		}
+
 		const loading = select.getLoading();
 
 		if (loading) {