ability to reply for text message notifications

jam-ui/src/components/notification/JKTextMessageNotification.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useAuth } from '../../context/AuthContext';
 
 import { useDispatch, useSelector } from 'react-redux';
-import { selectPersonById, fetchPerson } from '../../store/features/peopleSlice';
+import { selectPersonById, fetchPerson, add as addPerson } from '../../store/features/peopleSlice';
 import JKMessageButton from '../profile/JKMessageButton';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ProfileAvatar from '../profile/JKProfileAvatar';
@@ -26,6 +26,7 @@ function JKTextMessageNotification(props) {
         .unwrap()
         .then(resp => {
           console.log('after fetch person', resp);
+          dispatch(addPerson(resp))
         })
         .catch(error => console.log(error));
     }

jam-ui/src/components/page/JKPerson.js

@@ -63,8 +63,8 @@ const JKPerson = props => {
             </div>
           </td>
           <td className="d-none d-lg-block d-xl-none">
-            {biography}
-            {biography.length > 0 && (
+            { biography }
+            { biography && biography.length > 0 && (
               <a data-testid="linkMore" onClick={toggleMoreDetails}>
                 {'  '} more »
               </a>

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

@@ -85,7 +85,8 @@ const JKMessageModal = props => {
   };
 
   useEffect(() => {
-    if (show && messages.length === 0) {
+    //if (show && messages.length === 0) {
+    if (show) {
       fetchMessages();
     }
   }, [show]);

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

@@ -38,7 +38,11 @@ export const acceptFriendRequest = createAsyncThunk(
 export const peopleSlice = createSlice({
   name: 'people',
   initialState,
-  reducers: {},
+  reducers: {
+    add: (state, action) => {
+      state.people.push(action.payload)
+    }
+  },
   extraReducers: (builder) => {
     builder
     .addCase(fetchPeople.pending, (state, action) => {
@@ -67,5 +71,6 @@ export const selectPersonById = (state, userId) => state.people.find((person) =>
 
 
 
+export const { add } = peopleSlice.actions;
 
 export default peopleSlice.reducer;