diff --git a/src/common/types/roomRequest.ts b/src/common/types/roomRequest.ts index 41ab3d40..8e711797 100644 --- a/src/common/types/roomRequest.ts +++ b/src/common/types/roomRequest.ts @@ -132,7 +132,7 @@ export enum RoomRequestStatus { export const roomRequestStatusUpdateRequest = z.object({ status: z.nativeEnum(RoomRequestStatus), - notes: z.optional(z.string().min(1).max(1000)), + notes: z.string().min(1).max(1000), }); export const roomRequestStatusUpdate = roomRequestStatusUpdateRequest.extend({ diff --git a/src/ui/pages/roomRequest/ViewRoomRequest.page.tsx b/src/ui/pages/roomRequest/ViewRoomRequest.page.tsx index ca724843..08e0a387 100644 --- a/src/ui/pages/roomRequest/ViewRoomRequest.page.tsx +++ b/src/ui/pages/roomRequest/ViewRoomRequest.page.tsx @@ -22,12 +22,13 @@ import { roomRequestSchema, RoomRequestStatus, RoomRequestStatusUpdatePostBody, + roomRequestStatusUpdateRequest, } from '@common/types/roomRequest'; import { useParams } from 'react-router-dom'; import { getStatusColor, getStatusIcon } from './roomRequestUtils'; import { formatStatus } from '@common/types/roomRequest'; import moment from 'moment-timezone'; -import { useForm } from '@mantine/form'; +import { useForm, zodResolver } from '@mantine/form'; import { notifications } from '@mantine/notifications'; import FullScreenLoader from '@ui/components/AuthContext/LoadingScreen'; @@ -35,14 +36,9 @@ export const ViewRoomRequest: React.FC = () => { const { semesterId, requestId } = useParams(); const [data, setData] = useState(null); const [isSubmitting, setIsSubmitting] = useState(false); - const newStatusForm = useForm<{ status: RoomRequestStatus | null; notes?: string }>({ - initialValues: { status: null }, - validate: { - status: (value) => - value && Object.keys(RoomRequestStatus).includes(value) ? null : 'Please select a status.', - notes: (value) => - value && value.length <= 1000 ? null : 'Please limit your response to 1000 characters.', - }, + const newStatusForm = useForm<{ status: RoomRequestStatus | null; notes: string }>({ + initialValues: { status: null, notes: '' }, + validate: zodResolver(roomRequestStatusUpdateRequest), }); const handleStatusChange = async (payload: RoomRequestStatusUpdatePostBody) => { await api.post(`/api/v1/roomRequests/${semesterId}/${requestId}/status`, payload); @@ -57,6 +53,10 @@ export const ViewRoomRequest: React.FC = () => { }; const submitStatusChange = async () => { try { + newStatusForm.validate(); + if (!newStatusForm.isValid()) { + return; + } setIsSubmitting(true); await handleStatusChange(newStatusForm.values as RoomRequestStatusUpdatePostBody); notifications.show({ @@ -138,12 +138,13 @@ export const ViewRoomRequest: React.FC = () => { {newStatusForm.values.status && ( <>