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

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">

src/css/App.css

@@ -100,6 +100,15 @@ ul{
     max-width: 1200px;
 }  
 
+.page-container {
+    background-color: #1f2430;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin: 10px auto;
+    max-width: 1200px;
+}  
+
 h2 {
     text-align: center;
     color: #CAD1D8;

src/css/BoardList.css

@@ -2,7 +2,7 @@
     background-color: #2b3245;
     padding: 10px;
     border-radius: 6px;
-    margin-bottom: 20px;
+    margin-bottom: 16px;
 }
 
 .nav-sort{
@@ -38,10 +38,11 @@
 
 .kan-ban-list ul button{
     border-radius: 6px;
+    margin-bottom: 0px;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
-    background-color: #3d4763;;
+    background-color: #3d4763;
 }
 
 .kan-ban-list ul button:hover{
@@ -55,9 +56,52 @@
 
 .sort-row p, .sort-row h3{
     margin: 4px 0px;
+    word-break: break-all;
 }
 
 .sort-row+.sort-row p {
     margin: 16px 0px 0px 0px;
 }
 
+.inf h3,
+.kan-ban-list-sort h3{
+    font-size: 1.7em;
+}
+
+
+
+
+
+
+/*пагинация*/
+.pagination {
+    background-color: #2b3245;
+    display: flex;
+    gap: 8px;
+    margin-top: 16px;
+    flex-wrap: wrap;
+    padding: 10px;
+    border-radius: 6px;
+}
+
+.pagination button {
+    padding: 0px;
+    background-color: #3d4763;
+    cursor: pointer;
+    width: 34px;
+    height: 34px;
+    margin: 0px
+}
+
+.pagination button:hover:not(.active) {
+    background-color: #5c6b96;
+}
+
+.pagination button.active {
+    background-color: #007bff;
+}
+
+.pagination button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}