fixed exit button

package-lock.json

@@ -1,16 +1,17 @@
 {
     "name": "enterfront",
-    "version": "0.4.0",
+    "version": "0.5.4",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "enterfront",
-            "version": "0.4.0",
+            "version": "0.5.4",
             "dependencies": {
                 "@brojs/cli": "^1.0.0",
                 "@brojs/create": "^1.0.0",
                 "@ijl/cli": "^5.1.0",
+                "@reduxjs/toolkit": "^2.3.0",
                 "@types/react": "^18.3.5",
                 "@types/react-dom": "^18.3.0",
                 "dotenv": "^16.4.5",
@@ -21,6 +22,7 @@
                 "react-dom": "^18.3.1",
                 "react-emoji-picker": "^1.0.13",
                 "react-icons": "^5.3.0",
+                "react-redux": "^9.1.2",
                 "react-router-dom": "^6.26.1",
                 "react-toastify": "^10.0.5",
                 "socket.io": "^4.8.0",
@@ -3057,6 +3059,40 @@
                 "node": ">=14"
             }
         },
+        "node_modules/@reduxjs/toolkit": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.3.0.tgz",
+            "integrity": "sha512-WC7Yd6cNGfHx8zf+iu+Q1UPTfEcXhQ+ATi7CV1hlrSAaQBdlPzg7Ww/wJHNQem7qG9rxmWoFCDCPubSvFObGzA==",
+            "license": "MIT",
+            "dependencies": {
+                "immer": "^10.0.3",
+                "redux": "^5.0.1",
+                "redux-thunk": "^3.1.0",
+                "reselect": "^5.1.0"
+            },
+            "peerDependencies": {
+                "react": "^16.9.0 || ^17.0.0 || ^18",
+                "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+            },
+            "peerDependenciesMeta": {
+                "react": {
+                    "optional": true
+                },
+                "react-redux": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@reduxjs/toolkit/node_modules/immer": {
+            "version": "10.1.1",
+            "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+            "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/immer"
+            }
+        },
         "node_modules/@remix-run/router": {
             "version": "1.19.1",
             "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz",
@@ -3174,6 +3210,12 @@
                 "source-map": "^0.6.1"
             }
         },
+        "node_modules/@types/use-sync-external-store": {
+            "version": "0.0.3",
+            "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+            "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==",
+            "license": "MIT"
+        },
         "node_modules/@types/webpack": {
             "version": "4.41.39",
             "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.39.tgz",
@@ -8288,6 +8330,29 @@
             "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
             "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
         },
+        "node_modules/react-redux": {
+            "version": "9.1.2",
+            "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
+            "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/use-sync-external-store": "^0.0.3",
+                "use-sync-external-store": "^1.0.0"
+            },
+            "peerDependencies": {
+                "@types/react": "^18.2.25",
+                "react": "^18.0",
+                "redux": "^5.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "redux": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/react-router": {
             "version": "6.26.1",
             "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz",
@@ -8411,6 +8476,21 @@
                 "recursive-watch": "bin.js"
             }
         },
+        "node_modules/redux": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+            "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+            "license": "MIT"
+        },
+        "node_modules/redux-thunk": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+            "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+            "license": "MIT",
+            "peerDependencies": {
+                "redux": "^5.0.0"
+            }
+        },
         "node_modules/regenerate": {
             "version": "1.4.2",
             "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -8519,6 +8599,12 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/reselect": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+            "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+            "license": "MIT"
+        },
         "node_modules/resolve": {
             "version": "1.22.8",
             "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -9829,6 +9915,15 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/use-sync-external-store": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+            "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/util-deprecate": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -3,6 +3,7 @@
         "@brojs/cli": "^1.0.0",
         "@brojs/create": "^1.0.0",
         "@ijl/cli": "^5.1.0",
+        "@reduxjs/toolkit": "^2.3.0",
         "@types/react": "^18.3.5",
         "@types/react-dom": "^18.3.0",
         "dotenv": "^16.4.5",
@@ -13,6 +14,7 @@
         "react-dom": "^18.3.1",
         "react-emoji-picker": "^1.0.13",
         "react-icons": "^5.3.0",
+        "react-redux": "^9.1.2",
         "react-router-dom": "^6.26.1",
         "react-toastify": "^10.0.5",
         "socket.io": "^4.8.0",
@@ -29,5 +31,5 @@
         "clean": "rimraf dist"
     },
     "name": "enterfront",
-    "version": "0.4.0"
+    "version": "0.5.4"
 }

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

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

src/backend/redux/api_slice.js

@@ -0,0 +1,34 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import {getConfigValue} from "@brojs/cli";
+
+import { BASE_API_URL } from "../api.js";
+
+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: ({ id1, id2 }) => ({
+                url: `/chat/item/${id1}/${id2}`,
+                method: 'POST',
+            }),
+        }),
+    }),
+});
+
+// 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/Account.jsx

@@ -13,7 +13,7 @@ const Account = () => {
         localStorage.removeItem("token");
 
         localStorage.setItem("message", "Exited successfully!");
-        window.location.href = "/";
+        window.location.href = URLs.baseUrl;
     }
 
     const [nickname, setNickname] = useState("");

src/pages/Chat.jsx

@@ -116,7 +116,12 @@ const Chat = () => {
   }, []);
 
   useEffect(() => {
-    retrieveMessages().then();
+    // retrieveMessages().then();
+    const interval = setInterval(() => {
+      retrieveMessages().then()
+    }, 2000);
+
+    return () => clearInterval(interval)
   }, [myId, interlocutorId]);
 
   useEffect(() => {

src/pages/Home.jsx

@@ -4,39 +4,61 @@ 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);
     }
-
-    const { ok, data } = await get("/chat/list/" + username);
-    if (!ok) {
-      displayMessage(data.message, MessageType.ERROR);
-      return;
+    if (getError) {
+      displayMessage(getError.message, MessageType.ERROR);
     }
+  }, [getError, postError]);
 
-    const sortedChats = data.chats.sort((a, b) => {
-      const lastMessageA = new Date(a.lastMessageTimestamp);
-      const lastMessageB = new Date(b.lastMessageTimestamp);
-      return lastMessageB - lastMessageA;
-    });
+  useEffect(() => {
+    if (chatsData) {
+      // setChats(chatsData.chats);
 
-    setChats(sortedChats);
-  }
+      let data = chatsData.chats;
 
-  async function createChat(alias) {
-    const username = localStorage.getItem("username");
+      try {
+        const sortedChats = [...data].sort((a, b) => {
+          const lastMessageA = a.messages[a.messages.length - 1];
+          const lastMessageB = b.messages[b.messages.length - 1];
+
+          const dateA = new Date(lastMessageA.timestamp);
+          const dateB = new Date(lastMessageB.timestamp);
+
+          return dateB - dateA;
+        });
+
+        setChats(sortedChats);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }, [chatsData]);
+
+
+  const createChatHandler = async (alias) => {
     if (!username) {
       displayMessage("You're not logged in!", MessageType.WARN);
       return;
@@ -44,42 +66,49 @@ 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({ id1: alias, id2: 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();
-  }, []);
+  };
 
   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)"
+
+              enter={createChatHandler}
+              submit={interlocutor}
+          />
+        </div>
+
+        {isGetting ? (
+            <div>Loading...</div>
+        ) : (
+            <>
+              <Search search={createChatHandler} item={interlocutor} />
+
+              <p>Your chats</p>
+              <ChatsList chats={chats} />
+            </>
+        )}
+
+
       </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>
   );
 };
 

src/pages/SignIn.jsx

@@ -6,6 +6,7 @@ import LoginTitle from "../components/reg/loginTitle.jsx";
 import {MessageType} from "../backend/notifications/message.tsx";
 import {displayMessage} from "../backend/notifications/notifications.js";
 import {post} from "../backend/api.js";
+import {URLs} from "../__data__/urls";
 
 const SignIn = () => {
     const [name, setName] = useState("");
@@ -37,7 +38,7 @@ const SignIn = () => {
         setNameErrorsCounter(0);
 
         localStorage.setItem('message', 'Successfully logged in!');
-        window.location.href = "/";
+        window.location.href = URLs.baseUrl;
     }
 
   return (

src/pages/SignUp.jsx

@@ -5,6 +5,7 @@ import LoginTitle from "../components/reg/loginTitle.jsx";
 import {post} from "../backend/api";
 import {displayMessage} from "../backend/notifications/notifications";
 import {MessageType} from "../backend/notifications/message";
+import { URLs } from "../__data__/urls";
 
 
 const SignUp = () => {
@@ -47,7 +48,7 @@ const SignUp = () => {
         localStorage.setItem('username', name);
 
         localStorage.setItem('message', 'Successfully signed up!');
-        window.location.href = "/";
+        window.location.href = URLs.baseUrl;
     }
 
     return (

stubs/api/auth/index.js

@@ -3,8 +3,7 @@ const authRouter = require('express').Router();
 // For creating tokens
 const jwt = require('jsonwebtoken');
 
-require('dotenv').config();
-const TOKEN_KEY = process.env.TOKEN_KEY;
+const { TOKEN_KEY } = require('../key')
 
 
 module.exports = authRouter;
@@ -15,7 +14,6 @@ const { addUserToDB, getUserFromDB } = require('../db');
 // Get a user by its id
 authRouter.get('/:id', (req, res) => {
     const user = getUserFromDB(req.params.id);
-    console.log("Request get in /auth:", req.params.id);
 
     if (user) {
         res.status(200).send({user});
@@ -27,7 +25,6 @@ authRouter.get('/:id', (req, res) => {
 // For login (authorization)
 authRouter.post('/login', (req, res) => {
     const { name, password } = req.body;
-    console.log("Request login in /auth:", name);
 
     const user = getUserFromDB(name);
 
@@ -54,7 +51,6 @@ authRouter.post('/login', (req, res) => {
 
 authRouter.post('/reg', (req, res) => {
     const { name, password, nickname } = req.body;
-    console.log("Request reg in /auth:", name);
 
     const user = getUserFromDB(name);
 

stubs/api/change/index.js

@@ -2,14 +2,11 @@ const changeRouter = require('express').Router();
 
 module.exports = changeRouter;
 
-const { users, getUserFromDB, deleteUserFromDB, addUserToDB } = require('../db');
-
-const jwt = require("jsonwebtoken");
+const { getUserFromDB, deleteUserFromDB, addUserToDB } = require('../db');
 
 
 changeRouter.post('/nickname', (req, res) => {
     const { id, newNickname } = req.body;
-    console.log("Request nickname in /change:", id);
 
     const user = getUserFromDB(id);
 
@@ -36,7 +33,6 @@ changeRouter.post('/nickname', (req, res) => {
 
 changeRouter.post('/password', (req, res) => {
     const { id, newPassword } = req.body;
-    console.log("Request password in /change:", id);
 
     const user = getUserFromDB(id);
 
@@ -62,7 +58,6 @@ changeRouter.post('/password', (req, res) => {
 
 changeRouter.delete('/:id', (req, res) => {
     const { id } = req.params;
-    console.log("Request delete in /change:", id);
 
     deleteUserFromDB(id);
 });

stubs/api/chat/index.js

@@ -7,7 +7,6 @@ const { getChatFromDB, getUsersChats, addChatToDB, getUserFromDB,
 
 chatRouter.get('/item/:id1/:id2', (req, res) => {
     const { id1, id2 } = req.params;
-    console.log("Request get in /chat:", id1, id2);
 
     if (id1 === id2) {
         res.status(400).send({message: 'Ids should be different'});
@@ -25,7 +24,6 @@ chatRouter.get('/item/:id1/:id2', (req, res) => {
 
 chatRouter.post('/item/:id1/:id2', (req, res) => {
     const { id1, id2 } = req.params;
-    console.log("Request post in /chat:", id1, id2);
 
     if (id1 === id2) {
         res.status(400).send({message: 'Ids should be different'});
@@ -58,8 +56,6 @@ chatRouter.post('/item/:id1/:id2', (req, res) => {
 chatRouter.get('/list/:id', (req, res) => {
     const { id } = req.params;
 
-    console.log("Request get /list in /chat:", id);
-
     const userChats = getUsersChats(id);
 
     if (!userChats) {
@@ -72,7 +68,6 @@ chatRouter.get('/list/:id', (req, res) => {
 chatRouter.post('/message/:sender/:receiver', (req, res) => {
     const { sender, receiver } = req.params;
     const { message } = req.body;
-    console.log("Request post /message in /chat:", sender, receiver, message);
 
     const chat = getChatFromDB(sender, receiver);
 

stubs/api/index.js

@@ -12,6 +12,6 @@ module.exports = router;
 // router.use(delay(300));
 // router.use('/books', delay, booksRouter);
 
-router.use('/enterfront/auth', authRouter);
-router.use('/enterfront/change', verify, changeRouter);
-router.use('/enterfront/chat', verify, chatRouter)
+router.use('/auth', authRouter);
+router.use('/change', verify, changeRouter);
+router.use('/chat', verify, chatRouter)

stubs/api/key.js

@@ -0,0 +1,3 @@
+const TOKEN_KEY = '5frv12e4few3r';
+
+module.exports = { TOKEN_KEY }

stubs/api/middlewares/verify.js

@@ -1,13 +1,12 @@
 const jwt = require('jsonwebtoken');
 
-require('dotenv').config();
-const TOKEN_KEY = process.env.TOKEN_KEY;
+const { TOKEN_KEY } = require('../key')
 
 function verifyToken(req, res, next) {
     const token = req.headers['authorization']?.split(' ')[1];
 
     if (!token) {
-        return res.status(403).send({ message: 'No token provided' });
+        return res.status(401).send({ message: 'No token provided' });
     }
 
     // Verify token