event creator includes recurring events!

src/components/NewUI/EventCreator.tsx

@@ -4,6 +4,7 @@ import { toggleBit } from './bits';
 import { green, lightgrey } from './colors';
 import { IGroup } from './Group';
 import UIButton from './UIButton';
+import UIDateInput from './UIDateInput';
 import UIDatetimeInput from './UIDatetimeInput';
 import UIPlacesAutocomplete from './UIPlacesAutocomplete';
 import UISecondaryBox from './UISecondaryBox';
@@ -86,12 +87,14 @@ export default function EventCreator({ group }: { group: IGroup }) {
 
 	const [recurring, toggleRecurring] = useToggle(false);
 	const [daysOfWeek, setDaysOfWeek] = useState(0);
+	const [endDate, setEndDate] = useState<Date | null>(null);
 
 	const buttonEnabled =
 		name.length > 0 &&
 		startTime != null &&
 		endTime != null &&
 		placeId != null &&
+		(!recurring || daysOfWeek || endDate !== null) &&
 		!creating;
 
 	const createEvent = useCallback(() => {
@@ -139,12 +142,18 @@ export default function EventCreator({ group }: { group: IGroup }) {
 					backgroundColor: recurring ? green : lightgrey,
 					color: recurring ? 'white' : 'black',
 					transition: 'color 0.2s, background-color 0.2s',
+					marginBottom: '1.5rem',
 				}}
 			>
 				Recurring event
 			</UIButton>
 			{recurring && (
-				<DaysOfWeekSelector daysOfWeek={daysOfWeek} update={setDaysOfWeek} />
+				<>
+					Days of week
+					<DaysOfWeekSelector daysOfWeek={daysOfWeek} update={setDaysOfWeek} />
+					Date of last occurence
+					<UIDateInput onChangedDate={setEndDate} />
+				</>
 			)}
 			{createdEventId === -1 ? (
 				<UIButton

src/components/NewUI/UIDateInput.tsx

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+
+const baseStyle = {
+	marginTop: '0.5em',
+	padding: '0.5em',
+	fontFamily: 'Inter',
+	fontSize: '1.25rem',
+	borderRadius: '0.5em',
+	border: '0px',
+};
+
+export default function UIDateInput({
+	onChangedDate,
+	disabled = false,
+}: {
+	onChangedDate: (date: Date | null) => void;
+	disabled?: boolean;
+}) {
+	const onChange = useCallback(
+		(e) => {
+			// YYYY-MM-DD or "" (empty string)
+			const dateAsString = e.target.value as string;
+			if (typeof dateAsString !== 'string' || dateAsString.length === 0) {
+				onChangedDate(null);
+			}
+			const year = dateAsString.slice(0, 4);
+			const month = dateAsString.slice(5, 7);
+			const day = dateAsString.slice(8, 10);
+
+			// Midnight in the timezone of the user
+			const date = new Date(`${year}-${month}-${day}T00:00:00`);
+			onChangedDate(date);
+		},
+		[onChangedDate]
+	);
+	return (
+		<input
+			style={baseStyle}
+			type="date"
+			disabled={disabled}
+			onChange={onChange}
+		/>
+	);
+}