Closed groups overlay integration

_locales/en/messages.json

@@ -2731,6 +2731,9 @@
   "createClosedGroupPlaceholder": {
     "message": "Enter a group name"
   },
+  "closedGroupCreatedToastTitle": {
+    "message": "Group created successfully"
+  },
   "enterChannelURL": {
     "message": "Enter Open Group URL"
   },

preload.js

@@ -63,6 +63,7 @@ window.CONSTANTS = {
   MAX_LOGIN_TRIES: 3,
   MAX_PASSWORD_LENGTH: 32,
   MAX_USERNAME_LENGTH: 20,
+  MAX_GROUPNAME_LENGTH: 64,
   DEFAULT_PUBLIC_CHAT_URL: appConfig.get('defaultPublicChatServer'),
   MAX_CONNECTION_DURATION: 5000,
 };

stylesheets/_session.scss

@@ -1695,6 +1695,18 @@ input {
     
   }
 }
+.create-group-name-input {
+  .session-id-editable {
+    height: 60px !important;
+
+    textarea {
+      padding-bottom: 0px !important;
+    } 
+  }
+
+
+}
+
 .session-member-item {
   font-family: "SF Pro Text";
   padding: 0px $session-margin-sm;

ts/components/conversation/ConversationHeader.tsx

@@ -395,7 +395,7 @@ export class ConversationHeader extends React.Component<Props> {
               {this.renderOptions(triggerId)}
               {this.renderTitle()}
               {/* This might be redundant as we show the title in the title: */}
-              {isPrivateGroup ? this.renderMemberCount() : null}
+              {/*isPrivateGroup ? this.renderMemberCount() : null*/}
             </div>
           </div>
           {this.renderExpirationLength()}

ts/components/conversation/CreateGroupDialog.tsx

@@ -154,16 +154,12 @@ export class CreateGroupDialog extends React.Component<Props, State> {
   private onGroupNameChanged(event: any) {
     event.persist();
 
-    console.log(event);
-
-    // this.setState(state => {
-    //   return {
-    //     ...state,
-    //     groupName: event.target.value,
-    //   };
-    // }, () => console.log(this.state.groupName));
-
-
+    this.setState(state => {
+      return {
+        ...state,
+        groupName: event.target.value,
+      };
+    });
   }
 
   private onKeyUp(event: any) {

ts/components/session/LeftPaneChannelSection.tsx

@@ -385,9 +385,26 @@ export class LeftPaneChannelSection extends React.Component<Props, State> {
     return true;
   }
 
-  private onCreateClosedGroup(groupName: string, groupMembers: Array<ContactType>) {
-    console.log(`Creating group with name: ${groupName}`);
+  private async onCreateClosedGroup(groupName: string, groupMembers: Array<ContactType>) {
+    // Validate groupName and groupMembers length
+    if (
+        groupMembers.length === 0 ||
+        groupName.length === 0 ||
+        groupName.length > window.CONSTANTS.MAX_GROUP_NAME_LENGTH
+      ){
+      return;
+    }
     
+    await window.doCreateGroup(groupName, groupMembers);
+    this.handleToggleOverlay(undefined);
+    
+    window.pushToast({
+      title: window.i18n('closedGroupCreatedToastTitle'),
+      type: 'success',
+    });
+
+    
+
     return true;
   }
 }

ts/components/session/SessionClosableOverlay.tsx

@@ -164,13 +164,16 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
         </div>
         { (isOpenGroupView || isClosedGroupView) ? 
           (
-            <SessionIdEditable
-              ref={this.inputRef}
-              editable={true}
-              placeholder={placeholder}
-              value={this.state.groupName}
-              onChange={this.onGroupNameChanged}
-            />
+            <div className="create-group-name-input">
+              <SessionIdEditable
+                ref={this.inputRef}
+                editable={true}
+                placeholder={placeholder}
+                value={this.state.groupName}
+                maxLength={window.CONSTANTS.MAX_GROUPNAME_LENGTH}
+                onChange={this.onGroupNameChanged}
+              />
+            </div>
           ) : (
             <SessionIdEditable
               ref={this.inputRef}
@@ -269,10 +272,8 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
   }
 
   private onGroupNameChanged(event: any) {
-    event.persist;
-    
     this.setState({
-      groupName: event.target.value,
+      groupName: event,
     });
   }
 }

ts/components/session/SessionIdEditable.tsx

@@ -7,6 +7,7 @@ interface Props {
   editable?: boolean;
   onChange?: any;
   onPressEnter?: any;
+  maxLength?: number;
 }
 
 export class SessionIdEditable extends React.PureComponent<Props> {
@@ -26,7 +27,7 @@ export class SessionIdEditable extends React.PureComponent<Props> {
   }
 
   public render() {
-    const { placeholder, editable, text, value} = this.props;
+    const { placeholder, editable, text, value, maxLength} = this.props;
 
     return (
       <div className="session-id-editable">
@@ -39,6 +40,7 @@ export class SessionIdEditable extends React.PureComponent<Props> {
           onKeyDown={this.handleKeyDown}
           onChange={this.handleChange}
           value={value || text}
+          maxLength={maxLength}
         />
       </div>
     );