Merge pull request #34 from heikkivihersalo/feature/31/refactor-admin-area

Refactor admin area to cleaner code

Author: heikkivihersalo

src/features/admin/components/Header.tsx

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import styles from '../index.module.css';
+
+/**
+ * Header
+ * @return {JSX.Element} Form Button Component
+ */
+const Header = (): JSX.Element => {
+	return (
+		<header className={styles.header}>
+			<h1 className={styles.headerHeading}>
+				{__('Gutenberg Native AI Settings', 'gutenberg-native-ai')}
+			</h1>
+		</header>
+	);
+};
+
+export default Header;

src/features/admin/components/containers/index.ts

@@ -0,0 +1,97 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useAdminForm } from '@hooks';
+import FormInput from './FormInput';
+import FormSelect from './FormSelect';
+
+import {
+	TONE_OF_VOICE,
+	OPEN_AI_TEXT_MODEL,
+	OPEN_AI_IMAGE_MODEL,
+} from '@constants/options';
+
+import type { ChatGPTFormData } from 'types/admin';
+
+import styles from '../../index.module.css';
+
+/**
+ * Header Component
+ * @return {JSX.Element | null} Header Component
+ */
+const Form = (): JSX.Element | null => {
+	const { formData, handleChange, handleSave } = useAdminForm({
+		path: 'gutenberg-native-ai/v1/settings',
+		nonce: window.GUTENBERG_NATIVE_AI?.nonce,
+	});
+
+	/**
+	 * Return early if form is not set and loaded
+	 */
+	if (!formData) {
+		return null;
+	}
+
+	return (
+		<form
+			className={styles.form}
+			onSubmit={(e) => {
+				e.preventDefault();
+				handleSave(formData);
+			}}
+		>
+			<h3 className={styles.formHeading}>
+				{__('API Settings', 'gutenberg-native-ai')}
+			</h3>
+			<div className={styles.formInputContainer}>
+				<FormSelect
+					label={__('Model (Text)', 'gutenberg-native-ai')}
+					name="model_text"
+					value={(formData as ChatGPTFormData).model_text}
+					options={OPEN_AI_TEXT_MODEL}
+					onChange={
+						handleChange as React.ChangeEventHandler<HTMLSelectElement>
+					}
+				/>
+				<FormSelect
+					label={__('Model (Image)', 'gutenberg-native-ai')}
+					name="model_image"
+					value={(formData as ChatGPTFormData).model_image}
+					options={OPEN_AI_IMAGE_MODEL}
+					onChange={
+						handleChange as React.ChangeEventHandler<HTMLSelectElement>
+					}
+				/>
+				<FormInput
+					type="text"
+					label={__('API Key', 'gutenberg-native-ai')}
+					name="api_key"
+					placeholder="sk-proj-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+					value={(formData as ChatGPTFormData).api_key}
+					onChange={
+						handleChange as React.ChangeEventHandler<HTMLInputElement>
+					}
+				/>
+				<FormSelect
+					label={__('Tone of Voice', 'gutenberg-native-ai')}
+					name="tone_of_voice"
+					value={(formData as ChatGPTFormData).tone_of_voice}
+					options={TONE_OF_VOICE}
+					onChange={
+						handleChange as React.ChangeEventHandler<HTMLSelectElement>
+					}
+				/>
+			</div>
+			<button type="submit" className={styles.formButton}>
+				{__('Save Changes', 'gutenberg-native-ai')}
+			</button>
+		</form>
+	);
+};
+
+export default Form;

src/features/admin/components/containers/lib/Option.module.css

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import styles from '../../index.module.css';
+
+/**
+ * FormContainer Component
+ * @param {Object} props - Component props
+ * @param {React.ReactNode} props.children - Child components
+ * @return {JSX.Element} FormContainer Component
+ */
+const FormContainer = ({
+	children,
+}: {
+	children: React.ReactNode;
+}): JSX.Element => {
+	return (
+		<div className={styles.formContainer}>
+			<h2 className={styles.formContainerHeading}>
+				{__('ChatGPT', 'gutenberg-native-ai')}
+			</h2>
+			<p
+				className={styles.formContainerDescription}
+				dangerouslySetInnerHTML={{
+					__html: sprintf(
+						/* translators: %s: ChatGPT dashboard URL */
+						__(
+							'Configure the ChatGPT API settings. You can get the API key from the ChatGPT dashboard. Access the dashboard <a href="%s">here</a>.',
+							'gutenberg-native-ai'
+						),
+						'https://platform.openai.com/api-keys'
+					),
+				}}
+			/>
+			{children}
+		</div>
+	);
+};
+
+export default FormContainer;