Minor changes to styles and packages

src/hooks/useAPI.tsx

@@ -1,6 +1,8 @@
+import { Text } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useRef } from 'react';
-import { Flip, toast } from 'react-toastify';
+import { FaCheck } from 'react-icons/fa';
+import { VscLoading } from 'react-icons/vsc';
 
 const url = `${import.meta.env.PROD ? import.meta.env.VITE_DOMAIN_PROD : import.meta.env.VITE_DOMAIN_DEV}/${import.meta.env.VITE_BASE_URL}`;
 const headers: HeadersInit = {
@@ -40,21 +42,32 @@ export function useQueryAPI({ endpoint }: { endpoint: string }) {
 }
 
 export function useMutationAPI() {
-	const toastId = useRef<any>(null);
-	const notify = () => {
-		toastId.current = toast('Sending...', { position: 'bottom-right', autoClose: false });
-	};
 	const callEndpoint = async (
 		method: string,
 		endpoint: string,
 		body: object | undefined | null,
 	) => {
+		const id = notifications.show({
+			loading: true,
+			title: (
+				<Text fw={600} c={'var(--mantine-color-accent-0)'}>
+					{method} {endpoint}
+				</Text>
+			),
+			message: (
+				<Text c={'var(--mantine-color-primary-0)'}>
+					{body ? JSON.stringify(body) : 'Calling API...'}
+				</Text>
+			),
+			autoClose: false,
+			withCloseButton: false,
+			icon: <VscLoading size={24} />,
+		});
 		const options: { method: string; headers: HeadersInit | undefined; body: string } = {
 			method: method,
 			headers: headers,
 			body: JSON.stringify(body),
 		};
-		notify();
 		const response = await fetch(`${url}/${endpoint}`, options);
 		if (!response.ok) {
 			const responseData = await response.json();
@@ -68,11 +81,6 @@ export function useMutationAPI() {
 					loc: responseData.detail[0]?.loc,
 					type: responseData.detail[0]?.type,
 				});
-				toast.update(toastId.current, {
-					render: errorResponse,
-					type: 'error',
-					autoClose: 5000,
-				});
 				throw new Error(errorResponse);
 			}
 			if (typeof responseData.detail === 'object') {
@@ -83,11 +91,6 @@ export function useMutationAPI() {
 					endpoint: endpoint,
 					msg: responseData.detail.message,
 				});
-				toast.update(toastId.current, {
-					render: errorResponse,
-					type: 'error',
-					autoClose: 5000,
-				});
 				throw new Error(errorResponse);
 			}
 			const errorResponse = JSON.stringify({
@@ -97,18 +100,24 @@ export function useMutationAPI() {
 				endpoint: endpoint,
 				msg: responseData.detail,
 			});
-			toast.update(toastId.current, {
-				render: errorResponse,
-				type: 'error',
-				autoClose: 5000,
-			});
 			throw new Error(errorResponse);
 		}
-		toast.update(toastId.current, {
-			render: 'Success!',
-			autoClose: 2000,
-			transition: Flip,
-		});
+		setTimeout(() => {
+			notifications.update({
+				id: id,
+				loading: false,
+				title: (
+					<Text fw={600} c={'var(--mantine-color-accent-0)'}>
+						{method} Success!
+					</Text>
+				),
+				message: (
+					<Text c={'var(--mantine-color-primary-0)'}>Called endpoint {endpoint}</Text>
+				),
+				autoClose: 2500,
+				icon: <FaCheck size={24} />,
+			});
+		}, 2500);
 		return await response.json();
 	};
 
@@ -266,7 +275,6 @@ export function useFileUploadAPI() {
 			method: string;
 			endpoint: string;
 			body: object | FormData | undefined | null;
-			toastID?: string;
 		}) => callEndpoint(method, endpoint, body),
 		onMutate: () => {},
 		onSuccess: (variables) => {