Wip refactor structure, add services, refactor a bit

.gitignore

@@ -0,0 +1,39 @@
+#BACKEND
+server/dist
+server/node_modules
+
+
+#FRONTEND
+
+# dependencies
+frontend/node_modules
+frontend/.pnp
+frontend/.pnp.js
+frontend/public/alert-sounds/*
+
+# testing
+/coverage
+
+# production
+frontend/dist
+frontend/build 
+
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+
+
+# misc
+.DS_Store
+
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+.vscode
+
+todo.md

frontend/src/components/App/App.tsx

@@ -4,10 +4,7 @@ import React from "react";
 import { SocketContext, socketConn } from "@context/SocketContext";
 import SideBar from "@components/SideBar";
 
-import { configure } from "axios-hooks";
-import Axios from "axios";
-
-import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import TwitchEvents from "@components/TwitchEvents";
 import Users from "@components/Users";
 import Overlay from "@components/Overlay";
@@ -19,12 +16,6 @@ import CommandsList from "@components/CommandsList";
 import ConfigsList from "@components/ConfigsList";
 import TriggersList from "@components/TriggersList";
 
-const axios = Axios.create({
-  baseURL: import.meta.env.VITE_BACKEND_URL,
-});
-
-configure({ axios });
-
 function App() {
   return (
     <SocketContext.Provider value={socketConn}>

frontend/src/components/CommandsList/CommandsList.tsx

@@ -1,34 +1,17 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import "./style.css";
-import { IChatCommand } from "@backend/models/types/";
 import Pagination from "@components/Pagination";
-import useAxios from "axios-hooks";
-import { AxiosRequestConfig } from "axios";
 import Modal from "@components/Modal";
 import formatDate from "@utils/formatDate";
 import PreviousPage from "@components/PreviousPage";
 import FilterBarCommands from "./FilterBarCommands";
-import { useSearchParams } from "react-router-dom";
-
-interface IChatCommandRes {
-  chatCommands: IChatCommand[];
-  totalPages: number;
-  count: number;
-  currentPage: number;
-}
+import ChatCommandService from "src/services/Chat-command.service";
 
 export default function CommandsList() {
-  const [searchParams] = useSearchParams();
-
-  const [currentPageLoc, setCurrentPageLoc] = useState(1);
-
-  const [pageSize, setPageSize] = useState(
-    Number(localStorage.getItem("commandsListPageSize")) || 15
-  );
-
   const [showModal, setShowModal] = useState(false);
 
   const [editingCommand, setEditingCommand] = useState("");
+  const [commandIdDelete, setCommandIdDelete] = useState<string | null>(null);
 
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
@@ -37,65 +20,60 @@ export default function CommandsList() {
   const [messages, setMessages] = useState([""]);
   const [privilege, setPrivilege] = useState<number>();
 
-  const [{ data, loading, error }, refetchCommands] = useAxios<IChatCommandRes>(
-    `/chat-commands?page=${currentPageLoc}&limit=${pageSize}&${searchParams}`
-  );
+  const {
+    data: commandsData,
+    loading,
+    error,
+    refetchData,
+  } = ChatCommandService.getCommands();
+
+  useEffect(() => {
+    if (
+      commandIdDelete !== null &&
+      confirm(`Are you sure you want to delete command: ${commandIdDelete}?`)
+    ) {
+      fetchDeleteCommand().then(() => {
+        refetchData();
+        setCommandIdDelete(null);
+      });
+    } else {
+      setCommandIdDelete(null);
+    }
+  }, [commandIdDelete]);
 
-  const [{}, postChatCommand] = useAxios<{
-    message: string;
-  }>(
+  const { refetchData: fetchEditComman } = ChatCommandService.editCommand(
+    editingCommand,
     {
-      method: "POST",
-    } as AxiosRequestConfig,
-    { manual: true }
+      name: name,
+      description: description,
+      enabled: enabled,
+      aliases: aliases,
+      messages: messages,
+      privilege: privilege || 0,
+    }
   );
 
-  if (error) return <>There is an error. {error.response?.data.message}</>;
-  if (loading || !data) return <> Loading...</>;
+  const { refetchData: fetchCreateCommand } = ChatCommandService.createCommand({
+    name: `New command${commandsData?.count}`,
+    description: `New command description${commandsData?.count}`,
+    enabled: true,
+    aliases: [`New command${commandsData?.count} default alias`],
+    messages: [`New command${commandsData?.count} default message`],
+    privilege: 0,
+  });
 
-  const { chatCommands, count, currentPage } = data;
+  const { refetchData: fetchDeleteCommand } = ChatCommandService.deleteCommand(
+    commandIdDelete ? commandIdDelete : ""
+  );
 
-  const removeCommand = (id: string) => {
-    if (confirm(`Are you sure you want delete command: }`))
-      postChatCommand({
-        url: `/chat-commands/delete/${id}`,
-        method: "DELETE",
-      } as AxiosRequestConfig).then(() => {
-        refetchCommands();
-      });
-  };
+  if (error) return <>There is an error. {error.response?.data.message}</>;
+  if (loading || !commandsData) return <> Loading...</>;
 
-  const createNewCommand = () => {
-    postChatCommand({
-      url: `/chat-commands/create`,
-      method: "POST",
-      data: {
-        name: `New command${count}`,
-        description: `New command description${count}`,
-        enabled: true,
-        aliases: [`New command${count} default alias`],
-        messages: [`New command${count} default message`],
-        privilege: 0,
-      },
-    } as AxiosRequestConfig).then(() => {
-      refetchCommands();
-    });
-  };
+  const { data, count, currentPage } = commandsData;
 
-  const editCommand = () => {
-    postChatCommand({
-      url: `/chat-commands/${editingCommand}`,
-      method: "POST",
-      data: {
-        name: name,
-        description: description,
-        enabled: enabled,
-        aliases: aliases,
-        messages: messages,
-        privilege: privilege,
-      },
-    } as AxiosRequestConfig).then(() => {
-      refetchCommands();
+  const createNewCommand = () => {
+    fetchCreateCommand().then(() => {
+      refetchData();
     });
   };
 
@@ -120,6 +98,19 @@ export default function CommandsList() {
     });
   };
 
+  const onSubmitEditModal = () => {
+    fetchEditComman().then(() => {
+      refetchData();
+    });
+    resetOnChangeClasses();
+    setShowModal(false);
+  };
+
+  const onCloseModal = () => {
+    setShowModal(false);
+    resetOnChangeClasses();
+  };
+
   return (
     <>
       <PreviousPage />
@@ -150,7 +141,7 @@ export default function CommandsList() {
           </thead>
 
           <tbody>
-            {chatCommands.map((command) => {
+            {data.map((command) => {
               return (
                 <tr key={command._id}>
                   <td>
@@ -171,7 +162,7 @@ export default function CommandsList() {
                     </button>
                     <button
                       className="command-action command-list-button command-delete"
-                      onClick={(e) => removeCommand(command._id)}
+                      onClick={() => setCommandIdDelete(command._id)}
                     >
                       Delete
                     </button>
@@ -207,23 +198,13 @@ export default function CommandsList() {
           localStorageName="commandsListPageSize"
           currentPage={currentPage}
           totalCount={count}
-          pageSize={pageSize}
-          onPageSizeChange={(pageSize) => setPageSize(pageSize)}
-          onPageChange={(page) => setCurrentPageLoc(page)}
           siblingCount={1}
         />
       </div>
       <Modal
         title="Edit command"
-        onClose={() => {
-          setShowModal(false);
-          resetOnChangeClasses();
-        }}
-        onSubmit={() => {
-          editCommand();
-          resetOnChangeClasses();
-          setShowModal(false);
-        }}
+        onClose={() => onCloseModal()}
+        onSubmit={() => onSubmitEditModal()}
         show={showModal}
       >
         <table className="commands-list-modal-wrapper">

frontend/src/components/ConfigsList/ConfigsList.tsx

@@ -1,10 +1,7 @@
-import React, { useReducer, useState } from "react";
+import React, { useState } from "react";
 import "./style.css";
-import useAxios from "axios-hooks";
-
 import PreviousPage from "@components/PreviousPage";
-import { AxiosRequestConfig } from "axios";
-import { IConfig } from "@backend/models/types";
+import ConfigService from "src/services/Config.service";
 
 export default function UserProfile() {
   const [showEdit, setShowEdit] = useState(false);
@@ -21,33 +18,16 @@ export default function UserProfile() {
     all: 0,
   });
 
-  const [
-    { data: configsData, loading: configsLoading, error: configsError },
-    refetchConfigs,
-  ] = useAxios<IConfig>(`/configs`);
-
-  const [, executeSaveConfig] = useAxios(
-    {
-      url: `/configs/edit`,
-      method: "POST",
-    } as AxiosRequestConfig,
-    { manual: true }
-  );
+  const { data, loading, error, refetchData } = ConfigService.getConfigs();
 
-  const saveConfig = () => {
-    executeSaveConfig({
-      data: {
-        commandsPrefix: prefix,
-        timersIntervalDelay: timersInterval,
-        activeUserTimeDelay: activeUserTime,
-        chatGamesIntervalDelay: chatGamesInterval,
-        minActiveUsersThreshold: minActiveUsers,
-        permissionLevels: permissions,
-      },
-    } as AxiosRequestConfig).then(() => {
-      refetchConfigs();
-    });
-  };
+  const { refetchData: fetchEditConfig } = ConfigService.editConfig({
+    commandsPrefix: prefix,
+    timersIntervalDelay: timersInterval,
+    activeUserTimeDelay: activeUserTime,
+    chatGamesIntervalDelay: chatGamesInterval,
+    minActiveUsersThreshold: minActiveUsers,
+    permissionLevels: permissions,
+  });
 
   const setConfigStates = () => {
     setPrefix(commandsPrefix);
@@ -58,8 +38,15 @@ export default function UserProfile() {
     setPermissions(permissionLevels);
   };
 
-  if (configsError) return <>There is an error.</>;
-  if (!configsData || configsLoading) return <>Someting went wrong</>;
+  const onClickEditConfig = () => {
+    setShowEdit(false);
+    fetchEditConfig().then(() => {
+      refetchData();
+    });
+  };
+
+  if (error) return <>There is an error.</>;
+  if (!data || loading) return <>Someting went wrong</>;
 
   const {
     commandsPrefix,
@@ -68,7 +55,7 @@ export default function UserProfile() {
     chatGamesIntervalDelay,
     minActiveUsersThreshold,
     permissionLevels,
-  } = configsData;
+  } = data;
 
   return (
     <>
@@ -87,10 +74,7 @@ export default function UserProfile() {
       {showEdit ? (
         <button
           className="edit-config-button"
-          onClick={() => {
-            setShowEdit(false);
-            saveConfig();
-          }}
+          onClick={() => onClickEditConfig()}
         >
           Save
         </button>