Improved tasks routing

cvat-ui/src/components/header/header.tsx

@@ -57,7 +57,7 @@ function HeaderContainer(props: Props): JSX.Element {
                     type='link'
                     value='tasks'
                     onClick={
-                        (): void => props.history.push('/tasks')
+                        (): void => props.history.push('/tasks?page=1')
                     }
                 >
                     Tasks

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

@@ -43,6 +43,31 @@ function getSearchField(gettingQuery: TasksQuery): string {
     return searchString.slice(0, -5);
 }
 
+function updateQuery(previousQuery: TasksQuery, searchString: string): TasksQuery {
+    const params = new URLSearchParams(searchString);
+    const query = { ...previousQuery };
+    for (const field of Object.keys(query)) {
+        if (params.has(field)) {
+            const value = params.get(field);
+            if (value) {
+                if (field === 'id' || field === 'page') {
+                    if (Number.isInteger(+value)) {
+                        query[field] = +value;
+                    }
+                } else {
+                    query[field] = value;
+                }
+            }
+        } else if (field === 'page') {
+            query[field] = 1;
+        } else {
+            query[field] = null;
+        }
+    }
+
+    return query;
+}
+
 class TasksPageComponent extends React.PureComponent<TasksPageProps & RouteComponentProps> {
     public componentDidMount(): void {
         const {
@@ -50,38 +75,30 @@ class TasksPageComponent extends React.PureComponent<TasksPageProps & RouteCompo
             location,
             onGetTasks,
         } = this.props;
-        const params = new URLSearchParams(location.search);
 
-        const query = { ...gettingQuery };
-        for (const field of Object.keys(query)) {
-            if (params.has(field)) {
-                const value = params.get(field);
-                if (value) {
-                    if (field === 'id' || field === 'page') {
-                        if (Number.isInteger(+value)) {
-                            query[field] = +value;
-                        }
-                    } else {
-                        query[field] = value;
-                    }
-                }
-            } else if (field === 'page') {
-                query[field] = 1;
-            } else {
-                query[field] = null;
-            }
-        }
-
-        this.updateURL(query);
+        const query = updateQuery(gettingQuery, location.search);
         onGetTasks(query);
     }
 
-    private handleSearch = (value: string): void => {
+    public componentDidUpdate(prevProps: TasksPageProps & RouteComponentProps): void {
         const {
+            location,
             gettingQuery,
             onGetTasks,
         } = this.props;
 
+        if (prevProps.location.search !== location.search) {
+            // get new tasks if any query changes
+            const query = updateQuery(gettingQuery, location.search);
+            onGetTasks(query);
+        }
+    }
+
+    private handleSearch = (value: string): void => {
+        const {
+            gettingQuery,
+        } = this.props;
+
         const query = { ...gettingQuery };
         const search = value.replace(/\s+/g, ' ').replace(/\s*:+\s*/g, ':').trim();
 
@@ -114,19 +131,19 @@ class TasksPageComponent extends React.PureComponent<TasksPageProps & RouteCompo
         }
 
         this.updateURL(query);
-        onGetTasks(query);
     };
 
     private handlePagination = (page: number): void => {
         const {
             gettingQuery,
-            onGetTasks,
         } = this.props;
-        const query = { ...gettingQuery };
 
+        // modify query object
+        const query = { ...gettingQuery };
         query.page = page;
+
+        // update url according to new query object
         this.updateURL(query);
-        onGetTasks(query);
     };
 
     private updateURL(gettingQuery: TasksQuery): void {
@@ -137,9 +154,16 @@ class TasksPageComponent extends React.PureComponent<TasksPageProps & RouteCompo
                 queryString += `${field}=${gettingQuery[field]}&`;
             }
         }
-        history.replace({
-            search: queryString.slice(0, -1),
-        });
+
+        const oldQueryString = history.location.search;
+        if (oldQueryString !== queryString) {
+            history.push({
+                search: queryString.slice(0, -1),
+            });
+
+            // force update if any changes
+            this.forceUpdate();
+        }
     }
 
     public render(): JSX.Element {