Refactor application store architecture

.changeset/few-coins-design.md

@@ -0,0 +1,5 @@
+---
+"wpgraphql-ide": major
+---
+
+Refactored stores, including renaming 'wpgraphql-ide' to 'wpgraphql-ide/app', and adding additional stores such as 'wpgraphql-ide/editor-toolbar

src/App.jsx

@@ -19,7 +19,7 @@ const setInitialState = () => {
 		setQuery,
 		setShouldRenderStandalone,
 		setInitialStateLoaded,
-	} = useDispatch( 'wpgraphql-ide' );
+	} = useDispatch( 'wpgraphql-ide/app' );
 
 	if ( isDedicatedIdePage ) {
 		setShouldRenderStandalone( true );
@@ -108,11 +108,11 @@ export function App() {
 
 export function RenderApp() {
 	const isInitialStateLoaded = useSelect( ( select ) => {
-		return select( 'wpgraphql-ide' ).isInitialStateLoaded();
+		return select( 'wpgraphql-ide/app' ).isInitialStateLoaded();
 	} );
 
 	const shouldRenderStandalone = useSelect( ( select ) => {
-		return select( 'wpgraphql-ide' ).shouldRenderStandalone();
+		return select( 'wpgraphql-ide/app' ).shouldRenderStandalone();
 	} );
 
 	if ( ! isInitialStateLoaded ) {

src/components/Editor.jsx

@@ -32,12 +32,12 @@ import '../../styles/explorer.css';
 
 export function Editor() {
 	const query = useSelect( ( select ) =>
-		select( 'wpgraphql-ide' ).getQuery()
+		select( 'wpgraphql-ide/app' ).getQuery()
 	);
 	const shouldRenderStandalone = useSelect( ( select ) =>
-		select( 'wpgraphql-ide' ).shouldRenderStandalone()
+		select( 'wpgraphql-ide/app' ).shouldRenderStandalone()
 	);
-	const { setDrawerOpen } = useDispatch( 'wpgraphql-ide' );
+	const { setDrawerOpen } = useDispatch( 'wpgraphql-ide/app' );
 
 	const [ isAuthenticated, setIsAuthenticated ] = useState( () => {
 		const storedState = localStorage.getItem( 'graphiql:isAuthenticated' );

src/components/EditorDrawer.jsx

@@ -6,10 +6,10 @@ export function EditorDrawer( { children } ) {
 	const buttonLabel = '🚀';
 
 	const isDrawerOpen = useSelect( ( select ) => {
-		return select( 'wpgraphql-ide' ).isDrawerOpen();
+		return select( 'wpgraphql-ide/app' ).isDrawerOpen();
 	} );
 
-	const { setDrawerOpen } = useDispatch( 'wpgraphql-ide' );
+	const { setDrawerOpen } = useDispatch( 'wpgraphql-ide/app' );
 
 	return (
 		<div className="EditorDrawerRoot">

src/index.js

@@ -1,24 +1,23 @@
 // WordPress dependencies for hooks, data handling, and component rendering.
 import { createHooks } from '@wordpress/hooks';
-import { register } from '@wordpress/data';
 import { createRoot } from '@wordpress/element';
+import { registerStores, registerEditorToolbarButton } from './store';
 import * as GraphQL from "graphql/index.js";
 
 // Local imports including the store configuration and the main App component.
-import { store } from './store';
 import { App } from './App';
 
-// Register the store with wp.data to make it available throughout the plugin.
-register( store );
-
 // Create a central event hook system for the WPGraphQL IDE.
 export const hooks = createHooks();
 
+// Register all application stores.
+registerStores();
+
 // Expose a global variable for the IDE, facilitating extension through external scripts.
 window.WPGraphQLIDE = {
 	hooks,
-	store,
-	GraphQL
+	GraphQL,
+	registerEditorToolbarButton
 };
 
 /**

src/store/app-store.js

@@ -0,0 +1,109 @@
+import { createReduxStore } from '@wordpress/data';
+
+const initialState = {
+	isDrawerOpen: false,
+	shouldRenderStandalone: false,
+	isInitialStateLoaded: false,
+	registeredPlugins: {},
+	query: null,
+};
+
+const reducer = ( state = initialState, action ) => {
+	switch ( action.type ) {
+		case 'SET_RENDER_STANDALONE':
+			return {
+				...state,
+				shouldRenderStandalone: action.shouldRenderStandalone,
+			};
+		case 'SET_QUERY':
+			return {
+				...state,
+				query: action.query,
+			};
+		case 'SET_DRAWER_OPEN':
+			return {
+				...state,
+				isDrawerOpen: action.isDrawerOpen,
+			};
+		case 'SET_INITIAL_STATE_LOADED':
+			return {
+				...state,
+				isInitialStateLoaded: true,
+			};
+		case 'REGISTER_PLUGIN':
+			return {
+				...state,
+				registeredPlugins: {
+					...state.registeredPlugins,
+					[ action.name ]: action.config,
+				},
+			};
+	}
+	return state;
+};
+const actions = {
+	setQuery: ( query ) => {
+		return {
+			type: 'SET_QUERY',
+			query,
+		};
+	},
+	setDrawerOpen: ( isDrawerOpen ) => {
+		return {
+			type: 'SET_DRAWER_OPEN',
+			isDrawerOpen,
+		};
+	},
+	setShouldRenderStandalone: ( shouldRenderStandalone ) => {
+		return {
+			type: 'SET_RENDER_STANDALONE',
+			shouldRenderStandalone,
+		};
+	},
+	setInitialStateLoaded: () => {
+		return {
+			type: 'SET_INITIAL_STATE_LOADED',
+		};
+	},
+	registerPlugin: ( name, config ) => {
+		return {
+			type: 'REGISTER_PLUGIN',
+			name,
+			config,
+		};
+	},
+};
+
+const selectors = {
+	getQuery: ( state ) => {
+		return state.query;
+	},
+	isDrawerOpen: ( state ) => {
+		return state.isDrawerOpen;
+	},
+	shouldRenderStandalone: ( state ) => {
+		return state.shouldRenderStandalone;
+	},
+	isInitialStateLoaded: ( state ) => {
+		return state.isInitialStateLoaded;
+	},
+	getPluginsArray: ( state ) => {
+		const registeredPlugins = state.registeredPlugins;
+		const pluginsArray = [];
+		Object.entries( registeredPlugins ).map( ( [ key, config ] ) => {
+			const plugin = () => {
+				return config;
+			};
+			pluginsArray.push( plugin() );
+		} );
+		return pluginsArray;
+	},
+};
+
+const store = createReduxStore( 'wpgraphql-ide/app', {
+	reducer,
+	selectors,
+	actions,
+} );
+
+export default store;

src/store/editor-toolbar-store.js

@@ -0,0 +1,40 @@
+import { createReduxStore } from '@wordpress/data';
+
+const initialState = {
+	buttons: []
+};
+
+const reducer = ( state = initialState, action ) => {
+	switch ( action.type ) {
+		case 'REGISTER_BUTTON':
+			return {
+				...state,
+				buttons: state.buttons.push(action.name),
+			};
+	}
+	return state;
+};
+
+const actions = {
+	registerButton: ( name, config ) => {
+		return {
+			type: 'REGISTER_BUTTON',
+            name,
+            config,
+		};
+	}
+};
+
+const selectors = {
+	buttons: ( state ) => {
+		return state.buttons;
+	}
+};
+
+const store = createReduxStore( 'wpgraphql-ide/editor-toolbar', {
+	reducer,
+	selectors,
+	actions,
+} );
+
+export default store;

src/store/index.js

@@ -1,107 +1,31 @@
-import { createReduxStore } from '@wordpress/data';
-
-const initialState = {
-	isDrawerOpen: false,
-	shouldRenderStandalone: false,
-	isInitialStateLoaded: false,
-	registeredPlugins: {},
-	query: null,
-};
-
-const reducer = ( state = initialState, action ) => {
-	switch ( action.type ) {
-		case 'SET_RENDER_STANDALONE':
-			return {
-				...state,
-				shouldRenderStandalone: action.shouldRenderStandalone,
-			};
-		case 'SET_QUERY':
-			return {
-				...state,
-				query: action.query,
-			};
-		case 'SET_DRAWER_OPEN':
-			return {
-				...state,
-				isDrawerOpen: action.isDrawerOpen,
-			};
-		case 'SET_INITIAL_STATE_LOADED':
-			return {
-				...state,
-				isInitialStateLoaded: true,
-			};
-		case 'REGISTER_PLUGIN':
-			return {
-				...state,
-				registeredPlugins: {
-					...state.registeredPlugins,
-					[ action.name ]: action.config,
-				},
-			};
-	}
-	return state;
-};
-const actions = {
-	setQuery: ( query ) => {
-		return {
-			type: 'SET_QUERY',
-			query,
-		};
-	},
-	setDrawerOpen: ( isDrawerOpen ) => {
-		return {
-			type: 'SET_DRAWER_OPEN',
-			isDrawerOpen,
-		};
-	},
-	setShouldRenderStandalone: ( shouldRenderStandalone ) => {
-		return {
-			type: 'SET_RENDER_STANDALONE',
-			shouldRenderStandalone,
-		};
-	},
-	setInitialStateLoaded: () => {
-		return {
-			type: 'SET_INITIAL_STATE_LOADED',
-		};
-	},
-	registerPlugin: ( name, config ) => {
-		return {
-			type: 'REGISTER_PLUGIN',
-			name,
-			config,
-		};
-	},
-};
-
-const selectors = {
-	getQuery: ( state ) => {
-		return state.query;
-	},
-	isDrawerOpen: ( state ) => {
-		return state.isDrawerOpen;
-	},
-	shouldRenderStandalone: ( state ) => {
-		return state.shouldRenderStandalone;
-	},
-	isInitialStateLoaded: ( state ) => {
-		return state.isInitialStateLoaded;
-	},
-	getPluginsArray: ( state ) => {
-		const registeredPlugins = state.registeredPlugins;
-		const pluginsArray = [];
-		Object.entries( registeredPlugins ).map( ( [ key, config ] ) => {
-			const plugin = () => {
-				return config;
-			};
-			pluginsArray.push( plugin() );
-		} );
-		return pluginsArray;
-	},
-};
-
-export const store = createReduxStore( 'wpgraphql-ide', {
-	reducer,
-	selectors,
-	actions,
-} );
+import { register, dispatch } from '@wordpress/data';
+
+import appStore from './app-store';
+import editorToolbarStore from './editor-toolbar-store';
+
+export function registerStores() {
+    register( appStore );
+    register( editorToolbarStore );
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// TEST FUNCTION
+export function registerEditorToolbarButton( name, config ) {
+	console.log({ name, config });
+	dispatch( editorToolbarStore ).registerButton( name, config );
+}