wip(calendar): add recur support to front-end

Author: nicholaschiang

components/availability-select/index.tsx

@@ -165,7 +165,8 @@ function AvailabilitySelect({
   const onClick = useCallback(
     (event: MouseEvent) => {
       const position = { x: event.clientX - x, y: event.clientY - y };
-      updateTimeslot(-1, getTimeslot(48, position, nanoid()));
+      const original = new Timeslot({ id: nanoid() });
+      updateTimeslot(-1, getTimeslot(48, position, original));
     },
     [x, y, updateTimeslot]
   );

components/availability-select/timeslot-rnd.tsx

@@ -50,9 +50,9 @@ export default function TimeslotRnd({
   const remove = useCallback(() => onChange(undefined), [onChange]);
   const update = useCallback(
     (newHeight: number, newPosition: Position) => {
-      onChange(getTimeslot(newHeight, newPosition, value.id, width));
+      onChange(getTimeslot(newHeight, newPosition, value, width));
     },
-    [width, onChange, value.id]
+    [width, onChange, value]
   );
 
   const onClick = useCallback((e: ReactMouseEvent) => e.stopPropagation(), []);

components/availability-select/utils.ts

@@ -20,7 +20,7 @@ export function getHeight(timeslot: Timeslot): number {
 export function getTimeslot(
   height: number,
   position: Position,
-  timeslotId?: string,
+  original?: Timeslot,
   width: number = WIDTH,
   reference: Date = new Date(0)
 ): Timeslot {
@@ -43,5 +43,5 @@ export function getTimeslot(
   const start = getDate(weekday, hours, mins, 0, 0, reference);
   const end = new Date(start.valueOf() + minsDuration * 60000);
 
-  return new Timeslot({ from: start, to: end, id: timeslotId });
+  return new Timeslot({ ...original, from: start, to: end });
 }

components/calendar/context.ts

@@ -5,13 +5,13 @@ import { Meeting, MeetingsQuery } from 'lib/model';
 export interface CalendarContextValue {
   startingDate: Date;
   mutateMeeting: (mutated: Meeting, hasBeenUpdated?: boolean) => Promise<void>;
-  removeMeeting: (meetingId: string) => Promise<void>;
+  removeMeeting: (meetingId: string, hasBeenDeleted?: boolean) => Promise<void>;
 }
 
 export const CalendarContext = createContext<CalendarContextValue>({
   startingDate: new MeetingsQuery().from,
   mutateMeeting: async (mutated: Meeting, hasBeenUpdated?: boolean) => {},
-  removeMeeting: async (meetingId: string) => {},
+  removeMeeting: async (meetingId: string, hasBeenDeleted?: boolean) => {},
 });
 
 export const useCalendar = (): CalendarContextValue =>

components/calendar/dialogs/create/create-page.tsx

@@ -5,6 +5,7 @@ import useTranslation from 'next-translate/useTranslation';
 
 import Button from 'components/button';
 import MatchSelect from 'components/match-select';
+import RecurSelect from 'components/recur-select';
 import SubjectSelect from 'components/subject-select';
 import TimeSelect from 'components/time-select';
 import { useNav } from 'components/dialog/context';
@@ -39,6 +40,7 @@ export default function CreatePage({
   setLoading,
   setChecked,
 }: CreatePageProps): JSX.Element {
+  // TODO: Revalidate local data after creation to account for recur rules.
   const updateRemote = useCallback(async (updated: Meeting) => {
     const created = new Meeting(clone({ ...updated, id: '' })).toJSON();
     const { data } = await axios.post<MeetingJSON>('/api/meetings', created);
@@ -89,7 +91,18 @@ export default function CreatePage({
     [setMeeting]
   );
   const onTimeChange = useCallback(
-    (time: Timeslot) => setMeeting((prev) => new Meeting({ ...prev, time })),
+    (time: Timeslot) => {
+      setMeeting((prev) => new Meeting({ ...prev, time }));
+    },
+    [setMeeting]
+  );
+  const onRecurChange = useCallback(
+    (recur: string) => {
+      setMeeting((prev) => {
+        const time = new Timeslot({ ...prev.time, recur });
+        return new Meeting({ ...prev, time });
+      });
+    },
     [setMeeting]
   );
   const onNotesChange = useCallback(
@@ -141,6 +154,13 @@ export default function CreatePage({
           renderToPortal
           outlined
         />
+        <RecurSelect
+          label='Select recurrence'
+          className={styles.field}
+          onChange={onRecurChange}
+          value={meeting.time.recur}
+          outlined
+        />
         <TextField
           outlined
           textarea

components/calendar/dialogs/edit/display-page.tsx

@@ -39,14 +39,15 @@ export default function DisplayPage({
     setError('');
     setChecked(false);
     setLoading(true);
-    const [err] = await to(axios.delete(`/api/meetings/${meeting.id}`));
+    const endpoint = `/api/meetings/${meeting.parentId || meeting.id}`;
+    const [err] = await to(axios.delete(endpoint));
     if (err) {
       const e = (err as AxiosError<APIErrorJSON>).response?.data || err;
       setLoading(false);
       setError(e.message);
     } else {
       setChecked(true);
-      setTimeout(() => removeMeeting(meeting.id), 1000);
+      setTimeout(() => removeMeeting(meeting.id, true), 1000);
     }
   }, [setLoading, setChecked, removeMeeting, meeting.id]);
 

components/calendar/dialogs/edit/edit-page.tsx

@@ -4,6 +4,7 @@ import axios from 'axios';
 import useTranslation from 'next-translate/useTranslation';
 
 import Button from 'components/button';
+import RecurSelect from 'components/recur-select';
 import SubjectSelect from 'components/subject-select';
 import TimeSelect from 'components/time-select';
 import { useNav } from 'components/dialog/context';
@@ -39,7 +40,8 @@ export default function EditPage({
   setChecked,
 }: EditPageProps): JSX.Element {
   const updateRemote = useCallback(async (updated: Meeting) => {
-    const url = `/api/meetings/${updated.id}`;
+    // TODO: The REST API URL that we use actually doesn't matter.
+    const url = `/api/meetings/${updated.parentId || updated.id}`;
     const { data } = await axios.put<MeetingJSON>(url, updated.toJSON());
     return Meeting.fromJSON(data);
   }, []);
@@ -84,6 +86,15 @@ export default function EditPage({
     },
     [setMeeting]
   );
+  const onRecurChange = useCallback(
+    (recur: string) => {
+      setMeeting((prev) => {
+        const time = new Timeslot({ ...prev.time, recur });
+        return new Meeting({ ...prev, time });
+      });
+    },
+    [setMeeting]
+  );
   const onNotesChange = useCallback(
     (evt: FormEvent<HTMLInputElement>) => {
       const notes = evt.currentTarget.value;
@@ -137,6 +148,13 @@ export default function EditPage({
           renderToPortal
           outlined
         />
+        <RecurSelect
+          label='Recurrence'
+          className={styles.field}
+          onChange={onRecurChange}
+          value={meeting.time.recur}
+          outlined
+        />
         <TextField
           outlined
           textarea

components/calendar/index.tsx

@@ -80,17 +80,17 @@ export default function Calendar({
       // Note: If we ever need to use the `hits` property, we'll have to update
       // this callback function to properly cache and reuse the previous value.
       const json = updated.map((m) => m.toJSON());
-      await mutate(query.endpoint, { meetings: json }, false);
+      await mutate(query.endpoint, { meetings: json }, hasBeenUpdated);
     },
     [query.endpoint, meetings]
   );
   const removeMeeting = useCallback(
-    async (meetingId: string) => {
+    async (meetingId: string, hasBeenDeleted = false) => {
       const idx = meetings.findIndex((m) => m.id === meetingId);
       if (idx < 0) return;
       const updated = [...meetings.slice(0, idx), ...meetings.slice(idx + 1)];
       const json = updated.map((m) => m.toJSON());
-      await mutate(query.endpoint, { meetings: json }, false);
+      await mutate(query.endpoint, { meetings: json }, hasBeenDeleted);
     },
     [query.endpoint, meetings]
   );

components/calendar/utils.ts

@@ -9,7 +9,7 @@ export function getMeeting(
   width: number,
   reference: Date = new Date(0)
 ): Meeting {
-  const time = getTimeslot(height, position, '', width, reference);
+  const time = getTimeslot(height, position, meeting.time, width, reference);
   return new Meeting({ ...meeting, time });
 }
 

components/recur-select/index.tsx

@@ -0,0 +1,53 @@
+import { FormEvent, useCallback, useMemo } from 'react';
+import { Select, SelectProps } from '@rmwc/select';
+
+import { TCallback } from 'lib/model';
+
+import styles from './recur-select.module.scss';
+
+const rrules = {
+  Daily: 'RRULE:FREQ=DAILY',
+  Weekly: 'RRULE:FREQ=WEEKLY',
+  Biweekly: 'RRULE:FREQ=WEEKLY;INTERVAL=2',
+  Monthly: 'RRULE:FREQ=MONTHLY',
+};
+
+function inverse(record: Record<string, string>): Record<string, string> {
+  const inverted: Record<string, string> = {};
+  Object.entries(record).forEach(([key, val]) => {
+    inverted[val] = key;
+  });
+  return inverted;
+}
+
+export type RecurSelectProps = {
+  value: string;
+  onChange: TCallback<string>;
+} & Omit<SelectProps, 'value' | 'onChange'>;
+
+// TODO: Allow this to be rendered to portal by capturing clicks on the enhanced
+// menu surface. See: https://github.com/jamesmfriedman/rmwc/pull/723
+export default function RecurSelect({
+  value,
+  onChange,
+  ...props
+}: RecurSelectProps): JSX.Element {
+  const onSelectChange = useCallback(
+    (evt: FormEvent<HTMLSelectElement>) => {
+      onChange(rrules[evt.currentTarget.value] || '');
+    },
+    [onChange]
+  );
+  const selectValue = useMemo(() => inverse(rrules)[value] || '', [value]);
+
+  return (
+    <Select
+      options={['Daily', 'Weekly', 'Biweekly', 'Monthly']}
+      className={styles.select}
+      onChange={onSelectChange}
+      value={selectValue}
+      enhanced
+      {...props}
+    />
+  );
+}