Extract common function 'matchedUrl'

scm-ui/ui-webapp/src/repos/branches/containers/BranchRoot.tsx

@@ -55,14 +55,10 @@ class BranchRoot extends React.Component<Props> {
     fetchBranch(repository, branchName);
   }
 
-  matchedUrl = () => {
-    return urls.stripEndingSlash(this.props.match.url);
-  };
-
   render() {
     const { repository, branch, loading, error, match, location } = this.props;
 
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
 
     if (error) {
       if (error instanceof NotFoundError && queryString.parse(location.search).create === "true") {

scm-ui/ui-webapp/src/repos/containers/EditRepo.tsx

@@ -23,7 +23,7 @@
  */
 import React from "react";
 import { connect } from "react-redux";
-import { withRouter } from "react-router-dom";
+import { RouteComponentProps, withRouter } from "react-router-dom";
 import RepositoryForm from "../components/form";
 import { Repository, Links } from "@scm-manager/ui-types";
 import { getModifyRepoFailure, isModifyRepoPending, modifyRepo, modifyRepoReset } from "../modules/repos";
@@ -35,7 +35,7 @@ import DangerZone from "./DangerZone";
 import { getLinks } from "../../modules/indexResource";
 import { urls } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = RouteComponentProps & {
   loading: boolean;
   error: Error;
   indexLinks: Links;
@@ -46,7 +46,6 @@ type Props = {
   // context props
   repository: Repository;
   history: History;
-  match: any;
 };
 
 class EditRepo extends React.Component<Props> {
@@ -60,14 +59,10 @@ class EditRepo extends React.Component<Props> {
     history.push(`/repo/${repository.namespace}/${repository.name}`);
   };
 
-  matchedUrl = () => {
-    return urls.stripEndingSlash(this.props.match.url);
-  };
-
   render() {
     const { loading, error, repository, indexLinks } = this.props;
 
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
 
     const extensionProps = {
       repository,

scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx

@@ -85,24 +85,20 @@ class RepositoryRoot extends React.Component<Props> {
     }
   }
 
-  matchedUrl = () => {
-    return urls.stripEndingSlash(this.props.match.url);
-  };
-
   matchesBranches = (route: any) => {
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
     const regex = new RegExp(`${url}/branch/.+/info`);
     return route.location.pathname.match(regex);
   };
 
   matchesTags = (route: any) => {
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
     const regex = new RegExp(`${url}/tag/.+/info`);
     return route.location.pathname.match(regex);
   };
 
   matchesCode = (route: any) => {
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
     const regex = new RegExp(`${url}(/code)/.*`);
     return route.location.pathname.match(regex);
   };
@@ -120,7 +116,7 @@ class RepositoryRoot extends React.Component<Props> {
 
   evaluateDestinationForCodeLink = () => {
     const { repository } = this.props;
-    const url = `${this.matchedUrl()}/code`;
+    const url = `${urls.matchedUrl(this.props)}/code`;
     if (repository?._links?.sources) {
       return `${url}/sources/`;
     }
@@ -140,7 +136,7 @@ class RepositoryRoot extends React.Component<Props> {
       return <Loading />;
     }
 
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
 
     const extensionProps = {
       repository,

scm-ui/ui-webapp/src/repos/namespaces/containers/NamespaceRoot.tsx

@@ -43,6 +43,7 @@ import {
 import Permissions from "../../permissions/containers/Permissions";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import PermissionsNavLink from "./PermissionsNavLink";
+import { urls } from "@scm-manager/ui-components";
 
 type Props = RouteComponentProps &
   WithTranslation & {
@@ -62,20 +63,9 @@ class NamespaceRoot extends React.Component<Props> {
     fetchNamespace(namespacesLink, namespaceName);
   }
 
-  stripEndingSlash = (url: string) => {
-    if (url.endsWith("/")) {
-      return url.substring(0, url.length - 1);
-    }
-    return url;
-  };
-
-  matchedUrl = () => {
-    return this.stripEndingSlash(this.props.match.url);
-  };
-
   render() {
     const { loading, error, namespaceName, namespace, t } = this.props;
-    const url = this.matchedUrl();
+    const url = urls.matchedUrl(this.props);
 
     const extensionProps = {
       namespace,

scm-ui/ui-webapp/src/repos/tags/container/TagRoot.tsx

@@ -66,10 +66,6 @@ const TagRoot: FC<Props> = ({ repository, baseUrl }) => {
     }
   }, [tags]);
 
-  const matchedUrl = () => {
-    return urls.stripEndingSlash(match.url);
-  };
-
   if (error) {
     return <ErrorNotification error={error} />;
   }
@@ -78,7 +74,7 @@ const TagRoot: FC<Props> = ({ repository, baseUrl }) => {
     return <Loading />;
   }
 
-  const url = matchedUrl();
+  const url = urls.matchedUrlFromMatch(match);
 
   return (
     <Switch>