CODEWITHSUNDEEP
javascriptreactjsaxios
yung peso
yung peso

Reputation: 1766

Reactjs - How can I create a Boolean based off a successful axios POST?

I have a dispatch that I use to confirm if a user has logged-in. Right now, it currently sends data based off any input in the Login fields. Meaning, you can type in your wrong username and password and the dispatch will act as everything as if the credentials are right.

I would like to only use my dispatch once the user has successfully entered the correct username and password. Here is my code!

export default function SignIn() {
    const history = useHistory();
    const initialFormData = Object.freeze({
        email: '',
        password: '',
    });

    const [formData, updateFormData] = useState(initialFormData);

    const handleChange = (e) => {
        updateFormData({
            ...formData,
            [e.target.name]: e.target.value.trim(),
        });
    };

    const dispatch = useDispatch();

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(formData);

        axiosInstance
            .post(`auth/token/`, {
                grant_type: 'password',
                username: formData.email,
                password: formData.password,

            })
            .then((res) => {
                console.log(res);
                localStorage.setItem('access_token', res.data.access_token);
                localStorage.setItem('refresh_token', res.data.refresh_token);
                history.push('/');
                window.location.reload();
            });

        dispatch(login({
            name: formData.email,
            password: formData.password,
            loggedIn: true,
        }))
    };

Below is the highlight of the problem, I would like to fire-off my dispatch ONLY if a user has successfully logged in. Currently, any textfield input will set off the dispatch.

        dispatch(login({
            name: formData.email,
            password: formData.password,
            loggedIn: true,

I was thinking a Boolean that provides a true false for successful POST HTTP 200 request? If there is a an easier way, then I would like to know :)

Upvotes: 2

Views: 592

Answers (1)

Hyetigran
Hyetigran

Reputation: 1215

Place your dispatch in the then block and add a catch method to handle errors

    const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);

    axiosInstance
        .post(`auth/token/`, {
            grant_type: 'password',
            username: formData.email,
            password: formData.password,

        })
        .then((res) => {
            console.log(res);
            localStorage.setItem('access_token', res.data.access_token);
            localStorage.setItem('refresh_token', res.data.refresh_token);
            history.push('/');
            window.location.reload();
            dispatch(login({
             name: formData.email,
             password: formData.password,
             loggedIn: true,
           }))
        })
        .catch(err => {
           // HANDLE ERROR HERE
        }
};

Upvotes: 2

Related Questions