feat: add chats

src/pages/Messengers/Messengers.css

@@ -71,4 +71,18 @@
 .messengers__filter__date label {
     margin-right: 0.5rem;
     font-weight: bold;
+}
+
+.messenger__chats__list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin: 1rem 0;
+}
+
+.messenger__chats__item {
+    padding: 1rem;
+    border-radius: 10px;
+    background: var(--content-bg-color);
+    cursor: pointer;
 }
\ No newline at end of file

src/pages/Messengers/Messengers.tsx

@@ -22,11 +22,10 @@ const Messengers: React.FC = () => {
   );
   const { t } = useTranslation();
   const { selectedDevice } = useAppSelector((state: RootState) => state.device);
-  const dispatch = useAppDispatch();
-
-  const { messengerHistories, loading, error } = useAppSelector(
+  const { chats, loading, error } = useAppSelector(
     (state: RootState) => state.messengerHistory
   );
+  const dispatch = useAppDispatch();
 
   const fetchMessengerHistories = () => {
     if (selectedDevice?.id) {
@@ -83,9 +82,17 @@ const Messengers: React.FC = () => {
 
           {error && <p className="text-danger">{error}</p>}
 
-          {messengerHistories.length === 0 && !loading && (
-            <p>{t("messengers.empty")}</p>
-          )}
+          {chats.length === 0 && !loading && <p>{t("messengers.empty")}</p>}
+
+          <div className="messenger__chats__list">
+            {chats.map((chat) => {
+              return (
+                <div key={chat.dialog_id} className="messenger__chats__item">
+                  <p>{chat.group_name}</p>
+                </div>
+              );
+            })}
+          </div>
         </div>
 
         <div className="messengers__filter">

src/stores/slices/messengerHistorySlice.ts

 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { sendRpcRequest } from "../../services/apiClient";
+import type { IChat } from "../../types/messenger.types";
 
 interface MessengerHistoryState {
-  messengerHistories: any[];
+  chats: IChat[];
   loading: boolean;
   error: string | null;
 }
 
 const initialState: MessengerHistoryState = {
-  messengerHistories: [],
+  chats: [],
   loading: false,
   error: null,
 };
@@ -32,16 +33,19 @@ export const fetchMessengerHistory = createAsyncThunk(
     { rejectWithValue }
   ) => {
     try {
-      const response = await sendRpcRequest<any[]>("data.getcontent", {
-        deviceId,
-        type: messengerId,
-        dateFrom,
-        dateTo,
-        recStart: recStart,
-        recLimit: 500,
-      });
+      const response = await sendRpcRequest<{ chats: IChat[] }>(
+        "data.getcontent",
+        {
+          deviceId,
+          type: messengerId,
+          dateFrom,
+          dateTo,
+          recStart: recStart,
+          recLimit: 500,
+        }
+      );
 
-      return response;
+      return response.chats;
     } catch (error: unknown) {
       if (typeof error === "object" && error !== null && "message" in error) {
         return rejectWithValue(error.message);
@@ -64,7 +68,7 @@ const messengerHistorySlice = createSlice({
       })
       .addCase(fetchMessengerHistory.fulfilled, (state, action) => {
         state.loading = false;
-        state.messengerHistories = action.payload;
+        state.chats = action.payload;
       })
       .addCase(fetchMessengerHistory.rejected, (state, action) => {
         state.loading = false;

src/types/messenger.types.ts

+export interface IChat {
+  dialog_id: string;
+  group_name: string;
+}
+
+export interface IList {
+  id: string;
+  device_id: string;
+  group_name: string;
+  message: string;
+  sender: string;
+  date: string;
+}