All files / components/Chat ChatDisplay.js

100% Statements 12/12
100% Branches 4/4
100% Functions 4/4
100% Lines 11/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66            4x 20x 20x           20x                                 20x                             30x   20x 15x 15x     20x     32x                  
import React from 'react';
import ChatMessageDisplay from 'main/components/Chat/ChatMessageDisplay';
import { useBackend } from "main/utils/useBackend";
 
// Props for storybook manual injection
 
const ChatDisplay = ({ commonsId }) => {
    const initialMessagePageSize = 10;
    const refreshRate = 2000;
 
    // Stryker disable all
 
    const {
        data: messagesPage
        } = useBackend(
            [`/api/chat/get`],
            {
                method: "GET",
                url: `/api/chat/get`,
                params: {
                    commonsId: commonsId,
                    page: 0,
                    size: initialMessagePageSize
                }
            },
            { content: [] },
            { refetchInterval: refreshRate }
        );
  
      const {
        data: userCommonsList
        } = useBackend(
            [`/api/usercommons/commons/all`],
            {
                method: "GET",
                url: "/api/usercommons/commons/all",
                params: {
                    commonsId: commonsId,
                }
            },
            [],
            { refetchInterval: refreshRate }
      );
      
    // Stryker restore all
  
    const sortedMessages = messagesPage.content.sort((a, b) => b.id - a.id);
 
    const userIdToUsername = userCommonsList.reduce((acc, user) => {
        acc[user.userId] = user.username || "";
        return acc;
    }, {});
 
    return (
      <div style={{ display: "flex", flexDirection: "column-reverse", overflowY: "scroll", maxHeight: "300px" }} data-testid="ChatDisplay" >
        {Array.isArray(sortedMessages) && sortedMessages.slice(0, initialMessagePageSize).map((message) => (
            <ChatMessageDisplay 
                key={message.id} 
                message={{ ...message, username: userIdToUsername[message.userId] }} 
            />
        ))}
      </div>
    );
};
 
export default ChatDisplay;