Extract common function 'matchedUrl'

scm-ui/ui-webapp/src/admin/containers/Admin.tsx

@@ -55,20 +55,17 @@ type Props = RouteComponentProps &
   };
 
 class Admin extends React.Component<Props> {
-  matchedUrl = () => {
-    return urls.stripEndingSlash(this.props.match.url);
-  };
 
   matchesRoles = (route: any) => {
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
     const regex = new RegExp(`${url}/role/`);
     return route.location.pathname.match(regex);
   };
 
   render() {
-    const { links, availablePluginsLink, installedPluginsLink, t } = this.props;
+    const { links, availablePluginsLink, installedPluginsLink, match, t } = this.props;
 
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
     const extensionProps = {
       links,
       url

scm-ui/ui-webapp/src/admin/roles/containers/SingleRepositoryRole.tsx

@@ -23,7 +23,7 @@
  */
 import React from "react";
 import { connect } from "react-redux";
-import { Route, withRouter } from "react-router-dom";
+import { Route, RouteComponentProps, withRouter } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
@@ -36,31 +36,27 @@ import EditRepositoryRole from "./EditRepositoryRole";
 import { compose } from "redux";
 import { urls } from "@scm-manager/ui-components";
 
-type Props = WithTranslation & {
-  roleName: string;
-  role: RepositoryRole;
-  loading: boolean;
-  error: Error;
-  repositoryRolesLink: string;
-  disabled: boolean;
+type Props = WithTranslation &
+  RouteComponentProps & {
+    roleName: string;
+    role: RepositoryRole;
+    loading: boolean;
+    error: Error;
+    repositoryRolesLink: string;
+    disabled: boolean;
 
-  // dispatcher function
-  fetchRoleByName: (p1: string, p2: string) => void;
+    // dispatcher function
+    fetchRoleByName: (p1: string, p2: string) => void;
 
-  // context objects
-  match: any;
-  history: History;
-};
+    // context objects
+    history: History;
+  };
 
 class SingleRepositoryRole extends React.Component<Props> {
   componentDidMount() {
     this.props.fetchRoleByName(this.props.repositoryRolesLink, this.props.roleName);
   }
 
-  matchedUrl = () => {
-    return urls.stripEndingSlash(this.props.match.url);
-  };
-
   render() {
     const { t, loading, error, role } = this.props;
 
@@ -74,7 +70,7 @@ class SingleRepositoryRole extends React.Component<Props> {
       return <Loading />;
     }
 
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
 
     const extensionProps = {
       role,