Feat/395 agregar validaciones en el contactform[no esta terminado]

components/Escribinos/actions.ts

@@ -0,0 +1,45 @@
+"use server";
+
+import { ZodError } from "zod";
+import { postClient } from "lib/sanity-client";
+import { contactFormSchema } from "./contact-form.shcema";
+import { Err, Fields, State, handleFail, handleSuccess } from "./state";
+
+export async function contactFormAction(
+  prevState: State,
+  formData: FormData
+): Promise<State> {
+  if (prevState.showNotification) {
+    return handleSuccess(prevState.data, false);
+  }
+  const allData = Object.fromEntries(formData.entries());
+  const validatedData = contactFormSchema.safeParse(allData);
+
+  if (!validatedData.success) {
+    const zodError = validatedData.error as ZodError;
+    const errorMap = zodError.flatten().fieldErrors;
+    const err: Err = {
+      name: errorMap.name?.[0] ?? "",
+      email: errorMap.email?.[0] ?? "",
+      body: errorMap.body?.[0] ?? "",
+    };
+    return handleFail(prevState, false, err);
+  }
+  try {
+    await postClient.create({
+      _type: "_message",
+      ...validatedData.data,
+    });
+    return handleSuccess(
+      { validatedData: validatedData.data as unknown as Fields },
+      true
+    );
+  } catch (err) {
+    const catchErr: Err = {
+      name: "",
+      email: "",
+      body: "",
+    };
+    return handleFail(prevState, true, catchErr);
+  }
+}

components/Escribinos/contact-form.shcema.ts

@@ -0,0 +1,12 @@
+import { z } from "zod";
+
+const contactFields = {
+  name: "name",
+  email: "email",
+  body: "body",
+};
+export const contactFormSchema = z.object({
+  [contactFields.name]: z.string(),
+  [contactFields.email]: z.string().email(),
+  [contactFields.body]: z.string().max(500),
+});

components/Escribinos/state.ts

@@ -0,0 +1,47 @@
+export interface Fields {
+  name: string;
+  email: string;
+  body: string;
+}
+
+export type Data = { validatedData: Fields };
+
+export type Err = Record<keyof Fields, string> | null;
+
+export type State = {
+  data: Data;
+  err: Err | null;
+  showNotification: boolean;
+};
+
+export const initialState: State = {
+  data: {
+    validatedData: {
+      name: "",
+      email: "",
+      body: "",
+    },
+  },
+  err: null,
+  showNotification: false,
+};
+
+export const handleFail = (
+  prevState: State,
+  showNotification: boolean,
+  err: Err
+): State => {
+  return {
+    ...prevState,
+    err,
+    showNotification,
+  };
+};
+
+export const handleSuccess = (data: Data, showNotification: boolean): State => {
+  return {
+    data,
+    err: null,
+    showNotification,
+  };
+};

package.json

@@ -26,7 +26,8 @@
     "react-dom": "^18.2.0",
     "sanity": "^3.20.1",
     "styled-components": "^6.1.1",
-    "swiper": "^11.0.5"
+    "swiper": "^11.0.5",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^7.5.3",

yarn.lock

@@ -14021,6 +14021,7 @@ __metadata:
     tailwindcss: ^3.3.5
     tsc-files: ^1.1.4
     typescript: ^5.3.2
+    zod: ^3.22.4
   languageName: unknown
   linkType: soft
 
@@ -20156,3 +20157,10 @@ __metadata:
   checksum: 4a73da856738b0634700b52f4ab3fe0bf0a532bea6820ad962d0bda0163d2d5525df4859f89a7238e204a378384e12551985049790c1894c3ac191866e85887f
   languageName: node
   linkType: hard
+
+"zod@npm:^3.22.4":
+  version: 3.22.4
+  resolution: "zod@npm:3.22.4"
+  checksum: 80bfd7f8039b24fddeb0718a2ec7c02aa9856e4838d6aa4864335a047b6b37a3273b191ef335bf0b2002e5c514ef261ffcda5a589fb084a48c336ffc4cdbab7f
+  languageName: node
+  linkType: hard