✨ Add & display loves on map

app/hooks/useActions.ts

@@ -0,0 +1,75 @@
+import { FormEvent } from 'react';
+
+export const useActions = ({
+	viewState,
+	setIsAddLoveOpened,
+	setIsLoading,
+	setAddLoveMessage,
+}) => {
+	const toggleLoveMenu = () => {
+		setIsAddLoveOpened((prev) => !prev);
+	};
+
+	const addPoint = async (ev: FormEvent<HTMLFormElement>) => {
+		ev.preventDefault();
+
+		if (!ev.currentTarget.reportValidity()) {
+			return;
+		}
+
+		setIsLoading(true);
+
+		const formData = new FormData(ev.currentTarget);
+		const location = formData.get('location');
+		const comment = formData.get('comment');
+
+		const body: { [key: string]: any } = {
+			location: location.toString(),
+		};
+
+		if (comment && comment.toString().length > 0) {
+			body.comment = comment.toString();
+		}
+
+		const token = localStorage.getItem('token');
+
+		const { latitude, longitude } = viewState;
+
+		const point = {
+			type: 'Point',
+			coordinates: [longitude, latitude],
+		};
+
+		body.geopoint = point;
+
+		try {
+			const request = await fetch('/api/point', {
+				method: 'POST',
+				headers: {
+					Authorization: token,
+					'Content-Type': 'application/json',
+				},
+				body: JSON.stringify(body),
+			});
+
+			if (request.status == 403) {
+				setIsLoading(false);
+				setAddLoveMessage('Reconnectez-vous pour réessayer');
+				return;
+			}
+			if (request.status == 400) {
+				setIsLoading(false);
+				setAddLoveMessage('Erreur interne. Veuillez réessayer');
+				return;
+			}
+
+			setIsLoading(false);
+		} catch (error) {
+			console.error(error);
+			setAddLoveMessage('Erreur interne. Veuillez réessayer');
+			setIsLoading(false);
+		}
+	};
+
+	return { toggleLoveMenu, addPoint };
+};