Replace fetch with Axios in client
Replace `.then` with await syntax where possible.
GitLab: #142
Change-Id: I6c132f49f152afa7e20919a1c70c539f2ad54878
diff --git a/client/src/components/UsernameChooser.jsx b/client/src/components/UsernameChooser.jsx
index 3c1f584..77c1d73 100644
--- a/client/src/components/UsernameChooser.jsx
+++ b/client/src/components/UsernameChooser.jsx
@@ -17,8 +17,8 @@
*/
import { SearchRounded } from '@mui/icons-material';
import { InputAdornment, TextField } from '@mui/material';
+import axios from 'axios';
import { useEffect, useState } from 'react';
-import usePromise from 'react-fetch-hook/usePromise';
import { apiUrl } from '../utils/constants.js';
@@ -26,17 +26,29 @@
export default function UsernameChooser({ setName, ...props }) {
const [query, setQuery] = useState('');
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState();
+ const [data, setData] = useState();
- const { isLoading, data, error } = usePromise(
- () =>
- isInputValid(query)
- ? fetch(new URL(`/ns/username/${query}`, apiUrl)).then((res) => {
- if (res.status === 200) return res.json();
- else throw res.status;
- })
- : new Promise((res, rej) => rej(400)),
- [query]
- );
+ useEffect(() => {
+ if (isInputValid(query)) {
+ setIsLoading(true);
+ axios
+ .get(`/ns/username/${query}`, {
+ baseURL: apiUrl,
+ })
+ .then((res) => {
+ setIsLoading(false);
+ if (res.status === 200) {
+ setData(res.data);
+ } else {
+ throw res.status;
+ }
+ });
+ } else {
+ setError(400);
+ }
+ }, [query]);
useEffect(() => {
if (!isLoading) {