fetch map list with react query, simplify other fetches

This commit is contained in:
Vinzenz Schroeter 2024-04-29 12:51:58 +02:00
parent c978df1e4c
commit c48514721c
3 changed files with 38 additions and 75 deletions

View file

@ -1,6 +1,6 @@
import {useEffect, useState} from 'react'; import {useEffect, useState} from 'react';
import './JoinForm.css'; import './JoinForm.css';
import {Player, postPlayer} from './serverCalls'; import {makeApiUrl, Player} from './serverCalls';
import Column from './components/Column.tsx'; import Column from './components/Column.tsx';
import Button from './components/Button.tsx'; import Button from './components/Button.tsx';
import TextInput from './components/TextInput.tsx'; import TextInput from './components/TextInput.tsx';
@ -16,19 +16,19 @@ export default function JoinForm({onDone}: {
if (!clicked || data) if (!clicked || data)
return; return;
postPlayer(name).then(response => { const url = makeApiUrl('/player');
if (response.ok && response.successResult) { url.searchParams.set('name', name);
onDone(response.successResult!.trim());
setErrorText(null); fetch(url, {method: 'POST'})
.then(async response => {
if (!response.ok) {
setErrorText(`${response.status} (${response.statusText}): ${await response.text()}`);
setClicked(false);
return; return;
} }
if (response.additionalErrorText) onDone((await response.json()).trim());
setErrorText(`${response.statusCode} (${response.statusText}): ${response.additionalErrorText}`); setErrorText(null);
else
setErrorText(`${response.statusCode} (${response.statusText})`);
setClicked(false);
}); });
}, [clicked, setData, data, setClicked, onDone, errorText]); }, [clicked, setData, data, setClicked, onDone, errorText]);

View file

@ -1,29 +1,34 @@
import { ChangeEvent, useEffect, useState } from "react"; import {ChangeEvent} from 'react';
import { getMaps, postMaps } from "./serverCalls"; import {makeApiUrl} from './serverCalls';
import './MapChooser.css' import './MapChooser.css';
import {useQuery} from '@tanstack/react-query';
export default function MapChooser() { export default function MapChooser() {
const [mapList, setMaps] = useState<string[] | null>(null); const query = useQuery({
queryKey: ['get-maps'],
useEffect(() => { queryFn: async () => {
let aborted = false; const url = makeApiUrl('/map');
async function startFetch() { const response = await fetch(url, {method: 'GET'});
const response = await getMaps(); if (!response.ok)
if (!aborted && response.ok && response.successResult) throw new Error(`response failed with code ${response.status} (${response.status})${await response.text()}`);
setMaps(response.successResult); return await response.json() as string[];
} }
startFetch(); });
return () => { aborted = true };
}, []);
const onChange = (event: ChangeEvent<HTMLSelectElement>) => { const onChange = (event: ChangeEvent<HTMLSelectElement>) => {
postMaps(event.target.options[event.target.selectedIndex].value); if (event.target.selectedIndex < 1)
return;
event.preventDefault(); event.preventDefault();
const url = makeApiUrl('/map');
url.searchParams.set('name', event.target.options[event.target.selectedIndex].value);
fetch(url, {method: 'POST'});
}; };
return <select value="maps" className='MapChooser-DropDown' onChange={onChange}> return <select value="maps" className="MapChooser-DropDown" onChange={onChange}>
<option value="" defaultValue={""} >Choose map</option> <option value="" defaultValue={''}>Choose map</option>
{mapList?.map(m => {query.isSuccess && query.data.map(m =>
<option key={m} value={m}>{m}</option>)} <option key={m} value={m}>{m}</option>)}
</select> </select>;
} }

View file

@ -2,14 +2,6 @@ export function makeApiUrl(path: string, protocol: 'http' | 'ws' = 'http') {
return new URL(`${protocol}://${window.location.hostname}${path}`); return new URL(`${protocol}://${window.location.hostname}${path}`);
} }
export type ServerResponse<T> = {
ok: boolean;
statusCode: number;
statusText: string;
additionalErrorText?: string;
successResult?: T;
}
export type Scores = { export type Scores = {
readonly kills: number; readonly kills: number;
readonly deaths: number; readonly deaths: number;
@ -22,37 +14,3 @@ export type Player = {
readonly name: string; readonly name: string;
readonly scores: Scores; readonly scores: Scores;
}; };
export async function fetchTyped<T>({url, method}: { url: URL; method: string; }): Promise<ServerResponse<T>> {
const response = await fetch(url, {method});
const result: ServerResponse<T> = {
ok: response.ok,
statusCode: response.status,
statusText: response.statusText
};
if (response.ok)
result.successResult = await response.json();
else
result.additionalErrorText = await response.text();
return result;
}
export function postPlayer(name: string) {
const url = makeApiUrl('/player');
url.searchParams.set('name', name);
return fetchTyped<string>({url, method: 'POST'});
}
export async function getMaps() {
const url = makeApiUrl('/map');
return await fetchTyped<string[]>({url, method: 'GET'});
}
export function postMaps(map: string) {
const url = makeApiUrl('/map');
url.searchParams.set('name', map);
return fetchTyped<string>({url, method: 'POST'});
}