Версия 1.0.6 Исправлена ошибка, когда при выходе из редактирования статьи не сохранялись состояния фильтров и пагинации.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-react-typescript-starter",
   "private": true,
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/ArticleList.tsx

@@ -6,8 +6,8 @@ import { Pencil, Trash2, ImagePlus, ToggleLeft, ToggleRight, Plus } from 'lucide
 import MinutesWord from './Words/MinutesWord';
 import { useAuthStore } from '../stores/authStore';
 import { usePermissions } from '../hooks/usePermissions';
-import {Pagination} from "./Pagination.tsx";
-import {useSearchParams} from "react-router-dom";
+import { Pagination } from "./Pagination";
+import { useSearchParams } from "react-router-dom";
 
 interface ArticleListProps {
   articles: Article[];
@@ -32,15 +32,16 @@ export const ArticleList = React.memo(function ArticleList({
 }: ArticleListProps) {
   const { user } = useAuthStore();
   const { availableCategoryIds, availableCityIds, isAdmin } = usePermissions();
-
   const [searchParams, setSearchParams] = useSearchParams();
-
+  
+  // Получаем значения фильтров из URL
+  const currentPage = Math.max(1, parseInt(searchParams.get('page') || '1', 10));
+  const filterCategoryId = parseInt(searchParams.get('categoryId') || '0', 10);
+  const filterCityId = parseInt(searchParams.get('cityId') || '0', 10);
+  const showDraftOnly = searchParams.get('draftOnly') === 'true';
+  
   const [totalPages, setTotalPages] = useState(1);
   const [totalArticles, setTotalArticles] = useState(0);
-  const currentPage = Math.max(1, parseInt(searchParams.get('page') || '1', 10));
-  const [filterCategoryId, setFilterCategoryId] = useState(0);
-  const [filterCityId, setFilterCityId] = useState(0);
-  const [showDraftOnly, setShowDraftOnly] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
@@ -49,7 +50,14 @@ export const ArticleList = React.memo(function ArticleList({
       setLoading(true);
       try {
         const response = await axios.get('/api/articles/', {
-          params: { page: currentPage, categoryId: filterCategoryId, cityId: filterCityId, isDraft: showDraftOnly, userId: user?.id, isAdmin },
+          params: {
+            page: currentPage,
+            categoryId: filterCategoryId,
+            cityId: filterCityId,
+            isDraft: showDraftOnly,
+            userId: user?.id,
+            isAdmin
+          },
         });
         setArticles(response.data.articles);
         setTotalPages(response.data.totalPages);
@@ -69,14 +77,22 @@ export const ArticleList = React.memo(function ArticleList({
     if (article) {
       try {
         await axios.put(
-            `/api/articles/active/${id}`,
-            { isActive: !article.isActive },
-            { headers: { Authorization: `Bearer ${localStorage.getItem('token')}` } }
+          `/api/articles/active/${id}`,
+          { isActive: !article.isActive },
+          { headers: { Authorization: `Bearer ${localStorage.getItem('token')}` } }
         );
         setArticles(prev => prev.map(a => (a.id === id ? { ...a, isActive: !a.isActive } : a)));
+        
         // Обновляем список с сервера после изменения статуса
         const response = await axios.get('/api/articles/', {
-          params: { page: currentPage, categoryId: filterCategoryId, cityId: filterCityId, isDraft: showDraftOnly, userId: user?.id, isAdmin },
+          params: {
+            page: currentPage,
+            categoryId: filterCategoryId,
+            cityId: filterCityId,
+            isDraft: showDraftOnly,
+            userId: user?.id,
+            isAdmin
+          },
         });
         setArticles(response.data.articles);
         setTotalPages(response.data.totalPages);
@@ -88,179 +104,204 @@ export const ArticleList = React.memo(function ArticleList({
   };
 
   const handlePageChange = (page: number) => {
-    searchParams.set('page', page.toString());
-    setSearchParams(searchParams);
+    const newParams = new URLSearchParams(searchParams);
+    newParams.set('page', page.toString());
+    setSearchParams(newParams);
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
+  // Обработчики изменения фильтров
+  const handleCategoryChange = (categoryId: number) => {
+    const newParams = new URLSearchParams(searchParams);
+    if (categoryId === 0) {
+      newParams.delete('categoryId');
+    } else {
+      newParams.set('categoryId', categoryId.toString());
+    }
+    newParams.set('page', '1');
+    setSearchParams(newParams);
+  };
+
+  const handleCityChange = (cityId: number) => {
+    const newParams = new URLSearchParams(searchParams);
+    if (cityId === 0) {
+      newParams.delete('cityId');
+    } else {
+      newParams.set('cityId', cityId.toString());
+    }
+    newParams.set('page', '1');
+    setSearchParams(newParams);
+  };
+
+  const handleDraftOnlyChange = (checked: boolean) => {
+    const newParams = new URLSearchParams(searchParams);
+    if (checked) {
+      newParams.set('draftOnly', 'true');
+    } else {
+      newParams.delete('draftOnly');
+    }
+    newParams.set('page', '1');
+    setSearchParams(newParams);
+  };
+
   const hasNoPermissions = availableCategoryIds.length === 0 || availableCityIds.length === 0;
 
   return (
-      <div className="bg-white rounded-lg shadow-sm mb-8">
-        <div className="px-6 py-4 border-b border-gray-200">
-          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-            <h2 className="text-lg font-medium text-gray-900">Статьи</h2>
-            <div className="flex flex-wrap gap-4">
-              <select
-                  value={filterCategoryId}
-                  onChange={(e) => {
-                    setFilterCategoryId(Number(e.target.value));
-                    searchParams.set('page', '1');
-                    setSearchParams(searchParams);
-                  }}
-                  className="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
+    <div className="bg-white rounded-lg shadow-sm mb-8">
+      <div className="px-6 py-4 border-b border-gray-200">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <h2 className="text-lg font-medium text-gray-900">Статьи</h2>
+          <div className="flex flex-wrap gap-4">
+            <select 
+              value={filterCategoryId}
+              onChange={(e) => handleCategoryChange(Number(e.target.value))}
+              className="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
+            >
+              <option value="0">Все категории</option>
+              {availableCategoryIds.map(cat => (
+                <option key={cat} value={cat}>
+                  {CategoryTitles[cat]}
+                </option>
+              ))}
+            </select>
+            
+            <select 
+              value={filterCityId}
+              onChange={(e) => handleCityChange(Number(e.target.value))}
+              className="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
+            >
+              <option value="0">Все столицы</option>
+              {availableCityIds.map(c => (
+                <option key={c} value={c}>
+                  {CityTitles[c]}
+                </option>
+              ))}
+            </select>
+            
+            <label className="inline-flex items-center">
+              <input 
+                type="checkbox"
+                checked={showDraftOnly}
+                onChange={(e) => handleDraftOnlyChange(e.target.checked)}
+                className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+              />
+              <span className="ml-2 text-sm text-gray-700">Только черновики</span>
+            </label>
+            
+            {!hasNoPermissions && (
+              <button 
+                onClick={onNewArticle}
+                className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
               >
-                <option value="">Все категории</option>
-                {availableCategoryIds.map(cat => (
-                    <option key={cat} value={cat}>
-                      {CategoryTitles[cat]}
-                    </option>
-                ))}
-              </select>
-              <select
-                  value={filterCityId}
-                  onChange={(e) => {
-                    setFilterCityId(Number(e.target.value));
-                    searchParams.set('page', '1');
-                    setSearchParams(searchParams);
-                  }}
-                  className="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
-              >
-                <option value="">Все столицы</option>
-                {availableCityIds.map(c => (
-                    <option key={c} value={c}>
-                      {CityTitles[c]}
-                    </option>
-                ))}
-              </select>
-              <label className="inline-flex items-center">
-                <input
-                    type="checkbox"
-                    checked={showDraftOnly}
-                    onChange={(e) => {
-                      setShowDraftOnly(e.target.checked)
-                      searchParams.set('page', '1');
-                      setSearchParams(searchParams);
-                    }}
-                    className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-                />
-                <span className="ml-2 text-sm text-gray-700">Только черновики</span>
-              </label>
-              {!hasNoPermissions && (
-                  <button
-                      onClick={onNewArticle}
-                      className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-                  >
-                    <Plus size={16} className="mr-2" /> Новая статья
-                  </button>
-              )}
-            </div>
-            <div className="text-sm text-gray-500">
-              <p className="font-bold text-gray-600">
-                Статьи {Math.min((currentPage - 1) * ARTICLES_PER_PAGE + 1, totalArticles)}
-                -
-                {Math.min(currentPage * ARTICLES_PER_PAGE, totalArticles)} из {totalArticles}
-              </p>
-            </div>
+                <Plus size={16} className="mr-2" />
+                Новая статья
+              </button>
+            )}
+          </div>
+          <div className="text-sm text-gray-500">
+            <p className="font-bold text-gray-600">
+              Статьи {Math.min((currentPage - 1) * ARTICLES_PER_PAGE + 1, totalArticles)} - {Math.min(currentPage * ARTICLES_PER_PAGE, totalArticles)} из {totalArticles}
+            </p>
           </div>
         </div>
-        {loading ? (
-            <div className="flex justify-center p-6">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-            </div>
-        ) : hasNoPermissions ? (
-            <div className="p-6 text-center">
-              <h1 className="text-2xl font-bold text-gray-900 mb-4">Недостаточно прав</h1>
-              <p className="text-gray-600">У вас нет прав на создание и редактирование статей. Свяжитесь с администратором.</p>
-            </div>
-        ) : (
-            <>
-              <ul className="divide-y divide-gray-200">
-                {articles.map(article => (
-                    <li key={article.id} className={`px-6 py-4 ${!article.isActive ? 'bg-gray-200' : ''}`}>
-                      <div className="flex items-center justify-between">
-                        <div className="flex-1 min-w-0">
-                          <h3 className="text-sm font-medium text-gray-900 truncate">{article.title}</h3>
-                          <p className="text-sm text-gray-500">
-                            · {CategoryTitles[article.categoryId]} · {CityTitles[article.cityId]} · {article.readTime}{' '}
-                            <MinutesWord minutes={article.readTime} /> чтения
-                          </p>
-                          {(() => {
-                            const writerAuthors = article.authors
-                                .filter(a => a.role === 'WRITER')
-                                .sort((a, b) => (a.author.order ?? 0) - (b.author.order ?? 0));
-                            if (!writerAuthors) return null;
-
-                            return (
-                                <div className="flex items-center text-xs text-gray-500 mt-1">
-
-                                  {writerAuthors.map((authorLink) => (
-                                      <img
-                                          key={authorLink.author.id}
-                                          src={authorLink.author.avatarUrl}
-                                          alt={authorLink.author.displayName}
-                                          className="h-6 w-6 rounded-full mr-1"
-                                      />
-                                  ))}
-
-                                  <div>
-                                    <p className="text-sm font-medium text-gray-900">
-                                      {writerAuthors.map((a, i) => (
-                                          <span key={a.author.id}>
-                                            {a.author.displayName}
-                                            {i < writerAuthors.length - 1 ? ', ' : ''}
-                                          </span>
-                                      ))}
-                                    </p>
-                                  </div>
-                                </div>
-                            );
-                          })()}
-                        </div>
-                        <div className="flex items-center gap-4 ml-4">
-                          <button
-                              onClick={() => handleToggleActive(article.id)}
-                              className={`p-2 rounded-full hover:bg-gray-100 ${article.isActive ? 'text-green-600' : 'text-gray-400'}`}
-                              title={article.isActive ? 'Set as draft' : 'Publish article'}
-                          >
-                            {article.isActive ? <ToggleRight size={18} /> : <ToggleLeft size={18} />}
-                          </button>
-                          <button
-                              onClick={() => onEdit(article.id)}
-                              className="p-2 text-gray-400 hover:text-blue-600 rounded-full hover:bg-blue-50"
-                          >
-                            <Pencil size={18} />
-                          </button>
-                          <button
-                              onClick={() => onShowGallery(article.id)}
-                              className="p-2 text-gray-400 hover:text-blue-600 rounded-full hover:bg-blue-50"
-                          >
-                            <ImagePlus size={18} />
-                          </button>
-                          <button
-                              onClick={() => onDelete(article.id)}
-                              className="p-2 text-gray-400 hover:text-red-600 rounded-full hover:bg-red-50"
-                          >
-                            <Trash2 size={18} />
-                          </button>
-                        </div>
-                      </div>
-                    </li>
-                ))}
-              </ul>
-              {totalPages > 1 && (
-                  <Pagination
-                      currentPage={currentPage}
-                      totalPages={totalPages}
-                      onPageChange={handlePageChange}
-                  />
-              )}
-              <span className="ml-2 text-sm text-gray-700"></span>
-            </>
-        )}
-        {error && isAdmin && (
-            <div className="p-4 text-red-700 bg-red-50 rounded-md">{error}</div>
-        )}
       </div>
+      
+      {loading ? (
+        <div className="flex justify-center p-6">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+        </div>
+      ) : hasNoPermissions ? (
+        <div className="p-6 text-center">
+          <h1 className="text-2xl font-bold text-gray-900 mb-4">Недостаточно прав</h1>
+          <p className="text-gray-600">У вас нет прав на создание и редактирование статей. Свяжитесь с администратором.</p>
+        </div>
+      ) : (
+        <>
+          <ul className="divide-y divide-gray-200">
+            {articles.map(article => (
+              <li key={article.id} className={`px-6 py-4 ${!article.isActive ? 'bg-gray-200' : ''}`}>
+                <div className="flex items-center justify-between">
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-sm font-medium text-gray-900 truncate">{article.title}</h3>
+                    <p className="text-sm text-gray-500">
+                      · {CategoryTitles[article.categoryId]} · {CityTitles[article.cityId]} · {article.readTime}{' '}
+                      <MinutesWord minutes={article.readTime} /> чтения
+                    </p>
+                    {(() => {
+                      const writerAuthors = article.authors
+                        .filter(a => a.role === 'WRITER')
+                        .sort((a, b) => (a.author.order ?? 0) - (b.author.order ?? 0));
+                      if (!writerAuthors) return null;
+                      return (
+                        <div className="flex items-center text-xs text-gray-500 mt-1">
+                          {writerAuthors.map((authorLink) => (
+                            <img 
+                              key={authorLink.author.id}
+                              src={authorLink.author.avatarUrl}
+                              alt={authorLink.author.displayName}
+                              className="h-6 w-6 rounded-full mr-1"
+                            />
+                          ))}
+                          <div>
+                            <p className="text-sm font-medium text-gray-900">
+                              {writerAuthors.map((a, i) => (
+                                <span key={a.author.id}>
+                                  {a.author.displayName}
+                                  {i < writerAuthors.length - 1 ? ', ' : ''}
+                                </span>
+                              ))}
+                            </p>
+                          </div>
+                        </div>
+                      );
+                    })()}
+                  </div>
+                  <div className="flex items-center gap-4 ml-4">
+                    <button 
+                      onClick={() => handleToggleActive(article.id)}
+                      className={`p-2 rounded-full hover:bg-gray-100 ${article.isActive ? 'text-green-600' : 'text-gray-400'}`}
+                      title={article.isActive ? 'Set as draft' : 'Publish article'}
+                    >
+                      {article.isActive ? <ToggleRight size={18} /> : <ToggleLeft size={18} />}
+                    </button>
+                    <button 
+                      onClick={() => onEdit(article.id)}
+                      className="p-2 text-gray-400 hover:text-blue-600 rounded-full hover:bg-blue-50"
+                    >
+                      <Pencil size={18} />
+                    </button>
+                    <button 
+                      onClick={() => onShowGallery(article.id)}
+                      className="p-2 text-gray-400 hover:text-blue-600 rounded-full hover:bg-blue-50"
+                    >
+                      <ImagePlus size={18} />
+                    </button>
+                    <button 
+                      onClick={() => onDelete(article.id)}
+                      className="p-2 text-gray-400 hover:text-red-600 rounded-full hover:bg-red-50"
+                    >
+                      <Trash2 size={18} />
+                    </button>
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+          
+          {totalPages > 1 && (
+            <Pagination 
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPageChange={handlePageChange}
+            />
+          )}
+          <span className="ml-2 text-sm text-gray-700"></span>
+        </>
+      )}
+      
+      {error && isAdmin && (
+        <div className="p-4 text-red-700 bg-red-50 rounded-md">{error}</div>
+      )}
+    </div>
   );
 });