Web: remove useless withRouter and change import from 'react-router' to 'react-router-dom'

packages/client/src/components/Article/Body/AccountsItem.js

@@ -1,6 +1,6 @@
 import CatalogAccountsReactSvgUrl from "PUBLIC_DIR/images/catalog.accounts.react.svg?url";
 import React from "react";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import CatalogItem from "@docspace/components/catalog-item";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";

packages/client/src/components/Article/Body/SettingsItem.js

@@ -1,6 +1,6 @@
 import CatalogSettingsReactSvgUrl from "PUBLIC_DIR/images/catalog.settings.react.svg?url";
 import React from "react";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import CatalogItem from "@docspace/components/catalog-item";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";

packages/client/src/components/Article/Body/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { inject, observer } from "mobx-react";
-import { withRouter } from "react-router";
+
 import { setDocumentTitle } from "@docspace/client/src/helpers/filesUtils";
 import config from "PACKAGE_FILE";
 import { RoomSearchArea } from "@docspace/common/constants";
@@ -70,9 +70,6 @@ const ArticleBodyContent = (props) => {
 
         fetchRooms,
         setAlreadyFetchingRooms,
-
-        homepage,
-        history,
       } = props;
 
       if (filesIsLoading) return;
@@ -238,9 +235,7 @@ export default inject(
     };
   }
 )(
-  withRouter(
+  withTranslation([])(
-    withTranslation([])(
+    withLoader(observer(ArticleBodyContent))(<Loaders.ArticleFolder />)
-      withLoader(observer(ArticleBodyContent))(<Loaders.ArticleFolder />)
-    )
   )
 );

packages/client/src/components/Article/MainButton/index.js

@@ -20,7 +20,7 @@ import MainButton from "@docspace/components/main-button";
 import { withTranslation } from "react-i18next";
 import Loaders from "@docspace/common/components/Loaders";
 import { encryptionUploadDialog } from "../../../helpers/desktop";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 
 import MobileView from "./MobileView";
 import { combineUrl } from "@docspace/common/utils";

packages/client/src/components/MainBar/Bar.js

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import { inject, observer } from "mobx-react";
 import difference from "lodash/difference";
 import { withTranslation } from "react-i18next";
-import { withRouter } from "react-router";
 
 import { ADS_TIMEOUT } from "@docspace/client/src/helpers/filesConstants";
 
@@ -337,4 +336,4 @@ export default inject(({ auth, profileActionsStore }) => {
     currentColorScheme,
     setMainBarVisible,
   };
-})(withTranslation(["Profile", "Common"])(withRouter(observer(Bar))));
+})(withTranslation(["Profile", "Common"])(observer(Bar)));

packages/client/src/components/NavMenu/index.js

@@ -8,7 +8,7 @@ import Header from "./sub-components/header";
 import HeaderNav from "./sub-components/header-nav";
 import HeaderUnAuth from "./sub-components/header-unauth";
 import { I18nextProvider, withTranslation } from "react-i18next";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 
 import Loaders from "@docspace/common/components/Loaders";
 import { LayoutContextConsumer } from "../Layout/context";

packages/client/src/components/NavMenu/sub-components/header-nav.js

@@ -5,7 +5,6 @@ import ProfileActions from "./profile-actions";
 import { useTranslation } from "react-i18next";
 import { tablet, mobile } from "@docspace/components/utils/device";
 import { inject, observer } from "mobx-react";
-import { withRouter } from "react-router";
 import { isMobile, isMobileOnly } from "react-device-detect";
 
 const StyledNav = styled.nav`
@@ -80,18 +79,16 @@ HeaderNav.propTypes = {
   isAuthenticated: PropTypes.bool,
 };
 
-export default withRouter(
+export default inject(({ auth, profileActionsStore }) => {
-  inject(({ auth, profileActionsStore }) => {
+  const { userStore, isAuthenticated } = auth;
-    const { userStore, isAuthenticated } = auth;
+  const { user, userIsUpdate, setUserIsUpdate } = userStore;
-    const { user, userIsUpdate, setUserIsUpdate } = userStore;
+  const { getActions } = profileActionsStore;
-    const { getActions } = profileActionsStore;
 
-    return {
+  return {
-      user,
+    user,
-      isAuthenticated,
+    isAuthenticated,
-      userIsUpdate,
+    userIsUpdate,
-      setUserIsUpdate,
+    setUserIsUpdate,
-      getActions,
+    getActions,
-    };
+  };
-  })(observer(HeaderNav))
+})(observer(HeaderNav));
-);

packages/client/src/components/PeopleArticle/Body/index.js

@@ -6,7 +6,7 @@ import Filter from "@docspace/common/api/people/filter";
 import Loaders from "@docspace/common/components/Loaders";
 import { inject, observer } from "mobx-react";
 import { getSelectedGroup } from "../../../helpers/people-helpers";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { isMobile } from "@docspace/components/utils/device";
 import { isMobileOnly } from "react-device-detect";
 import config from "PACKAGE_FILE";

packages/client/src/components/PeopleArticle/MainButton/index.js

@@ -6,7 +6,7 @@ import AddGuestReactSvgUrl from "PUBLIC_DIR/images/add.guest.react.svg?url";
 import AddEmployeeReactSvgUrl from "ASSETS/images/add.employee.react.svg?url";
 import React from "react";
 //import PropTypes from "prop-types";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import MainButton from "@docspace/components/main-button";
 import InviteDialog from "../../dialogs/InviteDialog/index";
 import { withTranslation } from "react-i18next";
@@ -160,11 +160,8 @@ class ArticleMainButtonContent extends React.Component {
 
 export default withRouter(
   inject(({ auth }) => {
-    const {
+    const { userCaption, guestCaption, groupCaption } =
-      userCaption,
+      auth.settingsStore.customNames;
-      guestCaption,
-      groupCaption,
-    } = auth.settingsStore.customNames;
 
     return {
       isAdmin: auth.isAdmin,

packages/client/src/components/dialogs/ArchiveDialog/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import styled from "styled-components";
-import { withRouter } from "react-router";
+
 import ModalDialogContainer from "../ModalDialogContainer";
 import Text from "@docspace/components/text";
 import Button from "@docspace/components/button";
@@ -168,4 +168,4 @@ export default inject(
       items,
     };
   }
-)(withRouter(observer(ArchiveDialog)));
+)(observer(ArchiveDialog));

packages/client/src/components/dialogs/ChangeUserStatusDialog/index.js

@@ -1,5 +1,4 @@
 import React, { memo } from "react";
-import { withRouter } from "react-router";
 import PropTypes from "prop-types";
 
 import ModalDialog from "@docspace/components/modal-dialog";
@@ -135,23 +134,21 @@ ChangeUserStatusDialog.propTypes = {
   userIDs: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
-export default withRouter(
+export default inject(({ peopleStore, auth }) => {
-  inject(({ peopleStore, auth }) => {
+  const setSelected = peopleStore.selectionStore.setSelected;
-    const setSelected = peopleStore.selectionStore.setSelected;
 
-    const { getPeopleListItem, updateUserStatus } = peopleStore.usersStore;
+  const { getPeopleListItem, updateUserStatus } = peopleStore.usersStore;
 
-    const { setSelection, isVisible: infoPanelVisible } = auth.infoPanelStore;
+  const { setSelection, isVisible: infoPanelVisible } = auth.infoPanelStore;
 
-    return {
+  return {
-      updateUserStatus,
+    updateUserStatus,
 
-      setSelected,
+    setSelected,
 
-      getPeopleListItem,
+    getPeopleListItem,
 
-      setSelection,
+    setSelection,
-      infoPanelVisible,
+    infoPanelVisible,
-    };
+  };
-  })(observer(ChangeUserStatusDialog))
+})(observer(ChangeUserStatusDialog));
-);

packages/client/src/components/dialogs/ConflictResolveDialog/index.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { withRouter } from "react-router";
 import ModalDialog from "@docspace/components/modal-dialog";
 import RadioButtonGroup from "@docspace/components/radio-button-group";
 import Button from "@docspace/components/button";
@@ -282,9 +281,7 @@ export default inject(({ auth, dialogsStore, uploadDataStore, filesStore }) => {
     setCopyPanelVisible,
   };
 })(
-  withRouter(
+  withTranslation(["ConflictResolveDialog", "Common"])(
-    withTranslation(["ConflictResolveDialog", "Common"])(
+    observer(ConflictResolveDialog)
-      observer(ConflictResolveDialog)
-    )
   )
 );

packages/client/src/components/dialogs/ConvertDialog/index.js

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import { withRouter } from "react-router";
 import ModalDialogContainer from "../ModalDialogContainer";
 import ModalDialog from "@docspace/components/modal-dialog";
 import Button from "@docspace/components/button";
@@ -157,16 +156,10 @@ export default inject(
       isFavoritesFolder,
       isShareFolder,
     } = treeFoldersStore;
-    const {
+    const { convertUploadedFiles, convertFile, setIsConvertSingleFile } =
-      convertUploadedFiles,
+      uploadDataStore;
-      convertFile,
+    const { storeOriginalFiles, setStoreOriginal, hideConfirmConvert } =
-      setIsConvertSingleFile,
+      settingsStore;
-    } = uploadDataStore;
-    const {
-      storeOriginalFiles,
-      setStoreOriginal,
-      hideConfirmConvert,
-    } = settingsStore;
     const { id: folderId } = selectedFolderStore;
     const {
       convertDialogVisible: visible,
@@ -191,4 +184,4 @@ export default inject(
       setIsConvertSingleFile,
     };
   }
-)(withRouter(observer(ConvertDialog)));
+)(observer(ConvertDialog));

packages/client/src/components/dialogs/DeleteDialog/index.js

@@ -1,5 +1,4 @@
 import React, { useEffect } from "react";
-import { withRouter } from "react-router";
 import ModalDialog from "@docspace/components/modal-dialog";
 import { StyledDeleteDialog } from "./StyledDeleteDialog";
 import Button from "@docspace/components/button";
@@ -214,23 +213,12 @@ const DeleteDialog = withTranslation([
 
 export default inject(
   ({ filesStore, dialogsStore, filesActionsStore, treeFoldersStore, auth }) => {
-    const {
+    const { selection, isLoading, bufferSelection, setBufferSelection } =
-      selection,
+      filesStore;
-      isLoading,
+    const { deleteAction, unsubscribeAction, deleteRoomsAction } =
-      bufferSelection,
+      filesActionsStore;
-      setBufferSelection,
+    const { isPrivacyFolder, isRecycleBinFolder, isPersonalRoom, isRoom } =
-    } = filesStore;
+      treeFoldersStore;
-    const {
-      deleteAction,
-      unsubscribeAction,
-      deleteRoomsAction,
-    } = filesActionsStore;
-    const {
-      isPrivacyFolder,
-      isRecycleBinFolder,
-      isPersonalRoom,
-      isRoom,
-    } = treeFoldersStore;
 
     const {
       deleteDialogVisible: visible,
@@ -268,4 +256,4 @@ export default inject(
       isRoom,
     };
   }
-)(withRouter(observer(DeleteDialog)));
+)(observer(DeleteDialog));

packages/client/src/components/dialogs/DeleteProfileEverDialog/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import PropTypes from "prop-types";
 
 import Button from "@docspace/components/button";

packages/client/src/components/dialogs/DeleteThirdPartyDialog/index.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { withRouter } from "react-router";
 import ModalDialog from "@docspace/components/modal-dialog";
 import Button from "@docspace/components/button";
 import { withTranslation } from "react-i18next";
@@ -104,11 +103,8 @@ export default inject(
     selectedFolderStore,
     backup,
   }) => {
-    const {
+    const { providers, setThirdPartyProviders, deleteThirdParty } =
-      providers,
+      settingsStore.thirdPartyStore;
-      setThirdPartyProviders,
-      deleteThirdParty,
-    } = settingsStore.thirdPartyStore;
     const { fetchFiles } = filesStore;
     const { selectedThirdPartyAccount: backupConnectionItem } = backup;
     const {
@@ -132,9 +128,7 @@ export default inject(
     };
   }
 )(
-  withRouter(
+  withTranslation(["DeleteThirdPartyDialog", "Common", "Translations"])(
-    withTranslation(["DeleteThirdPartyDialog", "Common", "Translations"])(
+    observer(DeleteThirdPartyDialog)
-      observer(DeleteThirdPartyDialog)
-    )
   )
 );

packages/client/src/components/dialogs/DeleteUsersDialog/index.js

@@ -1,5 +1,4 @@
 import React, { memo } from "react";
-import { withRouter } from "react-router";
 import PropTypes from "prop-types";
 
 import Button from "@docspace/components/button";
@@ -160,13 +159,11 @@ DeleteUsersDialog.propTypes = {
   removeUser: PropTypes.func.isRequired,
 };
 
-export default withRouter(
+export default inject(({ peopleStore, auth }) => ({
-  inject(({ peopleStore, auth }) => ({
+  filter: peopleStore.filterStore.filter,
-    filter: peopleStore.filterStore.filter,
+  removeUser: peopleStore.usersStore.removeUser,
-    removeUser: peopleStore.usersStore.removeUser,
+  selectedUsers: peopleStore.selectionStore.selection,
-    selectedUsers: peopleStore.selectionStore.selection,
+  setSelected: peopleStore.selectionStore.setSelected,
-    setSelected: peopleStore.selectionStore.setSelected,
+  userIds: peopleStore.selectionStore.getUsersToRemoveIds,
-    userIds: peopleStore.selectionStore.getUsersToRemoveIds,
+  theme: auth.settingsStore.theme,
-    theme: auth.settingsStore.theme,
+}))(observer(DeleteUsersDialog));
-  }))(observer(DeleteUsersDialog))
-);

packages/client/src/components/dialogs/DownloadDialog/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { withRouter } from "react-router";
 import { withTranslation, Trans } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import { StyledDownloadDialog } from "./StyledDownloadDialog";
@@ -12,13 +11,8 @@ import DownloadContent from "./DownloadContent";
 class DownloadDialogComponent extends React.Component {
   constructor(props) {
     super(props);
-    const {
+    const { documents, spreadsheets, presentations, masterForms, other } =
-      documents,
+      this.props.sortedFiles;
-      spreadsheets,
-      presentations,
-      masterForms,
-      other,
-    } = this.props.sortedFiles;
 
     this.state = {
       documents: {
@@ -404,10 +398,8 @@ export default inject(
     const { extsConvertible } = settingsStore;
     const { theme } = auth.settingsStore;
 
-    const {
+    const { downloadDialogVisible: visible, setDownloadDialogVisible } =
-      downloadDialogVisible: visible,
+      dialogsStore;
-      setDownloadDialogVisible,
-    } = dialogsStore;
 
     const { downloadFiles } = filesActionsStore;
 
@@ -422,4 +414,4 @@ export default inject(
       theme,
     };
   }
-)(withRouter(observer(DownloadDialog)));
+)(observer(DownloadDialog));

packages/client/src/components/dialogs/EmptyTrashDialog/index.js

@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import styled from "styled-components";
-import { withRouter } from "react-router";
 import ModalDialogContainer from "../ModalDialogContainer";
 import Text from "@docspace/components/text";
 import Button from "@docspace/components/button";
@@ -113,10 +112,8 @@ export default inject(
 
     const { isArchiveFolder } = treeFoldersStore;
 
-    const {
+    const { emptyTrashDialogVisible: visible, setEmptyTrashDialogVisible } =
-      emptyTrashDialogVisible: visible,
+      dialogsStore;
-      setEmptyTrashDialogVisible,
-    } = dialogsStore;
 
     return {
       isLoading,
@@ -130,4 +127,4 @@ export default inject(
       isArchiveFolder,
     };
   }
-)(withRouter(observer(EmptyTrashDialog)));
+)(observer(EmptyTrashDialog));

packages/client/src/components/dialogs/InviteUsersWarningDialog/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { withTranslation, Trans } from "react-i18next";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import moment from "moment";
 import { combineUrl } from "@docspace/common/utils";
 import ModalDialog from "@docspace/components/modal-dialog";
@@ -132,11 +132,8 @@ const InviteUsersWarningDialog = (props) => {
 
 export default inject(({ auth, dialogsStore }) => {
   const { isPaymentPageAvailable } = auth;
-  const {
+  const { dueDate, delayDueDate, isGracePeriod } =
-    dueDate,
+    auth.currentTariffStatusStore;
-    delayDueDate,
-    isGracePeriod,
-  } = auth.currentTariffStatusStore;
   const { currentTariffPlanTitle } = auth.currentQuotaStore;
 
   const {

packages/client/src/components/dialogs/ResetApplicationDialog/index.js

@@ -4,7 +4,7 @@ import ModalDialog from "@docspace/components/modal-dialog";
 import Button from "@docspace/components/button";
 import Text from "@docspace/components/text";
 import { withTranslation } from "react-i18next";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import ModalDialogContainer from "../ModalDialogContainer";
 import toastr from "@docspace/components/toast/toastr";
 

packages/client/src/components/dialogs/SendInviteDialog/index.js

@@ -1,5 +1,4 @@
 import React, { memo } from "react";
-import { withRouter } from "react-router";
 import PropTypes from "prop-types";
 
 import ModalDialog from "@docspace/components/modal-dialog";
@@ -166,10 +165,8 @@ SendInviteDialog.propTypes = {
   setSelected: PropTypes.func.isRequired,
 };
 
-export default withRouter(
+export default inject(({ peopleStore }) => ({
-  inject(({ peopleStore }) => ({
+  selectedUsers: peopleStore.selectionStore.selection,
-    selectedUsers: peopleStore.selectionStore.selection,
+  setSelected: peopleStore.selectionStore.setSelected,
-    setSelected: peopleStore.selectionStore.setSelected,
+  userIds: peopleStore.selectionStore.getUsersToInviteIds,
-    userIds: peopleStore.selectionStore.getUsersToInviteIds,
+}))(observer(SendInviteDialog));
-  }))(observer(SendInviteDialog))
-);

packages/client/src/components/panels/ChangeOwnerPanel/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { withRouter } from "react-router";
 import Backdrop from "@docspace/components/backdrop";
 import Heading from "@docspace/components/heading";
 import Aside from "@docspace/components/aside";
@@ -29,13 +28,8 @@ class ChangeOwnerComponent extends React.Component {
 
   onOwnerChange = () => {
     const { owner } = this.state;
-    const {
+    const { selection, setFolder, setFile, setIsLoading, setFilesOwner } =
-      selection,
+      this.props;
-      setFolder,
-      setFile,
-      setIsLoading,
-      setFilesOwner,
-    } = this.props;
     const folderIds = [];
     const fileIds = [];
     const selectedItem = selection[0];
@@ -162,4 +156,4 @@ export default inject(({ auth, filesStore, dialogsStore }) => {
     setFilesOwner,
     setBufferSelection,
   };
-})(withRouter(observer(ChangeOwnerPanel)));
+})(observer(ChangeOwnerPanel));

packages/client/src/components/panels/NewFilesPanel/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { withRouter } from "react-router";
 import Backdrop from "@docspace/components/backdrop";
 import Link from "@docspace/components/link";
 import Loader from "@docspace/components/loader";
@@ -94,11 +93,8 @@ class NewFilesPanel extends React.Component {
 
     const { id, extension: fileExst } = e.target.dataset;
 
-    const {
+    const { /* updateFolderBadge, */ markAsRead, newFiles, refreshFiles } =
-      /* updateFolderBadge, */ markAsRead,
+      this.props;
-      newFiles,
-      refreshFiles,
-    } = this.props;
     const readingFiles = this.state.readingFiles;
 
     const fileIds = fileExst ? [id] : [];
@@ -332,11 +328,8 @@ export default inject(
       refreshFiles,
     } = filesStore;
     //const { updateRootBadge } = treeFoldersStore;
-    const {
+    const { playlist, setMediaViewerData, setCurrentItem } =
-      playlist,
+      mediaViewerDataStore;
-      setMediaViewerData,
-      setCurrentItem,
-    } = mediaViewerDataStore;
     const { getIcon, getFolderIcon } = settingsStore;
     const { markAsRead } = filesActionsStore;
     const { pathParts, id: currentFolderId } = selectedFolderStore;
@@ -379,9 +372,7 @@ export default inject(
     };
   }
 )(
-  withRouter(
+  withTranslation(["NewFilesPanel", "Common"])(
-    withTranslation(["NewFilesPanel", "Common"])(
+    withLoader(observer(NewFilesPanel))(<Loaders.DialogAsideLoader isPanel />)
-      withLoader(observer(NewFilesPanel))(<Loaders.DialogAsideLoader isPanel />)
-    )
   )
 );

packages/client/src/components/panels/OperationsPanel/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { withRouter } from "react-router";
+
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import toastr from "@docspace/components/toast/toastr";
@@ -246,4 +246,4 @@ export default inject(
       thirdPartyMoveDialogVisible,
     };
   }
-)(withRouter(observer(OperationsPanel)));
+)(observer(OperationsPanel));

packages/client/src/helpers/confirmRoute.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { Route } from "react-router-dom";
 import { ValidationResult } from "./../helpers/constants";
-import { withRouter } from "react-router";
 import Loader from "@docspace/components/loader";
 import Section from "@docspace/common/components/Section";
 import { checkConfirmLink } from "@docspace/common/api/user"; //TODO: Move AuthStore
@@ -133,4 +132,4 @@ export default inject(({ auth }) => {
     isAuthenticated,
     logout,
   };
-})(observer(withRouter(ConfirmRoute)));
+})(observer(ConfirmRoute));

packages/client/src/pages/About/AboutHeader.js

@@ -2,7 +2,7 @@
 import React from "react";
 import styled from "styled-components";
 import { withTranslation } from "react-i18next";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import Headline from "@docspace/common/components/Headline";
 import IconButton from "@docspace/components/icon-button";
 import { tablet } from "@docspace/components/utils/device";

packages/client/src/pages/AccountsHome/Section/Body/RowView/SimpleUserRow.js

@@ -1,6 +1,5 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import { withRouter } from "react-router";
 import { isMobile } from "react-device-detect";
 
 import Row from "@docspace/components/row";
@@ -142,4 +141,4 @@ const SimpleUserRow = (props) => {
   );
 };
 
-export default withRouter(withContent(SimpleUserRow));
+export default withContent(SimpleUserRow);

packages/client/src/pages/AccountsHome/Section/Body/RowView/userContent.js

@@ -1,6 +1,5 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import { withRouter } from "react-router";
 import { isTablet } from "react-device-detect";
 import { withTranslation } from "react-i18next";
 
@@ -40,14 +39,8 @@ const UserContent = ({
   t,
   theme,
 }) => {
-  const {
+  const { displayName, email, statusType, role, isVisitor, isCollaborator } =
-    displayName,
+    item;
-    email,
-    statusType,
-    role,
-    isVisitor,
-    isCollaborator,
-  } = item;
 
   const nameColor =
     statusType === "pending" || statusType === "disabled"
@@ -120,4 +113,4 @@ const UserContent = ({
   );
 };
 
-export default withTranslation(["People", "Common"])(withRouter(UserContent));
+export default withTranslation(["People", "Common"])(UserContent);

packages/client/src/pages/AccountsHome/Section/Body/TableView/TableRow.js

@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 
 import TableRow from "@docspace/components/table-container/TableRow";
@@ -429,5 +428,5 @@ const PeopleTableRow = (props) => {
 };
 
 export default withTranslation(["People", "Common", "Settings"])(
-  withRouter(withContent(PeopleTableRow))
+  withContent(PeopleTableRow)
 );

packages/client/src/pages/AccountsHome/Section/Filter/index.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import { isMobileOnly } from "react-device-detect";
 import find from "lodash/find";
@@ -474,38 +473,31 @@ const SectionFilterContent = ({
   );
 };
 
-export default withRouter(
+export default inject(({ auth, peopleStore }) => {
-  inject(({ auth, peopleStore }) => {
+  const { loadingStore, filterStore, usersStore, groupsStore, viewAs } =
-    const {
+    peopleStore;
-      loadingStore,
+  const { userStore, isLoaded, isAdmin } = auth;
-      filterStore,
+  const { user } = userStore;
-      usersStore,
+  const { groups } = groupsStore;
-      groupsStore,
+  const { getUsersList: fetchPeople } = usersStore;
-      viewAs,
+  const { filter } = filterStore;
-    } = peopleStore;
+  const { setIsLoading } = loadingStore;
-    const { userStore, isLoaded, isAdmin } = auth;
-    const { user } = userStore;
-    const { groups } = groupsStore;
-    const { getUsersList: fetchPeople } = usersStore;
-    const { filter } = filterStore;
-    const { setIsLoading } = loadingStore;
 
-    return {
+  return {
-      isLoaded,
+    isLoaded,
-      isAdmin,
+    isAdmin,
-      user,
+    user,
-      groups,
+    groups,
-      fetchPeople,
+    fetchPeople,
-      filter,
+    filter,
-      setIsLoading,
+    setIsLoading,
-      viewAs,
+    viewAs,
-    };
+  };
-  })(
+})(
-    observer(
+  observer(
-      withLayoutSize(
+    withLayoutSize(
-        withTranslation(["People", "Common", "PeopleTranslations"])(
+      withTranslation(["People", "Common", "PeopleTranslations"])(
-          withPeopleLoader(SectionFilterContent)(<Loaders.Filter />)
+        withPeopleLoader(SectionFilterContent)(<Loaders.Filter />)
-        )
       )
     )
   )

packages/client/src/pages/AccountsHome/Section/Header/index.js

@@ -10,7 +10,6 @@ import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
 import { isMobile, isMobileOnly } from "react-device-detect";
 import styled, { css } from "styled-components";
-import { withRouter } from "react-router";
 import Headline from "@docspace/common/components/Headline";
 import Loaders from "@docspace/common/components/Loaders";
 import DropDownItem from "@docspace/components/drop-down-item";
@@ -363,62 +362,54 @@ const SectionHeaderContent = (props) => {
   );
 };
 
-export default withRouter(
+export default inject(({ auth, peopleStore, dialogsStore }) => {
-  inject(({ auth, peopleStore, dialogsStore }) => {
+  const { setIsVisible: setInfoPanelIsVisible, isVisible: isInfoPanelVisible } =
-    const {
+    auth.infoPanelStore;
-      setIsVisible: setInfoPanelIsVisible,
-      isVisible: isInfoPanelVisible,
-    } = auth.infoPanelStore;
 
-    const {
+  const { setInvitePanelOptions, setInviteUsersWarningDialogVisible } =
-      setInvitePanelOptions,
+    dialogsStore;
-      setInviteUsersWarningDialogVisible,
-    } = dialogsStore;
 
-    const { isOwner, isAdmin } = auth.userStore.user;
+  const { isOwner, isAdmin } = auth.userStore.user;
-    const { isGracePeriod } = auth.currentTariffStatusStore;
+  const { isGracePeriod } = auth.currentTariffStatusStore;
 
-    const { selectionStore, headerMenuStore, getHeaderMenu } = peopleStore;
+  const { selectionStore, headerMenuStore, getHeaderMenu } = peopleStore;
 
-    const {
+  const {
-      isHeaderVisible,
+    isHeaderVisible,
-      isHeaderIndeterminate,
+    isHeaderIndeterminate,
-      isHeaderChecked,
+    isHeaderChecked,
-      cbMenuItems,
+    cbMenuItems,
-      getMenuItemId,
+    getMenuItemId,
-      getCheckboxItemLabel,
+    getCheckboxItemLabel,
-    } = headerMenuStore;
+  } = headerMenuStore;
 
-    const { setSelected } = selectionStore;
+  const { setSelected } = selectionStore;
 
-    return {
+  return {
-      setSelected,
+    setSelected,
-      isHeaderVisible,
+    isHeaderVisible,
-      isHeaderIndeterminate,
+    isHeaderIndeterminate,
-      isHeaderChecked,
+    isHeaderChecked,
-      getHeaderMenu,
+    getHeaderMenu,
-      cbMenuItems,
+    cbMenuItems,
-      getMenuItemId,
+    getMenuItemId,
-      getCheckboxItemLabel,
+    getCheckboxItemLabel,
-      setInfoPanelIsVisible,
+    setInfoPanelIsVisible,
-      isInfoPanelVisible,
+    isInfoPanelVisible,
-      isOwner,
+    isOwner,
-      isAdmin,
+    isAdmin,
-      setInvitePanelOptions,
+    setInvitePanelOptions,
-      isGracePeriod,
+    isGracePeriod,
-      setInviteUsersWarningDialogVisible,
+    setInviteUsersWarningDialogVisible,
-    };
+  };
-  })(
+})(
-    withTranslation([
+  withTranslation([
-      "People",
+    "People",
-      "Common",
+    "Common",
-      "PeopleTranslations",
+    "PeopleTranslations",
-      "Files",
+    "Files",
-      "ChangeUserTypeDialog",
+    "ChangeUserTypeDialog",
-    ])(
+  ])(
-      withPeopleLoader(observer(SectionHeaderContent))(
+    withPeopleLoader(observer(SectionHeaderContent))(<Loaders.SectionHeader />)
-        <Loaders.SectionHeader />
-      )
-    )
   )
 );

packages/client/src/pages/AccountsHome/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import PropTypes from "prop-types";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import { isMobile } from "react-device-detect";
 
@@ -140,23 +140,14 @@ export default inject(
     const { settingsStore, currentTariffStatusStore } = auth;
     const { setPortalTariff } = currentTariffStatusStore;
     const { showCatalog, withPaging } = settingsStore;
-    const {
+    const { usersStore, selectedGroupStore, loadingStore, viewAs } =
-      usersStore,
+      peopleStore;
-      selectedGroupStore,
-      loadingStore,
-      viewAs,
-    } = peopleStore;
     const { getUsersList } = usersStore;
     const { selectedGroup } = selectedGroupStore;
     const { setSelectedNode } = treeFoldersStore;
     const { onClickBack } = filesActionsStore;
-    const {
+    const { isLoading, setIsLoading, setIsRefresh, firstLoad, setFirstLoad } =
-      isLoading,
+      loadingStore;
-      setIsLoading,
-      setIsRefresh,
-      firstLoad,
-      setFirstLoad,
-    } = loadingStore;
 
     return {
       setPortalTariff,

packages/client/src/pages/Confirm/sub-components/activateEmail.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { withRouter } from "react-router";
 import PropTypes from "prop-types";
 import Loader from "@docspace/components/loader";
 import Section from "@docspace/common/components/Section";
@@ -57,7 +56,6 @@ class ActivateEmail extends React.PureComponent {
 
 ActivateEmail.propTypes = {
   location: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired,
 };
 const ActivateEmailForm = (props) => (
   <Section>
@@ -73,4 +71,4 @@ export default inject(({ auth }) => {
     logout,
     updateEmailActivationStatus: userStore.updateEmailActivationStatus,
   };
-})(withRouter(observer(ActivateEmailForm)));
+})(observer(ActivateEmailForm));

packages/client/src/pages/Confirm/sub-components/activateUser.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import Text from "@docspace/components/text";
 import TextInput from "@docspace/components/text-input";
@@ -266,9 +265,7 @@ export default inject(({ auth }) => {
     login: auth.login,
   };
 })(
-  withRouter(
+  withTranslation(["Confirm", "Common", "Wizard"])(
-    withTranslation(["Confirm", "Common", "Wizard"])(
+    withLoader(observer(ActivateUserForm))
-      withLoader(observer(ActivateUserForm))
-    )
   )
 );

packages/client/src/pages/Confirm/sub-components/auth.js

@@ -1,5 +1,4 @@
 import React, { useEffect } from "react";
-import { withRouter } from "react-router";
 import Loader from "@docspace/components/loader";
 import Section from "@docspace/common/components/Section";
 import { loginWithConfirmKey } from "@docspace/common/api/user";
@@ -35,4 +34,4 @@ const AuthPage = (props) => (
   </Section>
 );
 
-export default withRouter(AuthPage);
+export default AuthPage;

packages/client/src/pages/Confirm/sub-components/changeEmail.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { withRouter } from "react-router";
 import PropTypes from "prop-types";
 import { inject, observer } from "mobx-react";
 import Loader from "@docspace/components/loader";
@@ -92,4 +91,4 @@ export default inject(({ auth }) => {
     changeEmail: userStore.changeEmail,
     defaultPage: settingsStore.defaultPage,
   };
-})(observer(withRouter(ChangeEmailForm)));
+})(observer(ChangeEmailForm));

packages/client/src/pages/Confirm/sub-components/changeOwner.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import Text from "@docspace/components/text";
 import Button from "@docspace/components/button";
@@ -60,9 +59,5 @@ export default inject(({ auth }) => ({
   greetingTitle: auth.settingsStore.greetingSettings,
   defaultPage: auth.settingsStore.defaultPage,
 }))(
-  withRouter(
+  withTranslation(["Confirm", "Common"])(withLoader(observer(ChangeOwnerForm)))
-    withTranslation(["Confirm", "Common"])(
-      withLoader(observer(ChangeOwnerForm))
-    )
-  )
 );

packages/client/src/pages/Confirm/sub-components/changePassword.js

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import Text from "@docspace/components/text";
 import PasswordInput from "@docspace/components/password-input";
@@ -191,9 +190,7 @@ export default inject(({ auth, setup }) => {
     getSettings,
   };
 })(
-  withRouter(
+  withTranslation(["Confirm", "Common", "Wizard"])(
-    withTranslation(["Confirm", "Common", "Wizard"])(
+    withLoader(observer(ChangePasswordForm))
-      withLoader(observer(ChangePasswordForm))
-    )
   )
 );

packages/client/src/pages/Confirm/sub-components/changePhone.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { withRouter } from "react-router";
+
 import { withTranslation } from "react-i18next";
 import Text from "@docspace/components/text";
 import TextInput from "@docspace/components/text-input";
@@ -64,6 +64,4 @@ const ChangePhoneForm = (props) => {
 
 export default inject(({ auth }) => ({
   greetingTitle: auth.settingsStore.greetingSettings,
-}))(
+}))(withTranslation("Confirm")(withLoader(observer(ChangePhoneForm))));
-  withRouter(withTranslation("Confirm")(withLoader(observer(ChangePhoneForm))))
-);

packages/client/src/pages/Confirm/sub-components/continuePortal.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { Trans, withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import Text from "@docspace/components/text";

packages/client/src/pages/Confirm/sub-components/createUser.js

@@ -1,6 +1,5 @@
 import SsoReactSvgUrl from "PUBLIC_DIR/images/sso.react.svg?url";
 import React, { useEffect, useState, useCallback } from "react";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import PropTypes from "prop-types";
 import { createUser, signupOAuth } from "@docspace/common/api/people";
@@ -314,9 +313,8 @@ const CreateUserForm = (props) => {
         if (!providersData[item.provider]) return;
         if (index > 1) return;
 
-        const { icon, label, iconOptions, className } = providersData[
+        const { icon, label, iconOptions, className } =
-          item.provider
+          providersData[item.provider];
-        ];
 
         return (
           <div className="buttonWrapper" key={`${item.provider}ProviderItem`}>
@@ -640,7 +638,6 @@ const CreateUserForm = (props) => {
 
 CreateUserForm.propTypes = {
   location: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired,
 };
 
 export default inject(({ auth }) => {
@@ -677,9 +674,7 @@ export default inject(({ auth }) => {
     capabilities,
   };
 })(
-  withRouter(
+  withTranslation(["Confirm", "Common", "Wizard"])(
-    withTranslation(["Confirm", "Common", "Wizard"])(
+    withLoader(observer(CreateUserForm))
-      withLoader(observer(CreateUserForm))
-    )
   )
 );

packages/client/src/pages/Confirm/sub-components/deactivatePortal.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { Trans, withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import Text from "@docspace/components/text";
@@ -20,13 +20,8 @@ import FormWrapper from "@docspace/components/form-wrapper";
 import DocspaceLogo from "../../../DocspaceLogo";
 
 const DeactivatePortal = (props) => {
-  const {
+  const { t, greetingTitle, linkData, history, companyInfoSettingsData } =
-    t,
+    props;
-    greetingTitle,
-    linkData,
-    history,
-    companyInfoSettingsData,
-  } = props;
   const [isDeactivate, setIsDeactivate] = useState(false);
 
   const url = companyInfoSettingsData?.site

packages/client/src/pages/Confirm/sub-components/profileRemove.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import Text from "@docspace/components/text";
 import Button from "@docspace/components/button";
@@ -91,8 +90,4 @@ export default inject(({ auth }) => ({
   greetingTitle: auth.settingsStore.greetingSettings,
   theme: auth.settingsStore.theme,
   logout: auth.logout,
-}))(
+}))(withTranslation("Confirm")(withLoader(observer(ProfileRemoveForm))));
-  withRouter(
-    withTranslation("Confirm")(withLoader(observer(ProfileRemoveForm)))
-  )
-);

packages/client/src/pages/Confirm/sub-components/removePortal.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import Text from "@docspace/components/text";
@@ -19,13 +19,8 @@ import FormWrapper from "@docspace/components/form-wrapper";
 import DocspaceLogo from "../../../DocspaceLogo";
 
 const RemovePortal = (props) => {
-  const {
+  const { t, greetingTitle, linkData, history, companyInfoSettingsData } =
-    t,
+    props;
-    greetingTitle,
-    linkData,
-    history,
-    companyInfoSettingsData,
-  } = props;
   const [isRemoved, setIsRemoved] = useState(false);
 
   const url = companyInfoSettingsData?.site

packages/client/src/pages/Confirm/sub-components/tfaActivation.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { Trans, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import Button from "@docspace/components/button";

packages/client/src/pages/Confirm/sub-components/tfaAuth.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import styled from "styled-components";
 import Button from "@docspace/components/button";

packages/client/src/pages/Home/InfoPanel/Body/index.js

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useCallback } from "react";
-import { withRouter } from "react-router";
 import { inject, observer } from "mobx-react";
 
 import ViewHelper from "./helpers/ViewHelper";
@@ -207,4 +206,4 @@ export default inject(({ auth, selectedFolderStore, oformsStore }) => {
     isRootFolder,
     gallerySelected,
   };
-})(withRouter(observer(InfoPanelBodyContent)));
+})(observer(InfoPanelBodyContent));

packages/client/src/pages/Home/MediaViewer/index.js

@@ -1,9 +1,8 @@
 import React, { useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import queryString from "query-string";
-import history from "@docspace/common/history";
 import MediaViewer from "@docspace/common/components/MediaViewer";
 
 const FilesMediaViewer = (props) => {
@@ -50,6 +49,7 @@ const FilesMediaViewer = (props) => {
     resetUrl,
     firstLoad,
     setSelection,
+    history,
   } = props;
 
   useEffect(() => {
@@ -97,7 +97,7 @@ const FilesMediaViewer = (props) => {
   const onChangeUrl = (id) => {
     const url = "/products/files/#preview/" + id;
     setCurrentId(id);
-    window.history.pushState(null, null, url);
+    history.push(url);
   };
 
   const resetSelection = () => {
@@ -169,7 +169,7 @@ const FilesMediaViewer = (props) => {
     const targetFile = files.find((item) => item.id === currentMediaFileId);
     if (targetFile) setBufferSelection(targetFile);
 
-    window.history.replaceState(null, null, url);
+    history.replace(url);
   };
 
   return (

packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js

@@ -1,6 +1,5 @@
 import React, { useCallback } from "react";
 import { inject, observer } from "mobx-react";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import styled from "styled-components";
 import { isMobile, isTablet, isMobileOnly } from "react-device-detect";
@@ -182,10 +181,8 @@ export default inject(({ auth, treeFoldersStore }) => {
   return { theme: auth.settingsStore.theme, isTrashFolder: isRecycleBinFolder };
 })(
   observer(
-    withRouter(
+    withTranslation(["Files", "Translations"])(
-      withTranslation(["Files", "Translations"])(
+      withContent(withBadges(FilesRowContent))
-        withContent(withBadges(FilesRowContent))
-      )
     )
   )
 );

packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js

@@ -4,7 +4,6 @@ import { withTranslation } from "react-i18next";
 import DragAndDrop from "@docspace/components/drag-and-drop";
 import Row from "@docspace/components/row";
 import FilesRowContent from "./FilesRowContent";
-import { withRouter } from "react-router-dom";
 import { isTablet, isMobile } from "react-device-detect";
 
 import withFileActions from "../../../../../HOCs/withFileActions";
@@ -366,5 +365,5 @@ const SimpleFilesRow = (props) => {
 };
 
 export default withTranslation(["Files", "Translations", "InfoPanel"])(
-  withRouter(withFileActions(withQuickButtons(SimpleFilesRow)))
+  withFileActions(withQuickButtons(SimpleFilesRow))
 );

packages/client/src/pages/Home/Section/Body/TableView/TableRow.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { withRouter } from "react-router";
 import withContent from "../../../../../HOCs/withContent";
 import withBadges from "../../../../../HOCs/withBadges";
 import withQuickButtons from "../../../../../HOCs/withQuickButtons";
@@ -170,7 +169,5 @@ const FilesTableRow = (props) => {
 };
 
 export default withTranslation(["Files", "Common", "InfoPanel"])(
-  withRouter(
+  withFileActions(withContent(withQuickButtons(withBadges(FilesTableRow))))
-    withFileActions(withContent(withQuickButtons(withBadges(FilesTableRow))))
-  )
 );

packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js

@@ -6,7 +6,6 @@ import DragAndDrop from "@docspace/components/drag-and-drop";
 
 import Tile from "./sub-components/Tile";
 import FilesTileContent from "./FilesTileContent";
-import { withRouter } from "react-router-dom";
 
 import withFileActions from "../../../../../HOCs/withFileActions";
 import withQuickButtons from "../../../../../HOCs/withQuickButtons";
@@ -172,8 +171,6 @@ export default inject(
   }
 )(
   withTranslation(["Files", "InfoPanel"])(
-    withRouter(
+    withFileActions(withBadges(withQuickButtons(observer(FileTile))))
-      withFileActions(withBadges(withQuickButtons(observer(FileTile))))
-    )
   )
 );

packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 
@@ -117,10 +116,8 @@ export default inject(({ auth, treeFoldersStore }) => {
   return { theme: auth.settingsStore.theme, isRooms };
 })(
   observer(
-    withRouter(
+    withTranslation(["Files", "Translations"])(
-      withTranslation(["Files", "Translations"])(
+      withContent(withBadges(FilesTileContent))
-        withContent(withBadges(FilesTileContent))
-      )
     )
   )
 );

packages/client/src/pages/Home/Section/Body/index.js

@@ -1,5 +1,4 @@
 import React, { useEffect } from "react";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import { isMobile, isMobileOnly } from "react-device-detect";
 
@@ -328,9 +327,7 @@ export default inject(
     };
   }
 )(
-  withRouter(
+  withTranslation(["Files", "Common", "Translations"])(
-    withTranslation(["Files", "Common", "Translations"])(
+    withLoader(withHotkeys(observer(SectionBodyContent)))()
-      withLoader(withHotkeys(observer(SectionBodyContent)))()
-    )
   )
 );

packages/client/src/pages/Home/Section/Filter/index.js

@@ -3,7 +3,6 @@ import ViewTilesReactSvgUrl from "PUBLIC_DIR/images/view-tiles.react.svg?url";
 import React, { useCallback, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import { isMobile } from "react-device-detect";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import { isMobileOnly } from "react-device-detect";
 import find from "lodash/find";
@@ -1444,9 +1443,10 @@ const SectionFilterContent = ({
     }
   };
 
-  useEffect(() => (!!isLoadedFilter ? showLoader() : hideLoader()), [
+  useEffect(
-    isLoadedFilter,
+    () => (!!isLoadedFilter ? showLoader() : hideLoader()),
-  ]);
+    [isLoadedFilter]
+  );
 
   if (!isLoadedFilter) {
     return <Loaders.Filter style={{ display: "none" }} id="filter-loader" />;
@@ -1569,15 +1569,13 @@ export default inject(
     };
   }
 )(
-  withRouter(
+  withLayoutSize(
-    withLayoutSize(
+    withTranslation([
-      withTranslation([
+      "Files",
-        "Files",
+      "Settings",
-        "Settings",
+      "Common",
-        "Common",
+      "Translations",
-        "Translations",
+      "InfoPanel",
-        "InfoPanel",
+    ])(withLoader(observer(SectionFilterContent))(<Loaders.Filter />))
-      ])(withLoader(observer(SectionFilterContent))(<Loaders.Filter />))
-    )
   )
 );

packages/client/src/pages/Home/Section/Header/index.js

@@ -24,7 +24,7 @@ import CatalogTrashReactSvgUrl from "PUBLIC_DIR/images/catalog.trash.react.svg?u
 import React from "react";
 import copy from "copy-to-clipboard";
 import styled, { css } from "styled-components";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import toastr from "@docspace/components/toast/toastr";
 import Loaders from "@docspace/common/components/Loaders";
 import { withTranslation } from "react-i18next";
@@ -159,13 +159,8 @@ class SectionHeaderContent extends React.Component {
   };
 
   getContextOptionsPlus = () => {
-    const {
+    const { t, isPrivacyFolder, isRoomsFolder, enablePlugins, security } =
-      t,
+      this.props;
-      isPrivacyFolder,
-      isRoomsFolder,
-      enablePlugins,
-      security,
-    } = this.props;
 
     const options = isRoomsFolder
       ? [
@@ -599,12 +594,8 @@ class SectionHeaderContent extends React.Component {
   };
 
   getMenuItems = () => {
-    const {
+    const { t, cbMenuItems, getCheckboxItemLabel, getCheckboxItemId } =
-      t,
+      this.props;
-      cbMenuItems,
-      getCheckboxItemLabel,
-      getCheckboxItemId,
-    } = this.props;
     const checkboxOptions = (
       <>
         {cbMenuItems.map((key) => {
@@ -631,12 +622,8 @@ class SectionHeaderContent extends React.Component {
   };
 
   onClickFolder = (id, isRootRoom) => {
-    const {
+    const { setSelectedNode, setIsLoading, fetchFiles, moveToRoomsPage } =
-      setSelectedNode,
+      this.props;
-      setIsLoading,
-      fetchFiles,
-      moveToRoomsPage,
-    } = this.props;
 
     if (isRootRoom) {
       return moveToRoomsPage();
@@ -841,14 +828,8 @@ export default inject(
 
     const { setIsVisible, isVisible } = auth.infoPanelStore;
 
-    const {
+    const { title, id, roomType, pathParts, navigationPath, security } =
-      title,
+      selectedFolderStore;
-      id,
-      roomType,
-      pathParts,
-      navigationPath,
-      security,
-    } = selectedFolderStore;
 
     const selectedFolder = { ...selectedFolderStore };
 

packages/client/src/pages/Home/index.js

@@ -1,6 +1,5 @@
 import React from "react";
 //import PropTypes from "prop-types";
-import { withRouter } from "react-router";
 import { isMobile } from "react-device-detect";
 import axios from "axios";
 import toastr from "@docspace/components/toast/toastr";
@@ -661,12 +660,8 @@ export default inject(
       itemsSelectionTitle,
     } = secondaryProgressDataStore;
 
-    const {
+    const { setUploadPanelVisible, startUpload, uploaded, converted } =
-      setUploadPanelVisible,
+      uploadDataStore;
-      startUpload,
-      uploaded,
-      converted,
-    } = uploadDataStore;
 
     const { uploadEmptyFolders } = filesActionsStore;
 
@@ -772,4 +767,4 @@ export default inject(
       isLoadedEmptyPage,
     };
   }
-)(withRouter(observer(Home)));
+)(observer(Home));

packages/client/src/pages/My/index.js

@@ -5,7 +5,6 @@ import PeopleStore from "../../store/PeopleStore";
 import PropTypes from "prop-types";
 import Section from "@docspace/common/components/Section";
 import toastr from "@docspace/components/toast/toastr";
-import { withRouter } from "react-router";
 
 import { Provider as PeopleProvider, inject, observer } from "mobx-react";
 import { I18nextProvider, withTranslation } from "react-i18next";
@@ -89,25 +88,21 @@ class My extends React.Component {
 
 My.propTypes = {
   fetchProfile: PropTypes.func.isRequired,
-  history: PropTypes.object.isRequired,
   match: PropTypes.object.isRequired,
   profile: PropTypes.object,
   language: PropTypes.string,
 };
 
-const MyProfile = withRouter(
+const MyProfile = inject(({ auth, peopleStore }) => ({
-  inject(({ auth, peopleStore }) => ({
+  setDocumentTitle: auth.setDocumentTitle,
-    setDocumentTitle: auth.setDocumentTitle,
+  language: auth.language,
-    language: auth.language,
+  resetProfile: peopleStore.targetUserStore.resetTargetUser,
-    resetProfile: peopleStore.targetUserStore.resetTargetUser,
+  fetchProfile: peopleStore.targetUserStore.getTargetUser,
-    fetchProfile: peopleStore.targetUserStore.getTargetUser,
+  profile: peopleStore.targetUserStore.targetUser,
-    profile: peopleStore.targetUserStore.targetUser,
+  setLoadedProfile: peopleStore.loadingStore.setLoadedProfile,
-    setLoadedProfile: peopleStore.loadingStore.setLoadedProfile,
+  setIsLoading: peopleStore.loadingStore.setIsLoading,
-    setIsLoading: peopleStore.loadingStore.setIsLoading,
+  setFirstLoad: peopleStore.loadingStore.setFirstLoad,
-    setFirstLoad: peopleStore.loadingStore.setFirstLoad,
+}))(withTranslation(["Profile", "ProfileAction"])(observer(My)));
-  }))(withTranslation(["Profile", "ProfileAction"])(observer(My)))
-);
-
 const peopleStore = new PeopleStore();
 
 export default ({ i18n, ...rest }) => {

packages/client/src/pages/PortalSettings/Layout/Article/Body/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { inject, observer } from "mobx-react";
 
 import { withTranslation } from "react-i18next";

packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js

@@ -4,7 +4,7 @@ import ActionsHeaderTouchReactSvgUrl from "PUBLIC_DIR/images/actions.header.touc
 import React from "react";
 import { inject, observer } from "mobx-react";
 import styled, { css } from "styled-components";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import Headline from "@docspace/common/components/Headline";
 import IconButton from "@docspace/components/icon-button";

packages/client/src/pages/PortalSettings/categories/common/appearance.js

@@ -1,7 +1,6 @@
 import CheckWhiteSvgUrl from "PUBLIC_DIR/images/check.white.svg?url";
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { withTranslation } from "react-i18next";
-import { withRouter } from "react-router";
 import toastr from "@docspace/components/toast/toastr";
 import { inject, observer } from "mobx-react";
 import Button from "@docspace/components/button";
@@ -50,19 +49,16 @@ const Appearance = (props) => {
 
   const [showColorSchemeDialog, setShowColorSchemeDialog] = useState(false);
 
-  const [headerColorSchemeDialog, setHeaderColorSchemeDialog] = useState(
+  const [headerColorSchemeDialog, setHeaderColorSchemeDialog] =
-    headerEditTheme
+    useState(headerEditTheme);
-  );
 
   const [currentColorAccent, setCurrentColorAccent] = useState(null);
   const [currentColorButtons, setCurrentColorButtons] = useState(null);
 
-  const [openHexColorPickerAccent, setOpenHexColorPickerAccent] = useState(
+  const [openHexColorPickerAccent, setOpenHexColorPickerAccent] =
-    false
+    useState(false);
-  );
+  const [openHexColorPickerButtons, setOpenHexColorPickerButtons] =
-  const [openHexColorPickerButtons, setOpenHexColorPickerButtons] = useState(
+    useState(false);
-    false
-  );
 
   const [appliedColorAccent, setAppliedColorAccent] = useState(
     defaultAppliedColorAccent
@@ -71,12 +67,10 @@ const Appearance = (props) => {
     defaultAppliedColorButtons
   );
 
-  const [changeCurrentColorAccent, setChangeCurrentColorAccent] = useState(
+  const [changeCurrentColorAccent, setChangeCurrentColorAccent] =
-    false
+    useState(false);
-  );
+  const [changeCurrentColorButtons, setChangeCurrentColorButtons] =
-  const [changeCurrentColorButtons, setChangeCurrentColorButtons] = useState(
+    useState(false);
-    false
-  );
 
   const [viewMobile, setViewMobile] = useState(false);
 
@@ -172,7 +166,7 @@ const Appearance = (props) => {
 
   useEffect(() => {
     if (!currentColorScheme) return;
-    
+
     setAppliedColorButtons(defaultAppliedColorButtons);
     setAppliedColorAccent(defaultAppliedColorAccent);
   }, [
@@ -787,8 +781,4 @@ export default inject(({ auth }) => {
     deleteAppearanceTheme,
     theme,
   };
-})(
+})(withTranslation(["Profile", "Common", "Settings"])(observer(Appearance)));
-  withTranslation(["Profile", "Common", "Settings"])(
-    withRouter(observer(Appearance))
-  )
-);

packages/client/src/pages/PortalSettings/categories/common/customization-navbar.js

@@ -7,11 +7,11 @@ import Link from "@docspace/components/link";
 import { combineUrl } from "@docspace/common/utils";
 import { inject, observer } from "mobx-react";
 import withCultureNames from "@docspace/common/hoc/withCultureNames";
-import history from "@docspace/common/history";
+
 import { Base } from "@docspace/components/themes";
 import LoaderCustomizationNavbar from "./sub-components/loaderCustomizationNavbar";
 import { StyledArrowRightIcon } from "./Customization/StyledSettings";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import Badge from "@docspace/components/badge";
 
 const StyledComponent = styled.div`
@@ -68,6 +68,7 @@ const CustomizationNavbar = ({
   isLoadedPage,
   isSettingPaid,
   currentColorScheme,
+  history,
 }) => {
   const isLoadedSetting = isLoaded && tReady;
   useEffect(() => {
@@ -196,11 +197,8 @@ const CustomizationNavbar = ({
 };
 
 export default inject(({ auth, common }) => {
-  const {
+  const { helpUrlCommonSettings, theme, currentColorScheme } =
-    helpUrlCommonSettings,
+    auth.settingsStore;
-    theme,
-    currentColorScheme,
-  } = auth.settingsStore;
   const { isLoaded, setIsLoadedCustomizationNavbar } = common;
   return {
     theme,

packages/client/src/pages/PortalSettings/categories/common/customization.js

@@ -11,7 +11,6 @@ import CustomizationNavbar from "./customization-navbar";
 import { Base } from "@docspace/components/themes";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
 import LoaderDescriptionCustomization from "./sub-components/loaderDescriptionCustomization";
-import { withRouter } from "react-router";
 import withLoading from "SRC_DIR/HOCs/withLoading";
 import StyledSettingsSeparator from "SRC_DIR/pages/PortalSettings/StyledSettingsSeparator";
 
@@ -115,7 +114,5 @@ export default inject(({ common }) => {
     setIsLoadedCustomization,
   };
 })(
-  withLoading(
+  withLoading(withTranslation(["Settings", "Common"])(observer(Customization)))
-    withRouter(withTranslation(["Settings", "Common"])(observer(Customization)))
-  )
 );

packages/client/src/pages/PortalSettings/categories/common/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Submenu from "@docspace/components/submenu";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import { combineUrl } from "@docspace/common/utils";
 import config from "PACKAGE_FILE";

packages/client/src/pages/PortalSettings/categories/data-management/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { withTranslation, Trans } from "react-i18next";
 import { inject, observer } from "mobx-react";
 
@@ -120,11 +120,8 @@ export default inject(({ auth, setup, backup }) => {
   const { settingsStore, currentTariffStatusStore } = auth;
   const { isNotPaidPeriod } = currentTariffStatusStore;
   const { toDefault } = backup;
-  const {
+  const { helpUrlCreatingBackup, isTabletView, currentColorScheme } =
-    helpUrlCreatingBackup,
+    settingsStore;
-    isTabletView,
-    currentColorScheme,
-  } = settingsStore;
 
   const buttonSize = isTabletView ? "normal" : "small";
   return {

packages/client/src/pages/PortalSettings/categories/delete-data/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { withTranslation } from "react-i18next";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import Submenu from "@docspace/components/submenu";
 import { inject, observer } from "mobx-react";
 import PortalDeactivationSection from "./portalDeactivation";

packages/client/src/pages/PortalSettings/categories/delete-data/portalDeactivation.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import { inject } from "mobx-react";
 import Text from "@docspace/components/text";
@@ -68,4 +67,4 @@ export default inject(({ auth }) => {
     getPortalOwner,
     owner,
   };
-})(withTranslation("Settings")(withRouter(PortalDeactivation)));
+})(withTranslation("Settings")(PortalDeactivation));

packages/client/src/pages/PortalSettings/categories/delete-data/portalDeletion.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import { inject } from "mobx-react";
 import Text from "@docspace/components/text";
@@ -87,4 +86,4 @@ export default inject(({ auth }) => {
     getPortalOwner,
     owner,
   };
-})(withTranslation(["Settings", "Common"])(withRouter(PortalDeletion)));
+})(withTranslation(["Settings", "Common"])(PortalDeletion));

packages/client/src/pages/PortalSettings/categories/integration/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Submenu from "@docspace/components/submenu";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import { combineUrl } from "@docspace/common/utils";

packages/client/src/pages/PortalSettings/categories/payments/ContactContainer.js

@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import { withRouter } from "react-router";
 import { useTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
@@ -40,4 +39,4 @@ export default inject(({ payments, auth }) => {
     salesEmail,
     theme: auth.settingsStore.theme,
   };
-})(withRouter(observer(ContactContainer)));
+})(observer(ContactContainer));

packages/client/src/pages/PortalSettings/categories/payments/PaymentContainer.js

@@ -1,7 +1,6 @@
 import HelpReactSvgUrl from "PUBLIC_DIR/images/help.react.svg?url";
 import React from "react";
 import styled, { css } from "styled-components";
-import { withRouter } from "react-router";
 import { Trans } from "react-i18next";
 import { inject, observer } from "mobx-react";
 
@@ -370,4 +369,4 @@ export default inject(({ auth, payments }) => {
     portalTariffStatus,
     portalPaymentQuotas,
   };
-})(withRouter(observer(PaymentContainer)));
+})(observer(PaymentContainer));

packages/client/src/pages/PortalSettings/categories/payments/index.js

@@ -1,5 +1,4 @@
 import React, { useEffect } from "react";
-import { withRouter } from "react-router";
 import PropTypes from "prop-types";
 import { inject, observer } from "mobx-react";
 import moment from "moment";
@@ -58,4 +57,4 @@ export default inject(({ auth, payments }) => {
     isLoadedTariffStatus,
     isLoadedCurrentQuota,
   };
-})(withRouter(observer(PaymentsPage)));
+})(observer(PaymentsPage));

packages/client/src/pages/PortalSettings/categories/security/access-portal/adminMessage.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import RadioButtonGroup from "@docspace/components/radio-button-group";

packages/client/src/pages/PortalSettings/categories/security/access-portal/index.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import Text from "@docspace/components/text";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
@@ -95,4 +94,4 @@ const AccessPortal = (props) => {
 export default inject(({ auth }) => {
   const { helpLink, currentColorScheme } = auth.settingsStore;
   return { helpLink, currentColorScheme };
-})(withTranslation("Settings")(withRouter(observer(AccessPortal))));
+})(withTranslation("Settings")(observer(AccessPortal)));

packages/client/src/pages/PortalSettings/categories/security/access-portal/ipSecurity.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import Text from "@docspace/components/text";

packages/client/src/pages/PortalSettings/categories/security/access-portal/mobileView.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
 import { MainContainer } from "../StyledSecurity";

packages/client/src/pages/PortalSettings/categories/security/access-portal/passwordStrength.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import Box from "@docspace/components/box";
@@ -257,11 +257,8 @@ const PasswordStrength = (props) => {
 };
 
 export default inject(({ auth, setup }) => {
-  const {
+  const { setPortalPasswordSettings, passwordSettings, helpLink } =
-    setPortalPasswordSettings,
+    auth.settingsStore;
-    passwordSettings,
-    helpLink,
-  } = auth.settingsStore;
   const { initSettings, isInit } = setup;
 
   return {

packages/client/src/pages/PortalSettings/categories/security/access-portal/sessionLifetime.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import RadioButtonGroup from "@docspace/components/radio-button-group";

packages/client/src/pages/PortalSettings/categories/security/access-portal/tfa.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import RadioButtonGroup from "@docspace/components/radio-button-group";

packages/client/src/pages/PortalSettings/categories/security/access-portal/trustedMail.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import Text from "@docspace/components/text";

packages/client/src/pages/PortalSettings/categories/security/audit-trail/TableView/TableRow.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { withRouter } from "react-router";
 import TableRow from "@docspace/components/table-container/TableRow";
 import TableCell from "@docspace/components/table-container/TableCell";
 import Text from "@docspace/components/text";
@@ -101,4 +100,4 @@ const PeopleTableRow = (props) => {
   );
 };
 
-export default withRouter(PeopleTableRow);
+export default PeopleTableRow;

packages/client/src/pages/PortalSettings/categories/security/audit-trail/index.js

@@ -1,5 +1,4 @@
 import React, { useEffect } from "react";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
 import { inject } from "mobx-react";
@@ -112,4 +111,4 @@ export default inject(({ setup, auth }) => {
     isAuditAvailable,
     isLoadingDownloadReport,
   };
-})(withTranslation("Settings")(withRouter(AuditTrail)));
+})(withTranslation("Settings")(AuditTrail));

packages/client/src/pages/PortalSettings/categories/security/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Submenu from "@docspace/components/submenu";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import { combineUrl } from "@docspace/common/utils";

packages/client/src/pages/PortalSettings/categories/security/login-history/TableView/TableRow.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { withRouter } from "react-router";
 import TableRow from "@docspace/components/table-container/TableRow";
 import TableCell from "@docspace/components/table-container/TableCell";
 import Text from "@docspace/components/text";
@@ -81,4 +80,4 @@ const PeopleTableRow = (props) => {
   );
 };
 
-export default withRouter(PeopleTableRow);
+export default PeopleTableRow;

packages/client/src/pages/PortalSettings/categories/security/login-history/index.js

@@ -1,5 +1,4 @@
 import React, { useEffect } from "react";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
 import { inject } from "mobx-react";
@@ -110,4 +109,4 @@ export default inject(({ setup, auth }) => {
     getLoginHistoryReport,
     isAuditAvailable,
   };
-})(withTranslation("Settings")(withRouter(LoginHistory)));
+})(withTranslation("Settings")(LoginHistory));

packages/client/src/pages/PortalSettings/categories/security/sub-components/modules.js

@@ -1,5 +1,4 @@
 import React, { Component } from "react";
-import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import styled from "styled-components";
 import Text from "@docspace/components/text";
@@ -117,6 +116,4 @@ class PureModulesSettings extends Component {
   }
 }
 
-export default withTranslation(["Settings", "Common"])(
+export default withTranslation(["Settings", "Common"])(PureModulesSettings);
-  withRouter(PureModulesSettings)
-);

packages/client/src/pages/PortalSettings/index.js

@@ -1,6 +1,5 @@
 import React, { lazy, Suspense, useEffect } from "react";
 import { Route, Switch, Redirect } from "react-router-dom";
-import { withRouter } from "react-router";
 import Layout from "./Layout";
 import { combineUrl } from "@docspace/common/utils";
 import Panels from "../../components/FilesPanels";
@@ -24,7 +23,9 @@ const SessionLifetimePage = lazy(() =>
   import("./categories/security/access-portal/sessionLifetime")
 );
 
-const CustomizationSettings = lazy(() => import("./categories/common/index.js"));
+const CustomizationSettings = lazy(() =>
+  import("./categories/common/index.js")
+);
 
 const DeveloperTools = lazy(() =>
   import("./categories/developer-tools/index.js")
@@ -179,19 +180,43 @@ const Settings = () => {
       <Panels />
       <Suspense fallback={null}>
         <Switch>
-          <Route exact path={CUSTOMIZATION_URLS} component={CustomizationSettings} />
+          <Route
+            exact
+            path={CUSTOMIZATION_URLS}
+            component={CustomizationSettings}
+          />
           <Route exact path={LTZ_URL} component={LanguageAndTimeZoneSettings} />
-          <Route exact path={WELCOME_PAGE_SETTINGS_URL} component={WelcomePageSettings} />
+          <Route
+            exact
+            path={WELCOME_PAGE_SETTINGS_URL}
+            component={WelcomePageSettings}
+          />
           <Route exact path={DNS_SETTINGS} component={DNSSettings} />
           <Route exact path={PORTAL_RENAMING} component={PortalRenaming} />
           <Route exact path={WHITELABEL_URL} component={WhiteLabel} />
           <Route exact path={SECURITY_URLS} component={SecuritySettings} />
           <Route exact path={TFA_PAGE_URL} component={TfaPage} />
-          <Route exact path={PASSWORD_PAGE_URL} component={PasswordStrengthPage} />
+          <Route
-          <Route exact path={TRUSTED_MAIL_PAGE_URL} component={TrustedMailPage} />
+            exact
+            path={PASSWORD_PAGE_URL}
+            component={PasswordStrengthPage}
+          />
+          <Route
+            exact
+            path={TRUSTED_MAIL_PAGE_URL}
+            component={TrustedMailPage}
+          />
           <Route exact path={IP_SECURITY_PAGE_URL} component={IpSecurityPage} />
-          <Route exact path={ADMIN_MESSAGE_PAGE_URL} component={AdminMessagePage} />
+          <Route
-          <Route exact path={SESSION_LIFETIME_PAGE_URL} component={SessionLifetimePage} />
+            exact
+            path={ADMIN_MESSAGE_PAGE_URL}
+            component={AdminMessagePage}
+          />
+          <Route
+            exact
+            path={SESSION_LIFETIME_PAGE_URL}
+            component={SessionLifetimePage}
+          />
           <Route exact path={INTEGRATION_URLS} component={Integration} />
           <Route exact path={PAYMENTS_URL} component={Payments} />
           <Route exact path={THIRD_PARTY_URL} component={ThirdParty} />
@@ -200,11 +225,11 @@ const Settings = () => {
           <Route exact path={BACKUP_URLS} component={Backup} />
           <Route exact path={DELETE_DATA_URLS} component={DeleteDataPage} />
           <Route path={RESTORE_DATA_URL} component={RestoreBackup} />
-          <Redirect to={{pathname: ERROR_404_URL}} />
+          <Redirect to={{ pathname: ERROR_404_URL }} />
         </Switch>
       </Suspense>
     </Layout>
   );
 };
 
-export default withRouter(Settings);
+export default Settings;

packages/client/src/pages/PrivateRoomsPage/index.js

@@ -8,7 +8,7 @@ import Loader from "@docspace/components/loader";
 import Section from "@docspace/common/components/Section";
 import { smallTablet, tablet } from "@docspace/components/utils/device";
 import { I18nextProvider, Trans, withTranslation } from "react-i18next";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { isMobile } from "react-device-detect";
 //import { setDocumentTitle } from "@docspace/client/src/helpers/filesUtils";
 import i18n from "./i18n";

packages/client/src/pages/Profile/Section/Body/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 

packages/client/src/pages/Profile/Section/Header/index.js

@@ -6,7 +6,7 @@ import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
 import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?url";
 import React, { useState } from "react";
 import { withTranslation } from "react-i18next";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { inject, observer } from "mobx-react";
 
 import IconButton from "@docspace/components/icon-button";

packages/client/src/pages/Profile/index.js

@@ -9,7 +9,6 @@ import {
   SectionFooterContent,
 } from "./Section";
 
-import { withRouter } from "react-router";
 import withCultureNames from "@docspace/common/hoc/withCultureNames";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
@@ -109,40 +108,35 @@ class Profile extends React.Component {
 
 Profile.propTypes = {
   fetchProfile: PropTypes.func.isRequired,
-  history: PropTypes.object.isRequired,
   match: PropTypes.object.isRequired,
   profile: PropTypes.object,
   language: PropTypes.string,
 };
 
-export default withRouter(
+export default inject(({ auth, peopleStore, treeFoldersStore }) => {
-  inject(({ auth, peopleStore, treeFoldersStore }) => {
+  const { setDocumentTitle, language } = auth;
-    const { setDocumentTitle, language } = auth;
+  const { targetUserStore, loadingStore } = peopleStore;
-    const { targetUserStore, loadingStore } = peopleStore;
+  const {
-    const {
+    getTargetUser: fetchProfile,
-      getTargetUser: fetchProfile,
+    targetUser: profile,
-      targetUser: profile,
+    isEditTargetUser,
-      isEditTargetUser,
+    setIsEditTargetUser,
-      setIsEditTargetUser,
+  } = targetUserStore;
-    } = targetUserStore;
+  const { setFirstLoad, setIsLoading, setLoadedProfile } = loadingStore;
-    const { setFirstLoad, setIsLoading, setLoadedProfile } = loadingStore;
+  const { selectedTreeNode, setSelectedNode } = treeFoldersStore;
-    const { selectedTreeNode, setSelectedNode } = treeFoldersStore;
+  return {
-    return {
+    setDocumentTitle,
-      setDocumentTitle,
+    language,
-      language,
+    fetchProfile,
-      fetchProfile,
+    profile,
-      profile,
+    setFirstLoad,
-      setFirstLoad,
+    setIsLoading,
-      setIsLoading,
+    isEditTargetUser,
-      isEditTargetUser,
+    setIsEditTargetUser,
-      setIsEditTargetUser,
+    setLoadedProfile,
-      setLoadedProfile,
+    showCatalog: auth.settingsStore.showCatalog,
-      showCatalog: auth.settingsStore.showCatalog,
+    selectedTreeNode,
-      selectedTreeNode,
+    setSelectedNode,
-      setSelectedNode,
+    isVisitor: auth.userStore.user.isVisitor,
-      isVisitor: auth.userStore.user.isVisitor,
+  };
-    };
+})(observer(withTranslation(["Profile", "Common"])(withCultureNames(Profile))));
-  })(
-    observer(withTranslation(["Profile", "Common"])(withCultureNames(Profile)))
-  )
-);

packages/client/src/pages/Settings/Section/Body/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import Error520 from "client/Error520";
 import { inject, observer } from "mobx-react";
 import { combineUrl } from "@docspace/common/utils";

packages/client/src/pages/VersionHistory/Section/Body/VersionRow.js

@@ -7,7 +7,6 @@ import Textarea from "@docspace/components/textarea";
 import Button from "@docspace/components/button";
 import ModalDialog from "@docspace/components/modal-dialog";
 import { withTranslation } from "react-i18next";
-import { withRouter } from "react-router";
 import VersionBadge from "./VersionBadge";
 import { StyledVersionRow } from "./StyledVersionHistory";
 import ExternalLinkIcon from "PUBLIC_DIR/images/external.link.react.svg";
@@ -249,9 +248,7 @@ export default inject(({ auth, versionHistoryStore, selectedFolderStore }) => {
     canChangeVersionFileHistory,
   };
 })(
-  withRouter(
+  withTranslation(["VersionHistory", "Common", "Translations"])(
-    withTranslation(["VersionHistory", "Common", "Translations"])(
+    observer(VersionRow)
-      observer(VersionRow)
-    )
   )
 );

packages/client/src/pages/VersionHistory/Section/Body/index.js

@@ -1,5 +1,5 @@
 import React, { memo } from "react";
-import { withRouter } from "react-router";
+
 import Loaders from "@docspace/common/components/Loaders";
 import VersionRow from "./VersionRow";
 import { inject, observer } from "mobx-react";
@@ -138,12 +138,8 @@ class SectionBodyContent extends React.Component {
 
 export default inject(({ auth, filesStore, versionHistoryStore }) => {
   const { setFirstLoad, setIsLoading, isLoading } = filesStore;
-  const {
+  const { versions, fetchFileVersions, fileId, fileSecurity } =
-    versions,
+    versionHistoryStore;
-    fetchFileVersions,
-    fileId,
-    fileSecurity,
-  } = versionHistoryStore;
 
   return {
     culture: auth.settingsStore.culture,
@@ -155,4 +151,4 @@ export default inject(({ auth, filesStore, versionHistoryStore }) => {
     setIsLoading,
     fetchFileVersions,
   };
-})(withRouter(observer(SectionBodyContent)));
+})(observer(SectionBodyContent));

packages/client/src/pages/VersionHistory/Section/Header/index.js

@@ -1,7 +1,6 @@
 import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
 import React from "react";
 import styled, { css } from "styled-components";
-import { withRouter } from "react-router";
 import Headline from "@docspace/common/components/Headline";
 import IconButton from "@docspace/components/icon-button";
 import { desktop } from "@docspace/components/utils/device";

packages/client/src/pages/VersionHistory/index.js

@@ -1,6 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+
-import { withRouter } from "react-router";
 import Section from "@docspace/common/components/Section";
 import Loaders from "@docspace/common/components/Loaders";
 import { withTranslation } from "react-i18next";
@@ -43,17 +42,12 @@ class PureVersionHistory extends React.Component {
 
 const VersionHistory = withTranslation("VersionHistory")(PureVersionHistory);
 
-VersionHistory.propTypes = {
+VersionHistory.propTypes = {};
-  history: PropTypes.object.isRequired,
-};
 
 export default inject(({ auth, filesStore, versionHistoryStore }) => {
   const { filter, isLoading } = filesStore;
-  const {
+  const { setIsVerHistoryPanel, versions, showProgressBar } =
-    setIsVerHistoryPanel,
+    versionHistoryStore;
-    versions,
-    showProgressBar,
-  } = versionHistoryStore;
 
   return {
     isTabletView: auth.settingsStore.isTabletView,
@@ -64,4 +58,4 @@ export default inject(({ auth, filesStore, versionHistoryStore }) => {
 
     setIsVerHistoryPanel,
   };
-})(withRouter(observer(VersionHistory)));
+})(observer(VersionHistory));

packages/client/src/pages/Wizard/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import axios from "axios";
 import { useTranslation } from "react-i18next";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { inject, observer } from "mobx-react";
 import { isMobileOnly } from "react-device-detect";
 

packages/common/components/Article/sub-components/article-header.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { useHistory } from "react-router";
+import { useHistory } from "react-router-dom";
 import Loaders from "@docspace/common/components/Loaders";
 import { isTablet as isTabletUtils } from "@docspace/components/utils/device";
 import { Link } from "react-router-dom";

packages/common/components/Article/sub-components/article-payment-alert.js

@@ -1,13 +1,13 @@
 import React, { useCallback, useEffect } from "react";
 import { inject, observer } from "mobx-react";
-import { withRouter } from "react-router";
+import { withRouter } from "react-router-dom";
 import { useTranslation, Trans } from "react-i18next";
 import Text from "@docspace/components/text";
 import ArrowRightIcon from "PUBLIC_DIR/images/arrow.right.react.svg";
 import { StyledArticlePaymentAlert } from "../styled-article";
 import styled from "styled-components";
 import { combineUrl } from "@docspace/common/utils";
-import history from "@docspace/common/history";
+
 import Loaders from "../../Loaders";
 
 const StyledArrowRightIcon = styled(ArrowRightIcon)`
@@ -31,6 +31,7 @@ const ArticlePaymentAlert = ({
   currentTariffPlanTitle,
   toggleArticleOpen,
   tariffPlanTitle,
+  history,
 }) => {
   const { t, ready } = useTranslation("Common");