client/src/components/UsernameChooser.js

import { SearchRounded } from '@mui/icons-material';
import { InputAdornment, TextField } from '@mui/material';
import { useEffect, useState } from 'react';
import usePromise from 'react-fetch-hook/usePromise';

import authManager from '../AuthManager';

const isInputValid = (input) => input && input.length > 2;

export default function UsernameChooser({ setName, ...props }) {
  const [query, setQuery] = useState('');

  const { isLoading, data, error } = usePromise(
    () =>
      isInputValid(query)
        ? authManager.fetch(`/api/ns/name/${query}`).then((res) => {
            if (res.status === 200) return res.json();
            else throw res.status;
          })
        : new Promise((res, rej) => rej(400)),
    [query]
  );

  useEffect(() => {
    if (!isLoading) {
      if (error === 404) setName(query);
      else setName('');
    }
  }, [setName, query, isLoading, data, error]);

  const handleChange = (event) => setQuery(event.target.value);

  return (
    <TextField
      className="main-search-input"
      type="search"
      placeholder="Register a unique name"
      error={!error}
      label={
        isLoading
          ? 'Searching...'
          : error && error !== 400
          ? 'This name is available'
          : data && data.address
          ? 'This name is not available'
          : ''
      }
      value={query}
      disabled={props.disabled}
      onChange={handleChange}
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <SearchRounded />
          </InputAdornment>
        ),
      }}
    />
  );
}