Move settings page to React

.gitignore

@@ -1,4 +1,6 @@
 node_modules
+/build
+.DS_Store
 .sass_cache
 .idea
 /vendor/
@@ -12,4 +14,4 @@ dist/*
 docker/wordpress
 docker/WooMinecraft
 docker-compose.override.yml
-/woominecraft
+/woominecraft

.nvmrc

@@ -0,0 +1 @@
+12.20.1

includes/views/server-section.php

@@ -2,29 +2,6 @@
 	<th scope="row" class="titledesc"><?php esc_html_e( 'Available Servers', 'woominecraft' ); ?></th>
 	<td>
 		<p class="description"><?php esc_html_e( 'CAUTION: Changing your server keys will invalidate any/all orders with the previous key. You cannot undo this.', 'woominecraft' ); ?></p>
-		<br /><br />
-		<table class="wc_shipping widefat" cellspacing="0">
-			<thead>
-			<tr>
-				<th class="sort"></th>
-				<th class="wmc_label"><?php esc_html_e( 'Dropdown Label', 'woominecraft' ); ?></th>
-				<th class="wmc_key"><?php esc_html_e( 'Key', 'woominecraft' ); ?></th>
-				<th><input type="button" class="button button-primary wmc_add_server" value="<?php esc_attr_e( 'Add Server', 'woominecraft' ); ?>" /> </th>
-			</tr>
-			</thead>
-			<tbody>
-			<?php $count = 0; foreach ( \WooMinecraft\WooCommerce\get_servers() as $server ) : ?>
-				<tr class="row">
-					<td width="1%" class="sort"></td>
-					<td class="wmc_name"><input type="text" name="wmc_servers[<?php echo (int) $count; ?>][name]" value="<?php echo esc_attr( $server['name'] ); ?>" /></td>
-					<td class="wmc_key"><input type="text" name="wmc_servers[<?php echo (int) $count; ?>][key]" value="<?php echo esc_attr( $server['key'] ); ?>" class="widefat" /></td>
-					<td><input type="button" class="button button-secondary wmc_delete_server" value="<?php esc_html_e( 'Remove Server', 'woominecraft' ); ?>" /> </td>
-				</tr>
-			<?php
-				$count++;
-				endforeach; // Endforeach.
-			?>
-			</tbody>
-		</table>
+		<div id="wmc-settings"></div>
 	</td>
 </tr>

includes/woocommerce-admin.php

@@ -23,7 +23,8 @@ function setup() {
 
 	add_action( 'wp_ajax_wmc_resend_donations', $n( 'ajax_handler' ) );
 
-	add_action( 'admin_init', $n( 'admin_init' ) );
+	add_action( 'admin_init', $n( 'register_settings' ) );
+	add_action( 'rest_api_init', $n( 'register_settings' ) );
 
 	add_filter( 'woocommerce_get_settings_general', $n( 'wmc_settings' ) );
 	add_action( 'woocommerce_admin_field_wmc_servers', $n( 'render_servers_section' ) );
@@ -154,15 +155,18 @@ function save_servers() {
 
 	$servers = (array) $_POST['wmc_servers'];
 	$output  = [];
+
 	foreach ( $servers as $server ) {
-		$name = array_key_exists( 'name', $server ) && ! empty( $server['name'] ) ? esc_attr( $server['name'] ) : false;
-		$key  = array_key_exists( 'key', $server ) && ! empty( $server['key'] ) ? esc_attr( $server['key'] ) : false;
+		$name = $server['name'] ?? '';
+		$key  = $server['key'] ?? '';
+
 		if ( ! $name || ! $key ) {
 			continue;
 		}
+
 		$output[] = array(
-			'name' => $name,
-			'key'  => $key,
+			'name' => esc_html( $name ),
+			'key'  => esc_html( $key ),
 		);
 	}
 
@@ -293,11 +297,37 @@ function add_variation_field( $loop, $variation_data, $post ) {
 	include 'views/commands.php';
 }
 
+function sanitize_settings( $settings ) {
+	return $settings;
+}
+
 /**
- * Registers the setting key, and installs the database.
+ * Registers the setting key.
  */
-function admin_init() {
-	register_setting( 'woo_minecraft', WM_SERVERS );
+function register_settings() {
+	register_setting(
+		'woo_minecraft',
+		WM_SERVERS,
+		[
+			'type'              => 'array',
+			'sanitize_callback' => __NAMESPACE__ . '\\sanitize_settings',
+			'show_in_rest'      => [
+				'schema' => [
+					'items' => [
+						'type'       => 'object',
+						'properties' => [
+							'name' => [
+								'type' => 'string',
+							],
+							'key'  => [
+								'type' => 'string',
+							],
+						],
+					],
+				],
+			],
+		]
+	);
 }
 
 /**
@@ -502,7 +532,12 @@ function do_resend_donations_field( $order ) {
  */
 function admin_scripts( $hook = '' ) {
 	$min = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
-	wp_register_script( 'woo_minecraft_js', WMC_URL . "/assets/js/jquery.woo{$min}.js", array( 'jquery' ), WMC_VERSION, true );
+
+	// TODO - Only load on settings page.
+	$asset_file = include( WMC_PATH . 'build/settings.asset.php' );
+	wp_register_script( 'wmc-react', WMC_URL . '/build/settings.js', $asset_file['dependencies'], $asset_file['version'], true );
+
+	wp_register_script( 'woo_minecraft_js', WMC_URL . "/assets/js/jquery.woo{$min}.js", array( 'jquery', 'wmc-react' ), WMC_VERSION, true );
 	wp_register_style( 'woo_minecraft_css', WMC_URL . "/style{$min}.css", array( 'woocommerce_admin_styles' ), WMC_VERSION );
 
 	$script_data = array(

package.json

@@ -4,8 +4,19 @@
   "description": "WooMinecraft - A WordPress counterpart to the Minecraft Plugin.",
   "main": "index.js",
   "scripts": {
-    "version": "node .github/scripts/version.js",
-    "postversion": "composer update && npm install"
+    "build": "wp-scripts build src/settings.js src/product.js",
+    "check-engines": "wp-scripts check-engines",
+    "check-licenses": "wp-scripts check-licenses",
+    "format:js": "wp-scripts format-js",
+    "lint:css": "wp-scripts lint-style",
+    "lint:js": "wp-scripts lint-js",
+    "lint:md:docs": "wp-scripts lint-md-docs",
+    "lint:md:js": "wp-scripts lint-md-js",
+    "lint:pkg-json": "wp-scripts lint-pkg-json",
+    "packages-update": "wp-scripts packages-update",
+    "start": "wp-scripts start",
+    "test:e2e": "wp-scripts test-e2e",
+    "test:unit": "wp-scripts test-unit-js"
   },
   "repository": {
     "type": "git",
@@ -17,5 +28,11 @@
     "url": "https://github.com/WooMinecraft/woominecraft-wp/issues"
   },
   "homepage": "https://github.com/WooMinecraft/woominecraft-wp",
-  "devDependencies": {}
+  "devDependencies": {
+    "@emotion/react": "^11.1.5",
+    "@wordpress/api-fetch": "^3.21.5",
+    "@wordpress/components": "^12.0.7",
+    "@wordpress/core-data": "^2.25.8",
+    "@wordpress/scripts": "^13.0.3"
+  }
 }

src/Settings/rows.js

@@ -0,0 +1,80 @@
+/** @jsx jsx */
+import {Spinner,Button} from "@wordpress/components";
+import {jsx} from "@emotion/react";
+import {__} from '@wordpress/i18n'
+
+const ServerSettingsRows = ({servers, deleteServer, updateServers}) => {
+
+	let newServers = Array.from( servers );
+	// console.log( {servers} );
+
+	const updateServerName = ( name, index ) => {
+		newServers[index].name = name;
+		updateServers( newServers );
+	};
+
+	const updateServerKey = ( key, index ) => {
+		newServers[index].key = key;
+		updateServers( newServers );
+	};
+
+	if ( newServers.length < 1 ) {
+		return (
+			<tr>
+				<td
+					css={{
+						textAlign: "center",
+						padding: "20px"
+					}}
+					colSpan={3}
+				>
+					<Spinner />
+				</td>
+			</tr>
+		);
+	}
+
+	return (
+		newServers.map( ( server, index ) => (
+			<tr key={`wmcserver-${index}`}>
+				<td>
+					<input
+						type="text"
+						name={`wmc_servers[${index}][name]`}
+						value={server.name}
+						pattern="[A-Za-z0-9 \-_]{3,}"
+						title={__('Special characters (non-alphanumeric) are not allowed, though underscores, hyphens and spaces are. 3 characters minimum.')}
+						onChange={ (evt) => {
+							return updateServerName( evt.target.value, index );
+						} }
+					/>
+				</td>
+				<td>
+					<input
+						type="text"
+						name={`wmc_servers[${index}][key]`}
+						value={server.key}
+						pattern="[A-Za-z0-9\-_]{6,}"
+						title={__('Special characters (non-alphanumeric) are not allowed, 6 characters minimum. Underscores and hyphens are allowed.')}
+						onChange={ (evt) => {
+							return updateServerKey( evt.target.value, index );
+						} }
+					/>
+				</td>
+				<td>
+					<Button
+						isDestructive
+						className={`server-${index}`}
+						onClick={ () => {
+							return deleteServer( server )
+						} }
+					>
+					{__('Delete', 'woominecraft')}
+					</Button>
+				</td>
+			</tr>
+		) )
+	);
+}
+
+export default ServerSettingsRows;

src/settings.js

@@ -0,0 +1,66 @@
+import ReactDOM from 'react-dom';
+import {useState, useEffect} from 'react';
+import apiFetch from '@wordpress/api-fetch';
+import {__} from '@wordpress/i18n';
+import {Button} from '@wordpress/components';
+
+import ServerSettingsRows from "./Settings/rows";
+
+const WmcSettings = () => {
+	const [servers, setServers] = useState([])
+
+	const updateServers = servers => {
+		setServers( servers );
+	};
+
+	const deleteServer = server => {
+		const newServers = servers.filter( s => s !== server );
+
+		// console.log( {server, servers, newServers} );
+		updateServers( newServers );
+	};
+
+	const emptyServer =  { key: '', name: '' };
+
+	useEffect( () => { loadData(); }, [] );
+
+	const loadData = async () => {
+		const {wm_servers} = await apiFetch(
+			{ path: '/wp/v2/settings' }
+		);
+
+		setServers( wm_servers );
+	};
+
+	return (
+		<>
+			<table className="wc_shipping widefat">
+				<thead>
+					<tr>
+						<th className="wmc_label">{__('Server Label', 'woominecraft')}</th>
+						<th className="wmc_key">{__('Server Key', 'woominecraft')}</th>
+						<th>
+							{/* @TODO: Disable button until data is loaded. */}
+							<Button
+								isSecondary
+								onClick={ () => {
+									updateServers( [ ...servers, emptyServer ] )
+								} }
+							>
+								{__('Add Server', 'woominecraft')}
+							</Button>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<ServerSettingsRows
+						deleteServer={deleteServer}
+						updateServers={updateServers}
+						servers={servers}
+					/>
+				</tbody>
+			</table>
+		</>
+	)
+}
+ReactDOM.render( <WmcSettings />, document.getElementById('wmc-settings' ) );

woominecraft.php

@@ -15,7 +15,8 @@
 
 namespace WooMinecraft;
 
-define( 'WMC_INCLUDES', plugin_dir_path( __FILE__ ) . 'includes/' );
+define( 'WMC_PATH', plugin_dir_path( __FILE__ ) );
+define( 'WMC_INCLUDES', WMC_PATH . 'includes/' );
 define( 'WMC_URL', plugin_dir_url( __FILE__ ) );
 define( 'WMC_VERSION', '1.4.3' );