simon | 07b4eb0 | 2022-09-29 17:50:26 -0400 | [diff] [blame] | 1 | import { SearchRounded } from '@mui/icons-material'; |
| 2 | import { InputAdornment, TextField } from '@mui/material'; |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 3 | import { useEffect, useState } from 'react'; |
| 4 | import usePromise from 'react-fetch-hook/usePromise'; |
simon | 07b4eb0 | 2022-09-29 17:50:26 -0400 | [diff] [blame] | 5 | |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 6 | import authManager from '../AuthManager'; |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 7 | |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 8 | const isInputValid = (input) => input && input.length > 2; |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 9 | |
simon | 80b7b3b | 2022-09-28 17:50:10 -0400 | [diff] [blame] | 10 | export default function UsernameChooser({ setName, ...props }) { |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 11 | const [query, setQuery] = useState(''); |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 12 | |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 13 | const { isLoading, data, error } = usePromise( |
| 14 | () => |
| 15 | isInputValid(query) |
| 16 | ? authManager.fetch(`/api/ns/name/${query}`).then((res) => { |
| 17 | if (res.status === 200) return res.json(); |
| 18 | else throw res.status; |
| 19 | }) |
| 20 | : new Promise((res, rej) => rej(400)), |
| 21 | [query] |
| 22 | ); |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 23 | |
| 24 | useEffect(() => { |
| 25 | if (!isLoading) { |
simon | 80b7b3b | 2022-09-28 17:50:10 -0400 | [diff] [blame] | 26 | if (error === 404) setName(query); |
| 27 | else setName(''); |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 28 | } |
simon | 80b7b3b | 2022-09-28 17:50:10 -0400 | [diff] [blame] | 29 | }, [setName, query, isLoading, data, error]); |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 30 | |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 31 | const handleChange = (event) => setQuery(event.target.value); |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 32 | |
| 33 | return ( |
simon | d47ef9e | 2022-09-28 22:24:28 -0400 | [diff] [blame] | 34 | <TextField |
| 35 | className="main-search-input" |
| 36 | type="search" |
| 37 | placeholder="Register a unique name" |
| 38 | error={!error} |
| 39 | label={ |
| 40 | isLoading |
| 41 | ? 'Searching...' |
| 42 | : error && error !== 400 |
| 43 | ? 'This name is available' |
| 44 | : data && data.address |
| 45 | ? 'This name is not available' |
| 46 | : '' |
| 47 | } |
| 48 | value={query} |
| 49 | disabled={props.disabled} |
| 50 | onChange={handleChange} |
| 51 | InputProps={{ |
| 52 | startAdornment: ( |
| 53 | <InputAdornment position="start"> |
| 54 | <SearchRounded /> |
| 55 | </InputAdornment> |
| 56 | ), |
| 57 | }} |
| 58 | /> |
| 59 | ); |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 60 | } |