feat: migrate to Astro actions

astro.config.mjs

@@ -7,6 +7,9 @@ import cloudflare from "@astrojs/cloudflare";
 import million from "million/compiler";
 
 export default defineConfig({
+	experimental: {
+		actions: true,
+	},
 	site: "https://biancafiore.me",
 	vite: {
 		ssr: {

package.json

@@ -52,7 +52,7 @@
 		"@fontsource/baskervville": "^5.0.20",
 		"@hookform/resolvers": "^3.3.4",
 		"astro": "^4.8.3",
-		"firebase": "^10.11.1",
+		"firebase": "^10.12.0",
 		"firebase-admin": "^12.1.0",
 		"gsap": "^3.12.5",
 		"markdown-it": "^14.1.0",
@@ -64,7 +64,7 @@
 		"react-hook-form": "^7.51.4",
 		"react-router-dom": "^6.23.1",
 		"resend": "^3.2.0",
-		"swiper": "^11.1.2",
+		"swiper": "^11.1.3",
 		"three": "^0.164.1",
 		"zod": "^3.23.8"
 	},

src/actions/index.ts

@@ -0,0 +1,60 @@
+import { defineAction, z, ActionError } from "astro:actions";
+import { DEFAULT_LOCALE_STRING } from '../consts.ts';
+import { sendEmail } from '@server/email/server.ts';
+import { app } from "@server/firebase/server.ts";
+import { getFirestore } from "firebase-admin/firestore";
+import type { FormData } from '@components/organisms/contactForm';
+
+type ContactDetails = Omit<FormData, "recaptcha">;
+
+const contactFormSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  email: z.string().email(),
+  message: z.string(),
+  date: z.union([z.date(), z.string()]),
+}).omit({ id: true, date: true });
+
+const database = getFirestore(app);
+
+export const server = {
+  contact: defineAction({
+    accept: 'form',
+    input: contactFormSchema,
+    handler: async ({ name, email, message }: ContactDetails) => {
+      try {
+        const contactValidation = contactFormSchema.safeParse({
+          name,
+          email,
+          message
+        });
+        if (!contactValidation.success) throw new Error(contactValidation.error?.errors.join(", ") || "Invalid data");
+
+        const { data } = contactValidation;
+        const databaseRef = database.collection("contacts");
+        await databaseRef.add({
+          id: crypto.randomUUID(),
+          name: data.name,
+          email: data.email,
+          message: data.message,
+          date: new Date().toLocaleString(DEFAULT_LOCALE_STRING),
+        });
+        const { data: emailData, error: emailError } = await sendEmail(data);
+        if (emailError && !emailData) {
+          throw new Error(`Something went wrong sending the email. Error: ${emailError.message} (${emailError.name})`);
+        }
+
+        return {
+          ok: true
+        }
+      } catch (error: unknown) {
+        const actionError = error as ActionError;
+
+        const message = actionError.message || "Something went wrong";
+        const code = actionError.status ?? 500;
+
+        return new ActionError({ code, message });
+      }
+    },
+  }),
+};

src/env.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../.astro/actions.d.ts" />
 /// <reference path="../.astro/types.d.ts" />
 interface ImportMetaEnv {
 	readonly PUBLIC_GOOGLE_ANALYTICS_ID: string;

src/ui/components/organisms/contactForm/ContactForm.tsx

@@ -9,6 +9,7 @@ import { CONTACT_FORM_REQUEST_PARAMETERS } from "src/consts.ts";
 import { encode } from "@components/organisms/contactForm/utils/encode";
 import { flyPlane } from "@components/organisms/contactForm/utils/flyPlane";
 import Spinner from "@components/atoms/spinner/Spinner.tsx";
+import { actions } from "astro:actions";
 
 const schema = z.object({
 	name: z.string().trim().min(1, "Please insert your name"),
@@ -69,12 +70,12 @@ export const ContactForm = () => {
 
 		try {
 			setFormStatus(FormStatus.LOADING);
-			const requestParams: RequestInit = {
-				...CONTACT_FORM_REQUEST_PARAMETERS,
-				body: encode({ ...data }),
-			};
+			const contactData = new FormData();
+			contactData.append("name", data.name);
+			contactData.append("email", data.email);
+			contactData.append("message", data.message);
 
-			const response = await fetch(`/api/contact-form`, requestParams);
+			const response = await actions.contact(contactData);
 
 			if (response.ok) {
 				flyPlane(submitRef.current);

tsconfig.paths.json

@@ -2,6 +2,7 @@
 	"compilerOptions": {
 		"baseUrl": ".",
 		"paths": {
+			"@server/*": ["./src/server/*"],
 			"@ui/*": ["./src/ui/*"],
 			"@components/*": ["./src/ui/components/*"],
 			"@utils/*": ["./src/utils/*"],