Untitled

// @flow
import EditIcon from "@mui/icons-material/Edit";
import { Avatar, Badge, Box, IconButton, List, ListItem, ListItemAvatar, ListItemButton, ListItemText, Stack, Typography } from "@mui/material";
import React from "react";

const ChatSideBar = ({
  userConversations,
  setUserConversations,
  onNewChatClicked
}) => {

  const handleChatClick = (index) => {

    const newConversations = [...userConversations];
    newConversations[index] = {
      ...newConversations[index],
      unreadMessages: 0,
    };
    setUserConversations(newConversations);
  };

  const UsersList = (userList) => <List sx={{ width: '100%' }}>
    {userList?.map((conversation, index) => (
      <span key={conversation.id}>
        <ListItemButton
          disabled={conversation.isActive}
          sx={{ pl: 0, pr: 1, width: '100%', borderRadius: 2 }}
          onClick={() => handleChatClick(conversation, index)}
        >
          <ListItem sx={{ py: 0, pr: 0 }}>
            <ListItemAvatar>
              <Badge
                color='error'
                badgeContent={conversation.unreadMessages}
                anchorOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
              >
                <Avatar>{conversation.surname.charAt(0)}</Avatar>
              </Badge>
            </ListItemAvatar>
            <ListItemText
              primary={
                <Stack direction="row" justifyContent="space-between" alignItems="center">
                  <Typography component="div" style={{
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    maxWidth: '150px'
                  }}
                    fontWeight={conversation?.unreadMessages === 0 ? 'normal' : 'bold'}>
                    {conversation.name} {conversation.surname}
                  </Typography>
                  <Typography component="div" style={{ fontSize: 'small', marginLeft: '10px' }}>
                    {conversation.lastMessageDate}
                  </Typography>
                </Stack>
              }
              secondary={
                <div style={{
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis'
                }}>
                  {conversation.lastMessage}
                </div>
              }
            />
          </ListItem>
        </ListItemButton>
      </span>
    ))}
  </List>;

  return (
    <Box sx={{ maxHeight: 700, overflowY: 'scroll' }}>
      <Box
        sx={{
          padding: "0 16px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          background: "red",
        }}
      >
        <Typography>Μηνύματα</Typography>
        <IconButton aria-label="new-chat" onClick={onNewChatClicked}>
          <EditIcon />
        </IconButton>
      </Box>
      {UsersList(userConversations)}
    </Box>
  );
};

export default ChatSideBar;