fixup nickname dialog for enter key pressed event (#1623)

also add some type for it and remove unused props

js/background.js

@@ -384,15 +384,8 @@
     };
 
     window.showNicknameDialog = params => {
-      const options = {
-        title: params.title || undefined,
-        message: params.message,
-        placeholder: params.placeholder,
-        convoId: params.convoId || undefined,
-      };
-
       if (appView) {
-        appView.showNicknameDialog(options);
+        appView.showNicknameDialog(params);
       }
     };
 

ts/components/session/SessionNicknameDialog.tsx

@@ -1,26 +1,20 @@
 import React, { useState } from 'react';
 import { ConversationController } from '../../session/conversations/ConversationController';
 import { SessionModal } from './SessionModal';
-import { SessionButton, SessionButtonColor } from './SessionButton';
+import { SessionButton } from './SessionButton';
 import { DefaultTheme, withTheme } from 'styled-components';
 
+import _ from 'lodash';
+
 type Props = {
-  message: string;
-  title: string;
-  placeholder?: string;
-  onOk?: any;
-  onClose?: any;
   onClickOk: any;
   onClickClose: any;
-  hideCancel: boolean;
-  okTheme: SessionButtonColor;
   theme: DefaultTheme;
-  convoId?: string;
+  convoId: string;
 };
 
 const SessionNicknameInner = (props: Props) => {
-  const { title = '', message, onClickOk, onClickClose, convoId, placeholder } = props;
+  const { onClickOk, onClickClose, convoId, theme } = props;
-  const showHeader = true;
   const [nickname, setNickname] = useState('');
 
   /**
@@ -30,9 +24,10 @@ const SessionNicknameInner = (props: Props) => {
   const onNicknameInput = async (event: any) => {
     if (event.key === 'Enter') {
       await saveNickname();
+    } else {
+      const currentNicknameEntered = event.target.value;
+      setNickname(currentNicknameEntered);
     }
-    const currentNicknameEntered = event.target.value;
-    setNickname(currentNicknameEntered);
   };
 
   /**
@@ -49,24 +44,24 @@ const SessionNicknameInner = (props: Props) => {
 
   return (
     <SessionModal
-      title={title}
+      title={window.i18n('changeNickname')}
       onClose={onClickClose}
       showExitIcon={false}
-      showHeader={showHeader}
+      showHeader={true}
-      theme={props.theme}
+      theme={theme}
     >
-      {!showHeader && <div className="spacer-lg" />}
-
       <div className="session-modal__centered">
-        <span className="subtle">{message}</span>
+        <span className="subtle">{window.i18n('changeNicknameMessage')}</span>
         <div className="spacer-lg" />
       </div>
 
       <input
         type="nickname"
         id="nickname-modal-input"
-        placeholder={placeholder}
+        placeholder={window.i18n('nicknamePlaceholder')}
-        onKeyUp={onNicknameInput}
+        onKeyPress={e => {
+          void onNicknameInput(_.cloneDeep(e));
+        }}
       />
 
       <div className="session-modal__button-group">

ts/models/conversation.ts

@@ -1313,9 +1313,6 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
       );
     }
     window.showNicknameDialog({
-      title: window.i18n('changeNickname') || 'Change Nickname',
-      message: window.i18n('changeNicknameMessage') || '',
-      placeholder: window.i18n('nicknamePlaceholder') || '',
       convoId: this.id,
     });
   }

ts/window.d.ts

@@ -68,7 +68,7 @@ declare global {
     setPassword: any;
     setSettingValue: any;
     showEditProfileDialog: any;
-    showNicknameDialog: any;
+    showNicknameDialog: (options: { convoId: string }) => void;
     showResetSessionIdDialog: any;
     storage: any;
     textsecure: LibTextsecure;