trampa-frontend/src/components/Popovers/MyMessages/MyMessages.js

import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { useHistory } from "react-router-dom";
import { fetchHeaderChats } from "../../../store/actions/chat/chatActions";
import { selectLatestChats } from "../../../store/selectors/chatSelectors";
import { selectUserId } from "../../../store/selectors/loginSelectors";
import HeaderPopover from "../HeaderPopover/HeaderPopover";
import PropTypes from "prop-types";

export const MyMessages = (props) => {
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const userId = useSelector(selectUserId);
  const chats = useSelector(selectLatestChats);
  const history = useHistory();
  const [lastChats, setLastChats] = useState([]);

  const convertMessages = (messages) => {
    return messages
      .map((item) => ({
        src: item.interlocutorData.image,
        title: item.interlocutorData.name,
        onClick: () => goToMessage(item?.chat?._id),
        text: item?.chat?.messages[item?.chat?.messages?.length - 1]?.text,
      }))
      .slice(0, 2);
  };

  useEffect(() => {
    if (userId?.length > 1 && chats?.length === 0) {
      dispatch(fetchHeaderChats(userId));
    }
  }, [userId]);
  useEffect(() => {
    if (chats?.length > 0) {
      setLastChats([...convertMessages(chats)]);
    }
  }, [chats]);
  const goToMessages = () => {
    history.push(`/messages/${chats[0].chat?._id}`);
    props.closePopover();
  };
  const goToMessage = (chatId) => {
    history.push(`/messages/${chatId}`);
    props.closePopover();
  };
  return (
    <HeaderPopover
      title={t("header.myMessages")}
      items={lastChats}
      buttonOnClick={goToMessages}
      buttonText={t("header.checkEverything")}
    />
  );
};

MyMessages.propTypes = {
  closePopover: PropTypes.func,
};