Merge pull request #3 from kaesaecracker/use-mutation

useMutation for POST requests

tank-frontend/src/JoinForm.tsx

@@ -1,40 +1,33 @@
-import {useEffect, useState} from 'react';
+import {useState} from 'react';
 import './JoinForm.css';
-import {makeApiUrl, Player} from './serverCalls';
+import {makeApiUrl} from './serverCalls';
 import Column from './components/Column.tsx';
 import Button from './components/Button.tsx';
 import TextInput from './components/TextInput.tsx';
+import {useMutation} from '@tanstack/react-query';
 
 export default function JoinForm({onDone}: {
     onDone: (name: string) => void;
 }) {
-    const [clicked, setClicked] = useState(false);
-    const [data, setData] = useState<Player | null>(null);
-    const [errorText, setErrorText] = useState<string | null>();
-
-    useEffect(() => {
-        if (!clicked || data)
-            return;
-
+    const postPlayer = useMutation({
+        retry: false,
+        mutationFn: async ({name}: { name: string }) => {
             const url = makeApiUrl('/player');
             url.searchParams.set('name', name);
 
-        fetch(url, {method: 'POST'})
-            .then(async response => {
-                if (!response.ok) {
-                    setErrorText(`${response.status} (${response.statusText}): ${await response.text()}`);
-                    setClicked(false);
-                    return;
-                }
+            const response = await fetch(url, {method: 'POST'});
+
+            if (!response.ok)
+                throw new Error(`${response.status} (${response.statusText}): ${await response.text()}`);
 
             onDone((await response.json()).trim());
-                setErrorText(null);
+        }
     });
-    }, [clicked, setData, data, setClicked, onDone, errorText]);
 
     const [name, setName] = useState('');
-    const disableButtons = clicked || name.trim() === '';
-    const setClickedTrue = () => setClicked(true);
+    const disableButtons = postPlayer.isPending || name.trim() === '';
+
+    const confirm = () => postPlayer.mutate({name});
 
     return <Column className="JoinForm">
         <h3> Enter your name to play </h3>
@@ -42,12 +35,12 @@ export default function JoinForm({onDone}: {
             value={name}
             placeholder="player name"
             onChange={e => setName(e.target.value)}
-            onEnter={setClickedTrue}
+            onEnter={confirm}
         />
         <Button
-            onClick={setClickedTrue}
+            onClick={confirm}
             disabled={disableButtons}
             text="INSERT COIN"/>
-        {errorText && <p>{errorText}</p>}
+        {postPlayer.isError && <p>{postPlayer.error.message}</p>}
     </Column>;
 }

tank-frontend/src/MapChooser.tsx

@@ -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>;
 }