diff --git a/cvat-ui/src/components/header/header.tsx b/cvat-ui/src/components/header/header.tsx index 707d7de6..69b76e22 100644 --- a/cvat-ui/src/components/header/header.tsx +++ b/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 diff --git a/cvat-ui/src/components/tasks-page/tasks-page.tsx b/cvat-ui/src/components/tasks-page/tasks-page.tsx index a0ebf786..e0633f28 100644 --- a/cvat-ui/src/components/tasks-page/tasks-page.tsx +++ b/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 { public componentDidMount(): void { const { @@ -50,38 +75,30 @@ class TasksPageComponent extends React.PureComponent { + 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 { 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