done arrrow notification

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

@@ -196,7 +196,7 @@ const ChatsList = () => {
 
   useEffect(() => {
     const handleReset = () => dispatch(asyncGetChats())
-    const idInterval = setInterval(handleReset, 1500);
+    const idInterval = setInterval(handleReset, 3000);
     return () => clearInterval(idInterval);
   }, [dispatch]);
   
@@ -210,14 +210,14 @@ const ChatsList = () => {
       dispatch(actionScroll(true))
    }
     if (ref.current) {
-      ref.current.forEach(({total,seen}: any,i:number) => {
+      ref.current.forEach(({total,seen,_id}: any,i:number) => {
         const oldDifferent = total - seen
         const chat = chats[i]
         const newDifferent = chat.total - chat.seen
         if (newDifferent > oldDifferent && !chat.mute) {
           playNotificationWithoutPermission('http://localhost:3000/recive.mp3')
           notification(chat.name,() => handleNotification(chat.companionId))
-        }
+        } 
       })
     }
       ref.current = chats

src/components/HomePage/RightBar/ChatBar/SendMessage/index.tsx

@@ -130,15 +130,58 @@ const useStyles = makeStyles({
             border:'solid 14px rgb(41, 139, 231)',
             color: '#ffffff',
         }
+    },
+    avatarArrowWrapper: {
+        position:'absolute',
+        right: -140,
+        bottom: 200,
+        width: 56,
     },    
     avatarArrow: {
-        left: 120,
-        bottom:200,
+        cursor:'pointer',
         '&:hover': {
             backgroundColor: 'rgb(41, 139, 231)',
             color: '#ffffff',
         }
     },
+    listSeenIconMute: {
+        position: 'absolute',
+        top: -8,
+        left: 16,
+        background: '#a7aaa7',
+        borderRadius: '50%',
+        color: '#ffffff',
+        border: 'none',
+        height: 24,
+        width: 24,
+        textAlign: 'center',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignContent: 'center',
+        fontSize: 12,
+        zIndex: 10,
+        cursor:'pointer',
+    },
+    listSeenIcon: {
+       position: 'absolute',
+       top: -8,
+       left: 16,        
+       background: '#0ac40a',
+       borderRadius: '50%',
+       color: '#ffffff',
+       border: 'none',
+       height: 24,
+       width: 24,
+       textAlign: 'center',
+       display: 'flex',
+       alignItems: 'center',
+       justifyContent: 'center',
+       alignContent: 'center',
+       fontSize: 12,
+       zIndex: 10,
+       cursor:'pointer'
+    },    
     iconCancel: {
         position: 'absolute',
         left:-65,
@@ -163,11 +206,12 @@ const useStyles = makeStyles({
 });
 
 interface ISendMessage{
-    isArrow:boolean,
+    isArrow: boolean,
+    isNew: {new:number,mute:boolean},
     handleScrollTo:() => void
 }
 
-const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
+const SendMessage = ({isArrow,isNew,handleScrollTo}:ISendMessage) => {
     const classes = useStyles();
     const { companionId } = useSelector(getChat)
     const isOpen = useSelector(getIsOpen)
@@ -191,6 +235,7 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
         _mediaBlobUrl && _clearBlobUrl()
         isOpenMenu&&setIsOpenMenu(false)
         isOpenEmoji && setIsOpenEmoji(false)
+        handleScrollTo()
     }
     const sentMessage = async () => {
         if (value) sentMessageById(companionId, value)
@@ -254,9 +299,8 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
               sentFileMessageById(companionId, formData)   
             }
         }
-        handleClearMessage()
-        setTimeout(handleScrollTo, 3000);
         playNotification('http://localhost:3000/send.mp3')
+        setTimeout(handleClearMessage, 3000);
     }    
     const handleTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)
     const handleFocusTextarea = async () => await typingChat(companionId,true)
@@ -290,7 +334,7 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
             setType('filming')
             setIsFilming(true)
         }
-    }    
+    }
 
     return (
         <div className={classes.container} style={{borderTop:isArrow?'solid 1px #ffffff':'none'}} >            
@@ -327,11 +371,14 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
                       <FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu} setType={setType}/>
                     </div>
                 </div>
-                <Avatar onClick={handleScrollTo} className={classes.avatarArrow}
-                    sx={{backgroundColor: '#ffffff', width: 56, height: 56,
-                    color: '#6b6b6b', display: isArrow ? 'flex' : 'none'}}>
-                  <ArrowDownwardIcon fontSize="medium" />
-                </Avatar>                 
+                <div className={classes.avatarArrowWrapper} style={{display: isArrow ? 'block' : 'none'}}>
+                    <button onClick={handleScrollTo} style={{display: isNew.new ? 'block' : 'none'}}
+                     className={isNew.mute ? classes.listSeenIconMute : classes.listSeenIcon}>{isNew.new}</button>
+                   <Avatar onClick={handleScrollTo} className={classes.avatarArrow}
+                       sx={{backgroundColor: '#ffffff', width: 56, height: 56,color: '#6b6b6b'}}>
+                     <ArrowDownwardIcon fontSize="medium" />  
+                  </Avatar>                    
+                </div>
             </div>  
             {value || file || mediaBlobUrl  || _mediaBlobUrl ?
              <Avatar onClick={sentMessage} className={classes.avatar} sx={{

src/components/HomePage/RightBar/ChatBar/index.tsx

@@ -53,6 +53,7 @@ const ChatBar = () => {
   const { companionId } = useSelector(getChat)
   const scroll = useSelector(getScroll)
   const [isArrow, setIsArrow] = useState<boolean>(false)
+  const [isNew, setIsNew] = useState<{new:number,mute:boolean}>({new:0,mute:false})
   const divRef = useRef<any | null>(null)
   let time:any
   const handleScrollTo = () => {
@@ -77,16 +78,20 @@ const ChatBar = () => {
   
   useEffect(() => {
     dispatch(asyncGetMessagesById(companionId, handleScrollTo))
-    const handleReset = () => dispatch(asyncGetMessagesById(companionId,null))
-    const idInterval = setInterval(handleReset, 1500);
+    const handleReset = () => {
+      dispatch(asyncGetMessagesById(companionId, null))
+      const arr: any = localStorage.getItem('isNew')
+      if(arr) setIsNew(JSON.parse(arr))
+    }
+    const idInterval = setInterval(handleReset, 3000);
     return () => clearInterval(idInterval);
   }, [dispatch, companionId]);
 
   return (
       <div ref={divRef} className={classes.container} onScroll={debouncedHandleScroll}>
         <div  className={classes.messagesBody}>
-        {messages.length > 0 ? messages.map(({ message, name, lastName, color, updatedAt, createdAt,
-          number, type,fullType }) => {
+        {messages.length > 0 ? messages.map(({ message, name, lastName, color,
+          updatedAt, createdAt,number, type,fullType }) => {
           let isTime
           if (!time) {
             isTime = true
@@ -179,7 +184,7 @@ const ChatBar = () => {
           }
         }) : <AlertInfo name='You do not have messages yet!' />}
       </div>         
-      <SendMessage isArrow={isArrow} handleScrollTo={handleScrollTo}/>   
+    <SendMessage  isArrow={isArrow} isNew={isNew} handleScrollTo={handleScrollTo}/>   
       </div>
   );
 }

src/components/HomePage/RightBar/HeaderBar/Credentials/index.tsx

@@ -3,7 +3,7 @@ import Avatar from '@mui/material/Avatar';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { useDispatch, useSelector } from 'react-redux';
-import { useEffect } from 'react';
+import { useEffect,useRef } from 'react';
 
 import { actionIsOpen } from '../../../../../redux/control/action'
 import { getChat } from '../../../../../redux/chat/selector'
@@ -12,12 +12,21 @@ import { firstLetter,slicedWord,timeStamp } from '../../../../../helpers'
 
 const Credentials = () => {
   const dispatch = useDispatch()
-  const { name, lastName, avatarUrl, color, online, companionId } = useSelector(getChat)
+  const { name, lastName, avatarUrl, color, online, companionId,seen,total,mute } = useSelector(getChat)
+  const ref = useRef<any>(null)
     useEffect(() => {
     const handleReset = () => companionId&&dispatch(asyncGetChatById(companionId))
     const idInterval = setInterval(handleReset, 3000);
     return () => clearInterval(idInterval);
-  }, [dispatch, companionId]);
+    }, [dispatch, companionId]);
+  
+  useEffect(() => {
+    if (ref.current) {
+        localStorage.setItem('isNew', JSON.stringify({ new: total - seen, mute }))
+      }
+    ref.current = { seen,total}
+  }, [seen, total, mute]);
+  
   return (
     <ListItemButton onClick={() => dispatch(actionIsOpen('credentials'))}>
       <ListItemIcon >

src/components/HomePage/RightBar/HeaderBar/index.tsx

@@ -20,7 +20,7 @@ const HeaderBar = () => {
     return (
       <AppBar position="static">
         <Toolbar  className={classes.toolBar}>
-          <Credentials/>
+        <Credentials/>
           <Buttons/>
           <RightLists/>
         </Toolbar>

src/components/HomePage/RightBar/index.tsx

@@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core'
 import HeaderBar from './HeaderBar'
 import ChatBar from './ChatBar'
 import { useSelector } from 'react-redux'
+import { useState } from 'react'
 import { getIsOpen } from '../../../redux/control/selector'
 import { getChatMemo } from '../../../redux/chat/selector'
 
@@ -43,7 +44,7 @@ const RightBar = () => {
 
     return _id?
       <Grid item lg={9} className={classes.container}>
-        <HeaderBar />
+      <HeaderBar/>
         <div className={classes.chat}>
           <ChatBar />
           {isOpen&&isOpen !== 'menu'&&<div className={classes.moveChat}></div>}