Chat improvements

src/defaultStyles.css

@@ -66,7 +66,6 @@ textarea {
   color: var(--text-color);
   background-color: var(--background-color);
   box-sizing: border-box;
-  height: 140px;
   width: 90%;
   border: 0px solid #666;
   border-radius: 3px;

src/pages/chat.js

@@ -122,6 +122,7 @@ export default class Chat extends React.Component {
       this.connect(this.props.globalData.userId)
     }
     this.router = props.router
+    this.chatInputRef = React.createRef()
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -165,6 +166,13 @@ export default class Chat extends React.Component {
     }
   }
 
+  resizeInputBar() {
+    if (this.chatInputRef.current) {
+      const input = this.chatInputRef.current
+      input.style.height = input.scrollHeight + 'px'
+    }
+  }
+
   scrollToChatBottom() {
     const objDiv = document.getElementById('messages')
     if (objDiv) {
@@ -263,6 +271,7 @@ export default class Chat extends React.Component {
   }
 
   sendMsg(currMsg, type) {
+    this.chatInputRef.current.style.height = '40px'
     const { msgs, selectedUser, user } = this.state
     if (!currMsg) {
       return
@@ -389,10 +398,7 @@ export default class Chat extends React.Component {
               uploadFile(file).then((res) => {
                 const { path, success } = res
                 if (success) {
-                  this.sendMsg(
-                    `${constants.apiUrl}${path}`,
-                    isImage ? 'img' : 'file'
-                  )
+                  this.sendMsg(`${path}`, isImage ? 'img' : 'file')
                 } else {
                   alert('Error uploading image :/')
                   console.error(res)
@@ -411,12 +417,17 @@ export default class Chat extends React.Component {
             📂
           </label>
         </div>
-        <input
+        <textarea
+          ref={this.chatInputRef}
+          className={styles.msgInput}
           autoFocus
           placeholder={'Message ...'}
           type={'text'}
           value={currMsg}
           tabIndex={0}
+          onKeyDown={() => {
+            this.resizeInputBar()
+          }}
           onKeyUp={(e) => {
             const lastMessage = msgs[selectedUser]
               ? msgs[selectedUser].lastMessage
@@ -429,8 +440,9 @@ export default class Chat extends React.Component {
               this.chatMessageSeen(selectedUser)
             }
             if (e.key === 'Enter') {
-              this.sendMsg(currMsg)
+              if (!e.shiftKey) this.sendMsg(currMsg)
             }
+            this.resizeInputBar()
           }}
           onChange={(e) => {
             this.setState({
@@ -534,13 +546,6 @@ export default class Chat extends React.Component {
 
   renderMsg(message, key) {
     const { msg, type } = message
-    console.log(msg)
-    console.log(
-      linkifyString(msg, {
-        defaultProtocol: 'https',
-        target: '_blank',
-      })
-    )
 
     if (type === 'text') {
       return (
@@ -557,7 +562,7 @@ export default class Chat extends React.Component {
     } else if (type === 'img') {
       return (
         <a key={key} href={msg} rel="noreferrer" target="_blank">
-          <img src={msg} />
+          <img src={`${constants.apiUrl}${msg}`} />
         </a>
       )
     } else if (type === 'file') {
@@ -565,7 +570,7 @@ export default class Chat extends React.Component {
         <a
           className={`${styles.messageEntry}`}
           key={key}
-          href={msg}
+          href={`${constants.apiUrl}${msg}`}
           rel="noreferrer"
           target="_blank"
         >

src/pages/chat.module.css

@@ -173,10 +173,12 @@
   border-radius: 4px;
   color: black;
   max-width: 400px;
+  white-space: pre-wrap;
 }
 
 .sendButton {
   width: 90px;
+  padding: 4px;
 }
 
 .home {
@@ -221,3 +223,9 @@
   margin: 0px 5px;
   cursor: pointer;
 }
+
+.msgInput {
+  resize: vertical;
+  padding: 10px;
+  height: 40px;
+}