diff --git a/scm-ui/src/groups/containers/Groups.js b/scm-ui/src/groups/containers/Groups.js index ea8f2c6cd3..a11ff4eeaf 100644 --- a/scm-ui/src/groups/containers/Groups.js +++ b/scm-ui/src/groups/containers/Groups.js @@ -2,20 +2,10 @@ import React from "react"; import { connect } from "react-redux"; import { translate } from "react-i18next"; -import type { Group } from "@scm-manager/ui-types"; -import type { PagedCollection } from "@scm-manager/ui-types"; +import { compose } from "redux"; import type { History } from "history"; import queryString from "query-string"; -import { - Page, - PageActions, - Button, - LinkPaginator, - getPageFromMatch -} from "@scm-manager/ui-components"; -import { GroupTable } from "./../components/table"; -import CreateGroupButton from "../components/buttons/CreateGroupButton"; - +import type { Group, PagedCollection } from "@scm-manager/ui-types"; import { fetchGroupsByPage, fetchGroupsByLink, @@ -25,8 +15,16 @@ import { isPermittedToCreateGroups, selectListAsCollection } from "../modules/groups"; +import { + Page, + PageActions, + Button, + LinkPaginator, + getPageFromMatch +} from "@scm-manager/ui-components"; +import { GroupTable } from "./../components/table"; +import CreateGroupButton from "../components/buttons/CreateGroupButton"; import { getGroupsLink } from "../../modules/indexResource"; -import { compose } from "redux"; type Props = { groups: Group[], diff --git a/scm-ui/src/users/containers/Users.js b/scm-ui/src/users/containers/Users.js index e2eccc3ecf..546eb635cb 100644 --- a/scm-ui/src/users/containers/Users.js +++ b/scm-ui/src/users/containers/Users.js @@ -1,9 +1,10 @@ // @flow import React from "react"; -import type { History } from "history"; import { connect } from "react-redux"; import { translate } from "react-i18next"; - +import type { History } from "history"; +import queryString from "query-string"; +import type { User, PagedCollection } from "@scm-manager/ui-types"; import { fetchUsersByPage, fetchUsersByLink, @@ -13,16 +14,15 @@ import { isFetchUsersPending, getFetchUsersFailure } from "../modules/users"; - import { Page, PageActions, Button, CreateButton, - Paginator + LinkPaginator, + getPageFromMatch } from "@scm-manager/ui-components"; import { UserTable } from "./../components/table"; -import type { User, PagedCollection } from "@scm-manager/ui-types"; import { getUsersLink } from "../../modules/indexResource"; type Props = { @@ -37,37 +37,47 @@ type Props = { // context objects t: string => string, history: History, + location: any, // dispatch functions - fetchUsersByPage: (link: string, page: number, filter?: string) => void, + fetchUsersByPage: (link: string, page: number, filter?: any) => void, fetchUsersByLink: (link: string) => void }; -class Users extends React.Component { - componentDidMount() { - this.props.fetchUsersByPage(this.props.usersLink, this.props.page); +type State = { + page: number +}; + +class Users extends React.Component { + constructor(props: Props) { + super(props); + + this.state = { + page: -1 + }; } - onPageChange = (link: string) => { - this.props.fetchUsersByLink(link); - }; + componentDidMount() { + const { fetchUsersByPage, usersLink, page } = this.props; + fetchUsersByPage(usersLink, page, this.getQueryString()); + this.setState({ page: page }); + } - /** - * reflect page transitions in the uri - */ - componentDidUpdate() { - const { page, list } = this.props; - if (list && (list.page || list.page === 0)) { - // backend starts paging by 0 - const statePage: number = list.page + 1; - if (page !== statePage) { - this.props.history.push(`/users/${statePage}`); + componentDidUpdate = (prevProps: Props) => { + const { list, page, location, fetchUsersByPage, usersLink } = this.props; + if (list && page) { + if ( + page !== this.state.page || + prevProps.location.search !== location.search + ) { + fetchUsersByPage(usersLink, page, this.getQueryString()); + this.setState({ page: page }); } } - } + }; render() { - const { users, loading, error, t } = this.props; + const { users, loading, error, history, t } = this.props; return ( { loading={loading || !users} error={error} filter={filter => { - this.props.fetchUsersByPage(this.props.usersLink, this.props.page, filter); + history.push("/users/?q=" + filter); }} > @@ -86,26 +96,31 @@ class Users extends React.Component { ); } - renderPaginator() { - const { list } = this.props; + renderPaginator = () => { + const { list, page } = this.props; if (list) { - return ; + return ( + + ); + } + return null; + }; + + renderCreateButton() { + const { canAddUsers, t } = this.props; + if (canAddUsers) { + return ; } return null; } - renderCreateButton() { - const { t } = this.props; - if (this.props.canAddUsers) { - return ; - } else { - return; - } - } - renderPageActionCreateButton() { - const { t } = this.props; - if (this.props.canAddUsers) { + const { canAddUsers, t } = this.props; + if (canAddUsers) { return (