Feat add git hooks

.github/workflows/linting.yaml

@@ -0,0 +1,76 @@
+name: Linting
+
+on:
+  push:
+    paths:
+      - "frontend/**"
+      - "server/**"
+  pull_request:
+    paths:
+      - "frontend/**"
+      - "server/**"
+
+jobs:
+  frontend-lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Check for Frontend Changes
+        id: filter
+        uses: dorny/paths-filter@v3
+        with:
+          filters: |
+            frontend:
+              - 'frontend/**'
+
+      - name: Setup Node
+        if: steps.filter.outputs.frontend == 'true'
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: "npm"
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install Frontend Deps
+        if: steps.filter.outputs.frontend == 'true'
+        run: npm ci
+        working-directory: ./frontend
+
+      - name: Lint Frontend
+        if: steps.filter.outputs.frontend == 'true'
+        run: npm run lint
+        working-directory: ./frontend
+
+  server-lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Check for Server Changes
+        id: filter
+        uses: dorny/paths-filter@v3
+        with:
+          filters: |
+            server:
+              - 'server/**'
+
+      - name: Setup Node
+        if: steps.filter.outputs.server == 'true'
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: "npm"
+          cache-dependency-path: server/package-lock.json
+
+      - name: Install Server Deps
+        if: steps.filter.outputs.server == 'true'
+        run: npm ci --legacy-peer-deps
+        working-directory: ./server
+
+      - name: Lint Server
+        if: steps.filter.outputs.server == 'true'
+        run: npm run lint
+        working-directory: ./server

.gitignore

@@ -10,6 +10,9 @@ frontend/.pnp
 frontend/.pnp.js
 frontend/public/alertSounds/*
 
+#root
+node_modules
+
 # testing
 /coverage
 

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

frontend/eslint.config.js

@@ -13,6 +13,16 @@ export default defineConfig([
     extends: ["js/recommended"],
     languageOptions: { globals: globals.browser },
   },
+  {
+    rules: {
+      "@typescript-eslint/no-empty-object-type": [
+        "warn",
+        {
+          allowInterfaces: "with-single-extends",
+        },
+      ],
+    },
+  },
   tseslint.configs.recommended,
   pluginReact.configs.flat["jsx-runtime"],
   {

frontend/src/components/achievements/CustomAchievementModalInputs.tsx

@@ -44,7 +44,7 @@ export default function CustomAchievementModalInputs() {
                     setCustom({
                       ...(achievement.custom || initialCustom),
                       stringValues: e.target.value.split("\n"),
-                    })
+                    }),
                   )
                 }
                 value={achievement.custom.stringValues?.join("\n")}
@@ -61,7 +61,7 @@ export default function CustomAchievementModalInputs() {
                     setCustom({
                       ...(achievement.custom || initialCustom),
                       caseSensitive: !achievement.custom?.caseSensitive,
-                    })
+                    }),
                   )
                 }
               >
@@ -85,7 +85,7 @@ export default function CustomAchievementModalInputs() {
                     setCustom({
                       ...(achievement.custom || initialCustom),
                       numberValue: value > 0 ? value : 5,
-                    })
+                    }),
                   );
                 }}
                 value={achievement.custom.numberValue || 5}
@@ -94,7 +94,6 @@ export default function CustomAchievementModalInputs() {
           </>
         );
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [achievement]);
 
   return (
@@ -117,7 +116,7 @@ export default function CustomAchievementModalInputs() {
               setCustom({
                 ...achievement.custom,
                 action: e.target.value as CustomAchievementAction,
-              })
+              }),
             )
           }
         >

frontend/src/components/achievements/badges/AvailableBadgeImages.tsx

@@ -96,7 +96,7 @@ function UploadBadgeImageButtons({
 
   const { addNotify } = useNotifications();
   const { uploadProgress, handleFileUpload, error, success } = useFileUpload(
-    uploadBadgesData.badgesImages
+    uploadBadgesData.badgesImages,
   );
 
   useEffect(() => {
@@ -108,7 +108,6 @@ function UploadBadgeImageButtons({
       });
       onSuccessCallback();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [success]);
 
   useEffect(() => {

frontend/src/components/achievements/badges/EditCreateBadgeModal.tsx

@@ -10,7 +10,7 @@ export default function EditCreateBadgeModal() {
   const dispatch = useDispatch();
   const { addNotify } = useNotifications();
   const { isModalOpen, badge, editingId } = useSelector(
-    (root: RootStore) => root.badges
+    (root: RootStore) => root.badges,
   );
   const editBadgeMutation = useEditBadge();
   const createBadgeMutation = useCreateBadge();
@@ -39,7 +39,8 @@ export default function EditCreateBadgeModal() {
       title={`${editingId ? "Edit" : "Create"} badge`}
       onClose={() => dispatch(closeModal())}
       onSubmit={() => {
-        editingId ? onSubmitModalEdit() : onSubmitModalCreate();
+        if (editingId) onSubmitModalEdit();
+        else onSubmitModalCreate();
       }}
       show={isModalOpen}
     >

frontend/src/components/achievements/oneStage/ActionButtons.tsx

@@ -58,14 +58,14 @@ export default function ActionButtons({
                 updatedAt: new Date(),
               },
               showTimeMs: 2500,
-            }
-      )
+            },
+      ),
     );
   };
   const refetchAchievementStageById = useRefetchAchievementStageById();
 
   const handleEditAchievementStage = () => {
-    const { createdAt, updatedAt, stageData, ...rest } = stage;
+    const { stageData, ...rest } = stage;
     editAchievementStageMutation.mutate({
       id: stageId,
       updatedAchievementStage: {
@@ -80,7 +80,7 @@ export default function ActionButtons({
 
   const handleOnClickSave = () => {
     const isBadgeSet = stage.stageData.every(
-      (stageData) => stageData.badge._id
+      (stageData) => stageData.badge._id,
     );
     if (!isBadgeSet)
       return addNotify({

frontend/src/components/achievements/stages/CreateStage.tsx

@@ -17,7 +17,7 @@ export default function CreateStages() {
   };
   return (
     <>
-      <Button onClick={(e) => setShowModal(true)}>New</Button>
+      <Button onClick={() => setShowModal(true)}>New</Button>
 
       <Modal
         title="Create new achievement stage"

frontend/src/components/addUserAchievementProgress/AddUserAchievementProgress.tsx

@@ -5,7 +5,7 @@ import { Button } from "@components/ui/button";
 import { NOTIFICATION_TYPE, useNotifications } from "@contexts";
 import { fetchAchievementsDefaultParams, useGetAchievements } from "@services";
 import { AddAchievementProgressToUserData, useSocketContext } from "@socket";
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 interface UserAchievementProgressProps {
   userId: string;
@@ -45,7 +45,7 @@ export default function UserAchievementProgress({
         page,
         limit: size,
       }),
-    [getAchievementsSearchParams]
+    [getAchievementsSearchParams],
   );
 
   useEffect(() => {
@@ -81,7 +81,7 @@ export default function UserAchievementProgress({
             type: NOTIFICATION_TYPE.SUCCESS,
           });
         }
-      }
+      },
     );
   };
   const { currentPage, count, totalPages, data } = achievementsData;
@@ -159,7 +159,7 @@ function UserAchievementProgressValue({
       <div>
         <div>
           <label>
-            <Button onClick={(e) => onChange(values.value, !values.increment)}>
+            <Button onClick={() => onChange(values.value, !values.increment)}>
               {values.increment ? "Increment" : "Set"}
             </Button>{" "}
             values {values.increment ? "by" : "to"}

frontend/src/components/configsList/ConfigButton.tsx

@@ -3,7 +3,7 @@ import { Button } from "@components/ui/button";
 interface ConfigButtonProps {
   optionName: string;
   setState: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  value: Boolean;
+  value: boolean;
   showEdit: boolean;
 }
 

frontend/src/components/configsList/ConfigsList.tsx

@@ -39,7 +39,6 @@ export default function ConfigsList() {
   useEffect(() => {
     if (!configs) return;
     dispatch(setConfigState(configs.data));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [configs]);
 
   if (error) return <Error error={error} />;

frontend/src/components/configsList/MusicConfigs.tsx

@@ -15,7 +15,7 @@ export default function MusicConfigsWrapper() {
     <>
       <ConfigButton
         optionName="Song request"
-        setState={(e) =>
+        setState={() =>
           dispatch(setMusicConfigs(["songRequest", !musicConfigs.songRequest]))
         }
         value={musicConfigs.songRequest}
@@ -25,7 +25,7 @@ export default function MusicConfigsWrapper() {
         optionName="Max auto que size"
         setState={(e) =>
           dispatch(
-            setMusicConfigs(["maxAutoQueSize", e.currentTarget.valueAsNumber])
+            setMusicConfigs(["maxAutoQueSize", e.currentTarget.valueAsNumber]),
           )
         }
         value={musicConfigs.maxAutoQueSize}
@@ -38,7 +38,7 @@ export default function MusicConfigsWrapper() {
             setMusicConfigs([
               "maxSongRequestByUser",
               e.currentTarget.valueAsNumber,
-            ])
+            ]),
           )
         }
         value={musicConfigs.maxSongRequestByUser}

frontend/src/components/filter/Filter.tsx

@@ -49,7 +49,7 @@ export default function Filter<OptionsKeys extends string>({
   }, [options, searchParams]);
   return (
     <div>
-      <Button size="small" onClick={(e) => setShowModal(true)}>
+      <Button size="small" onClick={() => setShowModal(true)}>
         <div>Filter {!!appliedFilters && `(${appliedFilters})`}</div>
       </Button>
       <Modal

frontend/src/components/home/Home.tsx

@@ -134,7 +134,6 @@ function ChatBackground() {
         username: msg.ownerUsername,
       }),
     );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data]);
 
   useEffect(() => {
@@ -173,7 +172,6 @@ function ChatBackground() {
     timeoutChatMessage();
 
     return () => clearTimeout(chatTimeout);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

frontend/src/components/lineChart/LineChart.tsx

@@ -18,7 +18,7 @@ ChartJS.register(
   LineElement,
   Title,
   Tooltip,
-  Legend
+  Legend,
 );
 
 interface ChartOptions {
@@ -36,8 +36,8 @@ export default function LineChart({
   const { title, label: labelName } = chartOptions;
 
   const mapData = new Map(Object.entries(data));
-  let labels = [];
-  let dataLabel = [];
+  const labels = [];
+  const dataLabel = [];
   for (const [key, value] of mapData) {
     labels.push(new Date(Number(key)).toLocaleTimeString());
     dataLabel.push(value);

frontend/src/components/messageCategoriesList/MessageCategoriesList.tsx

@@ -93,9 +93,8 @@ export default function MessageCategoriesList() {
         title={`${editingId ? "Edit" : "Create"} message category`}
         onClose={() => dispatch(closeModal())}
         onSubmit={() => {
-          editingId
-            ? handleUpdateMessageCategory()
-            : handleCreateMessageCategory();
+          if (editingId) handleUpdateMessageCategory();
+          else handleCreateMessageCategory();
         }}
         show={isModalOpen}
       >

frontend/src/components/modal/Modal.tsx

@@ -6,6 +6,7 @@ import { createPortal } from "react-dom";
 interface ModalProps {
   title?: string;
   onClose: () => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onSubmit?: () => any;
   show?: boolean;
   children?: React.ReactNode;
@@ -43,6 +44,6 @@ export default function Modal({
         </div>
       </div>
     </div>,
-    document.getElementById("root")!
+    document.getElementById("root")!,
   );
 }

frontend/src/components/overlay/Overlay.tsx

@@ -70,7 +70,6 @@ export default function Overlay(params: { editor?: boolean }) {
 
   useEffect(() => {
     dispatch(setIsEditor(editor));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
 
   useEffect(() => {
@@ -81,7 +80,6 @@ export default function Overlay(params: { editor?: boolean }) {
     return () => {
       refreshOverlayLayoutEvent.off();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [refreshOverlayLayoutEvent]);
 
   useEffect(() => {