try to fix table on save.js

matchplay.php

@@ -28,7 +28,7 @@ function create_block_matchplay_block_init(): void {
 
 
 add_action( 'admin_init', 'matchplay_register_settings' );
-function matchplay_register_settings() {
+function matchplay_register_settings(): void {
 	register_setting( 'matchplay', 'matchplay_options' );
 
 	add_settings_section(
@@ -48,7 +48,7 @@ function matchplay_register_settings() {
 	);
 }
 
-function matchplay_field_api_key_callback( $args ) {
+function matchplay_field_api_key_callback( $args ): void {
 	$options = get_option( 'matchplay_options' );
 	?>
 	<input
@@ -60,7 +60,7 @@ function matchplay_field_api_key_callback( $args ) {
 
 
 add_action( 'admin_menu', 'matchplay_options_page' );
-function matchplay_options_page() {
+function matchplay_options_page(): void {
 	add_options_page(
 		'Matchplay Settings',
 		'Matchplay Settings',
@@ -68,10 +68,9 @@ function matchplay_options_page() {
 		'matchplay',
 		'matchplay_settings_page_html'
 	);
-
 }
 
-function matchplay_settings_page_html() {
+function matchplay_settings_page_html(): void {
 	// check user capabilities
 	if ( ! current_user_can( 'manage_options' ) ) return;
 

src/edit.js

@@ -1,6 +1,5 @@
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { TextControl, PanelBody } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor';
+import {TextControl, PanelBody} from '@wordpress/components';
 import './editor.scss';
 
 /**
@@ -11,11 +10,7 @@ import './editor.scss';
  *
  * @return {WPElement} Element to render.
  */
-export default function Edit( { attributes, setAttributes } ) {
-	const [standings, setStandings] = useState(null);
-	const [players, setPlayers] = useState(null);
-
-
+export default function Edit({attributes, setAttributes}) {
 	function fetchTournamentData() {
 		const headers = {
 			"Authorization": `Bearer ${attributes.matchplay_api_key}`,
@@ -40,25 +35,25 @@ export default function Edit( { attributes, setAttributes } ) {
 		};
 		Object.keys(params).forEach(key => tournamentUrl.searchParams.append(key, params[key]));
 
+		// get players
 		fetch(tournamentUrl, {method: "GET", headers})
 			.then(response => response.json())
 			.then(response => {
-				let players = { ...response };
-				setAttributes( { players: players } );
-				setPlayers(players);
-				console.log(players);
+				let newData = {...response};
+				setAttributes({data: {players: newData}});
+				console.log(newData);
 			})
-			.catch(err => console.error( err ));
+			.catch(err => console.error(err));
 
+		// get standings
 		fetch(standingsUrl, {method: "GET", headers})
 			.then(response => response.json())
 			.then(response => {
-				let newData = { ...response };
-				setAttributes( { standings: newData } );
-				setStandings(newData);
+				let newData = {...response};
+				setAttributes({data: {standings: newData}});
 				console.log(newData);
 			})
-			.catch(err => console.error( err ));
+			.catch(err => console.error(err));
 	}
 
 	return (
@@ -67,35 +62,35 @@ export default function Edit( { attributes, setAttributes } ) {
 				<PanelBody>
 					<TextControl
 						label="Tournament ID"
-						value={ attributes.tournament_id }
-						onChange={ val => setAttributes( { tournament_id: val } ) }
+						value={attributes.tournament_id}
+						onChange={val => setAttributes({tournament_id: val})}
 					/>
 				</PanelBody>
 			</InspectorControls>
 
-			<div { ...useBlockProps() }>
-				<p>Results for tournament id { attributes.tournament_id }</p>
+			<div {...useBlockProps()}>
+				<p>Results for tournament id {attributes.tournament_id}</p>
 				<button onClick={() => fetchTournamentData()}>Fetch Results</button>
-				{attributes.players && attributes.standings && (
+				{attributes.data.players && attributes.data.standings && (
 					<>
 						<table id="tournament-results-table">
 							<thead>
-								<tr>
-									<th>Place</th>
-									<th>Player</th>
-									<th>Points</th>
-								</tr>
+							<tr>
+								<th>Place</th>
+								<th>Player</th>
+								<th>Points</th>
+							</tr>
 							</thead>
 							<tbody>
-								{Object.keys(attributes.standings).map((player, i) => {
-									return (
-										<tr key={player}>
-											<td>{attributes.standings[i].position}</td>
-											<td>{attributes.players.find(p => p.player_id === attributes.standings[i].player_id).name}</td>
-											<td>{attributes.standings[i].points}</td>
-										</tr>
-									);
-								})}
+							{Object.keys(attributes.data.standings).map((player, i) => {
+								return (
+									<tr key={player}>
+										<td>{attributes.data.standings[i].position}</td>
+										<td>{attributes.data.players.find(p => p.player_id === attributes.data.standings[i].player_id).name}</td>
+										<td>{attributes.data.standings[i].points}</td>
+									</tr>
+								);
+							})}
 							</tbody>
 						</table>
 					</>

src/save.js

@@ -14,7 +14,7 @@ export default function save( { attributes } ) {
 	const blockProps = useBlockProps.save();
 	return (
 		<div { ...blockProps } data-tournament-id={ attributes.tournament_id }>
-			{attributes.data && (
+			{attributes.data.players && attributes.data.standings && (
 				<table id="tournament-results-table">
 					<thead>
 					<tr>
@@ -24,12 +24,12 @@ export default function save( { attributes } ) {
 					</tr>
 					</thead>
 					<tbody>
-					{Object.keys(attributes.data).map((player, i) => {
+					{Object.keys(attributes.data.standings).map((player, i) => {
 						return (
 							<tr key={player}>
-								<td>{attributes.data[i].position}</td>
-								<td>{attributes.data[i].name}</td>
-								<td>{attributes.data[i].points}</td>
+								<td>{attributes.data.standings[i].position}</td>
+								<td>{attributes.data.players.find(p => p.player_id === attributes.data.standings[i].player_id).name}</td>
+								<td>{attributes.data.standings[i].points}</td>
 							</tr>
 						);
 					})}