FINAL-PROJECT-FRONT/src/components/HomePage/CentralBar/ChatBar/index.tsx

import { makeStyles } from "@material-ui/core/styles";
import { useState, useEffect, useRef, useCallback } from "react";
import { useSelector,useDispatch } from "react-redux";

import ArrowBack from "./ArrowBack";
import SendMessage from "./SendMessage";
import MessageLeftText from './Messages/MessageLeftText'
import MessageLeftImage from './Messages/MessageLeftImage'
import MessageLeftAudio from './Messages/MessageLeftAudio'
import MessageLeftVideo from './Messages/MessageLeftVideo'
import MessageLeftFile from "./Messages/MessageLeftFile";
import MessageRightText from './Messages/MessageRightText'
import MessageRightImage from './Messages/MessageRightImage'
import MessageRightAudio from './Messages/MessageRightAudio'
import MessageRightVideo from './Messages/MessageRightVideo'
import MessageRightFile from "./Messages/MessageRightFile";
import MessageTime from "./Messages/MessageTime";
import AlertInfo from "../../../reusableComponents/AlertInfo";
import { getMessagesMemo } from '../../../../redux/messages/selector'
import { getNumber } from '../../../../redux/authorization/selector'
import { getChat } from '../../../../redux/chat/selector'
import { getScrollChat } from '../../../../redux/control/selector'
import { actionScrollChat } from '../../../../redux/control/action'
import { asyncGetMessagesById } from '../../../../redux/messages/operations'
import { asyncGetChatById } from "../../../../redux/chat/operations";
import { seenChat } from "../../../../api-data";
import { timeStampFilter,prodAwsS3,refreshAppTime } from "../../../../helpers";
const debounce = require('lodash.debounce');

const useStyles = makeStyles({   
    container: {
      height: '93vh',
      width: "100%",
      display: "flex",
      alignItems: "center",
      alignContent:"center",
      flexDirection: "column",
      position: "relative",
    },
  messagesScroll: {
      paddingTop: 30,
      overflowY: "scroll",
      maxHeight: '83vh',
      width: "100%",
      display: "flex",
      justifyContent: 'center',
      '&::-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",
     },
  },
  messagesEmpty: {
      overflowY: "hidden",
      width: "100%",
      display: "flex",
      justifyContent: 'center',
      paddingTop: 30,
  },  
    messagesBody: {
      width: "60%",
  },  
});

const ChatBar = () => {
  const classes = useStyles();
  const dispatch = useDispatch()
  const messages = useSelector(getMessagesMemo)
  const userNumber = useSelector(getNumber)
  const { companionId,total,seen,mute } = useSelector(getChat)
  const scrollChat = useSelector(getScrollChat)
  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 = () => {
     divRef.current&&divRef.current.scrollTo({
     top: divRef.current.scrollHeight,
     behavior: 'smooth'
     })
  }

  const handleScroll = useCallback(({ target:{scrollHeight,scrollTop,clientHeight}}: any) => {
    const different = scrollHeight - Math.floor(scrollTop)
    const reached = different - clientHeight
    if (total !== seen&&reached < 10) seenChat(companionId)
    setIsArrow(different === clientHeight ? false : true)
  }, [total,seen, companionId])
  
  const debouncedHandleScroll = debounce(handleScroll, 300)
  
  useEffect(() => {
    if (scrollChat) {
      dispatch(asyncGetMessagesById(companionId, handleScrollTo))
      dispatch(actionScrollChat(false))
    }
  }, [dispatch, scrollChat, companionId])
  
  useEffect(() => {
    const handleReset = () => {
      dispatch(asyncGetChatById(companionId))
      dispatch(asyncGetMessagesById(companionId, null))
    }
    handleReset()
    const idInterval = setInterval(handleReset, refreshAppTime);
    return () => clearInterval(idInterval);
  }, [dispatch, companionId]);
  
  useEffect(() => {
     setIsNew({ new:total-seen,mute})
  }, [total,seen,mute]); 

  useEffect(() => {
    if (divRef.current) {
      const { scrollHeight, clientHeight } = divRef.current
      if(total !== seen&&scrollHeight === clientHeight) seenChat(companionId)
    }
  }, [total,seen,companionId]);

  return (
    <div className={classes.container} >
      <ArrowBack isArrow={isArrow} isNew={isNew} handleScrollTo={handleScrollTo}/>
      <div ref={divRef} onScroll={debouncedHandleScroll}
        className={messages.length > 0 ? classes.messagesScroll : classes.messagesEmpty}>
        <div className={classes.messagesBody}>
        {messages.length > 0 ? messages.map(({ message, name, lastName, color,
           createdAt,number, type,fullType,caption,emoji,emojiCompanion,_id }) => {
          let isTime
          if (!time) {
            isTime = true
            time = createdAt
          } else if (timeStampFilter(time) !== timeStampFilter(createdAt)) {
            time = createdAt
            isTime = true
          }
          const url = `${prodAwsS3}/${message}`
          if (number !== userNumber) {
            if (type === 'text') return (<div key={createdAt}>
              {isTime&&<MessageTime  message={timeStampFilter(createdAt)}/>}
               <MessageLeftText
               message={message}
               createdAt={createdAt}
               name={name}
               lastName={lastName}
               caption={caption}
               emoji={emoji}
               emojiCompanion={emojiCompanion}
               _id={_id}
                 /></div>)
            if (type === 'image') return (<div key={createdAt}>
              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                <MessageLeftImage   
                url={url}
                createdAt={createdAt}
                color={color}
                fullType={fullType}
                caption={caption}
                emoji={emoji}
                emojiCompanion={emojiCompanion}
                _id={_id}
                  /></div>)
            if (type === 'audio') return (<div key={createdAt}>
              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                <MessageLeftAudio    
                url={url}
                createdAt={createdAt}
                fullType={fullType}
                caption={caption}
                emoji={emoji}
                emojiCompanion={emojiCompanion}
                _id={_id}
                  /></div>)
            if (type === 'video') return (<div key={createdAt}>
              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                <MessageLeftVideo    
                url={url}
                createdAt={createdAt}
                fullType={fullType}
                caption={caption}
                emoji={emoji}
                emojiCompanion={emojiCompanion}
                _id={_id}
                  /></div>)
            if (type) return (<div key={createdAt}>
              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                <MessageLeftFile   
                url={url}
                createdAt={createdAt}
                type={type}
                caption={caption}
                emoji={emoji}
                emojiCompanion={emojiCompanion}
                _id={_id}
                  /></div>)             
          } else {
            if (type === 'text') return (<div key={createdAt}>
              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                <MessageRightText   
                message={message}
                createdAt={createdAt}
                name={name}
                lastName={lastName}
                caption={caption}
                emoji={emoji}
                emojiCompanion={emojiCompanion}
                _id={_id}
                  /></div>)
            if (type === 'image') return (<div key={createdAt}>
              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                <MessageRightImage   
                url={url}
                createdAt={createdAt}
                color={color}
                fullType={fullType}
                caption={caption}
                emoji={emoji}
                emojiCompanion={emojiCompanion}
                _id={_id}
                  /></div>)
            if (type === 'audio') return (<div key={createdAt}>
              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                <MessageRightAudio    
                url={url}
                createdAt={createdAt}
                fullType={fullType}
                caption={caption}
                emoji={emoji}
                emojiCompanion={emojiCompanion}
                _id={_id}
                  /></div>)
            if (type === 'video') return (<div key={createdAt}>
              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageRightVideo  
                 url={url}
                 createdAt={createdAt}
                 fullType={fullType}
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
                 _id={_id}
                   /></div>)
            if (type) return (<div key={createdAt}>
              {isTime&&<MessageTime message={timeStampFilter(createdAt)}/>}
                 <MessageRightFile  
                 url={url}
                 createdAt={createdAt}
                 type={type}
                 caption={caption}
                 emoji={emoji}
                 emojiCompanion={emojiCompanion}
                 _id={_id}
                   /></div>)            
          }
        }) : <AlertInfo name='You do not have messages yet!' />}
        </div>
      </div>  
    <SendMessage isArrow={isArrow} />   
    </div>
  );
}

export default ChatBar