Background uploads

src/hooks/useAPI.tsx

@@ -224,37 +224,63 @@ export function useFileUploadAPI() {
 		endpoint: string,
 		body?: object | FormData | 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)'}>{'Uploading image...'}</Text>,
+			autoClose: false,
+			withCloseButton: false,
+			icon: <VscLoading size={24} />,
+		});
 		const options = {
 			method: method,
-			headers: headers,
 			body: body ?? undefined,
 		};
-		const response = await fetch(url, options as unknown as Body);
+		const response = await fetch(`${url}/${endpoint}`, options as unknown as Body);
 		if (!response.ok) {
 			const responseData = await response.json();
-			if (typeof responseData.detail !== 'string') {
-				const errorResponse = JSON.stringify({
-					status: response.status,
-					statusText: response.statusText,
-					method: options.method,
-					endpoint: endpoint,
-					msg: responseData.detail[0].msg,
-					loc: responseData.detail[0].loc,
-					type: responseData.detail[0].type,
-				});
-
-				throw new Error(errorResponse);
+			if (typeof responseData === 'object') {
+				if (responseData.error.code === 'ER_DUP_ENTRY') {
+					setTimeout(() => {
+						notifications.update({
+							id: id,
+							loading: false,
+							title: (
+								<Text fw={600} c={'var(--mantine-color-accent-0)'}>
+									{method} Failure!
+								</Text>
+							),
+							message: (
+								<Text c={'var(--mantine-color-primary-0)'}>
+									Entry with that name already exists.
+								</Text>
+							),
+							autoClose: 2500,
+							icon: <FaCheck size={24} />,
+						});
+					}, 2500);
+				}
 			}
-			const errorResponse = JSON.stringify({
-				status: response.status,
-				statusText: response.statusText,
-				method: options.method,
-				endpoint: endpoint,
-				msg: responseData.detail,
-			});
-
-			throw new Error(errorResponse);
+			return await responseData;
 		}
+		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)'}>{response.statusText}</Text>,
+				autoClose: 2500,
+				icon: <FaCheck size={24} />,
+			});
+		}, 2500);
 		return await response.json();
 	};
 
@@ -270,12 +296,8 @@ export function useFileUploadAPI() {
 			body: object | FormData | undefined | null;
 		}) => callEndpoint(method, endpoint, body),
 		onMutate: () => {},
-		onSuccess: (variables) => {
-			queryClient.invalidateQueries({ queryKey: ['GET', variables.endpoint] });
-			if (variables.endpoint?.includes('/')) {
-				const GetEndpoint = variables.endpoint.split('/')[1];
-				queryClient.invalidateQueries({ queryKey: ['GET', `/${GetEndpoint}`] });
-			}
+		onSuccess: (_variables) => {
+			queryClient.invalidateQueries({ queryKey: ['GET', 'api/backgrounds'] });
 		},
 	});
 }