From 250a3ad6c16ac78b75ad1a28d711a63052b93402 Mon Sep 17 00:00:00 2001
From: Vincent <vincent@loki.network>
Date: Wed, 5 Feb 2020 09:59:55 +1100
Subject: [PATCH] Closed groups overlay integration

---
 _locales/en/messages.json                     |  3 +++
 preload.js                                    |  1 +
 stylesheets/_session.scss                     | 12 +++++++++++
 .../conversation/ConversationHeader.tsx       |  2 +-
 .../conversation/CreateGroupDialog.tsx        | 16 ++++++--------
 .../session/LeftPaneChannelSection.tsx        | 21 +++++++++++++++++--
 .../session/SessionClosableOverlay.tsx        | 21 ++++++++++---------
 ts/components/session/SessionIdEditable.tsx   |  4 +++-
 8 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index e9d828c3e..f2f1a40dc 100644
--- a/_locales/en/messages.json
+++ b/_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"
   },
diff --git a/preload.js b/preload.js
index 0be1bf263..bb980f14a 100644
--- a/preload.js
+++ b/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,
 };
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index d7191ce6c..d5aabaabd 100644
--- a/stylesheets/_session.scss
+++ b/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;
diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx
index fe89cbc85..147a6b9a8 100644
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/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()}
diff --git a/ts/components/conversation/CreateGroupDialog.tsx b/ts/components/conversation/CreateGroupDialog.tsx
index cd1f495a2..6e59abf6a 100644
--- a/ts/components/conversation/CreateGroupDialog.tsx
+++ b/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) {
diff --git a/ts/components/session/LeftPaneChannelSection.tsx b/ts/components/session/LeftPaneChannelSection.tsx
index 5391cb76b..4345257d2 100644
--- a/ts/components/session/LeftPaneChannelSection.tsx
+++ b/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;
   }
 }
diff --git a/ts/components/session/SessionClosableOverlay.tsx b/ts/components/session/SessionClosableOverlay.tsx
index ee5318246..9e9d2a095 100644
--- a/ts/components/session/SessionClosableOverlay.tsx
+++ b/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,
     });
   }
 }
diff --git a/ts/components/session/SessionIdEditable.tsx b/ts/components/session/SessionIdEditable.tsx
index bbd7dc924..c90bbb4e8 100644
--- a/ts/components/session/SessionIdEditable.tsx
+++ b/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>
     );