zod validation

Author: Stan-l-e-y

components/forms/CreateInviteForm.tsx

@@ -1,20 +1,23 @@
 import { Input } from './Styles';
-import { CreateInviteFormInput } from '@/types/forms/CreateInviteFormData';
 import { UseFormRegister } from 'react-hook-form';
 import styles from '@/styles/Livekit.module.css';
+import { CreateInviteFormInput } from '@/types/client/forms/createInvite';
 
-export function CreateInviteform({ register }: { register: UseFormRegister<CreateInviteFormInput> }) {
-
+export function CreateInviteform({
+  register,
+}: {
+  register: UseFormRegister<CreateInviteFormInput>;
+}) {
   return (
     <form className="flex flex-col space-y-4">
       <div className="flex flex-col">
         <label htmlFor="numUses">Max number of uses</label>
         <select
           id="numUses"
-          {...register('numUses')}
+          {...(register('numUses'), { valueAsNumber: true })}
           className={`${Input('bg-grey-700')} mt-2 ${styles.input}`}
         >
-          <option value="null">Unlimited</option>
+          <option value="-1">Unlimited</option>
           <option value="1">1</option>
           <option value="5">5</option>
           <option value="10">10</option>

components/home/modals/CreateInviteModal.tsx

@@ -2,14 +2,12 @@ import { CreateInviteform } from '@/components/forms/CreateInviteForm';
 import Modal from '@/components/home/modals/Modal';
 import { createInvite } from '@/services/invites.service';
 import { Channel } from '@/types/dbtypes';
-import { CreateInviteFormInput } from '@/types/forms/CreateInviteFormData';
+import { CreateInviteFormInput } from '@/types/client/forms/createInvite';
 import { useSupabaseClient } from '@supabase/auth-helpers-react';
 import { Dispatch, SetStateAction, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'react-toastify';
 
-
-
 export default function CreateInviteModal({
   showModal,
   setShowModal,
@@ -29,30 +27,20 @@ export default function CreateInviteModal({
   } = useForm<CreateInviteFormInput>({
     mode: 'onSubmit',
     defaultValues: {
-      numUses: 'null',
+      numUses: -1,
       expiresAt: '1 week',
     },
   });
 
   const onSubmit = async (formData: CreateInviteFormInput) => {
     console.log(formData);
 
-    // Try to parse values
-    let numUses: number | null = null;
-    if (formData.numUses) {
-      numUses = parseInt(formData.numUses);
-
-      if (isNaN(numUses)) {
-        numUses = null;
-      }
-    }
-
     const { data, error } = await createInvite(
       supabase,
       channel.server_id,
       channel.channel_id,
       formData.expiresAt,
-      numUses
+      formData.numUses < 1 ? null : formData.numUses
     );
 
     if (error) {
@@ -62,7 +50,9 @@ export default function CreateInviteModal({
     }
 
     toast.success('Invite copied to clipboard');
-    navigator.clipboard.writeText(`${window.location.origin}/invite/${data?.url_id}`);
+    navigator.clipboard.writeText(
+      `${window.location.origin}/invite/${data?.url_id}`
+    );
 
     // Finally, close the modal
     setShowModal(false);
@@ -101,7 +91,7 @@ export default function CreateInviteModal({
         </>
       }
     >
-      <CreateInviteform register={register}/>
+      <CreateInviteform register={register} />
     </Modal>
   );
 }

pages/index.tsx

@@ -8,7 +8,12 @@ import { useMediaQuery } from 'react-responsive';
 import { useEffect, useRef, useState } from 'react';
 import { useRealtimeStore } from '@/hooks/useRealtimeStore';
 import { LiveKitRoom } from '@livekit/components-react';
-import { useTokenRef, useConnectionRef, useUserSettings, useSetConnectionState} from '@/lib/store';
+import {
+  useTokenRef,
+  useConnectionRef,
+  useUserSettings,
+  useSetConnectionState,
+} from '@/lib/store';
 import { useSetChannel } from '@/lib/store';
 import { getChannelById } from '@/services/channels.service';
 import Modal from '@/components/home/modals/Modal';
@@ -29,7 +34,7 @@ export default function Home() {
 
   const tryConnect = useConnectionRef();
   const setConnectionState = useSetConnectionState();
-  const [ livekitError, setLivekitError ] = useState<Error | null>(null);
+  const [livekitError, setLivekitError] = useState<Error | null>(null);
 
   const modalRef = useRef<HTMLDialogElement>(null);
 
@@ -65,15 +70,17 @@ export default function Home() {
         return;
       }
 
-      const { data: _channel } = await getChannelById(supabase, channel_id_as_number);
+      const { data: _channel } = await getChannelById(
+        supabase,
+        channel_id_as_number
+      );
 
       if (_channel) {
         setChannel(_channel);
       }
     }
 
     handleAsync();
-
   }, [channel_id, setChannel, supabase]);
 
   return (
@@ -138,7 +145,7 @@ export default function Home() {
           ) : (
             <div>
               <div className={'bg-grey-800 '}>
-                <RenderDesktopView/>
+                <RenderDesktopView />
                 <div>
                   {!user ? (
                     ''

types/client/forms/createInvite.ts

@@ -0,0 +1,8 @@
+import { object, TypeOf, z } from 'zod';
+
+export const createInviteFormInputSchema = object({
+  numUses: z.number(),
+  expiresAt: z.enum(['1 week', '1 day', '1 hour', '30 minutes', 'null']),
+});
+
+export type CreateInviteFormInput = TypeOf<typeof createInviteFormInputSchema>;