refactor: messengers

src/locales/en/en.json

@@ -6,6 +6,7 @@
     "denied": "Denied",
     "loading": "Loading...",
     "selectDates": "Select dates",
+    "selectAppAndDates": "Select App & Dates",
     "from": "From",
     "to": "To"
   },
@@ -122,6 +123,10 @@
     "title": "Call History",
     "empty": "No call history found."
   },
+  "messengers": {
+    "title": "Chats",
+    "empty": "No chats found."
+  },
   "pincode": {
     "enterTitle": "Enter your PIN Code",
     "createTitle": "Create your PIN Code",

src/locales/ru/ru.json

@@ -6,6 +6,7 @@
     "denied": "Выкл",
     "loading": "Загрузка...",
     "selectDates": "Выбрать даты",
+    "selectAppAndDates": "Выбрать приложение и даты",
     "from": "От",
     "to": "До"
   },
@@ -122,6 +123,10 @@
     "title": "История звонков",
     "empty": "История звонков не найдена."
   },
+  "messengers": {
+    "title": "Чаты",
+    "empty": "Чаты не найдены."
+  },
   "pincode": {
     "enterTitle": "Введите PIN-код",
     "createTitle": "Создайте PIN-код",

src/pages/Messengers/Messengers.tsx

-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import "./Messengers.css";
 import SectionHeader from "../../layouts/SectionHeader";
 import { MdInfoOutline } from "react-icons/md";
 import CButton from "../../components/CButton";
 import { MESSENGERS, type IMessenger } from "../../constants/messengers";
+import { useTranslation } from "react-i18next";
+import {
+  useAppDispatch,
+  useAppSelector,
+  type RootState,
+} from "../../stores/store";
+import { fetchMessengerHistory } from "../../stores/slices/messengerHistorySlice";
+import CLoading from "../../components/CLoading";
 
 const Messengers: React.FC = () => {
+  const today = new Date().toISOString().split("T")[0];
+  const [fromDate, setFromDate] = useState(today);
+  const [toDate, setToDate] = useState(today);
   const [selectedMessenger, setSelectedMessenger] = useState<IMessenger>(
     MESSENGERS[0]
   );
+  const { t } = useTranslation();
+  const { selectedDevice } = useAppSelector((state: RootState) => state.device);
+  const dispatch = useAppDispatch();
+
+  const { messengerHistories, loading, error } = useAppSelector(
+    (state: RootState) => state.messengerHistory
+  );
+
+  const fetchMessengerHistories = () => {
+    if (selectedDevice?.id) {
+      dispatch(
+        fetchMessengerHistory({
+          deviceId: selectedDevice.id,
+          messengerId: selectedMessenger.id,
+          dateFrom: new Date(fromDate),
+          dateTo: new Date(toDate),
+          recStart: 0,
+        })
+      );
+    }
+  };
+
+  useEffect(() => {
+    fetchMessengerHistories();
+  }, [dispatch, selectedDevice]);
 
   return (
     <div className="messengers wrapper">
@@ -17,15 +53,27 @@ const Messengers: React.FC = () => {
       <div className="messengers__content">
         <div>
           <div className="messengers__content__header">
-            <h3>Messengers</h3>
+            <h3>{t("messengers.title")}</h3>
             <MdInfoOutline className="messengers__content__header__icon" />
           </div>
 
-          <p className="messengers__content__empty">No data</p>
+          {loading && (
+            <div className="cloading__center">
+              <CLoading />
+            </div>
+          )}
+
+          {error && <p className="text-danger">{error}</p>}
+
+          {messengerHistories.length === 0 && !loading && (
+            <p>{t("messengers.empty")}</p>
+          )}
         </div>
 
         <div className="messengers__filter">
-          <p className="messengers__filter__title">Select App & Dates</p>
+          <p className="messengers__filter__title">
+            {t("common.selectAppAndDates")}
+          </p>
 
           <div className="messengers__filter__messengers">
             {MESSENGERS.map((messenger) => {
@@ -48,17 +96,31 @@ const Messengers: React.FC = () => {
 
           <div className="messengers__filter__dates">
             <div className="messengers__filter__date">
-              <label htmlFor="from">From</label>
-              <input type="date" id="from" />
+              <label htmlFor="from">{t("common.from")}</label>
+              <input
+                type="date"
+                id="from"
+                value={fromDate}
+                onChange={(e) => setFromDate(e.target.value)}
+              />
             </div>
 
             <div className="messengers__filter__date">
-              <label htmlFor="to">To</label>
-              <input type="date" id="to" />
+              <label htmlFor="to">{t("common.to")}</label>
+              <input
+                type="date"
+                id="to"
+                value={toDate}
+                onChange={(e) => setToDate(e.target.value)}
+              />
             </div>
           </div>
 
-          <CButton title="Search" />
+          <CButton
+            title={t("button.search")}
+            isLoading={loading}
+            onClick={fetchMessengerHistories}
+          />
         </div>
       </div>
     </div>

src/stores/slices/messengerHistorySlice.ts

@@ -2,13 +2,13 @@ import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { sendRpcRequest } from "../../services/apiClient";
 
 interface MessengerHistoryState {
-  messengerHistory: any[];
+  messengerHistories: any[];
   loading: boolean;
   error: string | null;
 }
 
 const initialState: MessengerHistoryState = {
-  messengerHistory: [],
+  messengerHistories: [],
   loading: false,
   error: null,
 };
@@ -64,7 +64,7 @@ const messengerHistorySlice = createSlice({
       })
       .addCase(fetchMessengerHistory.fulfilled, (state, action) => {
         state.loading = false;
-        state.messengerHistory = action.payload;
+        state.messengerHistories = action.payload;
       })
       .addCase(fetchMessengerHistory.rejected, (state, action) => {
         state.loading = false;