Добавление пагинации в список канбан досок

src/KBBoardsList.js

@@ -16,13 +16,17 @@ const KBBoardsList = () => {
     const [reverse, setReverse] = useState(false);
     const [search_text, setSearchText] = useState('');
     const [page, setPage] = useState(1);
-    const [limit, setLimit] = useState(20);
+    const [limit, setLimit] = useState(5);
 
     const [title, setTitle] = useState('');
     const [description, setDescription] = useState('');
     const [items, setItems] = useState([]);
+    const [totalItems, setTotalItems] = useState(null);
+
 
     
+
+
     function ListItem({ item }) {
         if (!item) return null;
         const openBoard = () => { navigate('/kanban-board/' + item.id); };
@@ -34,26 +38,48 @@ const KBBoardsList = () => {
                         <p><strong>Владелец:</strong> {item.owner_display_name}</p>
                     </div>
                     <div className="sort-row">
-                        <p><strong>Описание:</strong> {item.description}</p>
-                        <p><strong>Обновлено:</strong> {new Date(item.updated_at).toLocaleString()}</p>
+                        <p><strong>Описание:</strong> {item.description ? item.description : 'Отсутствует'}</p>
                     </div>
                 </button>
             </li>
         );
     };
+
+    const Pagination = () => {
+        const totalPages = Math.ceil(totalItems / limit);
+        if (totalPages <= 1) return null;
+        const pages = [];
+        for (let i = 1; i <= totalPages; i++) {
+            pages.push(i);
+        }
+        return (
+            <div className="pagination">
+            {pages.map((pageNum) => (
+                <button
+                    key={pageNum}
+                    onClick={() => setPage(pageNum)}
+                    className={page === pageNum ? 'active' : ''}
+                    disabled={loading}
+                > {pageNum} </button>
+            ))}
+            </div>
+        );
+    };
+
+
     
     const loadBoardList = useCallback(async () => {
         clearTimeout(debounceRef.current);
         debounceRef.current = setTimeout(async () => {
             try {
                 const newList = { sort_method, reverse, search_text, page, limit };
-                console.log("err");
                 const response = await axios.post('/api/boards/list', newList, {withCredentials: true });
-                console.log("err1");
-                if (Array.isArray(response.data)) {
-                    setItems(response.data);
+                if (Array.isArray(response.data.boards)) {
+                    setItems(response.data.boards);
+                    setTotalItems(response.data.count || response.data.boards.length);
                 } else {
                     setItems([]);
+                    setTotalItems(0)
                     if (response.data?.detail === 'Доски отсутствуют.') {
                         console.log('Доски отсутствуют');
                     }
@@ -72,11 +98,11 @@ const KBBoardsList = () => {
             }
             setTimer(400)
         }, timer); 
-    }, [sort_method, reverse, search_text, page, limit, timer, setItems, setError, navigate]);
+    }, [sort_method, reverse, search_text, page, limit, timer, setItems, setTotalItems, setError, navigate]);
 
     useEffect(() => { 
         loadBoardList();
-    }, [loadBoardList]);
+    }, [page, loadBoardList]);
 
     const setFilter = (method) => () => {
         const newMethod = method;
@@ -138,15 +164,16 @@ const KBBoardsList = () => {
 						<button onClick={openCreateModal}>Создать канбан-доску</button>
 					</div>
                     {items.length > 0 ? (
-                      	<ul>
-                        	{items.map((item) => (
-                          		<ListItem key={item.id} item={item} />
-                        	))}
-                      	</ul>
+                        <ul>
+                            {items.map((item) => (
+                                <ListItem key={item.id} item={item} />
+                            ))}
+                        </ul>
                     ) : (
                       	<p>Нет данных</p>
                     )}
    	 			</div>
+                <Pagination />
     		</div>
 			{showCreateModal && (
         		<div className="confirm-modal">