add start time and end time client-side validation

This commit is contained in:
Michael Fatemi 2021-07-01 00:39:06 -04:00
parent 305c738e50
commit cf3a84d1c5

View File

@ -108,12 +108,16 @@ export default function EventCreator({ group }: { group: IGroup }) {
const [daysOfWeek, setDaysOfWeek] = useState(0);
const [endDate, setEndDate] = useState<Date | null>(null);
const durationIsNegative =
endTime && startTime && endTime.getTime() < startTime.getTime();
const buttonEnabled =
name.length > 0 &&
startTime != null &&
endTime != null &&
placeId != null &&
(!recurring || daysOfWeek || endDate !== null) &&
!durationIsNegative &&
!creating;
const createEvent = useCallback(() => {
@ -200,6 +204,11 @@ export default function EventCreator({ group }: { group: IGroup }) {
<UIDateInput onChangedDate={setEndDate} disabled={creating} />
</>
)}
{durationIsNegative && (
<span style={{ marginTop: '1rem' }}>
The start time can't be after the end time.
</span>
)}
{createdEventId === -1 ? (
<UIButton
onClick={buttonEnabled ? createEvent : noop}