update outbox recipient text

src/components/Messages/MessagePreview.jsx

@@ -74,10 +74,12 @@ const MessagePreview = ({ message, folderType }) => {
     return 2;
   };
 
+  const isInbox = folderType === 'Inbox';
+
   const messageInfo = [
     {
-      title: 'Sender: ',
-      text: message?.sender,
+      title: isInbox ? 'Sender: ' : 'Recipient: ',
+      text: isInbox ? message?.sender : message?.recipient,
       xs_value: isSmallScreen ? 12 : renderMediumGridLeft()
     },
     {

test/components/Messages/MessagePreview.test.jsx

@@ -7,10 +7,15 @@ import createMatchMedia from '../../helpers/createMatchMedia';
 
 const queryClient = new QueryClient();
 
-const mockMessageInfo = { sender: 'test', title: 'test title', uploadDate: new Date('1-1-2000') };
-const MockMessagePreview = () => (
+const mockMessageInfo = {
+  sender: 'test',
+  recipient: 'testrecipient',
+  title: 'test title',
+  uploadDate: new Date('1-1-2000')
+};
+const MockMessagePreview = ({ folderType = 'Inbox' }) => (
   <QueryClientProvider client={queryClient}>
-    <MessagePreview message={mockMessageInfo} />
+    <MessagePreview message={mockMessageInfo} folderType={folderType} />
   </QueryClientProvider>
 );
 
@@ -54,3 +59,16 @@ describe('Grid sizes', () => {
     expect(dateCell.classList.contains('MuiGrid-grid-xs-12')).toBe(true);
   });
 });
+
+describe('Outbox shows Recipient instead of Sender', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders Recipient text', () => {
+    const { getByText } = render(<MockMessagePreview folderType="Outbox" />);
+    const recipientCell = getByText('Recipient:').parentElement;
+
+    expect(recipientCell.classList.contains('MuiGrid-grid-xs-5')).toBe(true);
+  });
+});