Merge pull request #36 from heikkivihersalo/feature/35/move-redux-store-to-upper-level

heikkivihersalo · web-flow · commit 05ea558c15bd · 2024-10-23T13:51:59.000+03:00
Move redux store to upper level and various bug fixes
diff --git a/includes/api/class-utils.php b/includes/api/class-utils.php
@@ -74,7 +74,7 @@ public static function update_chatgpt_settings( \WP_REST_Request $request ): arr
 		}
 
 		$encryptor         = new Encryption();
-		$encrypted_api_key = $encryptor->encrypt( $body['api_key'] ?? $current['api_key'] ?? '' );
+		$encrypted_api_key = $encryptor->encrypt( $body['api_key'] ?? '' );
 
 		$update = update_option(
 			'gutenberg_native_ai',
diff --git a/src/constants/stores.ts b/src/constants/stores.ts
@@ -1,3 +1,5 @@
+export const DATA_STORE = 'gutenberg-native-ai';
+
 export const ACTIONS = {
 	GET_TEXT: 'GET_TEXT',
 	SET_TEXT: 'SET_TEXT',
diff --git a/src/features/admin/components/form/Form.tsx b/src/features/admin/components/form/Form.tsx
@@ -7,15 +7,16 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { useAdminForm } from '@hooks';
-import FormInput from './FormInput';
-import FormSelect from './FormSelect';
-
+import { API_PATH } from '@constants/api';
 import {
 	TONE_OF_VOICE,
 	OPEN_AI_TEXT_MODEL,
 	OPEN_AI_IMAGE_MODEL,
 } from '@constants/options';
 
+import FormInput from './FormInput';
+import FormSelect from './FormSelect';
+
 import type { ChatGPTFormData } from 'types/admin';
 
 import styles from '../../index.module.css';
@@ -26,7 +27,7 @@ import styles from '../../index.module.css';
  */
 const Form = (): JSX.Element | null => {
 	const { formData, handleChange, handleSave } = useAdminForm({
-		path: 'gutenberg-native-ai/v1/settings',
+		path: API_PATH.GET_SETTINGS,
 		nonce: window.GUTENBERG_NATIVE_AI?.nonce,
 	});
 
@@ -42,7 +43,7 @@ const Form = (): JSX.Element | null => {
 			className={styles.form}
 			onSubmit={(e) => {
 				e.preventDefault();
-				handleSave(formData);
+				handleSave({ data: formData });
 			}}
 		>
 			<h3 className={styles.formHeading}>
diff --git a/src/features/ai-modal/features/BlockEditControl.tsx b/src/features/ai-modal/features/BlockEditControl.tsx
@@ -10,6 +10,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { MODAL_STATUS, ALLOWED_TEXT_BLOCKS } from '@constants/modal';
+import { DATA_STORE } from '@constants/stores';
 
 import Modal from './modal';
 
@@ -42,11 +43,11 @@ const BlockEditControl = createHigherOrderComponent(function (
 		 */
 		const { mode } = useSelect((select: WPAny) => {
 			return {
-				mode: select('theme/ai').getMode() as ModalMode,
+				mode: select(DATA_STORE).getMode() as ModalMode,
 			};
 		}, []);
 
-		const { setStatus, setSelection } = useDispatch('theme/ai');
+		const { setStatus, setSelection } = useDispatch(DATA_STORE);
 
 		/**
 		 * Handle keyboard shortcut to open the popover
diff --git a/src/features/ai-modal/features/modal/components/form/Form.tsx b/src/features/ai-modal/features/modal/components/form/Form.tsx
@@ -7,6 +7,7 @@ import { useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { MODAL_STATUS } from '@constants/modal';
+import { DATA_STORE } from '@constants/stores';
 import CloseButton from '../CloseButton';
 
 import styles from '../../index.module.css';
@@ -28,7 +29,7 @@ const Form = ({
 	onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
 	hasApiKey: boolean;
 }): JSX.Element => {
-	const { setStatus, setSelection } = useDispatch('theme/ai');
+	const { setStatus, setSelection } = useDispatch(DATA_STORE);
 
 	const handleClose = () => {
 		setStatus(MODAL_STATUS.INITIAL);
diff --git a/src/features/ai-modal/features/modal/components/modal-image/ModalControlsImage.tsx b/src/features/ai-modal/features/modal/components/modal-image/ModalControlsImage.tsx
@@ -19,8 +19,9 @@ import Settings from '../../../settings';
 import ImagePreview from './ImagePreview';
 
 import { MODAL_STATUS } from '@constants/modal';
+import { DATA_STORE } from '@constants/stores';
 
-import type { ModalStatus, ModalSelection } from 'types/modal';
+import type { ModalSettings, ModalStatus } from 'types/modal';
 
 import styles from '../../index.module.css';
 
@@ -30,14 +31,14 @@ import styles from '../../index.module.css';
  */
 const ModalImage = (): JSX.Element | null => {
 	const [preview, setPreview] = useState<ChatGPTImage[] | null>(null);
-	const { status } = useSelect((select: WPAny) => {
+	const { status, settings } = useSelect((select: WPAny) => {
 		return {
-			status: select('theme/ai').getStatus() as ModalStatus,
-			selection: select('theme/ai').getSelection() as ModalSelection,
+			status: select(DATA_STORE).getStatus() as ModalStatus,
+			settings: select(DATA_STORE).getSettings() as ModalSettings,
 		};
 	}, []);
 
-	const { setStatus, setSelection } = useDispatch('theme/ai');
+	const { setStatus, setSelection } = useDispatch(DATA_STORE);
 	const { getImage } = useChatGPT();
 
 	const handleCLose = () => {
@@ -85,7 +86,7 @@ const ModalImage = (): JSX.Element | null => {
 	};
 
 	return (
-		<Form onSubmit={generateContent}>
+		<Form onSubmit={generateContent} hasApiKey={settings.has_api_key}>
 			<div className={styles.controlContainer}>
 				<FormInput
 					placeholder={__(
diff --git a/src/features/ai-modal/features/modal/components/modal-text/ModalControlsText.tsx b/src/features/ai-modal/features/modal/components/modal-text/ModalControlsText.tsx
@@ -23,6 +23,7 @@ import {
 } from '../../../../utils';
 
 import { MODAL_STATUS } from '@constants/modal';
+import { DATA_STORE } from '@constants/stores';
 
 import type { ModalStatus, ModalSelection, ModalSettings } from 'types/modal';
 
@@ -35,13 +36,13 @@ import styles from '../../index.module.css';
 const ModalControlsText = (): JSX.Element | null => {
 	const { status, selection, settings } = useSelect((select: WPAny) => {
 		return {
-			status: select('theme/ai').getStatus() as ModalStatus,
-			selection: select('theme/ai').getSelection() as ModalSelection,
-			settings: select('theme/ai').getSettings() as ModalSettings,
+			status: select(DATA_STORE).getStatus() as ModalStatus,
+			selection: select(DATA_STORE).getSelection() as ModalSelection,
+			settings: select(DATA_STORE).getSettings() as ModalSettings,
 		};
 	}, []);
 
-	const { setStatus, setSelection } = useDispatch('theme/ai');
+	const { setStatus, setSelection } = useDispatch(DATA_STORE);
 	const { getText } = useChatGPT();
 
 	const handleCLose = () => {
diff --git a/src/features/ai-modal/features/modal/index.tsx b/src/features/ai-modal/features/modal/index.tsx
@@ -8,6 +8,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { MODAL_STATUS } from '@constants/modal';
+import { DATA_STORE } from '@constants/stores';
 
 import ModalControlsText from './components/modal-text/ModalControlsText';
 import ModalControlsImage from './components/modal-image/ModalControlsImage';
@@ -30,7 +31,7 @@ const Modal = ({
 }): JSX.Element | null => {
 	const { status } = useSelect((select: WPAny) => {
 		return {
-			status: select('theme/ai').getStatus() as ModalStatus,
+			status: select(DATA_STORE).getStatus() as ModalStatus,
 		};
 	}, []);
 
diff --git a/src/features/ai-modal/features/settings/components/ModelNav.tsx b/src/features/ai-modal/features/settings/components/ModelNav.tsx
@@ -7,7 +7,9 @@ import { useSelect, useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
+import { DATA_STORE } from '@constants/stores';
 import ModelNavItem from './ModelNavItem';
+
 import type { ModalMode } from 'types/modal';
 
 import style from '../index.module.css';
@@ -19,11 +21,11 @@ import style from '../index.module.css';
 const ModelNav = () => {
 	const { mode } = useSelect((select: WPAny) => {
 		return {
-			mode: select('theme/ai').getMode() as ModalMode,
+			mode: select(DATA_STORE).getMode() as ModalMode,
 		};
 	}, []);
 
-	const { setMode } = useDispatch('theme/ai');
+	const { setMode } = useDispatch(DATA_STORE);
 
 	return (
 		<div className={style.navContainer}>
diff --git a/src/features/ai-modal/features/settings/components/QuickCommandsNav.tsx b/src/features/ai-modal/features/settings/components/QuickCommandsNav.tsx
@@ -14,7 +14,7 @@ import style from '../index.module.css';
  * Quick commands navigation component
  * @return {JSX.Element} Quick commands navigation component
  */
-const QuickCommandsNav = () => {
+const QuickCommandsNav = (): JSX.Element => {
 	return (
 		<div className={style.navContainer}>
 			<div className={style.navLabel}>
diff --git a/src/features/ai-modal/features/settings/components/SettingsNav.tsx b/src/features/ai-modal/features/settings/components/SettingsNav.tsx
@@ -8,6 +8,8 @@ import { useSelect, useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import SettingsNavItem from './SettingsNavItem';
+
+import { DATA_STORE } from '@constants/stores';
 import { TONE_OF_VOICE } from '@constants/options';
 
 import type { ModalSettings } from 'types/modal';
@@ -18,14 +20,14 @@ import style from '../index.module.css';
  * General settings navigation component
  * @return {JSX.Element} General settings navigation component
  */
-const SettingsNav = () => {
+const SettingsNav = (): JSX.Element => {
 	const { settings } = useSelect((select: WPAny) => {
 		return {
-			settings: select('theme/ai').getSettings() as ModalSettings,
+			settings: select(DATA_STORE).getSettings() as ModalSettings,
 		};
 	}, []);
 
-	const { setSettings } = useDispatch('theme/ai');
+	const { setSettings } = useDispatch(DATA_STORE);
 
 	return (
 		<div className={style.navContainer}>
diff --git a/src/hooks/lib/useChatGPT.ts b/src/hooks/lib/useChatGPT.ts
@@ -7,6 +7,7 @@ import apiFetch from '@wordpress/api-fetch';
  * Internal dependencies
  */
 import { API_PATH } from '@constants/api';
+import { DATA_STORE } from '@constants/stores';
 import { useSelect } from '@wordpress/data';
 
 import type { ModalSettings } from 'types/modal';
@@ -24,7 +25,7 @@ type ReturnProps = {
 function useChatGPT(): ReturnProps {
 	const { settings } = useSelect((select: WPAny) => {
 		return {
-			settings: select('theme/ai').getSettings() as ModalSettings,
+			settings: select(DATA_STORE).getSettings() as ModalSettings,
 		};
 	}, []);
 
diff --git a/src/stores/ai/index.ts b/src/stores/ai/index.ts
diff --git a/src/stores/data/actions.ts b/src/stores/data/actions.ts
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { ACTIONS } from '@constants/actions';
+import { ACTIONS } from '@constants/stores';
 import {
 	ModalMode,
 	ModalStatus,
diff --git a/src/stores/data/controls.ts b/src/stores/data/controls.ts
diff --git a/src/stores/data/reducer.ts b/src/stores/data/reducer.ts
@@ -30,8 +30,12 @@ const initialSelection: ModalSelection = {
 };
 
 const initialSettings: ModalSettings = {
-	model: 'text',
 	tone_of_voice: 'none',
+	has_api_key: false,
+	model: {
+		image: 'dall-e-3',
+		text: 'gpt-4o-mini',
+	},
 };
 
 const initialMode: ModalMode = MODAL_MODE.TEXT as ModalMode;
diff --git a/src/stores/data/resolvers.ts b/src/stores/data/resolvers.ts
diff --git a/src/stores/data/selectors.ts b/src/stores/data/selectors.ts
diff --git a/src/stores/index.ts b/src/stores/index.ts
@@ -1,13 +1,30 @@
 /**
  * WordPress dependencies
  */
-import { createReduxStore, register } from '@wordpress/data';
+import { createReduxStore, combineReducers, register } from '@wordpress/data';
 
 /**
- * AI Store
+ * Internal dependencies
  */
-import { STORE_NAME as AI_STORE_NAME, STORE_CONFIG as AIConfig } from './ai';
+import actions from './data/actions.ts';
+import controls from './data/controls.ts';
+import { status, selection, settings, mode } from './data/reducer.ts';
+import resolvers from './data/resolvers.ts';
+import selectors from './data/selectors.ts';
 
-const AIStore = createReduxStore(AI_STORE_NAME, AIConfig);
+import { DATA_STORE } from '@constants/stores.ts';
 
-register(AIStore);
+const Store = createReduxStore(DATA_STORE, {
+	actions,
+	controls,
+	reducer: combineReducers({
+		status,
+		selection,
+		settings,
+		mode,
+	}),
+	resolvers,
+	selectors,
+});
+
+register(Store);

Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,7 @@ public static function update_chatgpt_settings( \WP_REST_Request $request ): arr`
`74`	`74`	`}`
`75`	`75`
`76`	`76`	`$encryptor = new Encryption();`
`77`		`- $encrypted_api_key = $encryptor->encrypt( $body['api_key'] ?? $current['api_key'] ?? '' );`
	`77`	`+ $encrypted_api_key = $encryptor->encrypt( $body['api_key'] ?? '' );`
`78`	`78`
`79`	`79`	`$update = update_option(`
`80`	`80`	`'gutenberg_native_ai',`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+export const DATA_STORE = 'gutenberg-native-ai';`
	`2`	`+`
`1`	`3`	`export const ACTIONS = {`
`2`	`4`	`GET_TEXT: 'GET_TEXT',`
`3`	`5`	`SET_TEXT: 'SET_TEXT',`