From bbfe2b08bc02715a213d34403d4e12080842f241 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= Date: Fri, 18 Sep 2020 17:38:10 +0200 Subject: [PATCH] Extract common function 'matchedUrl' --- scm-ui/ui-components/src/urls.ts | 10 ++++++ .../ui-webapp/src/admin/containers/Admin.tsx | 9 ++--- .../roles/containers/SingleRepositoryRole.tsx | 34 ++++++++----------- scm-ui/ui-webapp/src/containers/Profile.tsx | 6 +--- .../src/groups/containers/SingleGroup.tsx | 6 +--- .../repos/branches/containers/BranchRoot.tsx | 6 +--- .../src/repos/containers/EditRepo.tsx | 11 ++---- .../src/repos/containers/RepositoryRoot.tsx | 14 +++----- .../namespaces/containers/NamespaceRoot.tsx | 14 ++------ .../src/repos/tags/container/TagRoot.tsx | 6 +--- .../src/users/containers/SingleUser.tsx | 6 +--- 11 files changed, 43 insertions(+), 79 deletions(-) diff --git a/scm-ui/ui-components/src/urls.ts b/scm-ui/ui-components/src/urls.ts index 6001dd4043..cae061b225 100644 --- a/scm-ui/ui-components/src/urls.ts +++ b/scm-ui/ui-components/src/urls.ts @@ -23,6 +23,7 @@ */ import queryString from "query-string"; +import { RouteComponentProps } from "react-router-dom"; //@ts-ignore export const contextPath = window.ctxPath || ""; @@ -87,3 +88,12 @@ export function stripEndingSlash(url: string) { } return url; } + +export function matchedUrlFromMatch(match: any) { + return stripEndingSlash(match.url); +} + +export function matchedUrl(props: RouteComponentProps) { + const match = props.match; + return matchedUrlFromMatch(match); +} diff --git a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx index 4701fade60..98a308e4e3 100644 --- a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx +++ b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx @@ -55,20 +55,17 @@ type Props = RouteComponentProps & }; class Admin extends React.Component { - 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 diff --git a/scm-ui/ui-webapp/src/admin/roles/containers/SingleRepositoryRole.tsx b/scm-ui/ui-webapp/src/admin/roles/containers/SingleRepositoryRole.tsx index 92ff5af005..b6cbe6f144 100644 --- a/scm-ui/ui-webapp/src/admin/roles/containers/SingleRepositoryRole.tsx +++ b/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 { 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 { return ; } - const url = this.matchedUrl(); + const url = urls.matchedUrl(this.props); const extensionProps = { role, diff --git a/scm-ui/ui-webapp/src/containers/Profile.tsx b/scm-ui/ui-webapp/src/containers/Profile.tsx index 28f69bef1a..d1d8a065f3 100644 --- a/scm-ui/ui-webapp/src/containers/Profile.tsx +++ b/scm-ui/ui-webapp/src/containers/Profile.tsx @@ -55,10 +55,6 @@ type Props = RouteComponentProps & }; class Profile extends React.Component { - matchedUrl = () => { - return urls.stripEndingSlash(this.props.match.url); - }; - mayChangePassword = () => { const { me } = this.props; return !!me?._links?.password; @@ -70,7 +66,7 @@ class Profile extends React.Component { }; render() { - const url = this.matchedUrl(); + const url = urls.matchedUrl(this.props); const { me, t } = this.props; diff --git a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx index 33492d2dc7..1b7505f71f 100644 --- a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx +++ b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx @@ -64,10 +64,6 @@ class SingleGroup extends React.Component { this.props.fetchGroupByName(this.props.groupLink, this.props.name); } - matchedUrl = () => { - return urls.stripEndingSlash(this.props.match.url); - }; - render() { const { t, loading, error, group } = this.props; @@ -79,7 +75,7 @@ class SingleGroup extends React.Component { return ; } - const url = this.matchedUrl(); + const url = urls.matchedUrl(this.props); const extensionProps = { group, diff --git a/scm-ui/ui-webapp/src/repos/branches/containers/BranchRoot.tsx b/scm-ui/ui-webapp/src/repos/branches/containers/BranchRoot.tsx index c6671f3d93..cb2847a712 100644 --- a/scm-ui/ui-webapp/src/repos/branches/containers/BranchRoot.tsx +++ b/scm-ui/ui-webapp/src/repos/branches/containers/BranchRoot.tsx @@ -55,14 +55,10 @@ class BranchRoot extends React.Component { 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") { diff --git a/scm-ui/ui-webapp/src/repos/containers/EditRepo.tsx b/scm-ui/ui-webapp/src/repos/containers/EditRepo.tsx index f7b1697c71..f2334c5d7e 100644 --- a/scm-ui/ui-webapp/src/repos/containers/EditRepo.tsx +++ b/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 { @@ -60,14 +59,10 @@ class EditRepo extends React.Component { 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, diff --git a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx index 2731a57b74..467bdcbecf 100644 --- a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx +++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx @@ -85,24 +85,20 @@ class RepositoryRoot extends React.Component { } } - 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 { 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 { return ; } - const url = this.matchedUrl(); + const url = urls.matchedUrl(this.props); const extensionProps = { repository, diff --git a/scm-ui/ui-webapp/src/repos/namespaces/containers/NamespaceRoot.tsx b/scm-ui/ui-webapp/src/repos/namespaces/containers/NamespaceRoot.tsx index ae52dc6d34..53917fff18 100644 --- a/scm-ui/ui-webapp/src/repos/namespaces/containers/NamespaceRoot.tsx +++ b/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 { 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, diff --git a/scm-ui/ui-webapp/src/repos/tags/container/TagRoot.tsx b/scm-ui/ui-webapp/src/repos/tags/container/TagRoot.tsx index bbe8fb814b..e0a4e969d1 100644 --- a/scm-ui/ui-webapp/src/repos/tags/container/TagRoot.tsx +++ b/scm-ui/ui-webapp/src/repos/tags/container/TagRoot.tsx @@ -66,10 +66,6 @@ const TagRoot: FC = ({ repository, baseUrl }) => { } }, [tags]); - const matchedUrl = () => { - return urls.stripEndingSlash(match.url); - }; - if (error) { return ; } @@ -78,7 +74,7 @@ const TagRoot: FC = ({ repository, baseUrl }) => { return ; } - const url = matchedUrl(); + const url = urls.matchedUrlFromMatch(match); return ( diff --git a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx index 0373d47b51..8faddda5d8 100644 --- a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx +++ b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx @@ -66,10 +66,6 @@ class SingleUser extends React.Component { this.props.fetchUserByName(this.props.usersLink, this.props.name); } - matchedUrl = () => { - return urls.stripEndingSlash(this.props.match.url); - }; - render() { const { t, loading, error, user } = this.props; @@ -81,7 +77,7 @@ class SingleUser extends React.Component { return ; } - const url = this.matchedUrl(); + const url = urls.matchedUrl(this.props); const extensionProps = { user,