added redux dispatch to spage

src/components/ChatColumn/ChatColumn.js

@@ -1,7 +1,10 @@
-import React, {useState, useEffect} from "react";
+import React, { useState, useEffect } from "react";
 import ChatCard from "../Cards/ChatCard/ChatCard";
 import Header from "../ItemDetails/Header/Header";
-import { HeaderSelect, SelectOption } from "../MarketPlace/Header/Header.styled";
+import {
+  HeaderSelect,
+  SelectOption,
+} from "../MarketPlace/Header/Header.styled";
 import {
   ChatColumnContainer,
   ListContainer,
@@ -15,41 +18,68 @@ import { IconStyled } from "../Icon/Icon.styled";
 import { Grid } from "@mui/material";
 import MailOutlineIcon from "@mui/icons-material/MailOutline";
 import { HeaderTitle } from "../ProfileCard/ProfileCard.styled";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchHeaderChats } from "../../store/actions/chat/chatActions";
+import { selectUserId } from "../../store/selectors/loginSelectors";
+import { selectLatestChats } from "../../store/selectors/chatSelectors";
 //import { useTranslation } from "react-i18next";
 
 export const DownArrow = (props) => {
-    <IconStyled {...props}>
-        <Down/>
-    </IconStyled>
-}
+  <IconStyled {...props}>
+    <Down />
+  </IconStyled>;
+};
 
 export const ChatColumn = () => {
+  const convertMessages = (messages) => {
+    return messages.map((item) => ({
+      alt: "Tekst",
+      src: item.interlocutorData.image,
+      title: item.interlocutorData.name,
+      text: item?.chat?.messages[0]?.text,
+    }));
+  };
 
-    const sorting = useSorting();
-    //const { t } = useTranslation();
-    const [sortOption, setSortOption] = useState(sortEnum.INITIAL);
+  const sorting = useSorting();
+  //const { t } = useTranslation();
+  const [sortOption, setSortOption] = useState(sortEnum.INITIAL);
+  const userId = useSelector(selectUserId);
+  const chats = useSelector(selectLatestChats);
+  const [lastChat, setLastChat] = useState([]);
+  const dispatch = useDispatch();
 
-    useEffect(() => {
-        setSortOption(sorting.selectedSortOption);
-      }, [sorting.selectedSortOption]);
-    
+  useEffect(() => {
+    if (userId?.length > 1) {
+      dispatch(fetchHeaderChats(userId));
+    }
+  }, [userId]);
 
+  useEffect(() => {
+    if (chats?.length > 0) {
+      setLastChat([...convertMessages(chats)]);
+    }
+  }, [chats]);
 
-    const handleChangeSelect = (event) => {
-        let chosenOption;
-        for (const sortOption in sortEnum) {
-          if (sortEnum[sortOption].value === event.target.value) {
-            chosenOption = sortEnum[sortOption];
-            sorting.changeSorting(chosenOption)
-          }
-        }
-      };
+  useEffect(() => {
+    console.log(chats);
+    setSortOption(sorting.selectedSortOption);
+  }, [sorting.selectedSortOption]);
+
+  const handleChangeSelect = (event) => {
+    let chosenOption;
+    for (const sortOption in sortEnum) {
+      if (sortEnum[sortOption].value === event.target.value) {
+        chosenOption = sortEnum[sortOption];
+        sorting.changeSorting(chosenOption);
+      }
+    }
+  };
 
   return (
     <ChatColumnContainer>
       <Header />
       <TitleSortContainer>
-      <Grid
+        <Grid
           container
           direction="row"
           justifyContent="start"
@@ -77,7 +107,7 @@ export const ChatColumn = () => {
       </TitleSortContainer>
       <ListHeader enableSort={true}></ListHeader>
       <ListContainer>
-        <ChatCard></ChatCard>
+        <ChatCard lastMsg={lastChat}></ChatCard>
         <ChatCard></ChatCard>
         <ChatCard></ChatCard>
         <ChatCard></ChatCard>