Decoded URIs

cvat-ui/src/components/jobs-page/jobs-page.tsx

@@ -13,6 +13,7 @@ import Empty from 'antd/lib/empty';
 import Text from 'antd/lib/typography/Text';
 
 import FeedbackComponent from 'components/feedback/feedback';
+import { updateHistoryFromQuery } from 'components/resource-sorting-filtering';
 import { CombinedState, Indexable } from 'reducers/interfaces';
 import { getJobsAsync } from 'actions/jobs-actions';
 
@@ -40,15 +41,8 @@ function JobsPageComponent(): JSX.Element {
     }, []);
 
     useEffect(() => {
-        const newQueryString = new URLSearchParams({
-            ...(query.filter ? { filter: query.filter } : {}),
-            ...(query.search ? { search: query.search } : {}),
-            ...(query.sort ? { sort: query.sort } : {}),
-            ...(query.page ? { page: `${query.page}` } : {}),
-        });
-
         history.replace({
-            search: newQueryString.toString(),
+            search: updateHistoryFromQuery(query),
         });
     }, [query]);
 

cvat-ui/src/components/project-page/project-page.tsx

@@ -23,7 +23,9 @@ import TaskItem from 'components/tasks-page/task-item';
 import MoveTaskModal from 'components/move-task-modal/move-task-modal';
 import ModelRunnerDialog from 'components/model-runner-modal/model-runner-dialog';
 import ImportDatasetModal from 'components/import-dataset-modal/import-dataset-modal';
-import { SortingComponent, ResourceFilterHOC, defaultVisibility } from 'components/resource-sorting-filtering';
+import {
+    SortingComponent, ResourceFilterHOC, defaultVisibility, updateHistoryFromQuery,
+} from 'components/resource-sorting-filtering';
 import DetailsComponent from './details';
 import ProjectTopBar from './top-bar';
 
@@ -82,15 +84,8 @@ export default function ProjectPageComponent(): JSX.Element {
     }, []);
 
     useEffect(() => {
-        const search = new URLSearchParams({
-            ...(tasksQuery.filter ? { filter: tasksQuery.filter } : {}),
-            ...(tasksQuery.search ? { search: tasksQuery.search } : {}),
-            ...(tasksQuery.sort ? { sort: tasksQuery.sort } : {}),
-            ...(tasksQuery.page ? { page: `${tasksQuery.page}` } : {}),
-        });
-
         history.replace({
-            search: search.toString(),
+            search: updateHistoryFromQuery(tasksQuery),
         });
     }, [tasksQuery]);
 

cvat-ui/src/components/projects-page/projects-page.tsx

@@ -11,6 +11,7 @@ import Spin from 'antd/lib/spin';
 import { CombinedState, Indexable } from 'reducers/interfaces';
 import { getProjectsAsync, restoreProjectAsync } from 'actions/projects-actions';
 import FeedbackComponent from 'components/feedback/feedback';
+import { updateHistoryFromQuery } from 'components/resource-sorting-filtering';
 import ImportDatasetModal from 'components/import-dataset-modal/import-dataset-modal';
 import EmptyListComponent from './empty-list';
 import TopBarComponent from './top-bar';
@@ -40,15 +41,8 @@ export default function ProjectsPageComponent(): JSX.Element {
     }, []);
 
     useEffect(() => {
-        const search = new URLSearchParams({
-            ...(query.filter ? { filter: query.filter } : {}),
-            ...(query.search ? { search: query.search } : {}),
-            ...(query.sort ? { sort: query.sort } : {}),
-            ...(query.page ? { page: `${query.page}` } : {}),
-        });
-
         history.replace({
-            search: search.toString(),
+            search: updateHistoryFromQuery(query),
         });
     }, [query]);
 

cvat-ui/src/components/resource-sorting-filtering/index.ts

@@ -22,7 +22,7 @@ function updateHistoryFromQuery(query: Indexable): string {
         ...(query.page ? { page: `${query.page}` } : {}),
     });
 
-    return search.toString();
+    return decodeURIComponent(search.toString());
 }
 
 export {

cvat-ui/src/components/tasks-page/tasks-page.tsx

@@ -15,6 +15,7 @@ import Pagination from 'antd/lib/pagination';
 
 import { TasksQuery, Indexable } from 'reducers/interfaces';
 import FeedbackComponent from 'components/feedback/feedback';
+import { updateHistoryFromQuery } from 'components/resource-sorting-filtering';
 import TaskListContainer from 'containers/tasks-page/tasks-list';
 import { getTasksAsync, hideEmptyTasks, importTaskAsync } from 'actions/tasks-actions';
 
@@ -51,15 +52,8 @@ function TasksPageComponent(props: Props): JSX.Element {
     }, []);
 
     useEffect(() => {
-        const search = new URLSearchParams({
-            ...(query.filter ? { filter: query.filter } : {}),
-            ...(query.search ? { search: query.search } : {}),
-            ...(query.sort ? { sort: query.sort } : {}),
-            ...(query.page ? { page: `${query.page}` } : {}),
-        });
-
         history.replace({
-            search: search.toString(),
+            search: updateHistoryFromQuery(query),
         });
     }, [query]);