Post form api layer

frontend/src/App.jsx

@@ -15,9 +15,11 @@ const App = () => {
 	return (
 		<>
 			{modalData.modalShow && modalData.modalType === 'viewDeadline' ? (
+				// This modalData object passed down is always undefined for some reason. Should be fixed
 				<ViewDeadline modalData={modalData} />
 			) : null}
 			{modalData.modalShow && modalData.modalType === 'newDeadline' ? (
+				// This modalData object passed down is always undefined for some reason. Should be fixed
 				<NewDeadline modalData={modalData} />
 			) : null}
 			<Layout />

frontend/src/api/reminders.js

@@ -1,6 +1,7 @@
 import axios from 'axios'
-import { useQuery } from 'react-query'
-// import { validateCreateReminderData } from '../utils/validation'
+import { useMutation, useQuery } from 'react-query'
+import errorHandler from './utils/errorHandler'
+import validateCreateReminderData from './utils/validation'
 
 const axiosInstance = axios.create({
 	baseURL: '/api/v1',
@@ -17,7 +18,7 @@ export const useAllReminders = () => {
 				})
 				return { ...res, length: res.data.data.result.length }
 			} catch (error) {
-				throw error
+				throw errorHandler(error)
 			}
 		},
 		{
@@ -31,77 +32,35 @@ export const useAllReminders = () => {
 		}
 	)
 
-	return { isLoading, fetchedData: data, error, isPlaceholderData, isError }
-}
-
-// export const useCreateReminder = (payload) => {
-// 	const isDataValid = validateCreateReminderData(payload)
-// 	if (!isDataValid) {
-// 		throw new Error('Invalid Payload')
-// 	} else {
-// 		new Promise((resolve, reject) => {
-// 			try {
-// 				const axiosQuery = async () => {
-// 					const res = await axiosInstance(
-// 						{
-// 							method: 'POST',
-// 							url: '/reminders',
-// 						},
-// 						{ data: payload }
-// 					)
-// 					return res
-// 				}
-// 				const { data, error } = useMutation('createReminder', axiosQuery)
-
-// 				if (error) {
-// 					reject(error)
-// 				} else {
-// 					resolve(data)
-// 				}
-// 			} catch (error) {
-// 				reject(error)
-// 			}
-// 		})
-// 	}
-// }
+	// fetchedData is the response returned from the get query, error only exists if there's an error
+	// isLoading and isPlaceholderData are Booleans representing loading and palceholder data states respectively
+	// isPlaceholder exists primarily to deal with react calling methods on undefined when mounting components
 
-// export const useDeleteReminder = (id) => {
-// 	new Promise((resolve, reject) => {
-// 		try {
-// 			if (!id) throw new Error('Invalid id')
+	return { fetchedData: data, isLoading, error, isPlaceholderData, isError }
+}
 
-// 			const axiosQuery = async () => {
-// 				const res = await axiosInstance({
-// 					url: `/reminders/${id}`,
-// 					method: 'DELETE',
-// 				})
-// 				return res
-// 			}
-// 			const { data, error } = useMutation('deleteReminder', axiosQuery)
-// 			if (error) {
-// 				reject(error)
-// 			} else {
-// 				resolve(data)
-// 			}
-// 		} catch (error) {
-// 			reject(error)
-// 		}
-// 	})
-// }
+export const useCreateReminder = (payload) => {
+	const { data, error, isLoading, isSuccess } = useMutation(
+		'createReminder',
+		async () => {
+			if (validateCreateReminderData(payload)) {
+				try {
+					const res = await axiosInstance({
+						data: payload,
+						method: 'POST',
+						url: '/reminders',
+					})
 
-// export const useUpcomingReminders = new Promise((resolve, reject) => {
-// 	try {
-// 		const axiosQuery = async () => {
-// 			const res = await axiosInstance({
-// 				method: 'GET',
-// 				url: '/upcoming',
-// 			})
-// 			return res
-// 		}
-// 		const { data } = useQuery('upcomingReminders', axiosQuery)
+					return res
+				} catch (error) {
+					throw errorHandler(error)
+				}
+			}
+		}
+	)
 
-// 		resolve(data)
-// 	} catch (error) {
-// 		reject(error)
-// 	}
-// })
+	// Data is the response returned from the post, error only exists if there's an error
+	// isLoading and isSuccess are Booleans representing loading and success states respectively
+	// You can use isLoading to show loading spinners and isSuccess to tell when the request completed successfully and inform the user
+	return { responseBody: data, error, isLoading, isSuccess }
+}

frontend/src/api/utils/errorHandler.js

@@ -0,0 +1,44 @@
+const errorHandler = (error) => {
+	switch (error) {
+		case error.response.status === 204:
+			return new Error({
+				message: 'No data found',
+				statusCode: 204,
+				headers: error.response.headers,
+			})
+		case error.response.status === 400:
+			return new Error({
+				message: 'Bad request due to invalid syntax',
+				statusCode: 400,
+				headers: error.response.headers,
+			})
+		case error.response.status === 403:
+			return new Error({
+				message: 'Client does not have access rights to content',
+				statusCode: 403,
+				headers: error.response.headers,
+			})
+		case error.response.status === 404:
+			return new Error({
+				message: 'Server cannot find requested resource',
+				statusCode: 404,
+				headers: error.response.headers,
+			})
+		case error.response.status === 500:
+			return new Error({
+				message: 'Internal server error',
+				statusCode: 500,
+				headers: error.response.headers,
+			})
+		case error.response.status === 503:
+			return new Error({
+				message: 'Service Unavailable',
+				statusCode: 503,
+				headers: error.response.headers,
+			})
+		default:
+			return new Error('Fetching data failed')
+	}
+}
+
+export default errorHandler

frontend/src/utils/validation.js → frontend/src/api/utils/validation.js

@@ -1,4 +1,4 @@
-export const validateCreateReminderData = (payload) => {
+const validateCreateReminderData = (payload) => {
 	if (!payload) throw new Error('Invalid Payload')
 
 	const { title, description, assignees, creator, startDate, dueDate, time } =
@@ -25,3 +25,5 @@ export const validateCreateReminderData = (payload) => {
 		return false
 	}
 }
+
+export default validateCreateReminderData