fix(EditGuildDrawer): validate eventSources with Zod (#1419)

src/components/[guild]/EditGuild/EditGuildDrawer.tsx

@@ -16,6 +16,7 @@ import {
   useDisclosure,
 } from "@chakra-ui/react"
 import { GuildContact, Schemas } from "@guildxyz/types"
+import { zodResolver } from "@hookform/resolvers/zod"
 import UrlName from "components/[guild]/EditGuild/components/UrlName"
 import { useThemeContext } from "components/[guild]/ThemeContext"
 import useGuild from "components/[guild]/hooks/useGuild"
@@ -39,6 +40,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { EventSourcesKey, GuildTags } from "types"
 import handleSubmitDirty from "utils/handleSubmitDirty"
 import { Chain } from "wagmiConfig/chains"
+import { z } from "zod"
 import LeaveButton from "../LeaveButton"
 import useGuildPermission from "../hooks/useGuildPermission"
 import useUser from "../hooks/useUser"
@@ -60,6 +62,33 @@ type Props = {
   onClose: () => void
 }
 
+const eventSourcesSchema = z
+  .object({
+    EVENTBRITE: z
+      .string()
+      .url()
+      .regex(/(.)+eventbrite\.com\/e\/(.)+/)
+      .transform((url) => url.replace(/\/+$/, ""))
+      .optional()
+      .nullable(),
+    LUMA: z
+      .string()
+      .url()
+      .regex(/(.)+lu\.ma\/(u|user)\/(.)+/)
+      .transform((url) => url.replace(/\/+$/, ""))
+      .optional()
+      .nullable(),
+    LINK3: z
+      .string()
+      .url()
+      .regex(/(.)+link3\.to\/(.)+/)
+      .transform((url) => url.replace(/\/+$/, ""))
+      .optional()
+      .nullable(),
+    DISCORD: z.string().url().optional().nullable(),
+  })
+  .optional()
+
 const DynamicFeatureFlags = dynamic(() => import("./components/FeatureFlags"))
 
 export type EditGuildForm = Schemas["GuildUpdatePayload"] & {
@@ -130,6 +159,13 @@ const EditGuildDrawer = ({
   const methods = useForm<EditGuildForm>({
     mode: "all",
     defaultValues,
+    resolver: zodResolver(
+      z
+        .object({
+          eventSources: eventSourcesSchema,
+        })
+        .passthrough() // So we don't validate the other keys with Zod (yet)
+    ),
   })
   const { control, reset, formState } = methods
 

src/components/[guild]/EditGuild/components/Events/EventInput.tsx

@@ -21,7 +21,7 @@ const eventSourceNames: Record<EventSourcesKey, string> = {
   EVENTBRITE: "Eventbrite",
   LINK3: "Link3",
   LUMA: "lu.ma",
-  DISCORD: "Diiscord",
+  DISCORD: "Discord",
 }
 
 const logos: Record<EventSourcesKey, string> = {
@@ -33,19 +33,10 @@ const logos: Record<EventSourcesKey, string> = {
 
 const placeholders: Record<Exclude<EventSourcesKey, "DISCORD">, string> = {
   EVENTBRITE: "https://www.eventbrite.com/e/...",
-  LUMA: "https://lu.ma/u/...",
+  LUMA: "https://lu.ma/user/...",
   LINK3: "https://link3.to/e/...",
 }
 
-const validators: Record<
-  Exclude<EventSourcesKey, "DISCORD">,
-  (value?: string) => true | string
-> = {
-  EVENTBRITE: (url) => !!url.match(/(.)+eventbrite\.com\/e\/(.)+/) || "Invalid URL",
-  LUMA: (url) => !!url.match(/(.)+lu\.ma\/u\/(.)+/) || "Invalid URL",
-  LINK3: (url) => !!url.match(/(.)+link3\.to\/(.)+/) || "Invalid URL",
-}
-
 const EventInput = ({ eventSource }: Props) => {
   const {
     register,
@@ -70,7 +61,6 @@ const EventInput = ({ eventSource }: Props) => {
         <Input
           {...register(`eventSources.${eventSource}`, {
             required: "This field is required.",
-            validate: validators[eventSource],
           })}
           size={"lg"}
           placeholder={placeholders[eventSource]}
@@ -83,6 +73,7 @@ const EventInput = ({ eventSource }: Props) => {
             onClick={() =>
               setValue(`eventSources.${eventSource}`, undefined, {
                 shouldDirty: true,
+                shouldValidate: true,
               })
             }
           />