User schedule notifications improvement

dzonidoo · Sep 5, 2023 · 1000ccc · 1000ccc
1 parent 9602964
commit 1000ccc
Showing 1 changed file with 39 additions and 3 deletions.
diff --git a/assets/user-profile/components/EditNotificationScheduleModal.tsx b/assets/user-profile/components/EditNotificationScheduleModal.tsx
@@ -26,13 +26,17 @@ interface IState {
 
 
 class EditNotificationScheduleModalComponent extends React.Component<IProps, IState> {
+    formRef: React.RefObject<HTMLFormElement>;
     constructor(props: IProps) {
         super(props);
 
         this.state = {
             timezone: this.props.data.user.notification_schedule?.timezone ?? moment.tz.guess(),
             times: this.props.data.user.notification_schedule?.times ?? getScheduledNotificationConfig().default_times,
         };
+
+        this.onSubmitForm = this.onSubmitForm.bind(this);
+        this.formRef = React.createRef<HTMLFormElement>();
     }
 
     componentDidMount() {
@@ -49,13 +53,36 @@ class EditNotificationScheduleModalComponent extends React.Component<IProps, ISt
         });
     }
 
+    onSubmitForm(event: React.FormEvent<HTMLFormElement>) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        if (this.formRef.current == null) {
+            return;
+        }
+
+        const inputs = this.formRef.current.querySelectorAll('input') as NodeListOf<HTMLInputElement>;
+
+        const hasErrors = [...inputs].some(input => {
+            return input.checkValidity() !== true;
+        });
+
+        if (hasErrors === true) {
+            this.formRef.current.reportValidity();
+        } else {
+            this.props.updateUserNotificationSchedules(this.state);
+        }
+    }
+
     render() {
         return (
             <Modal
-                onSubmit={() => this.props.updateUserNotificationSchedules(this.state)}
+                onSubmit={() => {
+                    this.formRef.current?.dispatchEvent(new Event('submit', {cancelable: true, bubbles: true}));
+                }}
                 title={gettext('Edit global notifications schedule')}
                 onSubmitLabel={gettext('Save')}
-                disableButtonOnSubmit={true}
+                disableButtonOnSubmit={false}
                 className="edit-schedule__modal"
             >
                 <div className="nh-container nh-container--highlight rounded--none">
@@ -69,28 +96,37 @@ class EditNotificationScheduleModalComponent extends React.Component<IProps, ISt
                     <span className="nh-container__schedule-info form-label">
                         {gettext('Daily, at:')}
                     </span>
-                    <form>
+                    <form
+                        ref={this.formRef}
+                        onSubmit={(event) => this.onSubmitForm(event)}
+                    >
                         <div className="form-group schedule-times__input-container">
                             <input
                                 type="time"
                                 value={this.state.times[0]}
                                 onChange={(event) => {
                                     this.updateTime(event.target.value, 0);
                                 }}
+                                step="900"
+                                min="00:00"
                             />
                             <input
                                 type="time"
                                 value={this.state.times[1]}
                                 onChange={(event) => {
                                     this.updateTime(event.target.value, 1);
                                 }}
+                                step="900"
+                                min="00:00"
                             />
                             <input
                                 type="time"
                                 value={this.state.times[2]}
                                 onChange={(event) => {
                                     this.updateTime(event.target.value, 2);
                                 }}
+                                step="900"
+                                min="00:00"
                             />
                         </div>
                         <TimezoneInput