Format all files with no breaking changes
Lint all files using `npm run lint -- --fix`.
Format all files using `prettier --write "**/*.{ts,tsx,js,jsx,json}"`
No breaking change, only code style is modified.
Gitlab: #29
Change-Id: I4f034a7fb4d3eea10bcd3e38b44a65a1046de62f
diff --git a/client/src/components/UsernameChooser.js b/client/src/components/UsernameChooser.js
index 7703639..0061701 100644
--- a/client/src/components/UsernameChooser.js
+++ b/client/src/components/UsernameChooser.js
@@ -1,48 +1,59 @@
-import { useEffect, useState } from 'react'
-import usePromise from "react-fetch-hook/usePromise"
-import { InputAdornment, TextField } from '@mui/material'
-import { SearchRounded } from '@mui/icons-material'
-import authManager from '../AuthManager'
+import { useEffect, useState } from 'react';
+import usePromise from 'react-fetch-hook/usePromise';
+import { InputAdornment, TextField } from '@mui/material';
+import { SearchRounded } from '@mui/icons-material';
+import authManager from '../AuthManager';
-const isInputValid = input => input && input.length > 2
+const isInputValid = (input) => input && input.length > 2;
export default function UsernameChooser(props) {
- const [query, setQuery] = useState('')
+ 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])
+ 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)
- props.setName(query)
- else
- props.setName('')
+ if (error === 404) props.setName(query);
+ else props.setName('');
}
- }, [query, isLoading, data, error])
+ }, [query, isLoading, data, error]);
- const handleChange = event => setQuery(event.target.value)
+ 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>
- )
- }}
- />
- )
+ <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>
+ ),
+ }}
+ />
+ );
}