From f8720087a14e6f81cff9c207d0af33d0831c32ef Mon Sep 17 00:00:00 2001
From: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Date: Thu, 27 Feb 2020 09:27:02 +0100
Subject: [PATCH] refactor

---
 scm-ui/ui-webapp/src/containers/Profile.tsx   | 106 +++++++++++++-----
 .../src/groups/containers/SingleGroup.tsx     |   6 +-
 .../src/users/containers/SingleUser.tsx       |   7 +-
 3 files changed, 86 insertions(+), 33 deletions(-)

diff --git a/scm-ui/ui-webapp/src/containers/Profile.tsx b/scm-ui/ui-webapp/src/containers/Profile.tsx
index 4852993afd..68350deca5 100644
--- a/scm-ui/ui-webapp/src/containers/Profile.tsx
+++ b/scm-ui/ui-webapp/src/containers/Profile.tsx
@@ -1,24 +1,62 @@
 import React from "react";
-import { Route, withRouter } from "react-router-dom";
+import { Route, RouteComponentProps, withRouter } from "react-router-dom";
 import { getMe } from "../modules/auth";
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Me } from "@scm-manager/ui-types";
-import { ErrorPage, Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
+import {
+  ErrorPage,
+  isMenuCollapsed,
+  MenuContext,
+  Navigation,
+  NavLink,
+  Page,
+  Section,
+  SubNavigation
+} from "@scm-manager/ui-components";
 import ChangeUserPassword from "./ChangeUserPassword";
 import ProfileInfo from "./ProfileInfo";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
 
-type Props = WithTranslation & {
-  me: Me;
+type Props = RouteComponentProps &
+  WithTranslation & {
+    me: Me;
 
-  // Context props
-  match: any;
+    // Context props
+    match: any;
+  };
+
+type State = {
+  menuCollapsed: boolean;
+  setMenuCollapsed: (collapsed: boolean) => void;
 };
-type State = {};
 
 class Profile extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed(),
+      setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
+    };
+  }
+
+  componentDidUpdate() {
+    if (this.state.menuCollapsed && this.isCollapseForbidden()) {
+      this.setState({ menuCollapsed: false });
+    }
+  }
+
+  isCollapseForbidden = () => {
+    return this.props.location.pathname.includes("/settings/");
+  };
+
+  onCollapseProfileMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
   stripEndingSlash = (url: string) => {
     if (url.endsWith("/")) {
       return url.substring(0, url.length - 2);
@@ -34,6 +72,7 @@ class Profile extends React.Component<Props, State> {
     const url = this.matchedUrl();
 
     const { me, t } = this.props;
+    const { menuCollapsed } = this.state;
 
     if (!me) {
       return (
@@ -54,26 +93,41 @@ class Profile extends React.Component<Props, State> {
     };
 
     return (
-      <Page title={me.displayName}>
-        <div className="columns">
-          <div className="column is-three-quarters">
-            <Route path={url} exact render={() => <ProfileInfo me={me} />} />
-            <Route path={`${url}/settings/password`} render={() => <ChangeUserPassword me={me} />} />
-            <ExtensionPoint name="profile.route" props={extensionProps} renderAll={true} />
+      <MenuContext.Provider value={this.state}>
+        <Page title={me.displayName}>
+          <div className="columns">
+            <div className="column">
+              <Route path={url} exact render={() => <ProfileInfo me={me} />} />
+              <Route path={`${url}/settings/password`} render={() => <ChangeUserPassword me={me} />} />
+              <ExtensionPoint name="profile.route" props={extensionProps} renderAll={true} />
+            </div>
+            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
+              <Navigation>
+                <Section
+                  label={t("profile.navigationLabel")}
+                  onCollapse={this.isCollapseForbidden() ? undefined : () => this.onCollapseProfileMenu(!menuCollapsed)}
+                  collapsed={menuCollapsed}
+                >
+                  <NavLink
+                    to={`${url}`}
+                    icon="fas fa-info-circle"
+                    label={t("profile.informationNavLink")}
+                    title={t("profile.informationNavLink")}
+                  />
+                  <SubNavigation
+                    to={`${url}/settings/password`}
+                    label={t("profile.settingsNavLink")}
+                    title={t("profile.settingsNavLink")}
+                  >
+                    <NavLink to={`${url}/settings/password`} label={t("profile.changePasswordNavLink")} />
+                    <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
+                  </SubNavigation>
+                </Section>
+              </Navigation>
+            </div>
           </div>
-          <div className="column">
-            <Navigation>
-              <Section label={t("profile.navigationLabel")}>
-                <NavLink to={`${url}`} icon="fas fa-info-circle" label={t("profile.informationNavLink")} />
-                <SubNavigation to={`${url}/settings/password`} label={t("profile.settingsNavLink")}>
-                  <NavLink to={`${url}/settings/password`} label={t("profile.changePasswordNavLink")} />
-                  <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
-                </SubNavigation>
-              </Section>
-            </Navigation>
-          </div>
-        </div>
-      </Page>
+        </Page>
+      </MenuContext.Provider>
     );
   }
 }
diff --git a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
index c80a3225c9..ddcb387ca7 100644
--- a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
@@ -6,14 +6,14 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Group } from "@scm-manager/ui-types";
 import {
   ErrorPage,
+  isMenuCollapsed,
   Loading,
+  MenuContext,
   Navigation,
   NavLink,
   Page,
   Section,
-  SubNavigation,
-  isMenuCollapsed,
-  MenuContext
+  SubNavigation
 } from "@scm-manager/ui-components";
 import { getGroupsLink } from "../../modules/indexResource";
 import { fetchGroupByName, getFetchGroupFailure, getGroupByName, isFetchGroupPending } from "../modules/groups";
diff --git a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
index 9d0dd2b9c5..d2718650bd 100644
--- a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
@@ -1,19 +1,18 @@
 import React from "react";
 import { connect } from "react-redux";
 import { Route, RouteComponentProps } from "react-router-dom";
-import { History } from "history";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { User } from "@scm-manager/ui-types";
 import {
   ErrorPage,
+  isMenuCollapsed,
   Loading,
+  MenuContext,
   Navigation,
   NavLink,
   Page,
   Section,
-  SubNavigation,
-  MenuContext,
-  isMenuCollapsed
+  SubNavigation
 } from "@scm-manager/ui-components";
 import { Details } from "./../components/table";
 import EditUser from "./EditUser";