Mały projekt w ReactJs

Cześć,
W ramach nauki Reacta, stworzyłem ostatnio taką dość prostą aplikacje do zbierania historii własnych transakcji i robieniu podsumowania.
Tak, wiem że to samo można podejrzeć na stronie banku (chociaż tu jest przewaga ze względu na transakcje bezgotówkowe).
Początkowo aplikacja miała być managerem do zarządzania wydatkami, ale pojawiła się myśl, aby w przyszłości wrzucać tam wszystko co może być przydatne np. spis fajnych cytatów, snów, wykresy wpływów itp :)

Pierwszy projekt w React i pewnie można by było zrobić coś lepiej. Dlatego prosiłbym was o małe code review :)

[email: demo@demo.com, password: demo1234]
https://home-manager.jakub-batko.pl/
https://github.com/Bosswell/front_home_manager

Dla zainteresowany backend napisany w Symfony
https://github.com/Bosswell/home_manager

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