Trim group titles when creating or editing

* Trim group titles when creating or editing

* Trim title in more places

ts/components/conversation/conversation-details/EditConversationAttributesModal.tsx

@@ -55,9 +55,11 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
   const [avatar, setAvatar] = useState<undefined | ArrayBuffer>(
     externalAvatarPath ? TEMPORARY_AVATAR_VALUE : undefined
   );
-  const [title, setTitle] = useState(externalTitle);
+  const [rawTitle, setRawTitle] = useState(externalTitle);
   const [hasAvatarChanged, setHasAvatarChanged] = useState(false);
 
+  const trimmedTitle = rawTitle.trim();
+
   useEffect(() => {
     const startingAvatarPath = startingAvatarPathRef.current;
     if (!startingAvatarPath) {
@@ -90,14 +92,14 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
   const hasChangedExternally =
     startingAvatarPathRef.current !== externalAvatarPath ||
     startingTitleRef.current !== externalTitle;
-  const hasTitleChanged = title !== externalTitle;
+  const hasTitleChanged = trimmedTitle !== externalTitle.trim();
 
   const isRequestActive = requestState === RequestState.Active;
 
   const canSubmit =
     !isRequestActive &&
     (hasChangedExternally || hasTitleChanged || hasAvatarChanged) &&
-    title.length > 0;
+    trimmedTitle.length > 0;
 
   const onSubmit: FormEventHandler<HTMLFormElement> = event => {
     event.preventDefault();
@@ -110,7 +112,7 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
       request.avatar = avatar;
     }
     if (hasTitleChanged) {
-      request.title = title;
+      request.title = trimmedTitle;
     }
     makeRequest(request);
   };
@@ -150,8 +152,8 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
         <GroupTitleInput
           disabled={isRequestActive}
           i18n={i18n}
-          onChangeValue={setTitle}
-          value={title}
+          onChangeValue={setRawTitle}
+          value={rawTitle}
         />
 
         {requestState === RequestState.InactiveWithError && (

ts/state/ducks/conversations.ts

@@ -731,7 +731,7 @@ function createGroup(): ThunkAction<
 
     try {
       const conversation = await groups.createGroupV2({
-        name: composer.groupName,
+        name: composer.groupName.trim(),
         avatar: composer.groupAvatar,
         conversationIds: composer.selectedConversationIds,
       });

ts/test-electron/state/ducks/conversations_test.ts

@@ -743,6 +743,28 @@ describe('both/state/ducks/conversations', () => {
         });
       });
 
+      it("trims the group's title before calling groups.createGroupV2", async () => {
+        await createGroup()(
+          sinon.spy(),
+          () => ({
+            ...getEmptyRootState(),
+            conversations: {
+              ...conversationsState,
+              composer: {
+                ...conversationsState.composer,
+                groupName: '  To  Trim \t',
+              },
+            },
+          }),
+          null
+        );
+
+        sinon.assert.calledWith(
+          createGroupStub,
+          sinon.match({ name: 'To  Trim' })
+        );
+      });
+
       it('dispatches a CREATE_GROUP_REJECTED action if group creation fails, which marks the state with an error', async () => {
         createGroupStub.rejects(new Error('uh oh'));