fixed btns record

build/asset-manifest.json

@@ -2,17 +2,17 @@
   "files": {
     "static/js/0.a45ab394.chunk.js": "/static/js/0.a45ab394.chunk.js",
     "static/js/0.a45ab394.chunk.js.map": "/static/js/0.a45ab394.chunk.js.map",
-    "AuthPage.js": "/static/js/AuthPage.b0e63748.chunk.js",
-    "AuthPage.js.map": "/static/js/AuthPage.b0e63748.chunk.js.map",
-    "HomePage.js": "/static/js/HomePage.f9b2a831.chunk.js",
-    "HomePage.js.map": "/static/js/HomePage.f9b2a831.chunk.js.map",
+    "AuthPage.js": "/static/js/AuthPage.eb4fd982.chunk.js",
+    "AuthPage.js.map": "/static/js/AuthPage.eb4fd982.chunk.js.map",
+    "HomePage.js": "/static/js/HomePage.e4112ee6.chunk.js",
+    "HomePage.js.map": "/static/js/HomePage.e4112ee6.chunk.js.map",
     "main.css": "/static/css/main.9a5b6280.chunk.css",
-    "main.js": "/static/js/main.9d16c444.chunk.js",
-    "main.js.map": "/static/js/main.9d16c444.chunk.js.map",
-    "runtime-main.js": "/static/js/runtime-main.c03fd211.js",
-    "runtime-main.js.map": "/static/js/runtime-main.c03fd211.js.map",
-    "static/js/5.e555b29b.chunk.js": "/static/js/5.e555b29b.chunk.js",
-    "static/js/5.e555b29b.chunk.js.map": "/static/js/5.e555b29b.chunk.js.map",
+    "main.js": "/static/js/main.c8af074b.chunk.js",
+    "main.js.map": "/static/js/main.c8af074b.chunk.js.map",
+    "runtime-main.js": "/static/js/runtime-main.641c2d9b.js",
+    "runtime-main.js.map": "/static/js/runtime-main.641c2d9b.js.map",
+    "static/js/5.f24c26d6.chunk.js": "/static/js/5.f24c26d6.chunk.js",
+    "static/js/5.f24c26d6.chunk.js.map": "/static/js/5.f24c26d6.chunk.js.map",
     "static/css/6.c7cc29b3.chunk.css": "/static/css/6.c7cc29b3.chunk.css",
     "static/js/6.6b4232f4.chunk.js": "/static/js/6.6b4232f4.chunk.js",
     "static/js/6.6b4232f4.chunk.js.map": "/static/js/6.6b4232f4.chunk.js.map",
@@ -20,17 +20,17 @@
     "static/css/6.c7cc29b3.chunk.css.map": "/static/css/6.c7cc29b3.chunk.css.map",
     "static/css/main.9a5b6280.chunk.css.map": "/static/css/main.9a5b6280.chunk.css.map",
     "static/js/0.a45ab394.chunk.js.LICENSE.txt": "/static/js/0.a45ab394.chunk.js.LICENSE.txt",
-    "static/js/5.e555b29b.chunk.js.LICENSE.txt": "/static/js/5.e555b29b.chunk.js.LICENSE.txt",
+    "static/js/5.f24c26d6.chunk.js.LICENSE.txt": "/static/js/5.f24c26d6.chunk.js.LICENSE.txt",
     "static/js/6.6b4232f4.chunk.js.LICENSE.txt": "/static/js/6.6b4232f4.chunk.js.LICENSE.txt",
     "static/media/icons8-telegram-app.be023370.svg": "/static/media/icons8-telegram-app.be023370.svg",
     "static/media/monkey.ded8ac2a.png": "/static/media/monkey.ded8ac2a.png",
     "static/media/qrCode_telegram.bb0caf3c.png": "/static/media/qrCode_telegram.bb0caf3c.png"
   },
   "entrypoints": [
-    "static/js/runtime-main.c03fd211.js",
+    "static/js/runtime-main.641c2d9b.js",
     "static/css/6.c7cc29b3.chunk.css",
     "static/js/6.6b4232f4.chunk.js",
     "static/css/main.9a5b6280.chunk.css",
-    "static/js/main.9d16c444.chunk.js"
+    "static/js/main.c8af074b.chunk.js"
   ]
 }

src/App.tsx

@@ -33,8 +33,8 @@ function App() {
   const { companionId } = useSelector(getChat)
   const dispatch = useDispatch()
   const handleTypingClose = async () => companionId&& await typingChat(companionId, false)
-
-   useEffect(() => {
+  
+  useEffect(() => {
     if (token && localStorage.isChecked === 'true') {
       setToken.set(token)
       dispatch(asyncCurrentUser())
@@ -43,9 +43,10 @@ function App() {
 
   useEffect(() => {
     const handleKeepIn = async () => {
-      if (localStorage.isChecked === 'false') {
+      const isChecked = localStorage.isChecked
+      if (isChecked&&isChecked === 'false') {
         dispatch(asyncLogout())
-      } else if (localStorage.isChecked === 'true') {
+      } else if (isChecked&&isChecked === 'true') {
           await onlineUser()
       }
     }

src/components/AuthPage/index.tsx

@@ -53,7 +53,11 @@ const AuthPage = () => {
 
   useEffect(() => {
     const isCheckedLC = localStorage.isChecked
-    isCheckedLC && setIsChecked(isCheckedLC === 'true'?true:false)
+    if (isCheckedLC) {
+      setIsChecked(isCheckedLC === 'true'?true:false)
+    } else {
+      localStorage.setItem('isChecked','true')
+    }
   }, [])
   
   return (

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

@@ -108,8 +108,8 @@ const SearchBar = ({ handleClick, handleOpenIsSearch, handleSearch, isSearch,
               <CalendarTodayIcon fontSize='medium'
                 style={{color:date?'#2184f7':'#b1aeae'}}/>
           </IconButton>
+          <Switch onClick={handleSort} checked={sort} {...label} disabled={disabled} />
         </div>
-        <Switch onClick={handleSort} checked={sort} {...label} disabled={disabled} />
     </Toolbar>
     )
 }

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

@@ -98,7 +98,7 @@ const SearchLists = ({ value,setValue,sort,date,setDate,setDisabled }: ISearchLi
     useEffect(() => {
       dispatch(asyncGetAllMessages())
       const handleReset = () =>  dispatch(asyncGetAllMessages())
-      const idInterval = setInterval(handleReset, 3000);
+      const idInterval = setInterval(handleReset, 5000);
       return () => clearInterval(idInterval);
     }, [dispatch]);
     

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

@@ -2,9 +2,11 @@ import { makeStyles } from "@material-ui/core/styles";
 import SendIcon from '@mui/icons-material/Send';
 import MicNoneIcon from '@mui/icons-material/MicNone';
 import VideocamIcon from '@mui/icons-material/Videocam';
+import PauseIcon from '@mui/icons-material/Pause';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
 import CloseIcon from '@mui/icons-material/Close';
+import Avatar from '@mui/material/Avatar';
 import Picker from 'emoji-picker-react';
 import { useReactMediaRecorder } from "react-media-recorder";
 import { useState } from "react";
@@ -120,7 +122,29 @@ const useStyles = makeStyles({
             border:'solid 14px rgb(41, 139, 231)',
             color: '#ffffff'
         }
-    },     
+    },
+    pauseLeft: {
+        position: 'absolute',
+        left: -72,
+        bottom:-1,
+        zIndex: 10,     
+    },
+    pauseRight: {
+        position: 'absolute',
+        right: -72,
+        bottom:-1,
+        zIndex: 10,   
+    },    
+    avatarPause: {
+        backgroundColor: '#ffffff',
+        cursor: 'pointer',
+        animation: `$shake 1s`,
+        animationIterationCount:'infinite',
+        '&:hover': {
+            backgroundColor: 'rgb(41, 139, 231)',
+            color: '#ffffff',
+        }
+    },
     overlay: {
       position: 'fixed',
       top: 0,
@@ -131,25 +155,25 @@ const useStyles = makeStyles({
     },
    ringContainerLeft: {
     position: 'absolute',
-    left: 10,
-    top: -40,
+    left: -25,
+    top: -30,
     zIndex: 10,
   },   
   ringContainerRight: {
     position: 'absolute',
-    right: 10,
-    top: -40,
+    right: -25,
+    top: -30,
     zIndex: 10,
   },
   circle: {
     width: 15,
     height: 15,
-    backgroundColor: '#ff0505',
+    backgroundColor: 'rgb(255, 4, 4)',
     borderRadius: '50%',
     position: 'relative'
     },
   ringRing: {
-    border: '3px solid #ff0505',
+    border: '3px solid rgb(255, 4, 4)',
     borderRadius: '50%',
     height: 25,
     width: 25,
@@ -165,6 +189,19 @@ const useStyles = makeStyles({
     '50%': { opacity: 1},
     '100%': {transform: 'scale(1.2, 1.2)', opacity: 0},
     },
+  '@keyframes shake': {
+  '0%': { transform: 'translate(0.5px, 0.5px) rotate(0deg)'},
+  '10%': { transform: 'translate(-0.5px, -1px) rotate(-1deg)'},
+  '20%': { transform: 'translate(-1.5px, 0px) rotate(1deg)'},
+  '30%': { transform: 'translate(1.5px, 1px) rotate(0deg)'},
+  '40%': { transform: 'translate(0.5px, -0.5px) rotate(1deg)'},
+  '50%': { transform: 'translate(-0.5px, 1px) rotate(-1deg)'},
+  '60%': { transform: 'translate(-1.5px, 0.5px) rotate(0deg)'},
+  '70%': { transform: 'translate(1.5px, 0.5px) rotate(-1deg)'},
+  '80%': { transform: 'translate(-0.5px, -0.5px) rotate(1deg)'},
+  '90%': { transform: 'translate(0.5px, 1px) rotate(0deg)'},
+  '100%': { transform: 'translate(0.5px, -1px) rotate(-1deg)'},
+ },    
 });
 
 interface ISendMessage{
@@ -287,32 +324,44 @@ const SendMessage = ({isArrow }:ISendMessage) => {
     return (
         <div className={classes.container}>
             {isArrow && <div className={classes.borderTop}></div>}
-            {isFilming && _status !== 'stopped' &&
+            {isFilming && _status !== 'stopped' &&                
+             <>
+                <div className={classes.pauseLeft}>
+                  <Avatar onClick={handleFilming } className={classes.avatarPause}
+                     sx={{backgroundColor: '#ffffff',color:'#6b6b6b',width: 56, height: 56}}>
+                    <PauseIcon fontSize="large"/>                    
+                   </Avatar>                    
+                </div>
                 <div className={classes.ringContainerLeft}>
-                <div className={classes.ringRing}></div>
-                <div className={classes.circle}></div>         
-            </div>}               
-            {isRecording && status !== 'stopped' &&
-            <div className={classes.ringContainerRight}>
-                <div className={classes.ringRing}></div>
-                <div className={classes.circle}></div>         
-            </div>}         
+                  <div className={classes.ringRing}></div>
+                  <div className={classes.circle}></div>         
+                </div>
+             </>}            
+            {isRecording && status !== 'stopped' &&                
+             <>
+                <div className={classes.pauseRight}>
+                   <Avatar onClick={handleRecording} className={classes.avatarPause}
+                     sx={{backgroundColor: '#ffffff',color:'#6b6b6b',width: 56, height: 56}}>
+                     <PauseIcon fontSize="large"/>                    
+                   </Avatar>                    
+                </div>                             
+                <div className={classes.ringContainerRight}>
+                  <div className={classes.ringRing}></div>
+                  <div className={classes.circle}></div>         
+                </div>
+             </>}
                 <CloseIcon onClick={clearMessage} fontSize="small" className={classes.iconCancel}
                     sx={{width: 56, height: 56, display: file || value || status === 'stopped'
                     || _status === 'stopped' ? 'inline-block' : 'none'}} />
                 <VideocamIcon onClick={handleFilming} className={classes.avatarCamera}
-                    sx={{backgroundColor: '#ffffff', color: '#7c7c7c', width: 56, height: 56}}
-                    style={{display: status !== 'idle' || _status === 'stopped' || file || value ? 'none' : 'block',
-                        animation: isFilming ? 'ripple 1.2s infinite ease-in-out' : 'none'
-                    }} />
+                    sx={{backgroundColor: '#ffffff', color: '#6b6b6b', width: 56, height: 56}}
+                    style={{display: status !== 'idle' || _status === 'stopped' || file || value || isFilming ? 'none' : 'block'}} />
                 <SendIcon onClick={sentMessage} className={classes.avatarRight} 
                     sx={{backgroundColor: '#ffffff',color: 'rgb(41, 139, 231)', width: 56, height: 56}}
                     style={{display: value || file || status === 'stopped'  || _status === 'stopped' ? 'block':'none' }}/>                
                 <MicNoneIcon onClick={handleRecording} className={classes.avatarRight} 
-                    sx={{backgroundColor: isRecording ? 'rgb(41, 139, 231)' : '#ffffff',
-                    color: isRecording ? '#ffffff' : '#6b6b6b', width: 56, height: 56}}
-                    style={{display: !value && !file && status !== 'stopped' && _status === 'idle' ? 'block' : 'none',
-                    animation:isRecording ? 'ripple 1.2s infinite ease-in-out': 'none'}}/>
+                    sx={{backgroundColor:'#ffffff',color: '#6b6b6b', width: 56, height: 56}}
+                    style={{display: !value && !file && status !== 'stopped' && _status === 'idle'&&!isRecording ? 'block' : 'none'}}/>
                 <SentimentSatisfiedAltIcon onClick={handleOpenEmoji} 
                     fontSize='medium' sx={{color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
                     pointerEvents: file || status !== 'idle' || _status !== 'idle' ? 'none' : "auto",

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

@@ -114,7 +114,7 @@ const ChatBar = () => {
       dispatch(asyncGetChatById(companionId))
       dispatch(asyncGetMessagesById(companionId, null))
     }
-    const idInterval = setInterval(handleReset, 3000);
+    const idInterval = setInterval(handleReset, 5000);
     return () => clearInterval(idInterval);
   }, [dispatch, companionId]);
   

src/components/HomePage/index.tsx

@@ -28,7 +28,7 @@ const HomePage = () => {
       dispatch(asyncGetContacts())
       dispatch(asyncCurrentUser())
     }
-    const idInterval = setInterval(handleReset, 3000);
+    const idInterval = setInterval(handleReset, 5000);
     return () => clearInterval(idInterval);
   }, [dispatch]);
  

src/helpers/index.ts

@@ -151,7 +151,7 @@ const filteredMessages = (arr: TAllMessages,date:any,value:string) => arr.filter
   }
 })
 
-const prodBaseURL = 'https://w-telegram.herokuapp.com'
+const prodBaseURL = 'http://localhost:3000'
 
 export {
   format,