|
@@ -0,0 +1,130 @@
|
|
|
+import List from '@mui/material/List';
|
|
|
+import ListItemButton from '@mui/material/ListItemButton';
|
|
|
+import Avatar from '@mui/material/Avatar';
|
|
|
+import ListItemText from '@mui/material/ListItemText';
|
|
|
+import ListItemIcon from '@mui/material/ListItemIcon';
|
|
|
+import { makeStyles, Typography } from '@material-ui/core'
|
|
|
+import { useState } from 'react';
|
|
|
+import shortid from 'shortid';
|
|
|
+
|
|
|
+import doubleCheck from '../../../../img/clipart289625.png'
|
|
|
+import { chats } from './chats'
|
|
|
+
|
|
|
+const randomColor = () => "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16);
|
|
|
+
|
|
|
+const useStyles = makeStyles({
|
|
|
+ list: {
|
|
|
+ width: '100%',
|
|
|
+ maxHeight: '890px',
|
|
|
+ overflowY: 'scroll',
|
|
|
+ '&::-webkit-scrollbar': {
|
|
|
+ width: '0.4em'
|
|
|
+ },
|
|
|
+ '&::-webkit-scrollbar-track': {
|
|
|
+ boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
|
|
|
+ webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
|
|
|
+ backgroundColor: '#eceeec',
|
|
|
+ },
|
|
|
+ '&::-webkit-scrollbar-thumb': {
|
|
|
+ backgroundColor: '#ccc8c8',
|
|
|
+ },
|
|
|
+ "&::-webkit-scrollbar-thumb:focus": {
|
|
|
+ backgroundColor: "#959595",
|
|
|
+ },
|
|
|
+ "&::-webkit-scrollbar-thumb:active": {
|
|
|
+ backgroundColor: "#959595",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ listItem: {},
|
|
|
+ listItem_iconAvatar: {
|
|
|
+ marginRight:10
|
|
|
+ },
|
|
|
+ listItem_iconRight: {
|
|
|
+ marginRight: 10,
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center',
|
|
|
+ alignContent: 'center',
|
|
|
+ flexDirection: 'column'
|
|
|
+ },
|
|
|
+ listItem_iconTimeChecked: {
|
|
|
+ display: 'flex',
|
|
|
+ flexWrap: 'nowrap',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center',
|
|
|
+ alignContent: 'center',
|
|
|
+ marginBottom:2
|
|
|
+ },
|
|
|
+ listItem_iconRightBtn: {
|
|
|
+ background: '#0ac40a',
|
|
|
+ borderRadius: '50%',
|
|
|
+ color: '#ffffff',
|
|
|
+ border: 'none',
|
|
|
+ height: 24,
|
|
|
+ width: 24,
|
|
|
+ textAlign: 'center',
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center',
|
|
|
+ alignContent: 'center',
|
|
|
+ fontSize: 12,
|
|
|
+ marginLeft: 'auto',
|
|
|
+ '&:hover': {
|
|
|
+ outline: 'solid 3px #3ee415',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ listItem_icon_time: {
|
|
|
+ fontSize: 12,
|
|
|
+ marginLeft:5
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const ChatsList = () => {
|
|
|
+ const [selectedIndex, setSelectedIndex] = useState<number>(1);
|
|
|
+
|
|
|
+ const classes = useStyles()
|
|
|
+
|
|
|
+ const handleListItemClick = (e: React.SyntheticEvent<Element, Event>, i: number) => {
|
|
|
+ console.log(i,'index','selected chat in chat bar',e)
|
|
|
+ setSelectedIndex(i);
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleNewMsgS = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, i: number) => {
|
|
|
+ e.stopPropagation()
|
|
|
+ console.log(i,'index','clicked read new messages')
|
|
|
+ }
|
|
|
+
|
|
|
+ const data = new Date(2022, 3, 8).toLocaleString("en-US", {
|
|
|
+ year:'numeric',
|
|
|
+ month: 'short',
|
|
|
+ day: 'numeric'
|
|
|
+ });
|
|
|
+
|
|
|
+ return (
|
|
|
+ <List className={classes.list} component="nav"
|
|
|
+ aria-label="main mailbox folders">
|
|
|
+ {chats && chats.map((chat: any,i:number) =>
|
|
|
+ <ListItemButton
|
|
|
+ className={classes.listItem}
|
|
|
+ key={shortid.generate()}
|
|
|
+ selected={selectedIndex === i}
|
|
|
+ onClick={(e) => handleListItemClick(e, i)}
|
|
|
+ >
|
|
|
+ <ListItemIcon className={classes.listItem_iconAvatar}>
|
|
|
+ <Avatar alt={chat.name} src={chat.avatarUrl?chat.avatarUrl:undefined}
|
|
|
+ sx={{ background: randomColor(), width: 54, height: 54 }}/>
|
|
|
+ </ListItemIcon>
|
|
|
+ <ListItemText primary={chat.name.slice(0,50)} secondary={chat.message.slice(0,35)} />
|
|
|
+ <ListItemIcon className={classes.listItem_iconRight}>
|
|
|
+ <div className={classes.listItem_iconTimeChecked}>
|
|
|
+ <img alt='double check' width="16" height='16' src={doubleCheck} />
|
|
|
+ <Typography className={classes.listItem_icon_time} variant="h6" color="initial">{data}</Typography>
|
|
|
+ </div>
|
|
|
+ <button onClick={(e) => handleNewMsgS(e,i)} className={classes.listItem_iconRightBtn}>17</button>
|
|
|
+ </ListItemIcon>
|
|
|
+ </ListItemButton>)}
|
|
|
+ </List>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+export default ChatsList
|