add online status icon

src/components/HomePage/LeftBar/ChatsList/index.tsx

@@ -3,18 +3,49 @@ 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 { styled } from '@mui/material/styles';
+import Badge from '@mui/material/Badge';
 import { makeStyles, Typography } from '@material-ui/core'
 import { useState,useEffect } from 'react';
 import shortid from 'shortid';
 import { useSelector, useDispatch } from 'react-redux';
-import AlertInfo from '../../../reusableComponents/AlertInfo'
 
+import AlertInfo from '../../../reusableComponents/AlertInfo'
 import doubleCheck from '../../../../img/clipart289625.png'
 import { firstLetter, slicedWord, timeStamp } from '../../../../helpers'
 import { getState } from '../../../../redux/chats/selector'
 import { asyncGetChats } from '../../../../redux/chats/operations'
 import { asyncStartChatById } from '../../../../redux/chat/operations'
 
+const StyledBadge = styled(Badge)(({ theme }) => ({
+  '& .MuiBadge-badge': {
+    backgroundColor: '#44b700',
+    color: '#44b700',
+    boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+    '&::after': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      borderRadius: '50%',
+      animation: 'ripple 1.2s infinite ease-in-out',
+      border: '1px solid currentColor',
+      content: '""',
+    },
+  },
+  '@keyframes ripple': {
+    '0%': {
+      transform: 'scale(.8)',
+      opacity: 1,
+    },
+    '100%': {
+      transform: 'scale(2.4)',
+      opacity: 0,
+    },
+  },
+}));
+
 const useStyles = makeStyles({
   list: {
     width: '100%',
@@ -76,6 +107,20 @@ const useStyles = makeStyles({
       outline: 'solid 3px #3ee415',
     }
   },
+  listItem_iconRightBtnHidden: {
+    background: 'inherit',
+    borderRadius: '50%',
+    border: 'none',
+    height: 24,
+    width: 24,
+    textAlign: 'center',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignContent: 'center',
+    fontSize: 12,
+    marginLeft: 'auto', 
+  },
   listItem_icon_time: {
     fontSize: 12,
     marginLeft: 5,
@@ -113,7 +158,7 @@ const ChatsList = () => {
   return total !== '0' ? (
     <List className={classes.list} component="nav"
           aria-label="main mailbox folders">
-      {chats.map(({name, lastName, avatarUrl, updatedAt, color,companionId }, i: number) => 
+      {chats.map(({name, lastName, avatarUrl, updatedAt, color,companionId,online }, i: number) => 
           <ListItemButton
           className={classes.listItem}
           key={shortid.generate()}
@@ -121,20 +166,27 @@ const ChatsList = () => {
           onClick={(e) => handleListItemClick(i,companionId)}
           >
           <ListItemIcon className={classes.listItem_iconAvatar}>
-            <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
-                 sx={{ background: color, width: 54, height: 54 }}>
-                 {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
-              </Avatar>
+            <StyledBadge overlap="circular"  variant={online === 'true'?'dot':'standard'}
+                  anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
+                 <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
+                     sx={{ background: color, width: 54, height: 54 }}>
+                     {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+                  </Avatar>
+              </StyledBadge>
           </ListItemIcon> 
           <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
              ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
-              secondary={slicedWord(lastMessages[i]?lastMessages[i].message:'No messages yet', 35)} />
+             secondary={lastMessages[i] ? slicedWord(lastMessages[i].message, 35) :
+             `${firstLetter(name)}${slicedWord(name, 8, 1)} joined Telegram`} />
           <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">{timeStamp(updatedAt)}</Typography>
+              <Typography className={classes.listItem_icon_time} variant="h6" color="initial">
+                {timeStamp(updatedAt)}</Typography>
                </div>
-               <button onClick={(e) => handleNewMsgS(e,i)} className={classes.listItem_iconRightBtn}>17</button>
+            {lastMessages[i] ? <button onClick={(e) => handleNewMsgS(e, i)}
+              className={classes.listItem_iconRightBtn}>0</button> :
+              <button  className={classes.listItem_iconRightBtnHidden}/>}
           </ListItemIcon>            
         </ListItemButton>)}
       </List>