ben
/
wp-matchplay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

reformat edit.js and move players/standings to attributes.data

This commit is contained in:
Ben Harris 2023-07-19 16:44:07 -04:00
parent 62a68df686
commit 213f605a4b
1 changed files with 31 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/edit.js
View File

@ -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>
</>