improved filter/search function and used new pagination

scm-ui/src/repos/containers/Overview.js

@@ -19,12 +19,14 @@ import {
   PageActions,
   Button,
   CreateButton,
-  Paginator
+  LinkPaginator,
+  getPageFromMatch
 } from "@scm-manager/ui-components";
 import RepositoryList from "../components/list";
 import { withRouter } from "react-router-dom";
 import type { History } from "history";
 import { getRepositoriesLink } from "../../modules/indexResource";
+import queryString from "query-string";
 
 type Props = {
   page: number,
@@ -34,37 +36,57 @@ type Props = {
   showCreateButton: boolean,
   reposLink: string,
 
-  // dispatched functions
-  fetchRepos: string => void,
-  fetchReposByPage: (link: string, page: number, filter?: string) => void,
-  fetchReposByLink: string => void,
-
   // context props
   t: string => string,
-  history: History
+  history: History,
+  location: any,
+
+  // dispatched functions
+  fetchRepos: string => void,
+  fetchReposByPage: (link: string, page: number, filter?: any) => void,
+  fetchReposByLink: string => void
 };
 
-class Overview extends React.Component<Props> {
+type State = {
-  componentDidMount() {
+  page: number
-    this.props.fetchReposByPage(this.props.reposLink, this.props.page);
+};
+
+class Overview extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      page: -1
+    };
   }
 
-  /**
+  componentDidMount() {
-   * reflect page transitions in the uri
+    const { fetchReposByPage, reposLink, page } = this.props;
-   */
+    fetchReposByPage(reposLink, page, this.getQueryString());
-  componentDidUpdate() {
+    this.setState({ page: page });
-    const { page, collection } = this.props;
+  }
-    if (collection) {
+
-      // backend starts paging by 0
+  componentDidUpdate = (prevProps: Props) => {
-      const statePage: number = collection.page + 1;
+    const {
-      if (page !== statePage) {
+      collection,
-        this.props.history.push(`/repos/${statePage}`);
+      page,
+      location,
+      fetchReposByPage,
+      reposLink
+    } = this.props;
+    if (collection && page) {
+      if (
+        page !== this.state.page ||
+        prevProps.location.search !== location.search
+      ) {
+        fetchReposByPage(reposLink, page, this.getQueryString());
+        this.setState({ page: page });
       }
     }
-  }
+  };
 
   render() {
-    const { error, loading, t } = this.props;
+    const { error, loading, history, t } = this.props;
     return (
       <Page
         title={t("overview.title")}
@@ -72,7 +94,7 @@ class Overview extends React.Component<Props> {
         loading={loading}
         error={error}
         filter={filter => {
-          this.props.fetchReposByPage(this.props.reposLink, this.props.page, filter);
+          history.push("/repos/?q=" + filter);
         }}
       >
         {this.renderList()}
@@ -82,14 +104,18 @@ class Overview extends React.Component<Props> {
   }
 
   renderList() {
-    const { collection, fetchReposByLink } = this.props;
+    const { collection, page } = this.props;
     if (collection) {
       return (
-        <div>
+        <>
           <RepositoryList repositories={collection._embedded.repositories} />
-          <Paginator collection={collection} onPageChange={fetchReposByLink} />
+          <LinkPaginator
+            collection={collection}
+            page={page}
+            filter={this.getQueryString()}
+          />
           {this.renderCreateButton()}
-        </div>
+        </>
       );
     }
     return null;
@@ -120,32 +146,28 @@ class Overview extends React.Component<Props> {
     }
     return null;
   }
+
+  getQueryString = () => {
+    const { location } = this.props;
+    return location.search ? queryString.parse(location.search).q : null;
+  };
 }
 
-const getPageFromProps = props => {
-  let page = props.match.params.page;
-  if (page) {
-    page = parseInt(page, 10);
-  } else {
-    page = 1;
-  }
-  return page;
-};
-
 const mapStateToProps = (state, ownProps) => {
-  const page = getPageFromProps(ownProps);
+  const { match } = ownProps;
   const collection = getRepositoryCollection(state);
   const loading = isFetchReposPending(state);
   const error = getFetchReposFailure(state);
+  const page = getPageFromMatch(match);
   const showCreateButton = isAbleToCreateRepos(state);
   const reposLink = getRepositoriesLink(state);
   return {
-    reposLink,
-    page,
     collection,
     loading,
     error,
-    showCreateButton
+    page,
+    showCreateButton,
+    reposLink
   };
 };
 
@@ -154,7 +176,7 @@ const mapDispatchToProps = dispatch => {
     fetchRepos: (link: string) => {
       dispatch(fetchRepos(link));
     },
-    fetchReposByPage: (link: string, page: number, filter?: string) => {
+    fetchReposByPage: (link: string, page: number, filter?: any) => {
       dispatch(fetchReposByPage(link, page, filter));
     },
     fetchReposByLink: (link: string) => {

scm-ui/src/repos/containers/RepositoryRoot.js

@@ -8,7 +8,7 @@ import {
 } from "../modules/repos";
 
 import { connect } from "react-redux";
-import {Redirect, Route, Switch} from "react-router-dom";
+import { Redirect, Route, Switch } from "react-router-dom";
 import type { Repository } from "@scm-manager/ui-types";
 
 import {
@@ -18,7 +18,8 @@ import {
   SubNavigation,
   NavLink,
   Page,
-  Section, ErrorPage
+  Section,
+  ErrorPage
 } from "@scm-manager/ui-components";
 import { translate } from "react-i18next";
 import RepositoryDetails from "../components/RepositoryDetails";
@@ -33,8 +34,8 @@ import ChangesetView from "./ChangesetView";
 import PermissionsNavLink from "../components/PermissionsNavLink";
 import Sources from "../sources/containers/Sources";
 import RepositoryNavLink from "../components/RepositoryNavLink";
-import {getLinks, getRepositoriesLink} from "../../modules/indexResource";
+import { getLinks, getRepositoriesLink } from "../../modules/indexResource";
-import {binder, ExtensionPoint} from "@scm-manager/ui-extensions";
+import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 
 type Props = {
   namespace: string,
@@ -82,11 +83,13 @@ class RepositoryRoot extends React.Component<Props> {
     const { loading, error, indexLinks, repository, t } = this.props;
 
     if (error) {
-      return <ErrorPage
+      return (
-        title={t("repositoryRoot.errorTitle")}
+        <ErrorPage
-        subtitle={t("repositoryRoot.errorSubtitle")}
+          title={t("repositoryRoot.errorTitle")}
-        error={error}
+          subtitle={t("repositoryRoot.errorSubtitle")}
-      />
+          error={error}
+        />
+      );
     }
 
     if (!repository || loading) {
@@ -101,11 +104,14 @@ class RepositoryRoot extends React.Component<Props> {
       indexLinks
     };
 
-    const redirectUrlFactory = binder.getExtension("repository.redirect", this.props);
+    const redirectUrlFactory = binder.getExtension(
+      "repository.redirect",
+      this.props
+    );
     let redirectedUrl;
-    if (redirectUrlFactory){
+    if (redirectUrlFactory) {
       redirectedUrl = url + redirectUrlFactory(this.props);
-    }else{
+    } else {
       redirectedUrl = url + "/info";
     }
 
@@ -114,7 +120,7 @@ class RepositoryRoot extends React.Component<Props> {
         <div className="columns">
           <div className="column is-three-quarters is-clipped">
             <Switch>
-              <Redirect exact from={this.props.match.url} to={redirectedUrl}/>
+              <Redirect exact from={this.props.match.url} to={redirectedUrl} />
               <Route
                 path={`${url}/info`}
                 exact

scm-ui/src/repos/modules/repos.js

@@ -46,7 +46,7 @@ export function fetchRepos(link: string) {
   return fetchReposByLink(link);
 }
 
-export function fetchReposByPage(link: string, page: number, filter?: string) {
+export function fetchReposByPage(link: string, page: number, filter?: any) {
   if (filter) {
     return fetchReposByLink(
       `${link}?page=${page - 1}&q=${decodeURIComponent(filter)}`