fix-#249: Now authenticate users able to create blog post.

[0xmohitsen]

Summary

This PR allow authenticated users to create blog posts

Description

This PR addresses an issue where authenticated users were unable to create blog posts despite having valid and unexpired tokens. The problem manifested as an error toast displaying "Something went wrong. Please try again later!" when authenticate users attempted to create a post.

Now authenticate users can create blog post until and unless tokens are valid and unexpired. And if tokens get expired or invalid, we simply display toastify "Your session has expired, please login again!" and redirects to homepage with conditional rendering.

Issue(s) Addressed

Closes #249

Prerequisites

• Have you followed all the CONTRIBUTING GUIDELINES?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
wanderlust	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 16, 2024 6:49pm
wanderlust-backend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 16, 2024 6:49pm

[Sukomal07]

Can you use toast.promise to show different states (pending, success, error) of the API request.

[0xmohitsen]

Can you use toast.promise to show different states (pending, success, error) of the API request.

Sure.

[krishnaacharyaa]

@0xmohitsen @Sukomal07 kindly fix this
#254 is blocked because of this

[Sukomal07]

Ok

[Sukomal07]

@0xmohitsen change your code in this way

`
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
if (validateFormData()) {
try {
const response = axiosInstance.post('/api/posts/', formData);
toast.promise(response, {
pending: 'Creating blog ...',
success: {
render() {
setFormData({
title: '',
authorName: '',
imageLink: '',
categories: [],
description: '',
isFeaturedPost: false,
})
navigate('/')
return "Blog created successfully"
},
},
error: {
render({ data }) {
if (data instanceof AxiosError) {
if (data?.response?.data?.message) {
return data?.response?.data?.message;
}
}
return "Blog created failed"
},
},
}
)

    return (await response).data

  } catch (error) {
    if (isAxiosError(error)) {
      console.error(error.response?.data?.message);
    } else {
      console.error(error);
    }
  }
}

};
`

[0xmohitsen]

@0xmohitsen change your code in this way

` const handleSubmit = async (e: FormEvent) => { e.preventDefault(); if (validateFormData()) { try { const response = axiosInstance.post('/api/posts/', formData); toast.promise(response, { pending: 'Creating blog ...', success: { render() { setFormData({ title: '', authorName: '', imageLink: '', categories: [], description: '', isFeaturedPost: false, }) navigate('/') return "Blog created successfully" }, }, error: { render({ data }) { if (data instanceof AxiosError) { if (data?.response?.data?.message) { return data?.response?.data?.message; } } return "Blog created failed" }, }, } )

    return (await response).data

  } catch (error) {
    if (isAxiosError(error)) {
      console.error(error.response?.data?.message);
    } else {
      console.error(error);
    }
  }
}

}; `

Added this code and tested.