Web: Common: Layout: added isTabletView flag to store

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

@@ -1,9 +1,15 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 import MobileLayout from "./MobileLayout";
 import { utils } from "asc-web-components";
 import { isIOS, isFirefox, isChrome, isSafari } from "react-device-detect";
 
+import { connect } from "react-redux";
+import store from "../../store";
+
+const { setIsTabletView } = store.auth.actions;
+const { getIsTabletView } = store.auth.selectors;
+
 const { size } = utils.device;
 
 const StyledContainer = styled.div`
@@ -14,31 +20,27 @@ const StyledContainer = styled.div`
 `;
 
 const Layout = (props) => {
-  const { children } = props;
-  const isTablet = window.innerWidth <= size.tablet;
-
-  const [windowWidth, setWindowWidth] = useState({
-    matches: isTablet,
-  });
-
-  console.log(size.tablet);
+  const { children, isTabletView, setIsTabletView } = props;
 
   useEffect(() => {
-    let mediaQuery = window.matchMedia("(max-width: 1024px)");
-    mediaQuery.addListener(setWindowWidth);
+    const isTablet = window.innerWidth <= size.tablet;
+    setIsTabletView(isTablet);
 
-    return () => mediaQuery.removeListener(setWindowWidth);
+    let mediaQuery = window.matchMedia("(max-width: 1024px)");
+    mediaQuery.addEventListener("change", isViewChangeHandler);
+
+    return () => mediaQuery.removeEventListener("change", isViewChangeHandler);
   }, []);
 
   useEffect(() => {
-    if (isTablet) {
+    if (isTabletView) {
       if (isIOS && isSafari) window.addEventListener("resize", resizeHandler);
       else window.addEventListener("orientationchange", resizeHandler);
       resizeHandler();
     }
 
     return () => {
-      if (isTablet) {
+      if (isTabletView) {
         if (isIOS && isSafari)
           window.removeEventListener("resize", resizeHandler);
         else window.removeEventListener("orientationchange", resizeHandler);
@@ -46,6 +48,11 @@ const Layout = (props) => {
     };
   }, []);
 
+  const isViewChangeHandler = (e) => {
+    const { matches } = e;
+    setIsTabletView(matches);
+  };
+
   const resizeHandler = () => {
     const intervalTime = 100;
     const endTimeout = 300;
@@ -86,14 +93,24 @@ const Layout = (props) => {
     }, endTimeout);
   };
 
+  console.log(isTabletView, "isTabletView");
+
   return (
     <StyledContainer className="Layout">
-      {windowWidth && windowWidth.matches ? (
-        <MobileLayout {...props} windowWidth={windowWidth} />
-      ) : (
-        children
-      )}
+      {isTabletView ? <MobileLayout {...props} /> : children}
     </StyledContainer>
   );
 };
-export default Layout;
+
+const mapStateToProps = (state) => {
+  return {
+    isTabletView: getIsTabletView(state),
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    setIsTabletView: (isTabletView) => dispatch(setIsTabletView(isTabletView)),
+  };
+};
+export default connect(mapStateToProps, mapDispatchToProps)(Layout);

web/ASC.Web.Common/src/store/auth/actions.js

@@ -21,6 +21,7 @@ export const SET_CUSTOM_NAMES = "SET_CUSTOM_NAMES";
 export const SET_WIZARD_COMPLETED = "SET_WIZARD_COMPLETED";
 export const SET_HEADER_VISIBLE = "SET_HEADER_VISIBLE";
 export const SET_IS_AUTHENTICATED = "SET_IS_AUTHENTICATED";
+export const SET_IS_TABLET_VIEW = "SET_IS_TABLET_VIEW";
 
 export function setCurrentUser(user) {
   return {
@@ -139,6 +140,13 @@ export function setIsAuthenticated(isAuthenticated) {
   };
 }
 
+export function setIsTabletView(isTabletView) {
+  return {
+    type: SET_IS_TABLET_VIEW,
+    isTabletView,
+  };
+}
+
 export function getUser(dispatch) {
   return api.people
     .getUser()

web/ASC.Web.Common/src/store/auth/reducer.js

@@ -17,8 +17,9 @@ import {
   SET_WIZARD_COMPLETED,
   SET_HEADER_VISIBLE,
   SET_IS_AUTHENTICATED,
+  SET_IS_TABLET_VIEW,
 } from "./actions";
-import { LANGUAGE, AUTH_KEY,  HEADER_VISIBLE_KEY } from "../../constants";
+import { LANGUAGE, AUTH_KEY, HEADER_VISIBLE_KEY } from "../../constants";
 
 const initialState = {
   isAuthenticated: false,
@@ -65,6 +66,7 @@ const initialState = {
     },
     isEncryptionSupport: false, // TODO: should switch to "true", when desktop editors client uses
     isHeaderVisible: false,
+    isTabletView: false,
   },
 };
 
@@ -169,6 +171,13 @@ const authReducer = (state = initialState, action) => {
           isHeaderVisible: action.isHeaderVisible,
         },
       });
+    case SET_IS_TABLET_VIEW:
+      return Object.assign({}, state, {
+        settings: {
+          ...state.settings,
+          isTabletView: action.isTabletView,
+        },
+      });
     default:
       return state;
   }

web/ASC.Web.Common/src/store/auth/selectors.js

@@ -65,6 +65,8 @@ export const getIsLoaded = (state) => state.auth.isLoaded;
 
 export const getIsLoadedSection = (state) => state.auth.isLoadedSection;
 
+export const getIsTabletView = (state) => state.auth.settings.isTabletView;
+
 export const getDefaultPage = createSelector(
   [getSettings],
   (settings) => (settings && settings.defaultPage) || ""