add time

src/api-data/index.ts

@@ -141,7 +141,7 @@ const getChat = async <T>(id:string): Promise<T | undefined> => {
 
 const startChat = async <T>(id:string): Promise<T | undefined> => {
   try {
-    const { data : {data} } = await axios.post('/chats',{id});
+    const { data: { data } } = await axios.post('/chats', { id });
     return data
   } catch (e) {
     forbidden(e)

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

@@ -77,24 +77,26 @@ const  AudioPlayer = ({ src,audio,setAudio,i }: IAudioPlayer) => {
       audio.audio.currentTime === audio.audio.duration) {
         setAudio(false)
       }
-  },[audio,i,setAudio])
+  }, [audio, i, setAudio])
+  
   
   return (
     <div className={classes.container} >
       <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
         {audio.i !== i && <PlayCircleIcon onClick={handlePlay}
-          fontSize="small" className={classes.icon} />}
+          fontSize="large" className={classes.icon} />}
         {!audio && audio.i === i && <PlayCircleIcon onClick={handlePlay}
-          fontSize="small" className={classes.icon} />}
+          fontSize="large" className={classes.icon} />}
         {audio && audio.i === i && audio.pause && <PauseCircleIcon
-          onClick={handlePause} fontSize="small" className={classes.iconCancel} />}
+          onClick={handlePause} fontSize="large" className={classes.iconCancel} />}
            <Slider
             size="small"
-            defaultValue={audio.i === i&&audio.audio.currentTime}
+            defaultValue={audio.i === i && audio.audio.currentTime}
+            max={audio.i === i &&audio.audio.duration?audio.audio.duration:0}
             aria-label="Small"
             valueLabelDisplay="auto"
         />
-        {audio.i !== i && <AudioFileIcon style={{color:'#047dce'}} fontSize="small"/>}
+        {audio.i !== i && <AudioFileIcon style={{color:'#047dce'}} fontSize="large"/>}
         {audio.i === i && audio.volume && <VolumeUpIcon
           onClick={handleVolume} className={classes.icon} fontSize="small"/>}
         {audio.i === i && !audio.volume && <VolumeOffIcon

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

@@ -11,7 +11,7 @@ import MessageRightText from './Messages/MessageRightText'
 import MessageRightImage from './Messages/MessageRightImage'
 import MessageRightAudio from './Messages/MessageRightAudio'
 import AlertInfo from "../../../reusableComponents/AlertInfo";
-import { getMessages } from '../../../../redux/messages/selector'
+import { getMessagesMemo } from '../../../../redux/messages/selector'
 import { getNumber } from '../../../../redux/authorization/selector'
 import { getChat } from '../../../../redux/chat/selector'
 import { getScroll } from '../../../../redux/control/selector'
@@ -43,7 +43,7 @@ const useStyles = makeStyles({
 const ChatBar = () => {
   const classes = useStyles();
   const dispatch = useDispatch()
-  const messages = useSelector(getMessages)
+  const messages = useSelector(getMessagesMemo)
   const userNumber = useSelector(getNumber)
   const { companionId } = useSelector(getChat)
   const scroll = useSelector(getScroll)
@@ -77,7 +77,6 @@ const ChatBar = () => {
     return () => clearInterval(idInterval);
   }, [dispatch, companionId]);
 
-
   return (
       <div ref={divRef} className={classes.container} onScroll={debouncedHandleScroll}>
         <div  className={classes.messagesBody}>

src/components/HomePage/RightBar/index.tsx

@@ -4,7 +4,7 @@ import HeaderBar from './HeaderBar'
 import ChatBar from './ChatBar'
 import { useSelector } from 'react-redux'
 import { getIsOpen } from '../../../redux/control/selector'
-import { getChat } from '../../../redux/chat/selector'
+import { getChatMemo } from '../../../redux/chat/selector'
 
 const useStyles = makeStyles({
   container: {
@@ -39,7 +39,7 @@ const useStyles = makeStyles({
 const RightBar = () => {
   const classes = useStyles()
   const isOpen = useSelector(getIsOpen)
-  const { _id } = useSelector(getChat)
+  const { _id } = useSelector(getChatMemo)
 
     return _id?
       <Grid item lg={9} className={classes.container}>

src/redux/chat/selector/index.ts

@@ -1,6 +1,8 @@
-import {IState} from '../../../typescript/redux/interfaces'
+import { createSelector } from 'reselect';
+import { IState } from '../../../typescript/redux/interfaces'
 
 const getState = (state: IState) => state.chat;
-const getChat = (state:IState) => state.chat.chat;
+const getChat = (state: IState) => state.chat.chat;
+const getChatMemo = createSelector([getChat], chat => chat);
 
-export { getChat,getState };
+export { getChat,getState,getChatMemo };

src/redux/chats/selector/index.ts

@@ -1,10 +1,12 @@
-import {IState} from '../../../typescript/redux/interfaces'
+import { createSelector } from 'reselect';
+import { IState } from '../../../typescript/redux/interfaces'
 
 const getTotal = (state: IState) => state.chats.total;
 const getLimit = (state:IState) => state.chats.limit;
 const getPage = (state: IState) => state.chats.page;
 const getChats = (state: IState) => state.chats.chats;
 const getLastMessages = (state: IState) => state.chats.lastMessages;
-const getState= (state:IState) => state.chats;
+const getState = (state: IState) => state.chats;
+const getStateMemo = createSelector([getState], state => state);
 
-export { getTotal,getLimit,getPage,getChats,getLastMessages,getState };
+export { getTotal,getLimit,getPage,getChats,getLastMessages,getState,getStateMemo };

src/redux/messages/selector/index.ts

@@ -1,6 +1,9 @@
-import {IState} from '../../../typescript/redux/interfaces'
+import { createSelector } from 'reselect';
+import { IState } from '../../../typescript/redux/interfaces'
 
 const getMessages = (state: IState) => state.messages.messages;
-const getState= (state:IState) => state.messages;
+const getState = (state: IState) => state.messages;
+const getMessagesMemo = createSelector([getMessages], messages => messages);
+
+export { getMessages,getState,getMessagesMemo };
 
-export { getMessages,getState };