Web: Client: Data import: useViewEffect hook was used in google workspace

2023-12-01 18:28:26 +05:00 · 2023-12-01 18:28:26 +05:00 · c0f88ed597
commit c0f88ed597
parent a812cee241
5 changed files with 58 additions and 107 deletions
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/RowView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/RowView/index.js
@ -1,8 +1,7 @@
-import { useEffect, useRef } from "react";
 import { inject, observer } from "mobx-react";
-import { isMobile } from "react-device-detect";
 import { tablet } from "@docspace/components/utils/device";
 import styled from "styled-components";
+import useViewEffect from "SRC_DIR/Hooks/useViewEffect";

 import EmptyScreenContainer from "@docspace/components/empty-screen-container";
 import IconButton from "@docspace/components/icon-button";
@ -10,7 +9,6 @@ import Link from "@docspace/components/link";
 import Box from "@docspace/components/box";
 import RowContainer from "@docspace/components/row-container";
 import Row from "@docspace/components/row";
-import Checkbox from "@docspace/components/checkbox";
 import Text from "@docspace/components/text";
 import UsersRow from "./UsersRow";
 import EmptyScreenUserReactSvgUrl from "PUBLIC_DIR/images/empty_screen_user.react.svg?url";
@ -62,6 +60,7 @@ const RowView = (props) => {
    toggleAllAccounts,
    isAccountChecked,
    setSearchValue,
+    currentDeviceType,
  } = props;

  const toggleAll = (isChecked) => toggleAllAccounts(isChecked, withEmailUsers, checkedAccountType);
@ -73,15 +72,11 @@ const RowView = (props) => {
  const isIndeterminate =
    checkedUsers.withEmail.length > 0 && checkedUsers.withEmail.length !== withEmailUsers.length;

-  useEffect(() => {
-    if (viewAs !== "table" && viewAs !== "row") return;
-
-    if (sectionWidth < 1025 || isMobile) {
-      viewAs !== "row" && setViewAs("row");
-    } else {
-      viewAs !== "table" && setViewAs("table");
-    }
-  }, [sectionWidth]);
+  useViewEffect({
+    view: viewAs,
+    setView: setViewAs,
+    currentDeviceType,
+  });

  return (
    <StyledRowContainer useReactWindow={false}>
@ -131,8 +126,9 @@ const RowView = (props) => {
  );
 };

-export default inject(({ setup, importAccountsStore }) => {
+export default inject(({ setup, auth, importAccountsStore }) => {
  const { viewAs, setViewAs } = setup;
+  const { currentDeviceType } = auth.settingsStore;
  const {
    checkedUsers,
    withEmailUsers,
@ -152,5 +148,6 @@ export default inject(({ setup, importAccountsStore }) => {
    toggleAllAccounts,
    isAccountChecked,
    setSearchValue,
+    currentDeviceType,
  };
 })(observer(RowView));
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/TableView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersStep/AccountsTable/TableView/index.js
@ -1,8 +1,8 @@
-import { useRef, useEffect } from "react";
+import { useRef } from "react";
 import { inject, observer } from "mobx-react";
-import { isMobile } from "react-device-detect";
 import { Base } from "@docspace/components/themes";
 import styled from "styled-components";
+import useViewEffect from "SRC_DIR/Hooks/useViewEffect";

 import EmptyScreenContainer from "@docspace/components/empty-screen-container";
 import IconButton from "@docspace/components/icon-button";
@ -31,8 +31,7 @@ const StyledTableContainer = styled(TableContainer)`
    margin-top: -1px;
    &:hover {
      cursor: pointer;
-      background: ${(props) =>
-        props.theme.client.settings.migration.tableRowHoverColor};
+      background: ${(props) => props.theme.client.settings.migration.tableRowHoverColor};
    }
  }
  .clear-icon {
@ -67,6 +66,7 @@ const TableView = (props) => {
    toggleAllAccounts,
    isAccountChecked,
    setSearchValue,
+    currentDeviceType,
  } = props;
  const tableRef = useRef(null);

@ -84,17 +84,13 @@ const TableView = (props) => {
  };

  const isIndeterminate =
-    checkedUsers.withEmail.length > 0 &&
-    checkedUsers.withEmail.length !== withEmailUsers.length;
+    checkedUsers.withEmail.length > 0 && checkedUsers.withEmail.length !== withEmailUsers.length;

-  useEffect(() => {
-    if (!sectionWidth) return;
-    if (sectionWidth < 1025 || isMobile) {
-      viewAs !== "row" && setViewAs("row");
-    } else {
-      viewAs !== "table" && setViewAs("table");
-    }
-  }, [sectionWidth]);
+  useViewEffect({
+    view: viewAs,
+    setView: setViewAs,
+    currentDeviceType,
+  });

  const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
  const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;
@ -123,8 +119,7 @@ const TableView = (props) => {
            filesLength={accountsData.length}
            hasMoreFiles={false}
            itemCount={accountsData.length}
-            fetchMoreFiles={() => {}}
-          >
+            fetchMoreFiles={() => {}}>
            {accountsData.map((data) => (
              <UsersTableRow
                t={t}
@ -153,12 +148,7 @@ const TableView = (props) => {
                onClick={onClearFilter}
                iconName={ClearEmptyFilterSvgUrl}
              />
-              <Link
-                type="action"
-                isHovered={true}
-                fontWeight="600"
-                onClick={onClearFilter}
-              >
+              <Link type="action" isHovered={true} fontWeight="600" onClick={onClearFilter}>
                {t("Common:ClearFilter")}
              </Link>
            </Box>
@ -172,6 +162,7 @@ const TableView = (props) => {
 export default inject(({ setup, auth, importAccountsStore }) => {
  const { viewAs, setViewAs } = setup;
  const { id: userId } = auth.userStore.user;
+  const { currentDeviceType } = auth.settingsStore;
  const {
    withEmailUsers,
    checkedUsers,
@ -191,5 +182,6 @@ export default inject(({ setup, auth, importAccountsStore }) => {
    toggleAllAccounts,
    isAccountChecked,
    setSearchValue,
+    currentDeviceType,
  };
 })(observer(TableView));
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js
@ -1,8 +1,7 @@
-import { useEffect, useRef } from "react";
 import { inject, observer } from "mobx-react";
-import { isMobile } from "react-device-detect";
 import { tablet } from "@docspace/components/utils/device";
 import styled from "styled-components";
+import useViewEffect from "SRC_DIR/Hooks/useViewEffect";

 import UsersTypeRow from "./UsersTypeRow";

@ -96,6 +95,7 @@ const RowView = ({
  toggleAllAccounts,
  isAccountChecked,
  setSearchValue,
+  currentDeviceType,
 }) => {
  const isIndeterminate =
    checkedUsers.result.length > 0 && checkedUsers.result.length !== users.result.length;
@ -104,15 +104,11 @@ const RowView = ({

  const onClearFilter = () => setSearchValue("");

-  useEffect(() => {
-    if (viewAs !== "table" && viewAs !== "row") return;
-
-    if (sectionWidth < 1025 || isMobile) {
-      viewAs !== "row" && setViewAs("row");
-    } else {
-      viewAs !== "table" && setViewAs("table");
-    }
-  }, [sectionWidth]);
+  useViewEffect({
+    view: viewAs,
+    setView: setViewAs,
+    currentDeviceType,
+  });

  const headerMenu = [
    {
@ -184,8 +180,9 @@ const RowView = ({
  );
 };

-export default inject(({ setup, importAccountsStore }) => {
+export default inject(({ setup, auth, importAccountsStore }) => {
  const { viewAs, setViewAs } = setup;
+  const { currentDeviceType } = auth.settingsStore;
  const {
    users,
    checkedUsers,
@ -205,5 +202,6 @@ export default inject(({ setup, importAccountsStore }) => {
    toggleAllAccounts,
    isAccountChecked,
    setSearchValue,
+    currentDeviceType,
  };
 })(observer(RowView));
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js
@ -1,8 +1,9 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef } from "react";
 import { inject, observer } from "mobx-react";
-import { isMobile } from "react-device-detect";
 import { Base } from "@docspace/components/themes";
 import styled from "styled-components";
+import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
+
 import UsersTypeTableHeader from "./UsersTypeTableHeader";
 import UsersTypeTableRow from "./UsersTypeTableRow";

@ -32,12 +33,9 @@ const StyledTableContainer = styled(TableContainer)`
    .table-container_group-menu {
      border-image-slice: 0;
      border-image-source: none;
-      background-color: ${(props) =>
-        props.theme.client.settings.migration.groupMenuBackground};
-      border-bottom: ${(props) =>
-        props.theme.client.settings.migration.groupMenuBorder};
-      box-shadow: ${(props) =>
-        props.theme.client.settings.migration.groupMenuBoxShadow};
+      background-color: ${(props) => props.theme.client.settings.migration.groupMenuBackground};
+      border-bottom: ${(props) => props.theme.client.settings.migration.groupMenuBorder};
+      box-shadow: ${(props) => props.theme.client.settings.migration.groupMenuBoxShadow};
    }

    .table-container_group-menu-checkbox {
@ -62,8 +60,7 @@ const StyledTableContainer = styled(TableContainer)`
    margin-top: -1px;
    &:hover {
      cursor: pointer;
-      background: ${(props) =>
-        props.theme.client.settings.migration.tableRowHoverColor};
+      background: ${(props) => props.theme.client.settings.migration.tableRowHoverColor};
    }
  }

@ -99,6 +96,7 @@ const TableView = ({
  toggleAllAccounts,
  isAccountChecked,
  setSearchValue,
+  currentDeviceType,
 }) => {
  const tableRef = useRef(null);
  const [hideColumns, setHideColumns] = useState(false);
@ -106,24 +104,19 @@ const TableView = ({
  const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;

  const isIndeterminate =
-    checkedUsers.result.length > 0 &&
-    checkedUsers.result.length !== users.result.length;
+    checkedUsers.result.length > 0 && checkedUsers.result.length !== users.result.length;

-  const toggleAll = (isChecked) =>
-    toggleAllAccounts(isChecked, users.result, checkedAccountType);
+  const toggleAll = (isChecked) => toggleAllAccounts(isChecked, users.result, checkedAccountType);

  const onClearFilter = () => {
    setSearchValue("");
  };

-  useEffect(() => {
-    if (!sectionWidth) return;
-    if (sectionWidth < 1025 || isMobile) {
-      viewAs !== "row" && setViewAs("row");
-    } else {
-      viewAs !== "table" && setViewAs("table");
-    }
-  }, [sectionWidth]);
+  useViewEffect({
+    view: viewAs,
+    setView: setViewAs,
+    currentDeviceType,
+  });

  const headerMenu = [
    {
@ -176,8 +169,7 @@ const TableView = ({
            filesLength={accountsData.length}
            hasMoreFiles={false}
            itemCount={accountsData.length}
-            fetchMoreFiles={() => {}}
-          >
+            fetchMoreFiles={() => {}}>
            {accountsData.map((data) => (
              <UsersTypeTableRow
                key={data.key}
@ -208,12 +200,7 @@ const TableView = ({
                onClick={onClearFilter}
                iconName={ClearEmptyFilterSvgUrl}
              />
-              <Link
-                type="action"
-                isHovered={true}
-                fontWeight="600"
-                onClick={onClearFilter}
-              >
+              <Link type="action" isHovered={true} fontWeight="600" onClick={onClearFilter}>
                {t("Common:ClearFilter")}
              </Link>
            </Box>
@ -227,6 +214,7 @@ const TableView = ({
 export default inject(({ setup, auth, importAccountsStore }) => {
  const { viewAs, setViewAs } = setup;
  const { id: userId } = auth.userStore.user;
+  const { currentDeviceType } = auth.settingsStore;
  const {
    users,
    checkedUsers,
@ -247,5 +235,6 @@ export default inject(({ setup, auth, importAccountsStore }) => {
    toggleAllAccounts,
    isAccountChecked,
    setSearchValue,
+    currentDeviceType,
  };
 })(observer(TableView));
--- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/index.js
@ -1,8 +1,7 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { Trans, withTranslation } from "react-i18next";
-import { isMobileOnly, isDesktop } from "react-device-detect";
 import { getStepTitle, getGoogleStepDescription } from "../../../utils";
-import { tablet } from "@docspace/components/utils/device";
+import { tablet, isMobile } from "@docspace/components/utils/device";
 import styled from "styled-components";

 import StepContent from "./Stepper";
@ -45,8 +44,7 @@ const GoogleWrapper = styled.div`
    font-size: 12px;
    margin-bottom: 16px;
    line-height: 16px;
-    color: ${(props) =>
-      props.theme.client.settings.migration.stepDescriptionColor};
+    color: ${(props) => props.theme.client.settings.migration.stepDescriptionColor};

    @media ${tablet} {
      max-width: 675px;
@ -56,26 +54,8 @@ const GoogleWrapper = styled.div`

 const GoogleWorkspace = ({ t }) => {
  const [showReminder, setShowReminder] = useState(false);
-  const [isSmallWindow, setIsSmallWindow] = useState(false);
  const [currentStep, setCurrentStep] = useState(1);

-  useEffect(() => {
-    onCheckView();
-    window.addEventListener("resize", onCheckView);
-
-    return () => {
-      window.removeEventListener("resize", onCheckView);
-    };
-  }, []);
-
-  const onCheckView = () => {
-    if (isDesktop && window.innerWidth < 600) {
-      setIsSmallWindow(true);
-    } else {
-      setIsSmallWindow(false);
-    }
-  };
-
  const onNextStep = () => {
    if (currentStep !== 6) {
      setCurrentStep((prev) => prev + 1);
@ -118,16 +98,11 @@ const GoogleWorkspace = ({ t }) => {
    />
  );

-  if (isSmallWindow)
-    return <BreakpointWarning sectionName={t("Settings:DataImport")} />;
-  if (isMobileOnly)
-    return <BreakpointWarning sectionName={t("Settings:DataImport")} />;
+  if (isMobile()) return <BreakpointWarning sectionName={t("Settings:DataImport")} />;

  return (
    <GoogleWrapper>
-      <Text className="workspace-subtitle">
-        {t("Settings:AboutDataImport")}
-      </Text>
+      <Text className="workspace-subtitle">{t("Settings:AboutDataImport")}</Text>
      <div className="step-container">
        <Box displayProp="flex" marginProp="0 0 8px">
          <Text className="step-counter">