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