prevent code duplications in overviews with new component

scm-ui/src/groups/containers/Groups.js

@@ -1,7 +1,6 @@
 //@flow
 import React from "react";
 import { connect } from "react-redux";
-import classNames from "classnames";
 import { translate } from "react-i18next";
 import type { History } from "history";
 import type { Group, PagedCollection } from "@scm-manager/ui-types";
@@ -15,9 +14,7 @@ import {
 } from "../modules/groups";
 import {
   Page,
-  PageActions,
-  FilterInput,
-  Button,
+  OverviewPageActions,
   Notification,
   LinkPaginator,
   urls
@@ -25,7 +22,6 @@ import {
 import { GroupTable } from "./../components/table";
 import CreateGroupButton from "../components/buttons/CreateGroupButton";
 import { getGroupsLink } from "../../modules/indexResource";
-import injectSheet from "react-jss";
 
 type Props = {
   groups: Group[],
@@ -37,7 +33,6 @@ type Props = {
   groupLink: string,
 
   // context objects
-  classes: Object,
   t: string => string,
   history: History,
   location: any,
@@ -46,38 +41,39 @@ type Props = {
   fetchGroupsByPage: (link: string, page: number, filter?: string) => void
 };
 
-const styles = {
-  button: {
-    float: "right",
-    marginTop: "1.25rem"
-  }
-};
-
 class Groups extends React.Component<Props> {
   componentDidMount() {
     const { fetchGroupsByPage, groupLink, page, location } = this.props;
-    fetchGroupsByPage(groupLink, page, urls.getQueryStringFromLocation(location));
+    fetchGroupsByPage(
+      groupLink,
+      page,
+      urls.getQueryStringFromLocation(location)
+    );
   }
 
   componentDidUpdate = (prevProps: Props) => {
     const {
+      loading,
       list,
       page,
-      loading,
+      groupLink,
       location,
-      fetchGroupsByPage,
-      groupLink
+      fetchGroupsByPage
     } = this.props;
     if (list && page && !loading) {
       const statePage: number = list.page + 1;
       if (page !== statePage || prevProps.location.search !== location.search) {
-        fetchGroupsByPage(groupLink, page, urls.getQueryStringFromLocation(location));
+        fetchGroupsByPage(
+          groupLink,
+          page,
+          urls.getQueryStringFromLocation(location)
+        );
       }
     }
   };
 
   render() {
-    const { groups, loading, error, t } = this.props;
+    const { groups, loading, error, canAddGroups, t } = this.props;
     return (
       <Page
         title={t("groups.title")}
@@ -87,37 +83,31 @@ class Groups extends React.Component<Props> {
       >
         {this.renderGroupTable()}
         {this.renderCreateButton()}
-        {this.renderPageActions()}
+        <OverviewPageActions
+          showCreateButton={canAddGroups}
+          link="groups"
+          label={t("create-group-button.label")}
+        />
       </Page>
     );
   }
 
   renderGroupTable() {
-    const { groups, t } = this.props;
+    const { groups, list, page, location, t } = this.props;
     if (groups && groups.length > 0) {
       return (
         <>
           <GroupTable groups={groups} />
-          {this.renderPaginator()}
-        </>
-      );
-    }
-    return <Notification type="info">{t("groups.noGroups")}</Notification>;
-  }
-
-  renderPaginator = () => {
-    const { list, page, location } = this.props;
-    if (list) {
-      return (
           <LinkPaginator
             collection={list}
             page={page}
             filter={urls.getQueryStringFromLocation(location)}
           />
+        </>
       );
     }
-    return null;
-  };
+    return <Notification type="info">{t("groups.noGroups")}</Notification>;
+  }
 
   renderCreateButton() {
     if (this.props.canAddGroups) {
@@ -125,31 +115,6 @@ class Groups extends React.Component<Props> {
     }
     return null;
   }
-
-  renderPageActions() {
-    const { canAddGroups, history, location, classes, t } = this.props;
-    if (canAddGroups) {
-      return (
-        <PageActions>
-          <FilterInput
-            value={urls.getQueryStringFromLocation(location)}
-            filter={filter => {
-              history.push("/groups/?q=" + filter);
-            }}
-          />
-          <div className={classNames(classes.button, "input-button control")}>
-            <Button
-              label={t("create-group-button.label")}
-              link="/groups/add"
-              color="primary"
-            />
-          </div>
-        </PageActions>
-      );
-    }
-    return null;
-  }
-
 }
 
 const mapStateToProps = (state, ownProps) => {
@@ -184,4 +149,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(injectSheet(styles)(translate("groups")(Groups)));
+)(translate("groups")(Groups));

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

@@ -1,8 +1,6 @@
 // @flow
 import React from "react";
 import { connect } from "react-redux";
-import classNames from "classnames";
-import injectSheet from "react-jss";
 import { translate } from "react-i18next";
 import type { History } from "history";
 import { withRouter } from "react-router-dom";
@@ -16,9 +14,7 @@ import {
 } from "../modules/repos";
 import {
   Page,
-  PageActions,
-  FilterInput,
-  Button,
+  OverviewPageActions,
   CreateButton,
   Notification,
   LinkPaginator,
@@ -28,15 +24,14 @@ import RepositoryList from "../components/list";
 import { getRepositoriesLink } from "../../modules/indexResource";
 
 type Props = {
-  page: number,
-  collection: RepositoryCollection,
   loading: boolean,
   error: Error,
   showCreateButton: boolean,
+  collection: RepositoryCollection,
+  page: number,
   reposLink: string,
 
   // context props
-  classes: Object,
   t: string => string,
   history: History,
   location: any,
@@ -45,38 +40,39 @@ type Props = {
   fetchReposByPage: (link: string, page: number, filter?: string) => void
 };
 
-const styles = {
-  button: {
-    float: "right",
-    marginTop: "1.25rem"
-  }
-};
-
 class Overview extends React.Component<Props> {
   componentDidMount() {
     const { fetchReposByPage, reposLink, page, location } = this.props;
-    fetchReposByPage(reposLink, page, urls.getQueryStringFromLocation(location));
+    fetchReposByPage(
+      reposLink,
+      page,
+      urls.getQueryStringFromLocation(location)
+    );
   }
 
   componentDidUpdate = (prevProps: Props) => {
     const {
+      loading,
       collection,
       page,
-      loading,
+      reposLink,
       location,
-      fetchReposByPage,
-      reposLink
+      fetchReposByPage
     } = this.props;
     if (collection && page && !loading) {
       const statePage: number = collection.page + 1;
       if (page !== statePage || prevProps.location.search !== location.search) {
-        fetchReposByPage(reposLink, page, urls.getQueryStringFromLocation(location));
+        fetchReposByPage(
+          reposLink,
+          page,
+          urls.getQueryStringFromLocation(location)
+        );
       }
     }
   };
 
   render() {
-    const { error, loading, t } = this.props;
+    const { error, loading, showCreateButton, t } = this.props;
     return (
       <Page
         title={t("overview.title")}
@@ -85,7 +81,11 @@ class Overview extends React.Component<Props> {
         error={error}
       >
         {this.renderOverview()}
-        {this.renderPageActions()}
+        <OverviewPageActions
+          showCreateButton={showCreateButton}
+          link="repos"
+          label={t("overview.createButton")}
+        />
       </Page>
     );
   }
@@ -132,30 +132,6 @@ class Overview extends React.Component<Props> {
     }
     return null;
   }
-
-  renderPageActions() {
-    const { showCreateButton, history, location, classes, t } = this.props;
-    if (showCreateButton) {
-      return (
-        <PageActions>
-          <FilterInput
-            value={urls.getQueryStringFromLocation(location)}
-            filter={filter => {
-              history.push("/repos/?q=" + filter);
-            }}
-          />
-          <div className={classNames(classes.button, "input-button control")}>
-            <Button
-              label={t("overview.createButton")}
-              link="/repos/create"
-              color="primary"
-            />
-          </div>
-        </PageActions>
-      );
-    }
-    return null;
-  }
 }
 
 const mapStateToProps = (state, ownProps) => {
@@ -186,4 +162,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(injectSheet(styles)(translate("repos")(withRouter(Overview))));
+)(translate("repos")(withRouter(Overview)));

scm-ui/src/users/containers/Users.js

@@ -1,8 +1,6 @@
 // @flow
 import React from "react";
 import { connect } from "react-redux";
-import classNames from "classnames";
-import injectSheet from "react-jss";
 import { translate } from "react-i18next";
 import type { History } from "history";
 import type { User, PagedCollection } from "@scm-manager/ui-types";
@@ -16,13 +14,11 @@ import {
 } from "../modules/users";
 import {
   Page,
-  PageActions,
-  Button,
+  OverviewPageActions,
   CreateButton,
   Notification,
   LinkPaginator,
-  urls,
-  FilterInput
+  urls
 } from "@scm-manager/ui-components";
 import { UserTable } from "./../components/table";
 import { getUsersLink } from "../../modules/indexResource";
@@ -37,7 +33,6 @@ type Props = {
   usersLink: string,
 
   // context objects
-  classes: Object,
   t: string => string,
   history: History,
   location: any,
@@ -46,38 +41,39 @@ type Props = {
   fetchUsersByPage: (link: string, page: number, filter?: string) => void
 };
 
-const styles = {
-  button: {
-    float: "right",
-    marginTop: "1.25rem"
-  }
-};
-
 class Users extends React.Component<Props> {
   componentDidMount() {
     const { fetchUsersByPage, usersLink, page, location } = this.props;
-    fetchUsersByPage(usersLink, page, urls.getQueryStringFromLocation(location));
+    fetchUsersByPage(
+      usersLink,
+      page,
+      urls.getQueryStringFromLocation(location)
+    );
   }
 
   componentDidUpdate = (prevProps: Props) => {
     const {
+      loading,
       list,
       page,
-      loading,
+      usersLink,
       location,
-      fetchUsersByPage,
-      usersLink
+      fetchUsersByPage
     } = this.props;
     if (list && page && !loading) {
       const statePage: number = list.page + 1;
       if (page !== statePage || prevProps.location.search !== location.search) {
-        fetchUsersByPage(usersLink, page, urls.getQueryStringFromLocation(location));
+        fetchUsersByPage(
+          usersLink,
+          page,
+          urls.getQueryStringFromLocation(location)
+        );
       }
     }
   };
 
   render() {
-    const { users, loading, error, t } = this.props;
+    const { users, loading, error, canAddUsers, t } = this.props;
     return (
       <Page
         title={t("users.title")}
@@ -87,37 +83,31 @@ class Users extends React.Component<Props> {
       >
         {this.renderUserTable()}
         {this.renderCreateButton()}
-        {this.renderPageActions()}
+        <OverviewPageActions
+          showCreateButton={canAddUsers}
+          link="users"
+          label={t("users.createButton")}
+        />
       </Page>
     );
   }
 
   renderUserTable() {
-    const { users, t } = this.props;
+    const { users, list, page, location, t } = this.props;
     if (users && users.length > 0) {
       return (
         <>
           <UserTable users={users} />
-          {this.renderPaginator()}
-        </>
-      );
-    }
-    return <Notification type="info">{t("users.noUsers")}</Notification>;
-  }
-
-  renderPaginator = () => {
-    const { list, page, location } = this.props;
-    if (list) {
-      return (
           <LinkPaginator
             collection={list}
             page={page}
             filter={urls.getQueryStringFromLocation(location)}
           />
+        </>
       );
     }
-    return null;
-  };
+    return <Notification type="info">{t("users.noUsers")}</Notification>;
+  }
 
   renderCreateButton() {
     const { canAddUsers, t } = this.props;
@@ -126,32 +116,6 @@ class Users extends React.Component<Props> {
     }
     return null;
   }
-
-  renderPageActions() {
-    const { canAddUsers, history, classes, location, t } = this.props;
-    if (canAddUsers) {
-      return (
-        <PageActions>
-          <FilterInput
-            value={urls.getQueryStringFromLocation(location)}
-            filter={filter => {
-              history.push("/users/?q=" + filter);
-            }}
-          />
-          <div className={classNames(classes.button, "input-button control")}>
-            <Button
-              label={t("users.createButton")}
-              link="/users/add"
-              color="primary"
-            />
-          </div>
-        </PageActions>
-      );
-    }
-
-    return null;
-  }
-
 }
 
 const mapStateToProps = (state, ownProps) => {
@@ -186,4 +150,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(injectSheet(styles)(translate("users")(Users)));
+)(translate("users")(Users));