Z Pliku LoginForm.js:
function handleInputChange(event) {
const target = event.target;
setInputData(Object.assign({}, inputData, {[target.name]: target.value}))
}
Korzystaj z destrukturyzacji. W sumie chyba wiesz co to i jak działa, bo czasem w kodzie używasz.
function handleInputChange({target}) {
setInputData(Object.assign({}, inputData, {[target.name]: target.value}))
}
if (inputData.email === '') {
tmpErrors.push(['Address email is empty']);
}
if (inputData.password === '') {
tmpErrors.push(['You did not enter your password']);
}
W JS pusty string przyjmuje wartość false więc wystarczyło by
if (!inputData.password) {
tmpErrors.push(['You did not enter your password']);
}
Ale jak chcesz sprawdzić czy ktoś nie zostawił pustego pola to warto skorzystać z funkcji trim czyli:
if (inputData.password.trim().length < 1) {
tmpErrors.push(['You did not enter your password']);
}
await authProvider.login({
username: inputData.email,
password: inputData.password
}).then(response => {
setLoading(false);
if (response && response.hasError) {
setErrors(response.errors);
} else {
setAuthed(true);
}
})
Albo składnia async/await albo promisy wybierz jedno.
Fajnie też jakby walidacja miała swoją funkcję, a nie tak wszystko razem w handleSubmit.
Loader.js:
class Loader extends React.Component {
render() {
return (
<div className={'loader-container'}>
<ClipLoader size={100} loading={this.props.loading}/>
</div>
)
}
}
Zdecydowanie wystarczy tu komponent funkcyjny. Zresztą bardzo nie spójnie raz używać klasowych raz funkcyjnych widać, że to jakieś legacy. I dużo się chyba uczyłeś podczas pisania tej apki.
AddTransactionForm.js:
function handleInputChange(event) {
const target = event.target;
setInputData(Object.assign({}, inputData, {[target.name]: target.value}))
}
Destrukturyzacja, plus useState jest async więc jak chcesz skorzystać z poprzedniego stanu w nowym to zaleca się to robić w callbacku (popatrz poniżej). No i spread operator zamiast Objec.assign
function handleInputChange({target: {name, value}}) {
setInputData((prevState) => ({...prevState, [name]:value}))
}
To tak na razie starczy. Koduj dalej, jak trochę jeszcze podciągniesz skilla i będziesz miał ochotę to pisz może coś razem stworzymy