File input prep

stylesheets/_session_conversation.scss

@@ -50,7 +50,7 @@ $composition-container-height: 60px;
   align-items: center;
   background-color: $session-shade-4;
   padding: 0px $session-margin-md;
-  min-height: $composition-container-height;
+  min-height: min-content;
 
   & > .session-icon-button {
     margin-right: $session-margin-sm;

ts/components/session/SessionCompositionBox.tsx

@@ -6,7 +6,7 @@ import { SessionEmojiPanel } from './SessionEmojiPanel';
 
 interface Props {
   placeholder?: string;
-  onSendMessage: any;
+  sendMessage: any;
 }
 
 interface State {
@@ -16,6 +16,7 @@ interface State {
 
 export class SessionCompositionBox extends React.Component<Props, State> {
   private textarea: React.RefObject<HTMLTextAreaElement>;
+  private fileInput: React.RefObject<HTMLInputElement>;
 
   constructor(props: any) {
     super(props);
@@ -26,6 +27,11 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     };
 
     this.textarea = React.createRef();
+    this.fileInput = React.createRef();
+
+    this.onKeyUp = this.onKeyUp.bind(this);
+
+    this.onChooseAttachment = this.onChooseAttachment.bind(this);
     this.toggleEmojiPanel = this.toggleEmojiPanel.bind(this);
   }
 
@@ -38,7 +44,14 @@ export class SessionCompositionBox extends React.Component<Props, State> {
         <SessionIconButton
           iconType={SessionIconType.CirclePlus}
           iconSize={SessionIconSize.Large}
+          onClick={this.onChooseAttachment}
         />
+
+        <input
+          ref={this.fileInput}
+          type='file'
+        />
+        
         <SessionIconButton
           iconType={SessionIconType.Microphone}
           iconSize={SessionIconSize.Large}
@@ -47,10 +60,11 @@ export class SessionCompositionBox extends React.Component<Props, State> {
         <div className="send-message-input">
           <TextareaAutosize
             rows={1}
-            maxRows={6}
+            maxRows={3}
             ref={this.textarea}
             placeholder={placeholder}
             maxLength={window.CONSTANTS.MAX_MESSAGE_BODY_LENGTH}
+            onKeyUp={this.onKeyUp}
           />
         </div>
 
@@ -78,4 +92,41 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       showEmojiPanel: !this.state.showEmojiPanel,
     });
   }
+  
+
+  private onChooseAttachment() {
+    this.fileInput.current?.click();
+  }
+
+  private onChoseAttachment() {
+
+  }
+
+  private onKeyUp(event: any) {
+    console.log(`[vince][msg] Event: `, event);
+    console.log(`[vince][msg] Key `, event.key);
+    console.log(`[vince][msg] KeyCode `, event.keyCode);
+    console.log(`[vince][msg] AltKey `, event.altKey);
+    console.log(`[vince][msg] Ctrl: `, event.ctrlKey);
+    console.log(`[vince][msg] Shift: `, event.shiftKey);
+    
+    if (event.key === 'Enter' && !event.shiftKey) {
+      // If shift, newline. Else send message.
+      event.preventDefault();
+
+      // FIXME VINCE: Get emoiji, attachments, etc
+      const messageBody = this.textarea.current?.value;
+      const attachments = this.fileInput.current?.value;
+
+      
+
+      // this.props.sendMessage(
+
+      // );      
+    }
+
+  }
+
+
+
 }

ts/components/session/SessionConversation.tsx

@@ -36,7 +36,6 @@ export class SessionConversation extends React.Component<any, State> {
     super(props);
     
     const conversationKey = this.props.conversations.selectedConversation;
-    
     const conversation = this.props.conversations.conversationLookup[conversationKey];
     const unreadCount = conversation.unreadCount;
 
@@ -74,8 +73,6 @@ export class SessionConversation extends React.Component<any, State> {
         doneInitialScroll: true,
       });
     }, 100);
-
-    console.log(`[vince][info] HeaderProps:`, this.getHeaderProps());
   }
 
   public componentDidUpdate(){
@@ -97,21 +94,18 @@ export class SessionConversation extends React.Component<any, State> {
 
   render() {
     console.log(`[vince][info] Props`, this.props);
-    console.log(`[vince][info] Unread: `, this.state.unreadCount);
-    console.log(`[vince][info] Messages:`, this.state.messages);
 
-
-    // const headerProps = this.props.getHeaderProps;
     const { messages, conversationKey, doneInitialScroll } = this.state;
     const loading = !doneInitialScroll || messages.length === 0;
 
     const conversation = this.props.conversations.conversationLookup[conversationKey];
+    const conversationModel = window.getConversationByKey(conversationKey);
     const isRss = conversation.isRss;
 
     return (
       <div className="conversation-item">
         <div className="conversation-header">
-          {this.renderHeader(conversation)}
+          {this.renderHeader()}
         </div>
 
         <SessionProgress
@@ -138,7 +132,7 @@ export class SessionConversation extends React.Component<any, State> {
         
         { !isRss && (
           <SessionCompositionBox
-            onSendMessage={() => null}
+            sendMessage={conversationModel.sendMessage}
           />
         )}
         
@@ -178,49 +172,51 @@ export class SessionConversation extends React.Component<any, State> {
 
   }
 
-  public renderHeader(conversation: any) {
+  public renderHeader() {
+    const headerProps = this.getHeaderProps();
+
     return (
       <ConversationHeader
-        id={conversation.cid}
+        id={headerProps.id}
-        phoneNumber={conversation.id}
+        phoneNumber={headerProps.phoneNumber}
-        isVerified={true}
+        isVerified={headerProps.isVerified}
-        isMe={false}
+        isMe={headerProps.isMe}
-        isFriend={true}
+        isFriend={headerProps.isFriend}
         i18n={window.i18n}
-        isGroup={false}
+        isGroup={headerProps.isGroup}
-        isArchived={false}
+        isArchived={headerProps.isArchived}
-        isPublic={false}
+        isPublic={headerProps.isPublic}
-        isRss={false}
+        isRss={headerProps.isRss}
-        amMod={false}
+        amMod={headerProps.amMod}
-        members={[]}
+        members={headerProps.members}
-        showBackButton={false}
+        showBackButton={headerProps.showBackButton}
-        timerOptions={[]}
+        timerOptions={headerProps.timerOptions}
-        isBlocked={false}
+        isBlocked={headerProps.isBlocked}
-        hasNickname={false}
+        hasNickname={headerProps.hasNickname}
-        isFriendRequestPending={false}
+        isFriendRequestPending={headerProps.isFriendRequestPending}
-        isOnline={true}
+        isOnline={headerProps.isOnline}
-        selectedMessages={null}
+        selectedMessages={headerProps.selectedMessages}
-        onSetDisappearingMessages={() => null}
+        onSetDisappearingMessages={headerProps.onSetDisappearingMessages}
-        onDeleteMessages={() => null}
+        onDeleteMessages={headerProps.onDeleteMessages}
-        onDeleteContact={() => null}
+        onDeleteContact={headerProps.onDeleteContact}
-        onResetSession={() => null}
+        onResetSession={headerProps.onResetSession}
-        onCloseOverlay={() => null}
+        onCloseOverlay={headerProps.onCloseOverlay}
-        onDeleteSelectedMessages={() => null}
+        onDeleteSelectedMessages={headerProps.onDeleteSelectedMessages}
-        onArchive={() => null}
+        onArchive={headerProps.onArchive}
-        onMoveToInbox={() => null}
+        onMoveToInbox={headerProps.onMoveToInbox}
-        onShowSafetyNumber={() => null}
+        onShowSafetyNumber={headerProps.onShowSafetyNumber}
-        onShowAllMedia={() => null}
+        onShowAllMedia={headerProps.onShowAllMedia}
-        onShowGroupMembers={() => null}
+        onShowGroupMembers={headerProps.onShowGroupMembers}
-        onGoBack={() => null}
+        onGoBack={headerProps.onGoBack}
-        onBlockUser={() => null}
+        onBlockUser={headerProps.onBlockUser}
-        onUnblockUser={() => null}
+        onUnblockUser={headerProps.onUnblockUser}
-        onClearNickname={() => null}
+        onClearNickname={headerProps.onClearNickname}
-        onChangeNickname={() => null}
+        onChangeNickname={headerProps.onChangeNickname}
-        onCopyPublicKey={() => null}
+        onCopyPublicKey={headerProps.onCopyPublicKey}
-        onLeaveGroup={() => null}
+        onLeaveGroup={headerProps.onLeaveGroup}
-        onAddModerators={() => null}
+        onAddModerators={headerProps.onAddModerators}
-        onRemoveModerators={() => null}
+        onRemoveModerators={headerProps.onRemoveModerators}
-        onInviteFriends={() => null}
+        onInviteFriends={headerProps.onInviteFriends}
       />
     );
   }
@@ -407,7 +403,7 @@ export class SessionConversation extends React.Component<any, State> {
     topUnreadMessage?.scrollIntoView();
   }
 
-  public scrollToBottom(instant = false) {
+  public scrollToBottom() {
     // FIXME VINCE: Smooth scrolling that isn't slow@!
     // this.messagesEndRef.current?.scrollIntoView(
     //   { behavior: firstLoad ? 'auto' : 'smooth' }
@@ -418,12 +414,8 @@ export class SessionConversation extends React.Component<any, State> {
   }
 
   public getHeaderProps() {
-    const conversationKey = this.props.conversations.selectedConversation;
+    const {conversationKey} = this.state;
     const conversation = window.getConversationByKey(conversationKey);
-    
-    console.log(`[vince][info] Key:`, conversationKey);
-    console.log(`[vince][info] Conversation`, conversation);
-    console.log(`[vince] Manual: `, );
 
     const expireTimer = conversation.get('expireTimer');
     const expirationSettingName = expireTimer