Move meeting end-time after start-time automatically

End-time is moved to the whole hour between 1 and 2 hours after the start-time, after the startTime field is blurred (deselected).
webkom · Aug 28, 2023 · fd78baf · fd78baf
1 parent 215d688
commit fd78baf
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 8 deletions.
diff --git a/app/components/Form/DatePicker.tsx b/app/components/Form/DatePicker.tsx
@@ -14,6 +14,8 @@ import type { Moment } from 'moment';
 
 type Props = {
   onChange: (selectedDate: string) => void;
+  onBlur: (selectedDate?: string) => void;
+  onFocus: () => void;
   className?: string;
   value?: string;
   showTimePicker?: boolean;
@@ -23,6 +25,8 @@ type Props = {
 
 const DatePicker = ({
   onChange,
+  onFocus,
+  onBlur,
   className,
   value,
   showTimePicker = true,
@@ -36,19 +40,25 @@ const DatePicker = ({
   const onNext = () => setDate(date.clone().add(1, 'month'));
   const onPrev = () => setDate(date.clone().subtract(1, 'month'));
 
+  const togglePicker = (open = !pickerOpen) => {
+    setPickerOpen(open);
+    open ? onFocus() : onBlur(value);
+  };
+
   const changeDay = (day: Moment) => {
     const value = day
       .clone()
       .hour(parsedValue.hour())
       .minute(parsedValue.minute());
     onChange(value.toISOString());
+    onBlur(value.toISOString());
     setPickerOpen(false);
   };
 
   return (
     <Dropdown
       show={pickerOpen}
-      toggle={() => setPickerOpen(!pickerOpen)}
+      toggle={() => togglePicker()}
       triggerComponent={
         <TextInput
           className={cx(styles.inputField, className)}

diff --git a/app/components/Form/Field.tsx b/app/components/Form/Field.tsx
@@ -147,7 +147,7 @@ export function createField(Component: ComponentType<any>, options?: Options) {
         {...input}
         {...props}
         onChange={(value) => {
-          input.onChange(value);
+          input.onChange?.(value);
           onChange?.(value);
         }}
         className={cx(

diff --git a/app/routes/meetings/components/MeetingEditor.tsx b/app/routes/meetings/components/MeetingEditor.tsx
@@ -184,11 +184,29 @@ const MeetingEditor = ({
                 component={TextArea.Field}
               />
               <div className={styles.sideBySideBoxes}>
-                <Field
-                  name="startTime"
-                  label="Starttidspunkt"
-                  component={DatePicker.Field}
-                />
+                <FormSpy subscription={{ values: true }}>
+                  {({ values }) => (
+                    <Field
+                      name="startTime"
+                      label="Starttidspunkt"
+                      component={DatePicker.Field}
+                      onBlur={(value: string) => {
+                        const startTime = moment(value);
+                        const endTime = moment(values.endTime);
+                        if (endTime.isBefore(startTime)) {
+                          form.change(
+                            'endTime',
+                            startTime
+                              .clone()
+                              .add(2, 'hours')
+                              .set('minute', 0)
+                              .toISOString()
+                          );
+                        }
+                      }}
+                    />
+                  )}
+                </FormSpy>
                 <Field
                   name="endTime"
                   label="Sluttidspunkt"

diff --git a/cypress/e2e/create_meeting_spec.js b/cypress/e2e/create_meeting_spec.js
@@ -50,7 +50,7 @@ describe('Create meeting', () => {
     setDatePickerTime('startTime', '20', '00');
 
     fieldError('endTime').should('not.exist');
-    field('endTime').should('contain', '22:00');
+    field('endTime').should('contain.value', '22:00');
 
     setDatePickerTime('endTime', '20', '30');