From c53742d4708c4d06ceef09e98f8028b0b0f4e307 Mon Sep 17 00:00:00 2001
From: david <njorogedavid13@gmail.com>
Date: Fri, 27 Feb 2026 13:15:50 +0300
Subject: [PATCH] lint frontend

---
 .../src/components/kanban/CreateListModal.tsx |   2 +-
 frontend/src/hooks/useApi.ts                  | 414 +++++++++---------
 frontend/src/hooks/useBoard.ts                |   2 +-
 frontend/src/pages/BoardCreate.tsx            |   2 +-
 frontend/src/pages/BoardEdit.tsx              |   2 +-
 frontend/src/pages/Login.tsx                  |   2 +-
 6 files changed, 217 insertions(+), 207 deletions(-)

diff --git a/frontend/src/components/kanban/CreateListModal.tsx b/frontend/src/components/kanban/CreateListModal.tsx
index c6d7f65..dcd9141 100644
--- a/frontend/src/components/kanban/CreateListModal.tsx
+++ b/frontend/src/components/kanban/CreateListModal.tsx
@@ -2,7 +2,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { ModalContentProps } from '../../types';
-import { useToast } from '@/context/toasts';
+import { useToast } from '../../context/toasts/useToast';
 
 const listSchema = z.object({
   name: z
diff --git a/frontend/src/hooks/useApi.ts b/frontend/src/hooks/useApi.ts
index 8cd6320..58f87d5 100644
--- a/frontend/src/hooks/useApi.ts
+++ b/frontend/src/hooks/useApi.ts
@@ -11,6 +11,7 @@ import {
   Checklist,
   CommentWithUser,
 } from '../types/kanban';
+import { useMemo } from 'react';
 
 const api = axios.create({
   baseURL: '/api',
@@ -46,215 +47,224 @@ api.interceptors.response.use(
 );
 
 export function useApi() {
-  return {
-    // Auth
-    login: async (email: string, password: string): Promise<AuthResponse> => {
-      const response = await api.post<AuthResponse>('/auth/login', {
-        email,
-        password,
-      });
-      return response.data;
-    },
-    register: async (userData: RegisterData): Promise<AuthResponse> => {
-      const response = await api.post<AuthResponse>('/auth/register', userData);
-      return response.data;
-    },
-    getCurrentUser: async (): Promise<UserData> => {
-      const response = await api.get<UserData>('/users/me');
-      return response.data;
-    },
+  return useMemo(
+    () => ({
+      // Auth
+      login: async (email: string, password: string): Promise<AuthResponse> => {
+        const response = await api.post<AuthResponse>('/auth/login', {
+          email,
+          password,
+        });
+        return response.data;
+      },
+      register: async (userData: RegisterData): Promise<AuthResponse> => {
+        const response = await api.post<AuthResponse>('/auth/register', userData);
+        return response.data;
+      },
+      getCurrentUser: async (): Promise<UserData> => {
+        const response = await api.get<UserData>('/users/me');
+        return response.data;
+      },
 
-    // Products
-    getProducts: async (): Promise<ProductData[]> => {
-      const response = await api.get<ProductData[]>('/products');
-      return response.data;
-    },
-    getProduct: async (id: string): Promise<ProductData> => {
-      const response = await api.get<ProductData>(`/products/${id}`);
-      return response.data;
-    },
-    createProduct: async (productData: Omit<ProductData, 'id'>): Promise<ProductData> => {
-      const response = await api.post<ProductData>('/products', productData);
-      return response.data;
-    },
-    updateProduct: async (id: string, productData: Partial<ProductData>): Promise<ProductData> => {
-      const response = await api.put<ProductData>(`/products/${id}`, productData);
-      return response.data;
-    },
-    deleteProduct: async (id: string): Promise<void> => {
-      await api.delete(`/products/${id}`);
-    },
+      // Products
+      getProducts: async (): Promise<ProductData[]> => {
+        const response = await api.get<ProductData[]>('/products');
+        return response.data;
+      },
+      getProduct: async (id: string): Promise<ProductData> => {
+        const response = await api.get<ProductData>(`/products/${id}`);
+        return response.data;
+      },
+      createProduct: async (productData: Omit<ProductData, 'id'>): Promise<ProductData> => {
+        const response = await api.post<ProductData>('/products', productData);
+        return response.data;
+      },
+      updateProduct: async (
+        id: string,
+        productData: Partial<ProductData>
+      ): Promise<ProductData> => {
+        const response = await api.put<ProductData>(`/products/${id}`, productData);
+        return response.data;
+      },
+      deleteProduct: async (id: string): Promise<void> => {
+        await api.delete(`/products/${id}`);
+      },
 
-    // Orders
-    getOrders: async (): Promise<OrderData[]> => {
-      const response = await api.get<OrderData[]>('/orders');
-      return response.data;
-    },
-    getOrder: async (id: string): Promise<OrderData> => {
-      const response = await api.get<OrderData>(`/orders/${id}`);
-      return response.data;
-    },
-    createOrder: async (orderData: Omit<OrderData, 'id'>): Promise<OrderData> => {
-      const response = await api.post<OrderData>('/orders', orderData);
-      return response.data;
-    },
+      // Orders
+      getOrders: async (): Promise<OrderData[]> => {
+        const response = await api.get<OrderData[]>('/orders');
+        return response.data;
+      },
+      getOrder: async (id: string): Promise<OrderData> => {
+        const response = await api.get<OrderData>(`/orders/${id}`);
+        return response.data;
+      },
+      createOrder: async (orderData: Omit<OrderData, 'id'>): Promise<OrderData> => {
+        const response = await api.post<OrderData>('/orders', orderData);
+        return response.data;
+      },
 
-    // Boards
-    getBoards: async (): Promise<Board[]> => {
-      const response = await api.get<Board[]>('/boards');
-      return response.data;
-    },
-    getBoard: async (id: number): Promise<BoardWithDetails> => {
-      const response = await api.get<BoardWithDetails>(`/boards/${id}`);
-      return response.data;
-    },
-    createBoard: async (boardData: BoardCreate): Promise<Board> => {
-      const response = await api.post<Board>('/boards', boardData);
-      return response.data;
-    },
-    updateBoard: async (id: number, boardData: Partial<BoardCreate>): Promise<Board> => {
-      const response = await api.put<Board>(`/boards/${id}`, boardData);
-      return response.data;
-    },
-    deleteBoard: async (id: number): Promise<void> => {
-      await api.delete(`/boards/${id}`);
-    },
+      // Boards
+      getBoards: async (): Promise<Board[]> => {
+        const response = await api.get<Board[]>('/boards');
+        return response.data;
+      },
+      getBoard: async (id: number): Promise<BoardWithDetails> => {
+        const response = await api.get<BoardWithDetails>(`/boards/${id}`);
+        return response.data;
+      },
+      createBoard: async (boardData: BoardCreate): Promise<Board> => {
+        const response = await api.post<Board>('/boards', boardData);
+        return response.data;
+      },
+      updateBoard: async (id: number, boardData: Partial<BoardCreate>): Promise<Board> => {
+        const response = await api.put<Board>(`/boards/${id}`, boardData);
+        return response.data;
+      },
+      deleteBoard: async (id: number): Promise<void> => {
+        await api.delete(`/boards/${id}`);
+      },
 
-    // Lists
-    createList: async (boardId: number, listData: { name: string; pos: number }): Promise<List> => {
-      const response = await api.post<List>(`/boards/${boardId}/lists`, listData);
-      return response.data;
-    },
-    updateList: async (
-      id: number,
-      listData: { name: string; pos: number; closed?: boolean }
-    ): Promise<List> => {
-      const response = await api.put<List>(`/lists/${id}`, listData);
-      return response.data;
-    },
-    deleteList: async (id: number): Promise<void> => {
-      await api.delete(`/lists/${id}`);
-    },
+      // Lists
+      createList: async (
+        boardId: number,
+        listData: { name: string; pos: number }
+      ): Promise<List> => {
+        const response = await api.post<List>(`/boards/${boardId}/lists`, listData);
+        return response.data;
+      },
+      updateList: async (
+        id: number,
+        listData: { name: string; pos: number; closed?: boolean }
+      ): Promise<List> => {
+        const response = await api.put<List>(`/lists/${id}`, listData);
+        return response.data;
+      },
+      deleteList: async (id: number): Promise<void> => {
+        await api.delete(`/lists/${id}`);
+      },
 
-    // Cards
-    createCard: async (
-      listId: number,
-      cardData: {
-        name: string;
-        description?: string;
-        pos: number;
-        due?: string | null;
-        due_complete?: boolean;
-        badges?: Record<string, any>;
-        cover?: Record<string, any>;
-        desc_data?: Record<string, any>;
-      }
-    ): Promise<Card> => {
-      const response = await api.post<Card>(`/lists/${listId}/cards`, cardData);
-      return response.data;
-    },
-    getCard: async (id: number): Promise<CardWithDetails> => {
-      const response = await api.get<CardWithDetails>(`/cards/${id}`);
-      return response.data;
-    },
-    updateCard: async (
-      id: number,
-      cardData: {
-        name: string;
-        description?: string;
-        pos: number;
-        due?: string | null;
-        due_complete?: boolean;
-        closed?: boolean;
-        list_id?: number;
-        badges?: Record<string, any>;
-        cover?: Record<string, any>;
-        desc_data?: Record<string, any>;
-      }
-    ): Promise<Card> => {
-      const response = await api.put<Card>(`/cards/${id}`, cardData);
-      return response.data;
-    },
-    deleteCard: async (id: number): Promise<void> => {
-      await api.delete(`/cards/${id}`);
-    },
+      // Cards
+      createCard: async (
+        listId: number,
+        cardData: {
+          name: string;
+          description?: string;
+          pos: number;
+          due?: string | null;
+          due_complete?: boolean;
+          badges?: Record<string, any>;
+          cover?: Record<string, any>;
+          desc_data?: Record<string, any>;
+        }
+      ): Promise<Card> => {
+        const response = await api.post<Card>(`/lists/${listId}/cards`, cardData);
+        return response.data;
+      },
+      getCard: async (id: number): Promise<CardWithDetails> => {
+        const response = await api.get<CardWithDetails>(`/cards/${id}`);
+        return response.data;
+      },
+      updateCard: async (
+        id: number,
+        cardData: {
+          name: string;
+          description?: string;
+          pos: number;
+          due?: string | null;
+          due_complete?: boolean;
+          closed?: boolean;
+          list_id?: number;
+          badges?: Record<string, any>;
+          cover?: Record<string, any>;
+          desc_data?: Record<string, any>;
+        }
+      ): Promise<Card> => {
+        const response = await api.put<Card>(`/cards/${id}`, cardData);
+        return response.data;
+      },
+      deleteCard: async (id: number): Promise<void> => {
+        await api.delete(`/cards/${id}`);
+      },
 
-    // Labels
-    getLabels: async (boardId: number): Promise<Label[]> => {
-      const response = await api.get<Label[]>(`/boards/${boardId}/labels`);
-      return response.data;
-    },
-    createLabel: async (
-      boardId: number,
-      labelData: { name: string; color: string }
-    ): Promise<Label> => {
-      const response = await api.post<Label>(`/boards/${boardId}/labels`, labelData);
-      return response.data;
-    },
-    addLabelToCard: async (cardId: number, labelId: number): Promise<any> => {
-      const response = await api.post(`/cards/${cardId}/labels`, { label_id: labelId });
-      return response.data;
-    },
-    removeLabelFromCard: async (cardId: number, labelId: number): Promise<void> => {
-      await api.delete(`/cards/${cardId}/labels/${labelId}`);
-    },
+      // Labels
+      getLabels: async (boardId: number): Promise<Label[]> => {
+        const response = await api.get<Label[]>(`/boards/${boardId}/labels`);
+        return response.data;
+      },
+      createLabel: async (
+        boardId: number,
+        labelData: { name: string; color: string }
+      ): Promise<Label> => {
+        const response = await api.post<Label>(`/boards/${boardId}/labels`, labelData);
+        return response.data;
+      },
+      addLabelToCard: async (cardId: number, labelId: number): Promise<any> => {
+        const response = await api.post(`/cards/${cardId}/labels`, { label_id: labelId });
+        return response.data;
+      },
+      removeLabelFromCard: async (cardId: number, labelId: number): Promise<void> => {
+        await api.delete(`/cards/${cardId}/labels/${labelId}`);
+      },
 
-    // Checklists
-    createChecklist: async (
-      cardId: number,
-      checklistData: { name: string; pos: number }
-    ): Promise<Checklist> => {
-      const response = await api.post<Checklist>(`/cards/${cardId}/checklists`, checklistData);
-      return response.data;
-    },
-    deleteChecklist: async (id: number): Promise<void> => {
-      await api.delete(`/checklists/${id}`);
-    },
+      // Checklists
+      createChecklist: async (
+        cardId: number,
+        checklistData: { name: string; pos: number }
+      ): Promise<Checklist> => {
+        const response = await api.post<Checklist>(`/cards/${cardId}/checklists`, checklistData);
+        return response.data;
+      },
+      deleteChecklist: async (id: number): Promise<void> => {
+        await api.delete(`/checklists/${id}`);
+      },
 
-    // Check Items
-    createCheckItem: async (
-      checklistId: number,
-      itemData: {
-        name: string;
-        pos: number;
-        state: 'incomplete' | 'complete';
-        due?: string | null;
-      }
-    ): Promise<any> => {
-      const response = await api.post(`/checklists/${checklistId}/items`, itemData);
-      return response.data;
-    },
-    updateCheckItem: async (
-      id: number,
-      itemData: {
-        name: string;
-        pos: number;
-        state: 'incomplete' | 'complete';
-        due?: string | null;
-      }
-    ): Promise<any> => {
-      const response = await api.put(`/check-items/${id}`, itemData);
-      return response.data;
-    },
-    deleteCheckItem: async (id: number): Promise<void> => {
-      await api.delete(`/check-items/${id}`);
-    },
+      // Check Items
+      createCheckItem: async (
+        checklistId: number,
+        itemData: {
+          name: string;
+          pos: number;
+          state: 'incomplete' | 'complete';
+          due?: string | null;
+        }
+      ): Promise<any> => {
+        const response = await api.post(`/checklists/${checklistId}/items`, itemData);
+        return response.data;
+      },
+      updateCheckItem: async (
+        id: number,
+        itemData: {
+          name: string;
+          pos: number;
+          state: 'incomplete' | 'complete';
+          due?: string | null;
+        }
+      ): Promise<any> => {
+        const response = await api.put(`/check-items/${id}`, itemData);
+        return response.data;
+      },
+      deleteCheckItem: async (id: number): Promise<void> => {
+        await api.delete(`/check-items/${id}`);
+      },
 
-    // Comments
-    getComments: async (cardId: number): Promise<CommentWithUser[]> => {
-      const response = await api.get<CommentWithUser[]>(`/cards/${cardId}/comments`);
-      return response.data;
-    },
-    createComment: async (cardId: number, commentData: { text: string }): Promise<any> => {
-      const response = await api.post(`/cards/${cardId}/comments`, commentData);
-      return response.data;
-    },
-    updateComment: async (id: number, commentData: { text: string }): Promise<any> => {
-      const response = await api.put(`/comments/${id}`, commentData);
-      return response.data;
-    },
-    deleteComment: async (id: number): Promise<void> => {
-      await api.delete(`/comments/${id}`);
-    },
-  };
+      // Comments
+      getComments: async (cardId: number): Promise<CommentWithUser[]> => {
+        const response = await api.get<CommentWithUser[]>(`/cards/${cardId}/comments`);
+        return response.data;
+      },
+      createComment: async (cardId: number, commentData: { text: string }): Promise<any> => {
+        const response = await api.post(`/cards/${cardId}/comments`, commentData);
+        return response.data;
+      },
+      updateComment: async (id: number, commentData: { text: string }): Promise<any> => {
+        const response = await api.put(`/comments/${id}`, commentData);
+        return response.data;
+      },
+      deleteComment: async (id: number): Promise<void> => {
+        await api.delete(`/comments/${id}`);
+      },
+    }),
+    []
+  );
 }
diff --git a/frontend/src/hooks/useBoard.ts b/frontend/src/hooks/useBoard.ts
index cec080b..0ac5ab8 100644
--- a/frontend/src/hooks/useBoard.ts
+++ b/frontend/src/hooks/useBoard.ts
@@ -29,7 +29,7 @@ export function useBoard(boardId: number) {
       });
       return null;
     }
-  }, [boardId, getBoard, withLoader, addNotification]);
+  }, [getBoard, boardId, withLoader, addNotification]);
 
   const updateBoardData = (updatedBoard: BoardWithDetails) => {
     setBoard(updatedBoard);
diff --git a/frontend/src/pages/BoardCreate.tsx b/frontend/src/pages/BoardCreate.tsx
index ba0aa17..f689a69 100644
--- a/frontend/src/pages/BoardCreate.tsx
+++ b/frontend/src/pages/BoardCreate.tsx
@@ -3,7 +3,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useNavigate, Link } from 'react-router-dom';
 import { useBoards } from '../hooks/useBoards';
-import { useToast } from '@/context/toasts';
+import { useToast } from '../context/toasts/useToast';
 
 const boardSchema = z.object({
   name: z
diff --git a/frontend/src/pages/BoardEdit.tsx b/frontend/src/pages/BoardEdit.tsx
index 8178cd8..282cb1e 100644
--- a/frontend/src/pages/BoardEdit.tsx
+++ b/frontend/src/pages/BoardEdit.tsx
@@ -5,7 +5,7 @@ import { useNavigate, Link, useParams } from 'react-router-dom';
 import { useBoard } from '../hooks/useBoard';
 import { useBoards } from '../hooks/useBoards';
 import { useEffect } from 'react';
-import { useToast } from '@/context/toasts';
+import { useToast } from '../context/toasts/useToast';
 
 const boardSchema = z.object({
   name: z
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 6cdbfd6..7d87cd8 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useAuth } from '../hooks/useAuth';
-import { useToast } from '@/context/toasts';
+import { useToast } from '../context/toasts/useToast';
 
 export default function Login() {
   const [email, setEmail] = useState('');