Zacząłem się uczyć Reacta razem z TypeScript i tworzę obecnie aplikację typu CRUD. na razie stworzyłem rejestrację, oczywiście ten kod działa, tylko mam prośbę aby ktoś bardziej doświadczony sprawdził ten kod i wskazał co można w tym kodzie poprawić tak abym tych błędów więcej nie popełniał. Chodzi mi o to co można w tym kodzie zmienić na lepsze i czy można ten kod przenieść do innych miejsc żeby było bardziej czytelnie. Z góry dzięki
import {FC, useState} from "react";
import axios from "axios";
const AuthRegister: FC = () => {
const [formValues, setFormValues] = useState({
first_name: "",
last_name: "",
email: "",
password: "",
});
const [errors, setErrors] = useState({
first_name: "",
last_name: "",
email: "",
password: "",
});
const [message, setMessage] = useState(false);
const [showMessage, setShowMessage] = useState(false);
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const {name, value} = e.target;
setFormValues({...formValues, [name]: value});
};
const storeUser = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
try {
const response = await axios.post("http://store.localhost/api/auth/register", formValues);
setFormValues({
first_name: "",
last_name: "",
email: "",
password: "",
});
const message = response.data.message;
setMessage(message);
setShowMessage(true);
} catch (error: any) {
if (error.response && error.response.status === 422) {
setErrors(error.response.data.errors);
} else {
console.log(error);
}
}
}
return (
<div className="flex justify-center items-center h-screen bg-teal-100">
<form className="bg-teal-600 rounded-lg p-8 w-96" onSubmit={storeUser}>
<div className="text-white text-center">
<h1 className="text-4xl mb-8">Registration</h1>
</div>
<div className="text-center">
{showMessage && (
<div className="mt-4 bg-green-200 text-natural-600 p-2 rounded-md">
<strong>{message}</strong>
</div>
)}
</div>
<div className="mb-6 mt-8">
<label htmlFor="" className="block mb-2 text-sm font-medium text-white">Your first name</label>
<input
type="text"
id="first_name"
name="first_name"
value={formValues["first_name"]}
onChange={onChange}
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"/>
{errors.first_name && <span className="text-sm text-red-400"><strong>{errors.first_name[0]}</strong></span>}
</div>
<div className="mb-6 mt-8">
<label htmlFor="email" className="block mb-2 text-sm font-medium text-white">Your last name</label>
<input type="text"
id="last_name"
name="last_name"
value={formValues['last_name']}
onChange={onChange}
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"/>
{errors.last_name && <span className="text-sm text-red-400"><strong>{errors.last_name[0]}</strong></span>}
</div>
<div className="mb-6 mt-8">
<label htmlFor="email" className="block mb-2 text-sm font-medium text-white">Your email</label>
<input type="email"
id="email"
name="email"
value={formValues['email']}
onChange={onChange}
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"/>
{errors.email && <span className="text-sm text-red-400"><strong>{errors.email[0]}</strong></span>}
</div>
<div className="mb-6">
<label htmlFor="password" className="block mb-2 text-sm font-medium text-white">Your password</label>
<input type="password"
id="password"
name="password"
value={formValues['password']}
onChange={onChange}
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"/>
{errors.password && <span className="text-sm text-red-400"><strong>{errors.password[0]}</strong></span>}
</div>
<button type="submit" className="text-white bg-sky-500 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Sign up</button>
</form>
</div>
);
};
export default AuthRegister;
