fix chats sorting

src/app.tsx

@@ -6,6 +6,9 @@ import { Dashboard } from './dashboard';
 import {ToastContainer} from "react-toastify";
 import 'react-toastify/dist/ReactToastify.css';
 
+import { Provider } from 'react-redux';
+import store from './backend/redux/store.js'; // Import your store
+
 
 import './index.css'
 import {displayMessage} from "./backend/notifications/notifications.js";
@@ -26,13 +29,13 @@ const App = () => {
     }, []);
 
   return(
-      <div>
+      <Provider store={store}>
           <BrowserRouter>
               <Dashboard />
           </BrowserRouter>
 
           <ToastContainer/>
-      </div>
+      </Provider>
 
   )
 }

src/backend/api.js

@@ -4,7 +4,7 @@ import {getConfigValue} from "@brojs/cli";
 const LOCAL = "http://localhost:8099";
 const DEV = "https://dev.bro-js.ru";
 
-export const BASE_API_URL = DEV + getConfigValue("enterfront.api");
+export const BASE_API_URL = LOCAL + getConfigValue("enterfront.api");
 
 // fetch(`${BASE_API_URL}/books/list`)
 

src/backend/redux/api_slice.js

@@ -0,0 +1,39 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import {getConfigValue} from "@brojs/cli";
+
+const LOCAL = "http://localhost:8099";
+const DEV = "https://dev.bro-js.ru";
+
+export const BASE_API_URL = LOCAL + getConfigValue("enterfront.api");
+
+const baseQuery = fetchBaseQuery({
+    baseUrl: BASE_API_URL,
+    prepareHeaders: (headers) => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            headers.set('Authorization', `Bearer ${token}`);
+        }
+        return headers;
+    },
+});
+
+export const apiSlice = createApi({
+    reducerPath: 'api',
+    baseQuery,
+    endpoints: (builder) => ({
+        getChats: builder.query({
+            query: (username) => `/chat/list/${username}`,
+        }),
+        postChat: builder.mutation({
+            query: (body) => ({
+                url: '/chat/post',
+                method: 'POST',
+                body,
+            }),
+        }),
+        // Add more endpoints as needed
+    }),
+});
+
+// Export hooks for usage in functional components
+export const { useGetChatsQuery, usePostChatMutation } = apiSlice;

src/backend/redux/store.js

@@ -0,0 +1,12 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { apiSlice } from './api_slice';
+
+const store = configureStore({
+    reducer: {
+        [apiSlice.reducerPath]: apiSlice.reducer,
+    },
+    middleware: (getDefaultMiddleware) =>
+        getDefaultMiddleware().concat(apiSlice.middleware),
+});
+
+export default store;

src/pages/Home.jsx

@@ -4,39 +4,54 @@ import ChatsList from "../components/home/ChatsList.jsx";
 import Header from "../components/home/Header.jsx";
 import { displayMessage } from "../backend/notifications/notifications";
 import { MessageType } from "../backend/notifications/message";
-import { get, post } from "../backend/api";
+import { useGetChatsQuery, usePostChatMutation } from "../backend/redux/api_slice"; // Update the import based on your API slice
 import InputField from "../components/reg/InputField.jsx";
 import Search from "../components/home/Search.jsx";
 import { URLs } from "../__data__/urls";
 
 const Home = () => {
-  const [chats, setChats] = useState([]);
+  const [chats, setChats] = useState([]);  // Retained original variable name
   const [interlocutor, setInterlocutor] = useState("");
 
-  async function retrieveChats() {
-    const username = localStorage.getItem("username");
-    if (!username) {
-      displayMessage("You're not logged in!", MessageType.WARN);
-      return;
+  const username = localStorage.getItem("username");
+
+  // Use Redux Queries
+  const { data: chatsData, error: getError, isLoading: isGetting } = useGetChatsQuery(username, {
+    skip: !username
+  });
+
+  console.log('From Redux:', chatsData);
+
+  const [createChat, { error: postError }] = usePostChatMutation();
+
+  useEffect(() => {
+    if (getError) {
+      displayMessage(getError.message, MessageType.ERROR);
     }
+  }, [getError]);
 
-    const { ok, data } = await get("/chat/list/" + username);
-    if (!ok) {
-      displayMessage(data.message, MessageType.ERROR);
-      return;
+  useEffect(() => {
+    if (chatsData) {
+      setChats(chatsData.chats);
+
+      try {
+        // const sortedChats = chatsData.chats.sort((a, b) => {
+        //   const lastMessageA = new Date(a.timestamp);
+        //   const lastMessageB = new Date(b.timestamp);
+        //   return lastMessageB - lastMessageA;
+        // });
+        // //
+        // // console.log('sorted:', sortedChats);
+        //
+        // setChats(sortedChats);
+      } catch (e) {
+        console.error(e);
+      }
     }
+  }, [chatsData]);
 
-    const sortedChats = data.chats.sort((a, b) => {
-      const lastMessageA = new Date(a.lastMessageTimestamp);
-      const lastMessageB = new Date(b.lastMessageTimestamp);
-      return lastMessageB - lastMessageA;
-    });
 
-    setChats(sortedChats);
-  }
-
-  async function createChat(alias) {
-    const username = localStorage.getItem("username");
+  const createChatHandler = async (alias) => {
     if (!username) {
       displayMessage("You're not logged in!", MessageType.WARN);
       return;
@@ -44,42 +59,40 @@ const Home = () => {
 
     displayMessage("Sent", MessageType.INFO);
 
-    const { ok, data } = await post("/chat/item/" + username + "/" + alias);
-    if (!ok) {
-      displayMessage(data.message, MessageType.ERROR);
-    } else {
+    try {
+      const data = await createChat({ alias, username }).unwrap(); // Using unwrap to handle promise rejection
       localStorage.setItem("message", "Successfully opened chat!");
       localStorage.setItem("interlocutorId", alias);
       window.location.href = URLs.chat.url;
+    } catch (error) {
+      displayMessage(error.data.message, MessageType.ERROR);
     }
-  }
+  };
 
-  useEffect(() => {
-    retrieveChats();
-  }, []);
+  if (isGetting) return <div>Loading...</div>;
 
   return (
-    <div className="homeWrapper">
-      <div className="headerPos">
-        <Header />
+      <div className="homeWrapper">
+        <div className="headerPos">
+          <Header />
+        </div>
+
+        <HomeTitle />
+
+        <div className="search-input">
+          <InputField
+              title="Create new chat"
+              value={interlocutor}
+              setValue={setInterlocutor}
+              placeholder="Enter the username (id)"
+          />
+        </div>
+
+        <Search search={createChatHandler} item={interlocutor} />
+
+        <p>Your chats</p>
+        <ChatsList chats={chats} />  {/* Retained original variable name */}
       </div>
-
-      <HomeTitle />
-
-      <div className="search-input">
-        <InputField
-          title="Create new chat"
-          value={interlocutor}
-          setValue={setInterlocutor}
-          placeholder="Enter the username (id)"
-        />
-      </div>
-
-      <Search search={createChat} item={interlocutor} />
-
-      <p>Your chats</p>
-      <ChatsList chats={chats} />
-    </div>
   );
 };