vinzenz/servicepoint-tanks
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

useMutation for map chooser

Browse source
This commit is contained in:
Vinzenz Schroeter 2024-04-29 13:27:35 +02:00
parent 6b99a39253
commit bf22fd6c85
1 changed files with 19 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

27
tank-frontend/src/MapChooser.tsx
View file

@ -1,7 +1,7 @@
import {ChangeEvent} from 'react';
import {makeApiUrl} from './serverCalls';
import './MapChooser.css';
import {useQuery} from '@tanstack/react-query';
import {useMutation, useQuery} from '@tanstack/react-query';
export default function MapChooser() {
const query = useQuery({
@ -15,20 +15,31 @@ export default function MapChooser() {
}
});
const postMap = useMutation({
retry: false,
mutationFn: async (map: string) => {
const url = makeApiUrl('/map');
url.searchParams.set('name', map);
const response = await fetch(url, {method: 'POST'});
if (!response.ok)
throw new Error(`${response.status} (${response.statusText}): ${await response.text()}`);
}
});
const onChange = (event: ChangeEvent<HTMLSelectElement>) => {
if (event.target.selectedIndex < 1)
return;
event.preventDefault();
const url = makeApiUrl('/map');
url.searchParams.set('name', event.target.options[event.target.selectedIndex].value);
fetch(url, {method: 'POST'});
const chosenMap = event.target.options[event.target.selectedIndex].value;
postMap.mutate(chosenMap);
};
return <select value="maps" className="MapChooser-DropDown" onChange={onChange}>
const disabled = !query.isSuccess || postMap.isPending;
return <select className="MapChooser-DropDown" onChange={onChange} disabled={disabled}>
<option value="" defaultValue={''}>Choose map</option>
{query.isSuccess && query.data.map(m =>
<option key={m} value={m}>{m}</option>)}
{query.isSuccess && query.data.map(m => <option key={m} value={m}>{m}</option>)}
</select>;
}