diff --git a/components/Contact.tsx b/components/Contact.tsx index 86b2302..69f31a3 100644 --- a/components/Contact.tsx +++ b/components/Contact.tsx @@ -6,7 +6,8 @@ If you want to change the email provider, don't hesitate to create a new api rou the axios.post here, line 18. */ -import axios from 'axios'; +import axios, { AxiosError } from 'axios'; + import { toast } from 'react-toastify'; const sendEmail = async (): Promise => { @@ -20,6 +21,13 @@ const sendEmail = async (): Promise => { message: string; } + interface ErrorAxios { + data: { + error: string; + success: boolean; + }; + } + if (name && email && message) { try { const mail = await axios.post('/api/sendgrid', { @@ -33,8 +41,10 @@ const sendEmail = async (): Promise => { (document.querySelector('#email') as HTMLInputElement).value = ''; (document.querySelector('#message') as HTMLInputElement).value = ''; } - } catch (error) { - console.log(error); + } catch (error: unknown) { + const errorChecked = error as AxiosError; + const errorMessage = errorChecked.response as ErrorAxios; + toast.error(errorMessage.data.error); } } else { toast.info('Please fill all the fields ', { diff --git a/components/MailingList.tsx b/components/MailingList.tsx index b8b197e..5dbfe6c 100644 --- a/components/MailingList.tsx +++ b/components/MailingList.tsx @@ -3,9 +3,11 @@ This is the form component to register an email adress to your mailing list. This is just the frontend, and the email will be send to our backend API (/api/mailingList) */ +import axios, { AxiosError } from 'axios'; + import Image from 'next/image'; import Mailing from 'public/landing/mailing.svg'; -import axios from 'axios'; +import { Toast } from 'react-toastify/dist/types'; import { toast } from 'react-toastify'; import { useState } from 'react'; @@ -14,6 +16,12 @@ const MailingList = (): JSX.Element => { const [loading, setLoading] = useState(false); const [valid, setValid] = useState(true); + interface ErrorAxios { + data: { + error: string; + success: boolean; + }; + } const validateEmail = (): void => { // Regex patern for email validation const regex = @@ -33,17 +41,24 @@ const MailingList = (): JSX.Element => { const subscribe = async (): Promise => { setLoading(true); - const data = await axios.put('api/mailingList', { - mail, - }); + try { + const data = await axios.put('api/mailingList', { + mail, + }); - if (data.status === 200) { - toast.success('You have been added to our mailing list. Welcome 👋'); - setLoading(false); - setMail(''); - } else { - toast.error('Something went wrong'); - setLoading(false); + if (data.status === 200) { + toast.success('You have been added to our mailing list. Welcome 👋'); + setLoading(false); + setMail(''); + } + } catch (error: unknown) { + const errorChecked = error as AxiosError; + const errorMessage = errorChecked.response as ErrorAxios; + + if (errorMessage.data.error) { + toast.error(errorMessage.data.error); + setLoading(false); + } } }; return ( diff --git a/components/UI/Login.tsx b/components/UI/Login.tsx index b5805f5..7107a26 100644 --- a/components/UI/Login.tsx +++ b/components/UI/Login.tsx @@ -24,11 +24,15 @@ const Login = ({ resetPassword, signIn }: LoginProperties): JSX.Element => { const [forgot, setForgot] = useState(false); const resetPasswordLogin = async (): Promise => { - await resetPassword(email).then((result: { error: ApiError | null }) => { - if (result.error) { - toast.error(result.error.message); - } else toast.success('Check your email to reset your password!'); - }); + const result = await resetPassword(email); + + if (result.error) { + toast.error(result.error.message); + } else if (result.data) { + toast.success( + 'A password reset email has been sent to you, watch your mailbox!' + ); + } }; const login = async ( @@ -37,17 +41,16 @@ const Login = ({ resetPassword, signIn }: LoginProperties): JSX.Element => { event.preventDefault(); // Handle the login. Go to the homepage if success or display an error. - await signIn({ + const result = await signIn({ email, password, - }).then((result) => { - if (result) { - void router.push('/'); - } - if (result.error) { - toast.error(result.error.message); - } }); + + if (result.error) { + toast.error(result.error.message); + } else if (result.user) { + void router.push('/'); + } }; return ( diff --git a/components/UI/SignUpPanel.tsx b/components/UI/SignUpPanel.tsx index f5672f5..0e95706 100644 --- a/components/UI/SignUpPanel.tsx +++ b/components/UI/SignUpPanel.tsx @@ -32,21 +32,20 @@ const SignUpPanel = ({ event.preventDefault(); // Handle the login. Go to the homepage if success or display an error. - await signUp({ + const result = await signUp({ email, password, - }).then((result) => { - console.log(result); - if (result.error) { - toast.error(result.error.message); - } else if (result.user?.confirmation_sent_at) { - toast.success( - 'A confirmation email has been sent to you, watch your mailbox!' - ); - } else if (result.user) { - void router.push('/'); - } }); + + if (result.error) { + toast.error(result.error.message); + } else if (result.user?.confirmation_sent_at) { + toast.success( + 'A confirmation email has been sent to you, watch your mailbox!' + ); + } else if (result.user) { + void router.push('/'); + } }; return ( diff --git a/pages/api/mailingList.ts b/pages/api/mailingList.ts index 689efd3..2efba42 100644 --- a/pages/api/mailingList.ts +++ b/pages/api/mailingList.ts @@ -37,33 +37,30 @@ export default async function handler( await cors(request, response); await limiter(request, response); if (request.method === 'PUT') { - axios - .put( - 'https://api.sendgrid.com/v3/marketing/contacts', - { - contacts: [{ email: `${request.body.mail}` }], - list_ids: [process.env.SENDGRID_MAILING_ID], + const result = await axios.put( + 'https://api.sendgrid.com/v3/marketing/contacts', + { + contacts: [{ email: `${request.body.mail}` }], + list_ids: [process.env.SENDGRID_MAILING_ID], + }, + { + headers: { + 'content-type': 'application/json', + Authorization: `Bearer ${process.env.SENDGRID_SECRET || ''}`, }, - { - headers: { - 'content-type': 'application/json', - Authorization: `Bearer ${process.env.SENDGRID_SECRET || ''}`, - }, - } - ) - .then((result) => { - console.log(result); - response.status(200).send({ - message: - 'Your email has been succesfully added to the mailing list. Welcome 👋', - }); - }) - .catch((error) => { - response.status(500).send({ - message: - 'Oups, there was a problem with your subscription, please try again or contact us', - error: error as string, - }); + } + ); + + if (result.status === 200) { + response.status(200).json({ + message: + 'Your email has been succesfully added to the mailing list. Welcome 👋', }); + } else { + response.status(500).json({ + error: + 'Oups, there was a problem with your subscription, please try again or contact us', + }); + } } } diff --git a/pages/api/sendgrid.ts b/pages/api/sendgrid.ts index 1f07281..0c3aacf 100644 --- a/pages/api/sendgrid.ts +++ b/pages/api/sendgrid.ts @@ -15,7 +15,10 @@ interface Request extends NextApiRequest { }; } -const sendGrid = (request: Request, response: NextApiResponse): void => { +const sendGrid = async ( + request: Request, + response: NextApiResponse +): Promise => { if (request.method === 'POST') { sgMail.setApiKey(process.env.SENDGRID_SECRET || ''); @@ -29,20 +32,25 @@ const sendGrid = (request: Request, response: NextApiResponse): void => { reply_to: request.body.email, }; - sgMail - .send(message) - .then(() => { - response - .status(200) - .send({ message: 'Your email has been sent', success: true }); - }) - .catch((error: string) => { - console.error(error); - response.status(500).send({ - message: 'There was an issue with your email... please retry', - error, + try { + const result = await sgMail.send(message); + console.log(result); + if (result) { + response.status(200).json({ + message: + 'Your message has been succesfully sent. Thank you for your feedback.', + success: true, }); - }); + } + } catch (error: unknown) { + if (error) { + response.status(500).json({ + error: + 'Oups, there was a problem with your email, please try again or contact us', + success: false, + }); + } + } } }; export default sendGrid;