From 0dc1d9c19f52356c60dde7149adfd8fd9f0e4d41 Mon Sep 17 00:00:00 2001 From: michellelin1 Date: Mon, 13 May 2024 18:12:59 -0700 Subject: [PATCH] made subject and event type required --- .../AddEventToPublishedScheduleForm.jsx | 61 ++++++++++++------- .../CreateEventForm/CreateEventForm.jsx | 26 ++++++-- 2 files changed, 60 insertions(+), 27 deletions(-) diff --git a/src/components/AddEventToPublishedScheduleForm/AddEventToPublishedScheduleForm.jsx b/src/components/AddEventToPublishedScheduleForm/AddEventToPublishedScheduleForm.jsx index cc104e1..171dfbe 100644 --- a/src/components/AddEventToPublishedScheduleForm/AddEventToPublishedScheduleForm.jsx +++ b/src/components/AddEventToPublishedScheduleForm/AddEventToPublishedScheduleForm.jsx @@ -34,25 +34,27 @@ import PlannedEvent, { convertTimeToMinutes } from '../Planner/PlannedEvent'; import RemoveTimelineEventModal from '../Planner/RemoveTimelineEventModal'; const schema = yup.object({ - startTime: yup.string().required('Start time is required').test('is-after-7-am', 'Start time cannot be earlier than 7 AM', function(startTime) { - return startTime && startTime >= "07:00"; + startTime: yup.string().required('Start time is required').test('is-after-7-am', 'Start time cannot be earlier than 7 AM', function(startTime) { + return startTime && startTime >= "07:00"; + }), + endTime: yup.string() + .required('End time is required') + .test('is-after', 'End time must be after start time', function(endTime) { + const startTime = this.parent.startTime; + return startTime && endTime && startTime < endTime; + }).test('is-before-11-pm', 'End time must be earlier than 11 PM', function(endTime) { + return endTime && endTime <= "23:00"; }), - endTime: yup.string() - .required('End time is required') - .test('is-after', 'End time must be after start time', function(endTime) { - const startTime = this.parent.startTime; - return startTime && endTime && startTime < endTime; - }).test('is-before-11-pm', 'End time must be earlier than 11 PM', function(endTime) { - return endTime && endTime <= "23:00"; - }), - host: yup.string().max(50, 'Host exceeds 50 character limit').default('').nullable(), - title: yup.string().required('Title Required').max(50, 'Title exceeds 50 character limit'), - description: yup - .string() - .max(256, 'Description exceeds 256 character limit') - .default('') - .nullable(), - tentative: yup.boolean() + subject: yup.array().min(1, 'Please select at least one subject').required(), + eventType: yup.array().min(1, 'Please select at least one event type').required(), + host: yup.string().max(50, 'Host exceeds 50 character limit').default('').nullable(), + title: yup.string().required('Title Required').max(50, 'Title exceeds 50 character limit'), + description: yup + .string() + .max(256, 'Description exceeds 256 character limit') + .default('') + .nullable(), + tentative: yup.boolean() }); const AddEventToPublishedScheduleForm = ({ closeForm }) => { @@ -104,7 +106,14 @@ const AddEventToPublishedScheduleForm = ({ closeForm }) => { } else { setPlannedEvents(plannedEvents.filter(e => e.id != -1)); } - }, [formData]) + }, [formData]); + + useEffect(() => { + setValue('season', filterValues.season); + setValue('year', filterValues.year); + setValue('subject', filterValues.subject); + setValue('eventType', filterValues.eventType); + }, [filterValues]); const toast = useToast(); const { @@ -360,8 +369,8 @@ const AddEventToPublishedScheduleForm = ({ closeForm }) => { {/* SUBJECT */} - - Subject + + Subject * { badgeColor="#E8D7FF" width="28vw" /> + + {errors.subject && errors.subject.message} + {/* EVENT TYPE */} - - Event Type + + Event Type * { badgeColor="#CFDCFF" width="28vw" /> + + {errors.eventType && errors.eventType.message} + diff --git a/src/components/Catalog/CreateEventForm/CreateEventForm.jsx b/src/components/Catalog/CreateEventForm/CreateEventForm.jsx index 7c6f68f..4a2ad9f 100644 --- a/src/components/Catalog/CreateEventForm/CreateEventForm.jsx +++ b/src/components/Catalog/CreateEventForm/CreateEventForm.jsx @@ -23,6 +23,7 @@ import { } from '../../Catalog/SearchFilter/filterOptions'; import useSearchFilters from '../../Catalog/SearchFilter/useSearchFilters'; import Dropdown from '../../Dropdown/Dropdown'; +import { useEffect } from 'react'; const schema = yup.object({ host: yup.string().max(50, 'Host exceeds 50 character limit').default('').nullable(), @@ -32,11 +33,14 @@ const schema = yup.object({ .max(256, 'Description exceeds 256 character limit') .default('') .nullable(), + subject: yup.array().min(1, 'Please select at least one subject').required(), + eventType: yup.array().min(1, 'Please select at least one event type').required(), }); const CreateEventForm = ({ eventData, setDataShouldRevalidate, closeModal }) => { const toast = useToast(); const { + setValue, handleSubmit, register, reset, @@ -48,6 +52,7 @@ const CreateEventForm = ({ eventData, setDataShouldRevalidate, closeModal }) => const submitData = async data => { const { host, title, description } = data; + console.log(data); const season = filterValues.season; const eventType = filterValues.eventType; const year = filterValues.year; @@ -111,6 +116,13 @@ const CreateEventForm = ({ eventData, setDataShouldRevalidate, closeModal }) => const { filters, filterValues } = useSearchFilters(); const [seasonFilter, yearFilter, subjectFilter, eventFilter] = filters; + useEffect(() => { + setValue('season', filterValues.season); + setValue('year', filterValues.year); + setValue('subject', filterValues.subject); + setValue('eventType', filterValues.eventType); + }, [filterValues]); + return ( @@ -170,8 +182,8 @@ const CreateEventForm = ({ eventData, setDataShouldRevalidate, closeModal }) => {/* SUBJECT */} - - Subject + + Subject * defaults={eventData && eventData.subject} badgeColor="#E8D7FF" /> + + {errors.subject && errors.subject.message} + {/* EVENT TYPE */} - - Event Type + + Event Type * defaults={eventData && eventData.eventType} badgeColor="#CFDCFF" /> + + {errors.eventType && errors.eventType.message} +