Fixed validation behaviour (#2412)

Azure · Feb 19, 2024 · 74b9886 · 74b9886
1 parent 1baf9b4
commit 74b9886
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 71 deletions.
diff --git a/src/admin/media/imageDetailsModal.tsx b/src/admin/media/imageDetailsModal.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Cropper from 'react-cropper';
 //import 'cropperjs/dist/cropper.css';
-import { isEqual, isEmpty } from 'lodash';
+import { isEqual, isEmpty, debounce } from 'lodash';
 import * as Utils from '@paperbits/common/utils';
 import { Resolve } from '@paperbits/react/decorators';
 import { IMediaService, MediaContract } from '@paperbits/common/media';
@@ -56,6 +56,17 @@ export class ImageDetailsModal extends React.Component<ImageDetailsModalProps, I
     }
 
     onInputChange = async (field: string, newValue: string, validationType?: string): Promise<void> => {
+        this.setState({
+            mediaItem: {
+                ...this.state.mediaItem,
+                [field]: newValue
+            }
+        });
+
+        this.runValidation(field, newValue, validationType);
+    }
+
+    runValidation = debounce(async (field: string, newValue: string, validationType?: string): Promise<void> => {
         let errorMessage = '';
         let errors = {};
 
@@ -74,14 +85,8 @@ export class ImageDetailsModal extends React.Component<ImageDetailsModalProps, I
             errors = this.state.errors;
         }
 
-        this.setState({
-            mediaItem: {
-                ...this.state.mediaItem,
-                [field]: newValue
-            },
-            errors
-        });
-    }
+        this.setState({ errors });
+    }, 300)
 
     validatePermalink = async (permalink: string): Promise<string> => {
         if (permalink === this.props.mediaItem?.permalink) return '';

diff --git a/src/admin/media/nonImageDetailsModal.tsx b/src/admin/media/nonImageDetailsModal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { isEqual, isEmpty } from 'lodash';
+import { isEqual, isEmpty, debounce } from 'lodash';
 import { Resolve } from '@paperbits/react/decorators';
 import { IMediaService } from '@paperbits/common/media';
 import { MediaContract } from '@paperbits/common/media/mediaContract';
@@ -39,6 +39,17 @@ export class NonImageDetailsModal extends React.Component<NonImageDetailsModalPr
     }
 
     onInputChange = async (field: string, newValue: string, validationType?: string): Promise<void> => {
+        this.setState({
+            mediaItem: {
+                ...this.state.mediaItem,
+                [field]: newValue
+            }
+        });
+
+        this.runValidation(field, newValue, validationType);
+    }
+
+    runValidation = debounce(async (field: string, newValue: string, validationType?: string): Promise<void> => {
         let errorMessage = '';
         let errors = {};
 
@@ -57,14 +68,8 @@ export class NonImageDetailsModal extends React.Component<NonImageDetailsModalPr
             errors = this.state.errors;
         }
 
-        this.setState({
-            mediaItem: {
-                ...this.state.mediaItem,
-                [field]: newValue
-            },
-            errors
-        });
-    }
+        this.setState({ errors });
+    }, 300)
 
     onReferenceUrlChange = (): void => {
         if (!this.state.errors['downloadUrl'] && this.state.mediaItem.fileName === 'media.svg') {

diff --git a/src/admin/navigation/navigationItemModal.tsx b/src/admin/navigation/navigationItemModal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Utils from '@paperbits/common';
-import { isEqual, isEmpty } from 'lodash';
+import { isEqual, isEmpty, debounce } from 'lodash';
 import { INavigationService, NavigationItemContract } from '@paperbits/common/navigation';
 import { IPageService } from '@paperbits/common/pages';
 import { IUrlService } from '@paperbits/common/urls';
@@ -142,6 +142,17 @@ export class NavigationItemModal extends React.Component<NavigationItemModalProp
     }
 
     onInputChange = async (field: string, newValue: string, validationType?: string): Promise<void> => {
+      this.setState({
+            navItem: {
+                ...this.state.navItem,
+                [field]: newValue
+            }
+        });
+
+        this.runValidation(field, newValue, validationType);
+    }
+
+    runValidation = debounce(async (field: string, newValue: string, validationType?: string): Promise<void> => {
         let errorMessage = '';
         let errors = {};
 
@@ -163,14 +174,8 @@ export class NavigationItemModal extends React.Component<NavigationItemModalProp
             errors = this.removeError(field);
         }
 
-        this.setState({
-            navItem: {
-                ...this.state.navItem,
-                [field]: newValue
-            },
-            errors
-        });
-    }
+        this.setState({ errors });
+    }, 300)
 
     validatePermalink = async (permalink: string): Promise<string> => {
         const isPermalinkNotDefined = await this.permalinkService.isPermalinkDefined(permalink) && !reservedPermalinks.includes(permalink);

diff --git a/src/admin/pages/pageDetailsModal.tsx b/src/admin/pages/pageDetailsModal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { isEqual, isEmpty } from 'lodash';
+import { isEqual, isEmpty, debounce } from 'lodash';
 import { Resolve } from '@paperbits/react/decorators';
 import { IPageService, PageContract } from '@paperbits/common/pages';
 import { PermalinkService } from '@paperbits/common/permalinks';
@@ -49,9 +49,29 @@ export class PageDetailsModal extends React.Component<PageDetailsModalProps, Pag
     }
 
     onInputChange = async (field: string, newValue: string, validationType?: string): Promise<void> => {
+        let permalink = '';
+
+        if (!this.props.page && field === 'title') {
+            permalink = newValue.replace(/\s+/g, '-').toLowerCase();
+
+            this.setState({ page: {
+                ...this.state.page,
+                'title': newValue,
+                'permalink': '/' + permalink
+            }});
+        } else {
+            this.setState({ page: {
+                ...this.state.page,
+                [field]: newValue
+            }});
+        }
+
+        this.runValidation(field, newValue, validationType, permalink);
+    }
+
+    runValidation = debounce(async (field: string, newValue: string, validationType?: string, permalink?: string): Promise<void> => {
         let errorMessage = '';
         let permalinkErrorMessage = '';
-        let page = {};
         let errors = {};
 
         if (field === 'permalink') {
@@ -60,20 +80,8 @@ export class PageDetailsModal extends React.Component<PageDetailsModalProps, Pag
             errorMessage = validateField(validationType, newValue);
         }
 
-        if (!this.props.page && field === 'title') {
-            const permalink = newValue.replace(/\s+/g, '-').toLowerCase();
+        if (permalink) {
             permalinkErrorMessage = await this.validatePermalink('/' + permalink);
-
-            page = {
-                ...this.state.page,
-                'title': newValue,
-                'permalink': '/' + permalink
-            };
-        } else {
-            page = {
-                ...this.state.page,
-                [field]: newValue
-            };
         }
 
         if (errorMessage !== '' && !this.state.errors[field]) {
@@ -94,8 +102,8 @@ export class PageDetailsModal extends React.Component<PageDetailsModalProps, Pag
             }
         }
 
-        this.setState({ page, errors });
-    }
+        this.setState({ errors });
+    }, 300);
 
     validatePermalink = async (permalink: string): Promise<string> => {
         if (!this.state.copyPage && permalink === this.props.page?.permalink) return '';

diff --git a/src/admin/pages/pageLayoutDetailsModal.tsx b/src/admin/pages/pageLayoutDetailsModal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { isEqual, isEmpty } from 'lodash';
+import { isEqual, isEmpty, debounce } from 'lodash';
 import { Resolve } from '@paperbits/react/decorators';
 import { ILayoutService, LayoutContract } from '@paperbits/common/layouts';
 import { EventManager } from '@paperbits/common/events';
@@ -45,6 +45,17 @@ export class PageLayoutDetailsModal extends React.Component<PageLayoutModalProps
     }
 
     onInputChange = async (field: string, newValue: string, validationType?: string): Promise<void> => {
+        this.setState({
+            layout: {
+                ...this.state.layout,
+                [field]: newValue
+            }
+        });
+
+        this.runValidation(field, newValue, validationType);
+    }
+
+    runValidation = debounce(async (field: string, newValue: string, validationType?: string): Promise<void> => {
         let errorMessage = '';
         let errors = {};
 
@@ -63,14 +74,8 @@ export class PageLayoutDetailsModal extends React.Component<PageLayoutModalProps
             errors = this.state.errors;
         }
 
-        this.setState({
-            layout: {
-                ...this.state.layout,
-                [field]: newValue
-            },
-            errors
-        });
-    }
+        this.setState({ errors });
+    }, 300)
 
     validatePermalink = async (permalink: string): Promise<string> => {
         if (!this.state.copyLayout && permalink === this.props.layout?.permalinkTemplate) return '';

diff --git a/src/admin/popups/popupDetailsModal.tsx b/src/admin/popups/popupDetailsModal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { isEqual, isEmpty } from 'lodash';
+import { isEqual, isEmpty, debounce } from 'lodash';
 import { Resolve } from '@paperbits/react/decorators';
 import { IPopupService, PopupContract } from '@paperbits/common/popups';
 import { EventManager, Events } from '@paperbits/common/events';
@@ -44,6 +44,17 @@ export class PopupDetailsModal extends React.Component<PopupDetailsModalProps, P
     }
 
     onInputChange = async (field: string, newValue: string, validationType?: string): Promise<void> => {
+        this.setState({
+            popup: {
+                ...this.state.popup,
+                [field]: newValue
+            }
+        });
+
+        this.runValidation(field, newValue, validationType);
+    }
+
+    runValidation = debounce(async (field: string, newValue: string, validationType?: string): Promise<void> => {
         let errorMessage = '';
         let errors = {};
 
@@ -60,14 +71,8 @@ export class PopupDetailsModal extends React.Component<PopupDetailsModalProps, P
             errors = this.state.errors;
         }
 
-        this.setState({
-            popup: {
-                ...this.state.popup,
-                [field]: newValue
-            },
-            errors
-        });
-    }
+        this.setState({ errors });
+    }, 300)
 
     closeDeleteConfirmation = (): void => {
         this.setState({ showDeleteConfirmation: false });

diff --git a/src/admin/urls/urlDetailsModal.tsx b/src/admin/urls/urlDetailsModal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { isEqual, isEmpty } from 'lodash';
+import { isEqual, isEmpty, debounce } from 'lodash';
 import { Resolve } from '@paperbits/react/decorators';
 import { IUrlService, UrlContract } from '@paperbits/common/urls';
 import { PermalinkService } from '@paperbits/common/permalinks';
@@ -44,6 +44,17 @@ export class UrlDetailsModal extends React.Component<UrlDetailsModalProps, UrlDe
     }
 
     onInputChange = async (field: string, newValue: string, validationType?: string): Promise<void> => {
+        this.setState({
+            url: {
+                ...this.state.url,
+                [field]: newValue
+            }
+        });
+
+        this.runValidation(field, newValue, validationType);
+    }
+
+    runValidation = debounce(async (field: string, newValue: string, validationType?: string): Promise<void> => {
         let errorMessage = '';
         let errors = {};
 
@@ -62,14 +73,8 @@ export class UrlDetailsModal extends React.Component<UrlDetailsModalProps, UrlDe
             errors = this.state.errors;
         }
 
-        this.setState({
-            url: {
-                ...this.state.url,
-                [field]: newValue
-            },
-            errors
-        });
-    }
+        this.setState({ errors });
+    }, 300)
 
     validatePermalink = async (permalink: string): Promise<string> => {
         if (permalink === this.props.url?.permalink) return '';