components.message.MessageInfo.js Maven / Gradle / Ivy

import {
  Box,
  IconButton,
  Tooltip,
  Typography,
  Table,
  TableBody,
  TableCell,
  TableRow, 
  Menu
} from '@mui/material';
import { useTranslation }            from 'react-i18next';
import { ArrowDropDown as InfoIcon } from '@mui/icons-material';
import { useState }                  from 'react';
import { toDisplayValue }            from "components/render/utils/render";


const MessageInfo = (props) => {
  const {t} = useTranslation()

  return (
    
      
        {t("messages.sender") + ": " + props.sender?.username || t("messages.unknown")}
      
      
    
  )
}

const MessageInfoIcon = (props) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const open                    = Boolean(anchorEl);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <>
      
        
          
            
          
        
      
      
        
      
    
  );
}

const  MessageDetails = (info) => {
	const { t }     = useTranslation()
	const cellStyle = {border: 'none', paddingTop: "3px", paddingBottom: "3px"}

  const rows = [
    {key: "messages.sender", field: "sender.username"},
    {key: "messages.recipient", field: "recipient.username"},
    {key: "messages.received", field: "received"},
    {key: "messages.read", field: "seen"},
    {key: "messages.subject", field: "subject"}
  ]

  const data = {...info,
    received: info.publishedAt ? toDisplayValue(info.publishedAt) : "",
    seen: info.readAt ? toDisplayValue(info.readAt) : "" 
  }

	return (
      
          {rows.map((row, index) => (
            
              
                
                  {t(row.key)}:
                
               
              
                
                  {_.get(data, row.field)}
                
               
            

          )
        )}
        
        
      
  );
}

const menuProps = {
  elevation: 0,
  sx: {
    overflow: 'visible',
    filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
    mt: 0.5,
    ml: -0.6,
    '& .MuiAvatar-root': {
      width: 32,
      height: 32,
      ml: -0.5,
      mr: 1,
    },
    '&:before': {
      content: '""',
      display: 'block',
      position: 'absolute',
      top: 0,
      left: 10,
      width: 10,
      height: 10,
      bgcolor: 'background.paper',
      transform: 'translateY(-50%) rotate(45deg)',
      zIndex: 0,
    },
  },
}

export default MessageInfo