[MM-73]: Fixed the issue of getting invalid start/end time even thoug…

…h they were set (#79) * [MM-73]: Fixed the issue of getting invalid start/end time even though they were set * [MM-73]: Removed the condition and initialisation * [MM-73]: Fixed lint errors * [MM-73]: Added the auto select for end time of event create * [MM-73]: Fixed lint errors * [MM-73]: Added the type for name
mattermost · Jun 14, 2024 · 0949ed5 · 0949ed5
1 parent 54ce508
commit 0949ed5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/webapp/src/components/modals/create_event_form.tsx b/webapp/src/components/modals/create_event_form.tsx
@@ -8,6 +8,8 @@ import {Modal} from 'react-bootstrap';
 
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
+import ChannelSelector from '../channel_selector';
+
 import {CreateEventPayload} from '@/types/calendar_api_types';
 
 import {getModalStyles} from '@/utils/styles';
@@ -17,7 +19,6 @@ import Loading from '@/components/loading';
 import Setting from '@/components/setting';
 import AttendeeSelector from '@/components/attendee_selector';
 import TimeSelector from '@/components/time_selector';
-import ChannelSelector from '../channel_selector';
 import {capitalizeFirstCharacter} from '@/utils/text';
 import {CreateCalendarEventResponse, createCalendarEvent} from '@/actions';
 import {getTodayString} from '@/utils/datetime';
@@ -221,7 +222,7 @@ const ActualForm = (props: ActualFormProps) => {
                     value={formValues.start_time}
                     endTime={formValues.end_time}
                     date={formValues.date}
-                    onChange={(value) => setFormValue('start_time', value)}
+                    onChange={(name: keyof CreateEventPayload, value: string) => setFormValue(name, value)}
                 />
             ),
         },
@@ -233,7 +234,7 @@ const ActualForm = (props: ActualFormProps) => {
                     value={formValues.end_time}
                     startTime={formValues.start_time}
                     date={formValues.date}
-                    onChange={(value) => setFormValue('end_time', value)}
+                    onChange={(name: keyof CreateEventPayload, value: string) => setFormValue(name, value)}
                 />
             ),
         },

diff --git a/webapp/src/components/time_selector.tsx b/webapp/src/components/time_selector.tsx
@@ -4,14 +4,15 @@ import {useSelector} from 'react-redux';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
 import {getTodayString} from '@/utils/datetime';
+import {CreateEventPayload} from '@/types/calendar_api_types';
 
 import ReactSelectSetting from './react_select_setting';
 
 const minuteStep = 15;
 
 type Props = {
     value: string;
-    onChange: (value: string) => void;
+    onChange: (name: keyof CreateEventPayload, value: string) => void;
     startTime?: string
     endTime?: string
     date?: string
@@ -69,13 +70,23 @@ export default function TimeSelector(props: Props) {
         }));
     }, [props.startTime, props.endTime, props.date]);
 
-    let value: Option | undefined | null = options[0];
+    let value: Option | undefined | null;
     if (props.value) {
         value = options.find((option: Option) => option.value === props.value);
     }
 
     const handleChange = (_: string, newValue: string) => {
-        props.onChange(newValue);
+        if (props.startTime) {
+            props.onChange('end_time', newValue);
+        } else {
+            props.onChange('start_time', newValue);
+
+            options.forEach((option: Option, i: number) => {
+                if (option.value === newValue && i + 2 < options.length) {
+                    props.onChange('end_time', options[i + 2].value);
+                }
+            });
+        }
     };
 
     return (