Web: Common: Fix scrolling position when opening or editing a profile, refactoring Layout

web/ASC.Web.Common/src/components/GroupSelector/GroupSelector.js

@@ -5,7 +5,7 @@ import i18n from "./i18n";
 import AdvancedSelector from "../AdvancedSelector";
 import { getGroupList } from "../../api/groups";
 import { changeLanguage } from "../../utils";
-
+import { isMobile } from "react-device-detect";
 class GroupSelector extends React.Component {
   constructor(props) {
     super(props);
@@ -16,13 +16,16 @@ class GroupSelector extends React.Component {
 
   componentDidMount() {
     changeLanguage(i18n);
-
+    
     getGroupList(this.props.useFake)
       .then((groups) => this.setState({ groups: this.convertGroups(groups) }))
       .catch((error) => console.log(error));
+
+      isMobile && document.getElementById('scroll') && document.getElementById('scroll').scrollTo(0,0)  
   }
 
   componentDidUpdate(prevProps) {
+   
     if (this.props.isOpen !== prevProps.isOpen)
       this.setState({ isOpen: this.props.isOpen });
   }

web/ASC.Web.Common/src/components/Layout/index.js

@@ -1,7 +1,7 @@
 
-import React, { Component, createRef, useEffect} from "react"
+import React, { Component, createRef} from "react"
 import styled from "styled-components";
-import {  Scrollbar } from "asc-web-components";
+import {  Scrollbar, utils} from "asc-web-components";
 import { isMobile } from "react-device-detect";
 import {RefContextProvider, IsVisibleContextProvider} from "./context"
 
@@ -22,44 +22,51 @@ class Layout extends Component{
   }
 
   componentDidMount() {
+
     (isMobile || this.windowWidth.matches ) && document.getElementById("scroll").addEventListener("scroll", this.scrolledTheVerticalAxis,false);
   }
 
-
   componentWillUnmount() {
     (isMobile || this.windowWidth.matches ) && document.getElementById("scroll").removeEventListener("scroll", this.scrolledTheVerticalAxis,false);
   }
 
+
   scrolledTheVerticalAxis = () => {
+
     const { prevScrollPosition } = this.state;
     const currentScrollPosition =  document.getElementById("scroll").scrollTop || window.pageYOffset ;
-    const visibleContent = prevScrollPosition >= currentScrollPosition;
+    let visibleContent = prevScrollPosition >= currentScrollPosition;
 
-    this.setState({
+    if (!visibleContent && (document.getElementById("scroll").scrollHeight - document.getElementById("scroll").clientHeight < 57)) {
+      visibleContent = true
+    }
+
+     this.setState({
       prevScrollPosition: currentScrollPosition,
       visibleContent
     });
   };
+
   render() {  
   const scrollProp =  { ref: this.scrollRefPage } ;
   const { children } = this.props
 
     return(
-      <StyledContainer className="Layout" >
-           {  (isMobile || this.windowWidth.matches )  
-            ? <Scrollbar {...scrollProp} stype="mediumBlack">
-                <RefContextProvider value={this.scrollRefPage}>
-                  <IsVisibleContextProvider value={this.state.visibleContent}>
-                 
-                    { children }
-                    </IsVisibleContextProvider>
-                </RefContextProvider>
-              </Scrollbar>
-      
-           :  children
-            }
+        
+          <StyledContainer className="Layout" >
+  
+              {(isMobile || (!isMobile && this.windowWidth.matches) ) 
+                ? <Scrollbar {...scrollProp} stype="mediumBlack">
+                    <RefContextProvider value={this.scrollRefPage}>
+                      <IsVisibleContextProvider value={this.state.visibleContent}>
+                        { children }
+                        </IsVisibleContextProvider>
+                    </RefContextProvider>
+                  </Scrollbar>
+          
+              :  children
+                }
           </StyledContainer>
-
     )
   }
 }

web/ASC.Web.Common/src/components/PrivateRoute/PrivateRoute.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React from "react";
+import React, { useEffect } from "react";
 import { Redirect, Route } from "react-router-dom";
 import { connect } from "react-redux";
 //import { Loader } from "asc-web-components";
@@ -8,7 +8,7 @@ import { getCurrentUser, isAdmin, isMe } from "../../store/auth/selectors.js";
 import { AUTH_KEY } from "../../constants";
 import { Error401, Error404 } from "../../pages/errors";
 import isEmpty from "lodash/isEmpty";
-
+import { isMobile } from "react-device-detect";
 const PrivateRoute = ({ component: Component, ...rest }) => {
   const {
     isAdmin,
@@ -20,6 +20,10 @@ const PrivateRoute = ({ component: Component, ...rest }) => {
   } = rest;
   const { userId } = computedMatch.params;
 
+  useEffect(() => {
+    isMobile && document.getElementById('scroll') && document.getElementById('scroll').scrollTo(0,0)
+  })
+  
   const renderComponent = (props) => {
     if (!isAuthenticated) {
       console.log("PrivateRoute render Redirect to login", rest);