12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- import List from '@mui/material/List';
- import ListItem from '@mui/material/ListItem';
- import ListItemText from '@mui/material/ListItemText';
- import ListItemAvatar from '@mui/material/ListItemAvatar';
- import FolderIcon from '@mui/icons-material/Folder';
- import Divider from '@mui/material/Divider';
- import { makeStyles } from '@material-ui/core'
- import AlertInfo from '../../../../../../reusableComponents/AlertInfo';
- import { timeStampEU,handleDownload,prodBaseURL } from '../../../../../../../helpers'
- import { TMessages } from '../../../../../../../typescript/redux/messages/types'
- const useStyles = makeStyles({
- folderIcon: {
- color: '#54b0fc',
- cursor: 'pointer',
- '&:hover': {
- color: '#016cc3'
- },
- },
- listItem: {
- '&:hover': {
- backgroundColor: '#f0f0f0',
- }
- },
- })
- const FilesList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
- const classes = useStyles()
- const filteredMessagesMemo = messagesMemo.filter(({type}) => type !== 'text')
- return filteredMessagesMemo.length > 0 ?(
- <List>
- {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
- <div key={createdAt}>
- <ListItem alignItems="flex-start" className={classes.listItem}>
- <ListItemAvatar>
- <FolderIcon onClick={() =>
- handleDownload(`${prodBaseURL}/${message}`, fullType)}
- className={classes.folderIcon} fontSize='large' />
- </ListItemAvatar>
- <ListItemText
- primary={fullType}
- secondary={timeStampEU(createdAt)}
- />
- </ListItem>
- <Divider variant="inset"/>
- </div>)}
- </List>
- ): <AlertInfo name='You do not have Files yet!'/>
- }
- export default FilesList
|