Display error messages when creating/updating group chats

_locales/en/messages.json

@@ -2094,5 +2094,9 @@
   "notFriends": {
     "message": "not friends",
     "description": "Indicates that a conversation is not friends with us"
+  },
+  "emptyGroupNameError": {
+    "message": "Group Name cannot be empty",
+    "description": "Error message displayed on empty group name"
   }
 }

stylesheets/_mentions.scss

@@ -23,6 +23,22 @@
   .hidden {
     display: none;
   }
+
+  .error-message {
+    text-align: center;
+    color: red;
+    margin-bottom: 0.5em;
+  }
+
+  .error-faded {
+    opacity: 0;
+    transition: all 100ms linear;
+  }
+
+  .error-shown {
+    opacity: 1;
+    transition: all 250ms linear;
+  }
 }
 
 .friend-selection-list {

ts/components/conversation/CreateGroupDialog.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { Contact, MemberList } from './MemberList';
 
 declare global {
@@ -20,6 +21,7 @@ interface Props {
 interface State {
   friendList: Array<Contact>;
   groupName: string;
+  errorDisplayed: boolean;
 }
 
 export class CreateGroupDialog extends React.Component<Props, State> {
@@ -53,6 +55,7 @@ export class CreateGroupDialog extends React.Component<Props, State> {
     this.state = {
       friendList: friends,
       groupName: '',
+      errorDisplayed: false,
     };
 
     window.addEventListener('keyup', this.onKeyUp);
@@ -64,8 +67,8 @@ export class CreateGroupDialog extends React.Component<Props, State> {
       .map(d => d.id);
 
     if (!this.state.groupName.trim()) {
-      // TODO: show error message
+      this.onShowError();
-      // console.error('Group name cannot be empty!');
+
       return;
     }
 
@@ -79,9 +82,16 @@ export class CreateGroupDialog extends React.Component<Props, State> {
     const okText = this.props.okText;
     const cancelText = this.props.cancelText;
 
+    const errorMsg = this.props.i18n('emptyGroupNameError');
+    const errorMessageClasses = classNames(
+      'error-message',
+      this.state.errorDisplayed ? 'error-shown' : 'error-faded'
+    );
+
     return (
       <div className="content">
         <p className="titleText">{titleText}</p>
+        <p className={errorMessageClasses}>{errorMsg}</p>
         <input
           type="text"
           id="group-name"
@@ -114,6 +124,22 @@ export class CreateGroupDialog extends React.Component<Props, State> {
     );
   }
 
+  private onShowError() {
+    if (this.state.errorDisplayed) {
+      return;
+    }
+
+    this.setState({
+      errorDisplayed: true,
+    });
+
+    setTimeout(() => {
+      this.setState({
+        errorDisplayed: false,
+      });
+    }, 3000);
+  }
+
   private onGroupNameChanged(event: any) {
     event.persist();
 

ts/components/conversation/UpdateGroupDialog.tsx

@@ -16,6 +16,7 @@ interface Props {
 interface State {
   friendList: Array<Contact>;
   groupName: string;
+  errorDisplayed: boolean;
 }
 
 export class UpdateGroupDialog extends React.Component<Props, State> {
@@ -47,6 +48,7 @@ export class UpdateGroupDialog extends React.Component<Props, State> {
     this.state = {
       friendList: friends,
       groupName: this.props.groupName,
+      errorDisplayed: false,
     };
 
     window.addEventListener('keyup', this.onKeyUp);
@@ -58,8 +60,8 @@ export class UpdateGroupDialog extends React.Component<Props, State> {
       .map(d => d.id);
 
     if (!this.state.groupName.trim()) {
-      // TODO: show error message
+      this.onShowError();
-      // window.log.error('Group name cannot be empty!');
+
       return;
     }
 
@@ -78,9 +80,16 @@ export class UpdateGroupDialog extends React.Component<Props, State> {
         ? 'no-friends'
         : classNames('no-friends', 'hidden');
 
+    const errorMsg = this.props.i18n('emptyGroupNameError');
+    const errorMessageClasses = classNames(
+      'error-message',
+      this.state.errorDisplayed ? 'error-shown' : 'error-faded'
+    );
+
     return (
       <div className="content">
         <p className="titleText">{titleText}</p>
+        <p className={errorMessageClasses}>{errorMsg}</p>
         <input
           type="text"
           id="group-name"
@@ -114,6 +123,22 @@ export class UpdateGroupDialog extends React.Component<Props, State> {
     );
   }
 
+  private onShowError() {
+    if (this.state.errorDisplayed) {
+      return;
+    }
+
+    this.setState({
+      errorDisplayed: true,
+    });
+
+    setTimeout(() => {
+      this.setState({
+        errorDisplayed: false,
+      });
+    }, 3000);
+  }
+
   private onKeyUp(event: any) {
     switch (event.key) {
       case 'Enter':