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

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

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 AlertInfo from "../../../reusableComponents/AlertInfo";
import { getMessagesMemo } from '../../../../redux/messages/selector'
import { getNumber } from '../../../../redux/authorization/selector'
import { getChat } from '../../../../redux/chat/selector'
import { getScroll } from '../../../../redux/control/selector'
import { actionScroll } from '../../../../redux/control/action'
import { asyncGetMessagesById } from '../../../../redux/messages/operations'
import { seenChat } from "../../../../api-data";
const debounce = require('lodash.debounce');

const useStyles = makeStyles({   
    container: {
      width: "100%",
      height: "100%",
      maxWidth: "100%",
      maxHeight: "100%",
      display: "flex",
      alignItems: "center",
      alignContent:"center",
      flexDirection: "column",
      position: "relative",
      overflowY: "scroll",
      paddingTop: 60,
    },
    messagesBody: {
      width: "40%",
      height: "80%",
    },   
});

const ChatBar = () => {
  const classes = useStyles();
  const dispatch = useDispatch()
  const messages = useSelector(getMessagesMemo)
  const userNumber = useSelector(getNumber)
  const { companionId } = useSelector(getChat)
  const scroll = useSelector(getScroll)
  const [isArrow, setIsArrow] = useState<boolean>(false)
  const divRef = useRef<any | null>(null)
  const handleScrollTo = () => {
     divRef.current&&divRef.current.scrollTo({
     top: divRef.current.scrollHeight,
     behavior: 'smooth'
     })
   }
  const handleScroll = ({ target }: any) => {
    const different = target.scrollHeight - target.scrollTop
    if (different < 900) seenChat(companionId)
    setIsArrow(different < 1500 ? false : true)
  }
  const debouncedHandleScroll = useCallback(debounce(handleScroll, 300), []);

  useEffect(() => {
    if (scroll) {
      dispatch(asyncGetMessagesById(companionId, handleScrollTo))
      dispatch(actionScroll(false))
    }
  }, [dispatch,scroll, companionId])  
  
  useEffect(() => {
    dispatch(asyncGetMessagesById(companionId, handleScrollTo))
    const handleReset = () => dispatch(asyncGetMessagesById(companionId,null))
    const idInterval = setInterval(handleReset, 1500);
    return () => clearInterval(idInterval);
  }, [dispatch, companionId]);

  return (
      <div ref={divRef} className={classes.container} onScroll={debouncedHandleScroll}>
        <div  className={classes.messagesBody}>
        {messages.length > 0 ? messages.map(({message,avatarUrl,name,lastName,color,updatedAt,number,type},i:number) => {
          if (number !== userNumber) {
            if(type === 'text') return (
            <MessageLeftText
            key={shortid.generate()}
            message={message}
            updatedAt={updatedAt}
            avatarUrl={avatarUrl}
            name={name}
            lastName={lastName}
            color={color}
              />)
            if(type === 'image') return (
            <MessageLeftImage
            key={shortid.generate()}    
            imgUrl={message}
            updatedAt={updatedAt}
            color={color} 
              />)
            if(type === 'audio') return (
            <MessageLeftAudio
            key={shortid.generate()}    
            audioUrl={message}
            updatedAt={updatedAt}  
              />)
            if(type === 'video') return (
            <MessageLeftVideo
            key={shortid.generate()}    
            audioUrl={message}
            updatedAt={updatedAt}  
              />)
            if(type === 'file') return (
            <MessageLeftFile
            key={shortid.generate()}    
            audioUrl={message}
            updatedAt={updatedAt}  
              />)             
          } else {
            if(type === 'text') return (
            <MessageRightText
            key={shortid.generate()}    
            message={message}
            updatedAt={updatedAt}
            avatarUrl={avatarUrl}
            name={name}
            lastName={lastName}
            color={color}    
              />)
            if(type === 'image') return (
            <MessageRightImage
            key={shortid.generate()}    
            imgUrl={message}
            updatedAt={updatedAt}
            color={color}    
              />)
            if(type === 'audio') return (
            <MessageRightAudio
            key={shortid.generate()}    
            audioUrl={message}
            updatedAt={updatedAt} 
              />)
            if(type === 'video') return (
            <MessageRightVideo
            key={shortid.generate()}    
            audioUrl={message}
            updatedAt={updatedAt} 
              />)
            if(type === 'file') return (
            <MessageRightFile
            key={shortid.generate()}    
            audioUrl={message}
            updatedAt={updatedAt} 
              />)            
          }
        }) : <AlertInfo name='You do not have messages yet!' />}
      </div>         
      <SendMessage isArrow={isArrow} handleScrollTo={handleScrollTo}/>   
      </div>
  );
}

export default ChatBar