refactor code section

2025-11-09 23:15:43 +01:00 · 2020-01-14 18:07:57 +01:00
parent e0e2ccec02
commit 0888006a74
5 changed files with 208 additions and 194 deletions
--- a/scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx
+++ b/scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx
@@ -0,0 +1,50 @@
+import React, { FC } from "react";
+import styled from "styled-components";
+import { RouteComponentProps, withRouter } from "react-router-dom";
+import { Level, BranchSelector } from "@scm-manager/ui-components";
+import CodeViewSwitcher from "./CodeViewSwitcher";
+import { useTranslation } from "react-i18next";
+import { Branch } from "@scm-manager/ui-types";
+
+const ActionBar = styled.div.attrs(() => ({}))`
+  background-color: whitesmoke;
+  border: 1px solid #dbdbdb;
+  border-radius: 4px;
+  color: #363636;
+  font-size: 1.25em;
+  font-weight: 300;
+  line-height: 1.25;
+  padding: 0.5em 0.75em;
+  margin-bottom: 1em;
+`;
+
+type Props = RouteComponentProps & {
+  selectedBranch?: string;
+  branches: Branch[];
+  onSelectBranch: () => void;
+  switchViewLink: string;
+};
+
+const CodeActionBar: FC<Props> = ({ selectedBranch, branches, onSelectBranch, switchViewLink, location }) => {
+  const { t } = useTranslation("repos");
+
+  return (
+    <ActionBar>
+      <Level
+        left={
+          branches?.length > 0 && (
+            <BranchSelector
+              label={t("code.branchSelector")}
+              branches={branches}
+              selectedBranch={selectedBranch}
+              onSelectBranch={onSelectBranch}
+            />
+          )
+        }
+        right={<CodeViewSwitcher currentUrl={location.pathname} switchViewLink={switchViewLink} />}
+      />
+    </ActionBar>
+  );
+};
+
+export default withRouter(CodeActionBar);
--- a/scm-ui/ui-webapp/src/repos/codeSection/components/CodeViewSwitcher.tsx
+++ b/scm-ui/ui-webapp/src/repos/codeSection/components/CodeViewSwitcher.tsx
@@ -15,40 +15,29 @@ const ButtonAddonsMarginRight = styled(ButtonAddons)`
 `;

 type Props = {
-  baseUrl: string;
  currentUrl: string;
-  branches: Branch[];
-  selectedBranch: string;
+  switchViewLink: string;
 };

-const CodeViewSwitcher: FC<Props> = ({ baseUrl, currentUrl, branches, selectedBranch }) => {
+const CodeViewSwitcher: FC<Props> = ({ currentUrl, switchViewLink }) => {
  const [t] = useTranslation("repos");

-  const createDestinationUrl = (destination: string, branch?: string, suffix?: string) => {
-    if (!branches) {
-      return baseUrl + "/" + destination + "/";
+  const resolveLocation = () => {
+    if (currentUrl.includes("/code/branch") || currentUrl.includes("/code/changesets")) {
+      return "changesets";
    }
-    let splittedUrl = currentUrl.split("/");
-    splittedUrl[5] = destination;
-    splittedUrl.splice(6, splittedUrl.length);
-    if (branch) {
-      splittedUrl[6] = branch;
+    if (currentUrl.includes("/code/sources")) {
+      return "sources";
    }
-    if (suffix) {
-      splittedUrl.push(suffix);
-    }
-    return splittedUrl.join("/");
+    return "";
  };

-  const evaluateDestinationBranch = () => {
-    return (
-      branches &&
-      encodeURIComponent(
-        branches.filter(branch => branch.name === selectedBranch).length === 0
-          ? branches.filter(branch => branch.defaultBranch === true)[0].name
-          : branches.filter(branch => branch.name === selectedBranch)[0].name
-      )
-    );
+  const isSourcesTab = () => {
+    return resolveLocation() === "sources";
+  };
+
+  const isChangesetsTab = () => {
+    return resolveLocation() === "changesets";
  };

  return (
@@ -56,22 +45,14 @@ const CodeViewSwitcher: FC<Props> = ({ baseUrl, currentUrl, branches, selectedBr
      <SmallButton
        label={t("code.commits")}
        icon="fa fa-exchange-alt"
-        color={
-          currentUrl.includes("/code/branch") || currentUrl.includes("/code/changesets")
-            ? "link is-selected"
-            : undefined
-        }
-        link={
-          branches
-            ? createDestinationUrl("branch", evaluateDestinationBranch(), "changesets/")
-            : createDestinationUrl("changesets")
-        }
+        color={isChangesetsTab() ? "link is-selected" : undefined}
+        link={isSourcesTab() ? switchViewLink : undefined}
      />
      <SmallButton
        label={t("code.sources")}
        icon="fa fa-code"
-        color={currentUrl.includes("/code/sources") ? "link is-selected" : undefined}
-        link={createDestinationUrl("sources", evaluateDestinationBranch())}
+        color={isSourcesTab() ? "link is-selected" : undefined}
+        link={isChangesetsTab() ? switchViewLink: undefined}
      />
    </ButtonAddonsMarginRight>
  );
--- a/scm-ui/ui-webapp/src/repos/codeSection/containers/CodeOverview.tsx
+++ b/scm-ui/ui-webapp/src/repos/codeSection/containers/CodeOverview.tsx
@@ -1,11 +1,9 @@
 import React from "react";
-import styled from "styled-components";
 import { Route, RouteComponentProps, withRouter } from "react-router-dom";
 import Sources from "../../sources/containers/Sources";
 import ChangesetsRoot from "../../containers/ChangesetsRoot";
 import { Branch, Repository } from "@scm-manager/ui-types";
-import { BranchSelector, ErrorPage, Level, Loading } from "@scm-manager/ui-components";
-import CodeViewSwitcher from "../components/CodeViewSwitcher";
+import { ErrorPage, Loading } from "@scm-manager/ui-components";
 import { compose } from "redux";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -31,56 +29,12 @@ type Props = RouteComponentProps &
    fetchBranches: (p: Repository) => void;
  };

-const CodeActionBar = styled.div.attrs(() => ({}))`
-  background-color: whitesmoke;
-  border: 1px solid #dbdbdb;
-  border-radius: 4px;
-  color: #363636;
-  font-size: 1.25em;
-  font-weight: 300;
-  line-height: 1.25;
-  padding: 0.5em 0.75em;
-  margin-bottom: 1em;
-`;
-
 class CodeOverview extends React.Component<Props> {
  componentDidMount() {
-    const { repository, branches } = this.props;
-    new Promise(() => {
-      this.props.fetchBranches(repository);
-    }).then(() => {
-      if (this.props.branches?.length > 0) {
-        const defaultBranch = branches.filter((branch: Branch) => branch.defaultBranch === true)[0];
-        this.branchSelected(defaultBranch);
-      }
-    });
+    const { repository } = this.props;
+    this.props.fetchBranches(repository);
  }

-  findSelectedBranch = () => {
-    const { selectedBranch, branches } = this.props;
-    return branches?.find((branch: Branch) => branch.name === selectedBranch);
-  };
-
-  branchSelected = (branch?: Branch) => {
-    let splittedUrl = this.props.location.pathname.split("/");
-    if (
-      this.props.location.pathname.includes("/code/sources") ||
-      this.props.location.pathname.includes("/code/branch")
-    ) {
-      if (branch) {
-        splittedUrl[6] = encodeURIComponent(branch.name);
-      }
-      this.props.history.push(splittedUrl.join("/"));
-    }
-    if (this.props.location.pathname.includes("/code/changesets")) {
-      this.props.history.push(
-        `${splittedUrl[0]}/${splittedUrl[1]}/${splittedUrl[2]}/${splittedUrl[3]}/${
-          splittedUrl[4]
-        }/branch/${encodeURIComponent(branch.name)}/${splittedUrl[5]}/`
-      );
-    }
-  };
-
  render() {
    const { repository, baseUrl, branches, selectedBranch, error, loading, t } = this.props;
    const url = baseUrl;
@@ -97,39 +51,29 @@ class CodeOverview extends React.Component<Props> {

    return (
      <div>
-        <CodeActionBar>
-          <Level
-            left={
-              <BranchSelector
-                label={t("code.branchSelector")}
-                branches={branches}
-                selectedBranch={selectedBranch}
-                onSelectBranch={this.branchSelected}
-              />
-            }
-            right={<CodeViewSwitcher baseUrl={url} currentUrl={this.props.location.pathname} branches={branches} selectedBranch={selectedBranch}/>}
-          />
-        </CodeActionBar>
        <Route
          path={`${url}/sources`}
          exact={true}
-          render={() => <Sources repository={repository} baseUrl={`${url}/sources`} branches={branches} />}
+          render={() => <Sources repository={repository} baseUrl={`${url}`} branches={branches} />}
        />
        <Route
          path={`${url}/sources/:revision/:path*`}
-          render={() => <Sources repository={repository} baseUrl={`${url}/sources`} branches={branches} />}
+          render={() => (
+            <Sources repository={repository} baseUrl={`${url}`} branches={branches} selectedBranch={selectedBranch} />
+          )}
        />
        <Route
          path={`${url}/changesets`}
-          render={() => <ChangesetsRoot repository={repository} baseUrl={`${url}/changesets`} />}
+          render={() => <ChangesetsRoot repository={repository} baseUrl={`${url}`} branches={branches} />}
        />
        <Route
          path={`${url}/branch/:branch/changesets/`}
          render={() => (
            <ChangesetsRoot
              repository={repository}
-              baseUrl={`${url}/changesets`}
-              selectedBranch={branches && branches.filter(b => b.name === this.props.selectedBranch)[0]}
+              baseUrl={`${url}`}
+              branches={branches}
+              selectedBranch={selectedBranch}
            />
          )}
        />