go to bottom of the chat window on first load

jam-ui/src/components/profile/JKMessageButton.js

@@ -27,7 +27,7 @@ const JKMessageButton = props => {
         outline={outline}
         className={cssClasses}
         data-testid="message"
-        disabled={!isFriend || pendingFriendRequest}
+        disabled={!isFriend}
       >
         {children}
       </Button>

jam-ui/src/components/profile/JKMessageModal.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Modal, ModalHeader, ModalBody, Row, Col, Button, ModalFooter, Alert } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody, Row, Col, Button, ModalFooter } from 'reactstrap';
 import { Scrollbar } from 'react-scrollbars-custom';
-//import TimeAgo from 'react-timeago';
 import TimeAgo from '../common/JKTimeAgo'
 import JKProfileAvatar from './JKProfileAvatar';
 import { useAuth } from '../../context/AuthContext';
@@ -43,6 +42,9 @@ const JKMessageModal = props => {
       const options = { userId: user.id, offset: offset, limit: LIMIT };
       setFetching(true);
       await dispatch(fetchMessagesByReceiverId(options)).unwrap();
+      if(messages.length < LIMIT){
+        goToBottom();
+      }
     } catch (err) {
       console.log('ERROR', err);
     } finally {
@@ -85,7 +87,6 @@ const JKMessageModal = props => {
   };
 
   useEffect(() => {
-    //if (show && messages.length === 0) {
     if (show) {
       fetchMessages();
     }
@@ -143,7 +144,7 @@ const JKMessageModal = props => {
             mobileNative={true}
             trackClickBehavior="step"
           >
-            { isIterableArray(messages) ? 
+            { isIterableArray(messages) && 
               messages.map((message, index) => (
                 <div className="d-flex mb-3 mr-1 text-message-row" key={message.id}>
                   <div className="avatar avatar-2xl d-inline-block">
@@ -164,14 +165,6 @@ const JKMessageModal = props => {
                   </div>
                 </div>
               ))
-            : 
-              <Row className="p-card">
-                <Col>
-                  <Alert color="info" className="mb-0">
-                    No messags yet!
-                  </Alert>
-                </Col>
-              </Row>
             }
           </Scrollbar>
           {messagesArrived && (

jam-ui/src/store/features/textMessagesSlice.js

@@ -67,6 +67,7 @@ export const textMessageSlice = createSlice({
         const unique = [];
         mergedMsgs.map(x => unique.filter(a => a.id === x.id).length > 0 ? null : unique.push(x));
         state.messages = unique
+        console.log("fetchMessagesByReceiverId.fulfilled");
       })
       .addCase(fetchMessagesByReceiverId.rejected, (state, action) => {
         state.status = 'failed'