IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into feature/access-drop-down

Browse Source
This commit is contained in:
Nikita Gopienko 2023-04-18 16:19:44 +03:00
commit b75258bb90
155 changed files with 3181 additions and 3786 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/HOCs/withBadges.js
View File

@ -21,7 +21,7 @@ export default function withBadges(WrappedComponent) {
item, item,
setIsVerHistoryPanel, setIsVerHistoryPanel,
fetchFileVersions, fetchFileVersions,
history,
isTrashFolder, isTrashFolder,
} = this.props; } = this.props;
if (isTrashFolder) return; if (isTrashFolder) return;

7
packages/client/src/HOCs/withHotkeys.js
View File

@ -1,6 +1,7 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { useHotkeys } from "react-hotkeys-hook"; import { useHotkeys } from "react-hotkeys-hook";
import { observer, inject } from "mobx-react"; import { observer, inject } from "mobx-react";
import { useNavigate } from "react-router-dom";
import { Events } from "@docspace/common/constants"; import { Events } from "@docspace/common/constants";
import toastr from "@docspace/components/toast/toastr"; import toastr from "@docspace/components/toast/toastr";
import throttle from "lodash/throttle"; import throttle from "lodash/throttle";
@ -9,7 +10,7 @@ const withHotkeys = (Component) => {
const WithHotkeys = (props) => { const WithHotkeys = (props) => {
const { const {
t, t,
history,
setSelected, setSelected,
viewAs, viewAs,
setViewAs, setViewAs,
@ -60,6 +61,8 @@ const withHotkeys = (Component) => {
setInviteUsersWarningDialogVisible, setInviteUsersWarningDialogVisible,
} = props; } = props;
const navigate = useNavigate();
const hotkeysFilter = { const hotkeysFilter = {
filter: (ev) => filter: (ev) =>
ev.target?.type === "checkbox" || ev.target?.tagName !== "INPUT", ev.target?.type === "checkbox" || ev.target?.tagName !== "INPUT",
@ -330,7 +333,7 @@ const withHotkeys = (Component) => {
"Shift+u", "Shift+u",
() => { () => {
if (folderWithNoAction) return; if (folderWithNoAction) return;
uploadFile(false, history, t); uploadFile(false, navigate, t);
}, },
hotkeysFilter hotkeysFilter

216
packages/client/src/Shell.jsx
View File

@ -1,5 +1,11 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { Router, Switch, Route, Redirect } from "react-router-dom"; import {
BrowserRouter as Router,
Routes,
Route,
Navigate,
useLocation,
} from "react-router-dom";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import NavMenu from "./components/NavMenu"; import NavMenu from "./components/NavMenu";
import Main from "./components/Main"; import Main from "./components/Main";
@ -8,7 +14,6 @@ import PublicRoute from "@docspace/common/components/PublicRoute";
import ErrorBoundary from "@docspace/common/components/ErrorBoundary"; import ErrorBoundary from "@docspace/common/components/ErrorBoundary";
import Layout from "./components/Layout"; import Layout from "./components/Layout";
import ScrollToTop from "./components/Layout/ScrollToTop"; import ScrollToTop from "./components/Layout/ScrollToTop";
import history from "@docspace/common/history";
import Toast from "@docspace/components/toast"; import Toast from "@docspace/components/toast";
import toastr from "@docspace/components/toast/toastr"; import toastr from "@docspace/components/toast/toastr";
import { getLogoFromPath, updateTempContent } from "@docspace/common/utils"; import { getLogoFromPath, updateTempContent } from "@docspace/common/utils";
@ -40,20 +45,22 @@ const Wizard = React.lazy(() => import("./pages/Wizard"));
const PortalSettings = React.lazy(() => import("./pages/PortalSettings")); const PortalSettings = React.lazy(() => import("./pages/PortalSettings"));
const Confirm = !IS_PERSONAL && React.lazy(() => import("./pages/Confirm")); const Confirm = !IS_PERSONAL && React.lazy(() => import("./pages/Confirm"));
// const MyProfile = React.lazy(() => import("./pages/My"));
const PreparationPortal = React.lazy(() => import("./pages/PreparationPortal")); const PreparationPortal = React.lazy(() => import("./pages/PreparationPortal"));
const PortalUnavailable = React.lazy(() => import("./pages/PortalUnavailable")); const PortalUnavailable = React.lazy(() => import("./pages/PortalUnavailable"));
const FormGallery = React.lazy(() => import("./pages/FormGallery")); const FormGallery = React.lazy(() => import("./pages/FormGallery"));
const ErrorUnavailable = React.lazy(() => import("./pages/Errors/Unavailable")); const ErrorUnavailable = React.lazy(() => import("./pages/Errors/Unavailable"));
const PortalSettingsRoute = (props) => ( const PortalSettingsRoute = (props) => {
return (
<React.Suspense fallback={<AppLoader />}> <React.Suspense fallback={<AppLoader />}>
<ErrorBoundary> <ErrorBoundary>
<PortalSettings {...props} /> <PortalSettings {...props} />
</ErrorBoundary> </ErrorBoundary>
</React.Suspense> </React.Suspense>
); );
};
const Error404Route = (props) => ( const Error404Route = (props) => (
<React.Suspense fallback={<AppLoader />}> <React.Suspense fallback={<AppLoader />}>
@ -129,14 +136,6 @@ const WizardRoute = (props) => (
</React.Suspense> </React.Suspense>
); );
// const MyProfileRoute = (props) => (
// <React.Suspense fallback={<AppLoader />}>
// <ErrorBoundary>
// <MyProfile {...props} />
// </ErrorBoundary>
// </React.Suspense>
// );
const FormGalleryRoute = (props) => ( const FormGalleryRoute = (props) => (
<React.Suspense fallback={<AppLoader />}> <React.Suspense fallback={<AppLoader />}>
<ErrorBoundary> <ErrorBoundary>
@ -145,7 +144,19 @@ const FormGalleryRoute = (props) => (
</React.Suspense> </React.Suspense>
); );
// const RedirectToHome = () => <Redirect to={PROXY_HOMEPAGE_URL} />; const ConfirmNavigate = () => {
const location = useLocation();
const type = queryString.parse(location.search).type;
return (
<Navigate
to={`/confirm/${type}`}
search={location.search}
state={{ from: location }}
/>
);
};
const Shell = ({ items = [], page = "home", ...rest }) => { const Shell = ({ items = [], page = "home", ...rest }) => {
const { const {
@ -440,8 +451,8 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
); );
return ( return (
<Router>
<Layout> <Layout>
<Router history={history}>
{toast} {toast}
<ReactSmartBanner t={t} ready={ready} /> <ReactSmartBanner t={t} ready={ready} />
{isEditor || !isMobileOnly ? <></> : <NavMenu />} {isEditor || !isMobileOnly ? <></> : <NavMenu />}
@ -452,101 +463,108 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
<Main isDesktop={isDesktop}> <Main isDesktop={isDesktop}>
{!isMobileOnly && <MainBar />} {!isMobileOnly && <MainBar />}
<div className="main-container"> <div className="main-container">
<Switch> <Routes>
<Redirect
exact
sensitive
from="/Products/Files/"
to="/rooms/shared"
/>
<PrivateRoute
exact
path={[
"/",
"/rooms/personal",
"/rooms/personal/filter",
"/rooms/shared",
"/rooms/shared/filter",
"/rooms/shared/:room",
"/rooms/shared/:room/filter",
"/rooms/archived",
"/rooms/archived/filter",
"/rooms/archived/:room",
"/rooms/archived/:room/filter",
"/files/favorite",
"/files/favorite/filter",
"/files/recent",
"/files/recent/filter",
"/files/trash",
"/files/trash/filter",
"/accounts",
"/accounts/filter",
"/accounts/create/:type",
"/accounts/edit/:userId",
"/accounts/view/:userId",
"/accounts/view/@self",
"/accounts/view/@self/notification",
"/settings",
"/settings/common",
"/settings/admin",
"/products/files",
//"/settings/connected-clouds",
]}
component={FilesRoute}
/>
<PrivateRoute
path={"/form-gallery/:folderId"}
component={FormGalleryRoute}
/>
<PublicRoute exact path={"/wizard"} component={WizardRoute} />
<PrivateRoute path={"/about"} component={AboutRoute} />
<Route path={"/confirm/:type"} component={ConfirmRoute} />
<Route <Route
path={["/confirm", "/confirm.aspx"]} caseSensitive
component={({ location }) => { path="/Products/Files/"
const type = queryString.parse(location.search).type; element={<Navigate to="/rooms/shared" replace />}
/>
return ( <Route
<Redirect path="/*"
to={{ element={
pathname: `/confirm/${type}`, <PrivateRoute>
search: location.search, <FilesRoute />
state: { from: location }, </PrivateRoute>
}} }
/> />
);
}} <Route
path={"/form-gallery/:folderId"}
element={
<PrivateRoute>
<FormGalleryRoute />
</PrivateRoute>
}
/> />
<PrivateRoute
restricted <Route
path={"/portal-settings"} path={"/wizard"}
component={PortalSettingsRoute} element={
<PublicRoute>
<WizardRoute />
</PublicRoute>
}
/> />
<PublicRoute
path={"/preparation-portal"} <Route
component={PreparationPortalRoute} path={"/about"}
element={
<PrivateRoute>
<AboutRoute />
</PrivateRoute>
}
/> />
<PrivateRoute
{/* <Route path={"/confirm/:type/*"} element={<ConfirmRoute />} /> */}
<Route path={"/confirm/*"} element={<ConfirmRoute />} />
<Route path={"/confirm.aspx/*"} element={<ConfirmRoute />} />
<Route
path={"/portal-settings/*"}
element={
<PrivateRoute restricted>
<PortalSettingsRoute />
</PrivateRoute>
}
/>
<Route
path={"/portal-unavailable"} path={"/portal-unavailable"}
component={PortalUnavailableRoute} element={
<PrivateRoute>
<PortalUnavailableRoute />
</PrivateRoute>
}
/> />
<Route path={"/unavailable"} component={ErrorUnavailableRoute} /> <Route
<PrivateRoute path={"/error401"} component={Error401Route} /> path={"/preparation-portal"}
<PrivateRoute component={Error404Route} /> element={
</Switch> <PublicRoute>
<PreparationPortalRoute />
</PublicRoute>
}
/>
<Route
path={"/unavailable"}
element={
<PrivateRoute>
<ErrorUnavailableRoute />
</PrivateRoute>
}
/>
<Route
path={"/error401"}
element={
<PrivateRoute>
<Error401Route />
</PrivateRoute>
}
/>
<Route
element={
<PrivateRoute>
<Error404Route />
</PrivateRoute>
}
/>
</Routes>
</div> </div>
</Main> </Main>
</Router>
</Layout> </Layout>
</Router>
); );
}; };

19
packages/client/src/components/Article/Body/AccountsItem.js
View File

@ -1,12 +1,11 @@
import CatalogAccountsReactSvgUrl from "PUBLIC_DIR/images/catalog.accounts.react.svg?url"; import CatalogAccountsReactSvgUrl from "PUBLIC_DIR/images/catalog.accounts.react.svg?url";
import React from "react"; import React from "react";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import CatalogItem from "@docspace/components/catalog-item"; import CatalogItem from "@docspace/components/catalog-item";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { combineUrl } from "@docspace/common/utils";
import withLoader from "../../../HOCs/withLoader"; import withLoader from "../../../HOCs/withLoader";
import config from "PACKAGE_FILE";
const iconUrl = CatalogAccountsReactSvgUrl; const iconUrl = CatalogAccountsReactSvgUrl;
@ -16,21 +15,17 @@ const PureAccountsItem = ({
selectedTreeNode, selectedTreeNode,
setSelectedNode, setSelectedNode,
toggleArticleOpen, toggleArticleOpen,
history,
t, t,
}) => { }) => {
const navigate = useNavigate();
const onClick = React.useCallback(() => { const onClick = React.useCallback(() => {
setSelectedFolder(null); setSelectedFolder(null);
setSelectedNode(["accounts", "filter"]); setSelectedNode(["accounts", "filter"]);
history.push( navigate("/accounts");
combineUrl(
window.DocSpaceConfig?.proxy?.url,
config.homepage,
"/accounts"
)
);
toggleArticleOpen(); toggleArticleOpen();
}, [setSelectedFolder, setSelectedNode, history]); }, [setSelectedFolder, setSelectedNode, history]);
@ -50,7 +45,7 @@ const PureAccountsItem = ({
}; };
const AccountsItem = withTranslation(["FilesSettings", "Common"])( const AccountsItem = withTranslation(["FilesSettings", "Common"])(
withRouter(withLoader(PureAccountsItem)(<></>)) withLoader(PureAccountsItem)(<></>)
); );
export default inject(({ auth, treeFoldersStore, selectedFolderStore }) => { export default inject(({ auth, treeFoldersStore, selectedFolderStore }) => {

21
packages/client/src/components/Article/Body/SettingsItem.js
View File

@ -1,11 +1,9 @@
import CatalogSettingsReactSvgUrl from "PUBLIC_DIR/images/catalog.settings.react.svg?url"; import CatalogSettingsReactSvgUrl from "PUBLIC_DIR/images/catalog.settings.react.svg?url";
import React from "react"; import React from "react";
import { withRouter } from "react-router"; import { useNavigate, useParams } from "react-router-dom";
import CatalogItem from "@docspace/components/catalog-item"; import CatalogItem from "@docspace/components/catalog-item";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { combineUrl } from "@docspace/common/utils";
import config from "PACKAGE_FILE";
import withLoader from "../../../HOCs/withLoader"; import withLoader from "../../../HOCs/withLoader";
import { isMobile } from "@docspace/components/utils/device"; import { isMobile } from "@docspace/components/utils/device";
import { isMobileOnly } from "react-device-detect"; import { isMobileOnly } from "react-device-detect";
@ -13,17 +11,17 @@ import { isMobileOnly } from "react-device-detect";
const iconUrl = CatalogSettingsReactSvgUrl; const iconUrl = CatalogSettingsReactSvgUrl;
const PureSettingsItem = ({ const PureSettingsItem = ({
match,
expandedSetting, expandedSetting,
setSelectedNode, setSelectedNode,
setExpandSettingsTree, setExpandSettingsTree,
setSelectedFolder, setSelectedFolder,
history,
t, t,
showText, showText,
toggleArticleOpen, toggleArticleOpen,
}) => { }) => {
const { setting } = match.params; const { setting } = useParams();
const navigate = useNavigate();
React.useEffect(() => { React.useEffect(() => {
setSelectedNode([setting]); setSelectedNode([setting]);
@ -39,19 +37,12 @@ const PureSettingsItem = ({
setSelectedNode(["common"]); setSelectedNode(["common"]);
setExpandSettingsTree(["common"]); setExpandSettingsTree(["common"]);
if (isMobile() || isMobileOnly) toggleArticleOpen(); if (isMobile() || isMobileOnly) toggleArticleOpen();
history.push( navigate("/settings/common");
combineUrl(
window.DocSpaceConfig?.proxy?.url,
config.homepage,
"/settings/common"
)
);
}, [ }, [
setSelectedFolder, setSelectedFolder,
setSelectedNode, setSelectedNode,
setExpandSettingsTree, setExpandSettingsTree,
toggleArticleOpen, toggleArticleOpen,
history,
]); ]);
const isActive = window.location.pathname.includes("settings"); const isActive = window.location.pathname.includes("settings");
@ -70,7 +61,7 @@ const PureSettingsItem = ({
}; };
const SettingsItem = withTranslation(["FilesSettings", "Common"])( const SettingsItem = withTranslation(["FilesSettings", "Common"])(
withRouter(withLoader(PureSettingsItem)(<></>)) withLoader(PureSettingsItem)(<></>)
); );
export default inject( export default inject(

7
packages/client/src/components/Article/Body/index.js
View File

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

36
packages/client/src/components/Article/MainButton/index.js
View File

@ -20,7 +20,7 @@ import MainButton from "@docspace/components/main-button";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import Loaders from "@docspace/common/components/Loaders"; import Loaders from "@docspace/common/components/Loaders";
import { encryptionUploadDialog } from "../../../helpers/desktop"; import { encryptionUploadDialog } from "../../../helpers/desktop";
import { withRouter } from "react-router"; import { useNavigate, useLocation } from "react-router-dom";
import MobileView from "./MobileView"; import MobileView from "./MobileView";
import { combineUrl } from "@docspace/common/utils"; import { combineUrl } from "@docspace/common/utils";
@ -90,7 +90,7 @@ const ArticleMainButtonContent = (props) => {
const { const {
t, t,
isMobileArticle, isMobileArticle,
canCreate,
isPrivacy, isPrivacy,
encryptedFile, encryptedFile,
encrypted, encrypted,
@ -101,7 +101,7 @@ const ArticleMainButtonContent = (props) => {
isFavoritesFolder, isFavoritesFolder,
isRecentFolder, isRecentFolder,
isRecycleBinFolder, isRecycleBinFolder,
history,
currentFolderId, currentFolderId,
isRoomsFolder, isRoomsFolder,
isArchiveFolder, isArchiveFolder,
@ -115,8 +115,6 @@ const ArticleMainButtonContent = (props) => {
isOwner, isOwner,
isAdmin, isAdmin,
canCreateFiles,
setInvitePanelOptions, setInvitePanelOptions,
mainButtonMobileVisible, mainButtonMobileVisible,
@ -136,6 +134,9 @@ const ArticleMainButtonContent = (props) => {
const [model, setModel] = React.useState([]); const [model, setModel] = React.useState([]);
const [isDropdownMainButton, setIsDropdownMainButton] = React.useState(true); const [isDropdownMainButton, setIsDropdownMainButton] = React.useState(true);
const navigate = useNavigate();
const location = useLocation();
const onCreate = React.useCallback( const onCreate = React.useCallback(
(e) => { (e) => {
const format = e.action || null; const format = e.action || null;
@ -198,13 +199,7 @@ const ArticleMainButtonContent = (props) => {
const onInputClick = React.useCallback((e) => (e.target.value = null), []); const onInputClick = React.useCallback((e) => (e.target.value = null), []);
const onShowGallery = () => { const onShowGallery = () => {
history.push( navigate(`/form-gallery/${currentFolderId}/`);
combineUrl(
window.DocSpaceConfig?.proxy?.url,
config.homepage,
`/form-gallery/${currentFolderId}/`
)
);
}; };
const onInvite = React.useCallback((e) => { const onInvite = React.useCallback((e) => {
@ -233,8 +228,8 @@ const ArticleMainButtonContent = (props) => {
React.useEffect(() => { React.useEffect(() => {
const isSettingFolder = const isSettingFolder =
window.location.pathname.endsWith("/settings/common") || location.pathname.endsWith("/settings/common") ||
window.location.pathname.endsWith("/settings/admin"); location.pathname.endsWith("/settings/admin");
const isFolderHiddenDropdown = const isFolderHiddenDropdown =
isArchiveFolder || isArchiveFolder ||
@ -253,7 +248,7 @@ const ArticleMainButtonContent = (props) => {
isFavoritesFolder, isFavoritesFolder,
isRecentFolder, isRecentFolder,
isRecycleBinFolder, isRecycleBinFolder,
window.location.pathname, location.pathname,
]); ]);
React.useEffect(() => { React.useEffect(() => {
@ -467,7 +462,7 @@ const ArticleMainButtonContent = (props) => {
const isDisabled = isAccountsPage ? !canInvite : !security?.Create; const isDisabled = isAccountsPage ? !canInvite : !security?.Create;
const isProfile = history.location.pathname === "/accounts/view/@self"; const isProfile = location.pathname === "/accounts/view/@self";
return ( return (
<> <>
@ -552,7 +547,7 @@ export default inject(
isLoaded, isLoaded,
firstLoad, firstLoad,
isLoading, isLoading,
canCreate,
mainButtonMobileVisible, mainButtonMobileVisible,
} = filesStore; } = filesStore;
const { const {
@ -582,8 +577,6 @@ export default inject(
const { isAdmin, isOwner } = auth.userStore.user; const { isAdmin, isOwner } = auth.userStore.user;
const { isGracePeriod } = auth.currentTariffStatusStore; const { isGracePeriod } = auth.currentTariffStatusStore;
const { canCreateFiles } = accessRightsStore;
return { return {
isGracePeriod, isGracePeriod,
setInviteUsersWarningDialogVisible, setInviteUsersWarningDialogVisible,
@ -600,9 +593,6 @@ export default inject(
isArchiveFolder, isArchiveFolder,
selectedTreeNode, selectedTreeNode,
canCreate,
canCreateFiles,
startUpload, startUpload,
setSelectFileDialogVisible, setSelectFileDialogVisible,
@ -632,7 +622,7 @@ export default inject(
"People", "People",
"PeopleTranslations", "PeopleTranslations",
])( ])(
withLoader(observer(withRouter(ArticleMainButtonContent)))( withLoader(observer(ArticleMainButtonContent))(
<Loaders.ArticleButton height="28px" /> <Loaders.ArticleButton height="28px" />
) )
) )

15
packages/client/src/components/EmptyContainer/RoomNoAccessContainer.js
View File

@ -5,14 +5,13 @@ import React from "react";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import EmptyContainer from "./EmptyContainer"; import EmptyContainer from "./EmptyContainer";
import Link from "@docspace/components/link"; import Link from "@docspace/components/link";
import RoomsFilter from "@docspace/common/api/rooms/filter"; import RoomsFilter from "@docspace/common/api/rooms/filter";
import { combineUrl } from "@docspace/common/utils";
import { getCategoryUrl } from "SRC_DIR/helpers/utils"; import { getCategoryUrl } from "SRC_DIR/helpers/utils";
import history from "@docspace/common/history";
import config from "PACKAGE_FILE";
const RoomNoAccessContainer = (props) => { const RoomNoAccessContainer = (props) => {
const { const {
@ -30,6 +29,8 @@ const RoomNoAccessContainer = (props) => {
const descriptionRoomNoAccess = t("NoAccessRoomDescription"); const descriptionRoomNoAccess = t("NoAccessRoomDescription");
const titleRoomNoAccess = t("NoAccessRoomTitle"); const titleRoomNoAccess = t("NoAccessRoomTitle");
const navigate = useNavigate();
React.useEffect(() => { React.useEffect(() => {
const timer = setTimeout(onGoToShared, 5000); const timer = setTimeout(onGoToShared, 5000);
return () => clearTimeout(timer); return () => clearTimeout(timer);
@ -49,13 +50,7 @@ const RoomNoAccessContainer = (props) => {
const pathname = `${url}?${filterParamsStr}`; const pathname = `${url}?${filterParamsStr}`;
history.push( navigate(pathname);
combineUrl(
window.DocSpaceConfig?.proxy?.url,
config.homepage,
pathname
)
);
}) })
.finally(() => { .finally(() => {
setIsLoading(false); setIsLoading(false);

20
packages/client/src/components/EmptyContainer/RootFolderContainer.js
View File

@ -3,6 +3,7 @@ import PersonSvgUrl from "PUBLIC_DIR/images/person.svg?url";
import PlusSvgUrl from "PUBLIC_DIR/images/plus.svg?url"; import PlusSvgUrl from "PUBLIC_DIR/images/plus.svg?url";
import EmptyFolderImageSvgUrl from "PUBLIC_DIR/images/empty-folder-image.svg?url"; import EmptyFolderImageSvgUrl from "PUBLIC_DIR/images/empty-folder-image.svg?url";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import styled from "styled-components"; import styled from "styled-components";
import { FolderType } from "@docspace/common/constants"; import { FolderType } from "@docspace/common/constants";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
@ -15,7 +16,6 @@ import Loaders from "@docspace/common/components/Loaders";
import RoomsFilter from "@docspace/common/api/rooms/filter"; import RoomsFilter from "@docspace/common/api/rooms/filter";
import { combineUrl } from "@docspace/common/utils"; import { combineUrl } from "@docspace/common/utils";
import { getCategoryUrl } from "SRC_DIR/helpers/utils"; import { getCategoryUrl } from "SRC_DIR/helpers/utils";
import history from "@docspace/common/history";
import config from "PACKAGE_FILE"; import config from "PACKAGE_FILE";
import PlusIcon from "PUBLIC_DIR/images/plus.react.svg"; import PlusIcon from "PUBLIC_DIR/images/plus.react.svg";
import EmptyScreenPersonalUrl from "PUBLIC_DIR/images/empty_screen_personal.svg?url"; import EmptyScreenPersonalUrl from "PUBLIC_DIR/images/empty_screen_personal.svg?url";
@ -74,6 +74,8 @@ const RootFolderContainer = (props) => {
} = props; } = props;
const personalDescription = t("EmptyFolderDecription"); const personalDescription = t("EmptyFolderDecription");
const navigate = useNavigate();
const emptyScreenHeader = t("EmptyScreenFolder"); const emptyScreenHeader = t("EmptyScreenFolder");
const archiveHeader = t("ArchiveEmptyScreenHeader"); const archiveHeader = t("ArchiveEmptyScreenHeader");
const noFilesHeader = t("NoFilesHereYet"); const noFilesHeader = t("NoFilesHereYet");
@ -138,13 +140,7 @@ const RootFolderContainer = (props) => {
const pathname = `${url}?${filterParamsStr}`; const pathname = `${url}?${filterParamsStr}`;
history.push( navigate(pathname);
combineUrl(
window.DocSpaceConfig?.proxy?.url,
config.homepage,
pathname
)
);
}) })
.finally(() => { .finally(() => {
setIsLoading(false); setIsLoading(false);
@ -378,12 +374,8 @@ const RootFolderContainer = (props) => {
export default inject( export default inject(
({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => { ({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => {
const { const { isDesktopClient, isEncryptionSupport, organizationName, theme } =
isDesktopClient, auth.settingsStore;
isEncryptionSupport,
organizationName,
theme,
} = auth.settingsStore;
const { const {
filter, filter,

15
packages/client/src/components/GlobalEvents/ChangeUserTypeEvent.js
View File

@ -6,7 +6,7 @@ import { ChangeUserTypeDialog } from "../dialogs";
import toastr from "@docspace/components/toast/toastr"; import toastr from "@docspace/components/toast/toastr";
import Link from "@docspace/components/link"; import Link from "@docspace/components/link";
import { combineUrl } from "@docspace/common/utils"; import { combineUrl } from "@docspace/common/utils";
import history from "@docspace/common/history"; import { useNavigate } from "react-router-dom";
const ChangeUserTypeEvent = ({ const ChangeUserTypeEvent = ({
setVisible, setVisible,
@ -17,13 +17,8 @@ const ChangeUserTypeEvent = ({
getUsersList, getUsersList,
onClose, onClose,
}) => { }) => {
const { const { toType, fromType, userIDs, successCallback, abortCallback } =
toType, peopleDialogData;
fromType,
userIDs,
successCallback,
abortCallback,
} = peopleDialogData;
const { t } = useTranslation(["ChangeUserTypeDialog", "Common", "Payments"]); const { t } = useTranslation(["ChangeUserTypeDialog", "Common", "Payments"]);
const onKeyUpHandler = (e) => { const onKeyUpHandler = (e) => {
@ -50,12 +45,12 @@ const ChangeUserTypeEvent = ({
const onClickPayments = () => { const onClickPayments = () => {
const paymentPageUrl = combineUrl( const paymentPageUrl = combineUrl(
combineUrl(window.DocSpaceConfig?.proxy?.url, "/portal-settings"), "/portal-settings",
"/payments/portal-payments" "/payments/portal-payments"
); );
toastr.clear(); toastr.clear();
history.push(paymentPageUrl); navigate(paymentPageUrl);
}; };
const onChangeUserType = () => { const onChangeUserType = () => {

5
packages/client/src/components/Layout/index.js
View File

@ -2,6 +2,8 @@ import React, { useEffect, useState } from "react";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import MobileLayout from "./MobileLayout"; import MobileLayout from "./MobileLayout";
import history from "@docspace/common/history";
import { useNavigate, useLocation, useMatch } from "react-router-dom";
import { size } from "@docspace/components/utils/device"; import { size } from "@docspace/components/utils/device";
import { import {
isIOS, isIOS,
@ -39,6 +41,9 @@ const Layout = (props) => {
const [contentHeight, setContentHeight] = useState(); const [contentHeight, setContentHeight] = useState();
const [isPortrait, setIsPortrait] = useState(); const [isPortrait, setIsPortrait] = useState();
history.navigate = useNavigate();
history.location = useLocation();
const intervalTime = 100; const intervalTime = 100;
const endTimeout = 300; const endTimeout = 300;
let intervalHandler; let intervalHandler;

3
packages/client/src/components/MainBar/Bar.js
View File

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

136
packages/client/src/components/NavMenu/index.js
View File

@ -8,7 +8,7 @@ import Header from "./sub-components/header";
import HeaderNav from "./sub-components/header-nav"; import HeaderNav from "./sub-components/header-nav";
import HeaderUnAuth from "./sub-components/header-unauth"; import HeaderUnAuth from "./sub-components/header-unauth";
import { I18nextProvider, withTranslation } from "react-i18next"; import { I18nextProvider, withTranslation } from "react-i18next";
import { withRouter } from "react-router"; import { useNavigate, useLocation } from "react-router-dom";
import Loaders from "@docspace/common/components/Loaders"; import Loaders from "@docspace/common/components/Loaders";
import { LayoutContextConsumer } from "../Layout/context"; import { LayoutContextConsumer } from "../Layout/context";
@ -55,99 +55,80 @@ const StyledContainer = styled.header`
StyledContainer.defaultProps = { theme: Base }; StyledContainer.defaultProps = { theme: Base };
class NavMenu extends React.Component { const NavMenu = (props) => {
constructor(props) { const timeout = React.useRef(null);
super(props);
this.timeout = null;
const { const navigate = useNavigate();
isBackdropVisible, const location = useLocation();
isNavHoverEnabled,
isNavOpened,
isAsideVisible,
} = props;
this.state = { const [isBackdropVisible, setIsBackdropVisible] = React.useState(
isBackdropVisible, props.isBackdropVisible
isNavOpened, );
isAsideVisible, const [isNavOpened, setIsNavOpened] = React.useState(props.isNavHoverEnabled);
isNavHoverEnabled, const [isAsideVisible, setIsAsideVisible] = React.useState(props.isNavOpened);
}; const [isNavHoverEnabled, setIsNavHoverEnabled] = React.useState(
} props.isAsideVisible
);
backdropClick = () => { const backdropClick = () => {
this.setState({ setIsBackdropVisible(false);
isBackdropVisible: false, setIsNavOpened(false);
isNavOpened: false, setIsAsideVisible(false);
isAsideVisible: false, setIsNavHoverEnabled((val) => !val);
isNavHoverEnabled: !this.state.isNavHoverEnabled,
});
}; };
showNav = () => { const showNav = () => {
this.setState({ setIsBackdropVisible(true);
isBackdropVisible: true, setIsNavOpened(true);
isNavOpened: true, setIsAsideVisible(false);
isAsideVisible: false, setIsNavHoverEnabled(false);
isNavHoverEnabled: false,
});
}; };
clearNavTimeout = () => { const clearNavTimeout = () => {
if (this.timeout == null) return; if (timeout.current === null) return;
clearTimeout(this.timeout); clearTimeout(timeout.current);
this.timeout = null; timeout.current = null;
}; };
handleNavMouseEnter = () => { const handleNavMouseEnter = () => {
if (!this.state.isNavHoverEnabled) return; if (!isNavHoverEnabled) return;
this.timeout = setTimeout(() => { timeout.current = setTimeout(() => {
this.setState({ setIsBackdropVisible(false);
isBackdropVisible: false, setIsNavOpened(true);
isNavOpened: true, setIsAsideVisible(false);
isAsideVisible: false,
});
}, 1000); }, 1000);
}; };
handleNavMouseLeave = () => { const handleNavMouseLeave = () => {
if (!this.state.isNavHoverEnabled) return; if (!isNavHoverEnabled) return;
this.clearNavTimeout(); clearNavTimeout();
this.setState({ setIsBackdropVisible(false);
isBackdropVisible: false, setIsNavOpened(false);
isNavOpened: false, setIsAsideVisible(false);
isAsideVisible: false,
});
}; };
toggleAside = () => { const toggleAside = () => {
this.clearNavTimeout(); clearNavTimeout();
this.setState({ setIsBackdropVisible(true);
isBackdropVisible: true, setIsNavOpened(false);
isNavOpened: false, setIsAsideVisible(true);
isAsideVisible: true, setIsNavHoverEnabled(false);
isNavHoverEnabled: false,
});
}; };
render() {
const { isBackdropVisible, isNavOpened, isAsideVisible } = this.state;
const { const {
isAuthenticated, isAuthenticated,
isLoaded, isLoaded,
asideContent, asideContent,
history,
isDesktop, isDesktop,
isFrame, isFrame,
showHeader, showHeader,
} = this.props; } = props;
const isAsideAvailable = !!asideContent; const isAsideAvailable = !!asideContent;
const hideHeader = isDesktop || (!showHeader && isFrame); const hideHeader = isDesktop || (!showHeader && isFrame);
//console.log("NavMenu render", this.state, this.props);
const isPreparationPortal = const isPreparationPortal = location.pathname === "/preparation-portal";
history.location.pathname === "/preparation-portal";
return ( return (
<LayoutContextConsumer> <LayoutContextConsumer>
{(value) => ( {(value) => (
@ -158,7 +139,7 @@ class NavMenu extends React.Component {
> >
<Backdrop <Backdrop
visible={isBackdropVisible} visible={isBackdropVisible}
onClick={this.backdropClick} onClick={backdropClick}
withBackground={true} withBackground={true}
/> />
@ -169,11 +150,11 @@ class NavMenu extends React.Component {
<Header <Header
isPreparationPortal={isPreparationPortal} isPreparationPortal={isPreparationPortal}
isNavOpened={isNavOpened} isNavOpened={isNavOpened}
onClick={this.showNav} onClick={showNav}
onNavMouseEnter={this.handleNavMouseEnter} onNavMouseEnter={handleNavMouseEnter}
onNavMouseLeave={this.handleNavMouseLeave} onNavMouseLeave={handleNavMouseLeave}
toggleAside={this.toggleAside} toggleAside={toggleAside}
backdropClick={this.backdropClick} backdropClick={backdropClick}
/> />
</> </>
) : !isLoaded && isAuthenticated ? ( ) : !isLoaded && isAuthenticated ? (
@ -183,7 +164,7 @@ class NavMenu extends React.Component {
))} ))}
{isAsideAvailable && ( {isAsideAvailable && (
<Aside visible={isAsideVisible} onClick={this.backdropClick}> <Aside visible={isAsideVisible} onClick={backdropClick}>
{asideContent} {asideContent}
</Aside> </Aside>
)} )}
@ -191,8 +172,7 @@ class NavMenu extends React.Component {
)} )}
</LayoutContextConsumer> </LayoutContextConsumer>
); );
} };
}
NavMenu.propTypes = { NavMenu.propTypes = {
isBackdropVisible: PropTypes.bool, isBackdropVisible: PropTypes.bool,
@ -231,7 +211,7 @@ const NavMenuWrapper = inject(({ auth }) => {
showHeader: frameConfig?.showHeader, showHeader: frameConfig?.showHeader,
isFrame, isFrame,
}; };
})(observer(withTranslation(["NavMenu", "Common"])(withRouter(NavMenu)))); })(observer(withTranslation(["NavMenu", "Common"])(NavMenu)));
export default () => ( export default () => (
<I18nextProvider i18n={i18n}> <I18nextProvider i18n={i18n}>

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

@ -5,7 +5,6 @@ import ProfileActions from "./profile-actions";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { tablet, mobile } from "@docspace/components/utils/device"; import { tablet, mobile } from "@docspace/components/utils/device";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { withRouter } from "react-router";
import { isMobile, isMobileOnly } from "react-device-detect"; import { isMobile, isMobileOnly } from "react-device-detect";
const StyledNav = styled.nav` const StyledNav = styled.nav`
@ -80,8 +79,7 @@ HeaderNav.propTypes = {
isAuthenticated: PropTypes.bool, 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;
@ -93,5 +91,4 @@ export default withRouter(
setUserIsUpdate, setUserIsUpdate,
getActions, getActions,
}; };
})(observer(HeaderNav)) })(observer(HeaderNav));
);

14
packages/client/src/components/NavMenu/sub-components/header.js
View File

@ -5,7 +5,7 @@ import PropTypes from "prop-types";
import styled from "styled-components"; import styled from "styled-components";
import { Link as LinkWithoutRedirect } from "react-router-dom"; import { Link as LinkWithoutRedirect } from "react-router-dom";
import { isMobileOnly, isMobile } from "react-device-detect"; import { isMobileOnly, isMobile } from "react-device-detect";
import history from "@docspace/common/history"; import { useLocation } from "react-router-dom";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { isDesktop, tablet, mobile } from "@docspace/components/utils/device"; import { isDesktop, tablet, mobile } from "@docspace/components/utils/device";
import { combineUrl } from "@docspace/common/utils"; import { combineUrl } from "@docspace/common/utils";
@ -121,9 +121,13 @@ const HeaderComponent = ({
theme, theme,
toggleArticleOpen, toggleArticleOpen,
logoUrl, logoUrl,
...props ...props
}) => { }) => {
const { t } = useTranslation("Common"); const { t } = useTranslation("Common");
const location = useLocation();
//const isNavAvailable = mainModules.length > 0; //const isNavAvailable = mainModules.length > 0;
// const onLogoClick = () => { // const onLogoClick = () => {
@ -190,13 +194,13 @@ const HeaderComponent = ({
}); });
const [isFormGallery, setIsFormGallery] = useState( const [isFormGallery, setIsFormGallery] = useState(
history.location.pathname.includes("/form-gallery") location.pathname.includes("/form-gallery")
); );
useEffect(() => { useEffect(() => {
return history.listen((location) => { return () => {
setIsFormGallery(location.pathname.includes("/form-gallery")); setIsFormGallery(location.pathname.includes("/form-gallery"));
}); };
}, [history]); }, [location]);
const logo = getLogoFromPath( const logo = getLogoFromPath(
!theme.isBase ? logoUrl?.path?.dark : logoUrl?.path?.light !theme.isBase ? logoUrl?.path?.dark : logoUrl?.path?.light

10
packages/client/src/components/PeopleArticle/Body/index.js
View File

@ -6,7 +6,7 @@ import Filter from "@docspace/common/api/people/filter";
import Loaders from "@docspace/common/components/Loaders"; import Loaders from "@docspace/common/components/Loaders";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { getSelectedGroup } from "../../../helpers/people-helpers"; import { getSelectedGroup } from "../../../helpers/people-helpers";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import { isMobile } from "@docspace/components/utils/device"; import { isMobile } from "@docspace/components/utils/device";
import { isMobileOnly } from "react-device-detect"; import { isMobileOnly } from "react-device-detect";
import config from "PACKAGE_FILE"; import config from "PACKAGE_FILE";
@ -23,7 +23,7 @@ const ArticleBodyContent = ({
toggleArticleOpen, toggleArticleOpen,
showText, showText,
groupsCaption, groupsCaption,
history,
filter, filter,
selectGroup, selectGroup,
isVisitor, isVisitor,
@ -32,6 +32,8 @@ const ArticleBodyContent = ({
}) => { }) => {
const [groupItems, setGroupItems] = React.useState(null); const [groupItems, setGroupItems] = React.useState(null);
const navigate = useNavigate();
const changeTitleDocument = React.useCallback( const changeTitleDocument = React.useCallback(
(id) => { (id) => {
const currentGroup = getSelectedGroup( const currentGroup = getSelectedGroup(
@ -72,7 +74,7 @@ const ArticleBodyContent = ({
config.homepage, config.homepage,
`/accounts/filter?${urlFilter}` `/accounts/filter?${urlFilter}`
); );
history.push(url); navigate(url);
if (isMobileOnly || isMobile()) toggleArticleOpen(); if (isMobileOnly || isMobile()) toggleArticleOpen();
} }
}, },
@ -126,7 +128,7 @@ const ArticleBodyContent = ({
}; };
const BodyContent = withTranslation(["Article"])( const BodyContent = withTranslation(["Article"])(
withRouter(withLoader(ArticleBodyContent)(<Loaders.ArticleFolder />)) withLoader(ArticleBodyContent)(<Loaders.ArticleFolder />)
); );
export default inject(({ auth, peopleStore }) => { export default inject(({ auth, peopleStore }) => {

105
packages/client/src/components/PeopleArticle/MainButton/index.js
View File

@ -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 AddEmployeeReactSvgUrl from "ASSETS/images/add.employee.react.svg?url";
import React from "react"; import React from "react";
//import PropTypes from "prop-types"; //import PropTypes from "prop-types";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import MainButton from "@docspace/components/main-button"; import MainButton from "@docspace/components/main-button";
import InviteDialog from "../../dialogs/InviteDialog/index"; import InviteDialog from "../../dialogs/InviteDialog/index";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
@ -24,56 +24,31 @@ import MobileView from "./MobileView";
import withLoader from "../../../HOCs/withLoader"; import withLoader from "../../../HOCs/withLoader";
class ArticleMainButtonContent extends React.Component { const ArticleMainButtonContent = (props) => {
constructor(props) { const [dialogVisible, setDialogVisible] = React.useState(false);
super(props);
this.state = {
dialogVisible: false,
};
}
goToEmployeeCreate = () => {
const { history, homepage } = this.props;
history.push(
combineUrl(window.DocSpaceConfig?.proxy?.url, homepage, "/create/user")
);
if (isMobile || isMobileUtils()) this.props.toggleShowText();
};
// goToGuestCreate = () => {
// const { history, homepage } = this.props;
// history.push(
// combineUrl(window.DocSpaceConfig?.proxy?.url, homepage, "/create/guest")
// );
// if (isMobile || isMobileUtils()) this.props.toggleShowText();
// };
// goToGroupCreate = () => {
// const { history, homepage } = this.props;
// history.push(
// combineUrl(window.DocSpaceConfig?.proxy?.url, homepage, "/group/create")
// );
// if (isMobile || isMobileUtils()) this.props.toggleShowText();
// };
onInvitationDialogClick = () =>
this.setState({ dialogVisible: !this.state.dialogVisible });
render() {
//console.log("People ArticleMainButtonContent render");
const { const {
homepage,
toggleShowText,
t, t,
isAdmin, isAdmin,
homepage,
userCaption, userCaption,
// guestCaption,
// groupCaption,
sectionWidth, sectionWidth,
isMobileArticle, isMobileArticle,
} = this.props; } = props;
const { dialogVisible } = this.state; const navigate = useNavigate();
const goToEmployeeCreate = () => {
navigate(
combineUrl(window.DocSpaceConfig?.proxy?.url, homepage, "/create/user")
);
if (isMobile || isMobileUtils()) toggleShowText();
};
const onInvitationDialogClick = () => setDialogVisible((val) => !val);
const separator = { const separator = {
key: "separator", key: "separator",
@ -89,28 +64,8 @@ class ArticleMainButtonContent extends React.Component {
AddEmployeeReactSvgUrl AddEmployeeReactSvgUrl
), ),
label: userCaption, label: userCaption,
onClick: this.goToEmployeeCreate, onClick: goToEmployeeCreate,
}, },
// {
// key: "create-guest",
// icon: combineUrl(
// window.DocSpaceConfig?.proxy?.url,
// homepage,
// AddGuestReactSvgUrl
// ),
// label: guestCaption,
// onClick: this.goToGuestCreate,
// },
// {
// key: "create-group",
// icon: combineUrl(
// window.DocSpaceConfig?.proxy?.url,
// homepage,
// AddDepartmentReactSvgUrl
// ),
// label: groupCaption,
// onClick: this.goToGroupCreate,
// },
]; ];
const links = [ const links = [
@ -121,7 +76,7 @@ class ArticleMainButtonContent extends React.Component {
InvitationLinkReactSvgUrl InvitationLinkReactSvgUrl
), ),
label: t("PeopleTranslations:InviteLinkTitle"), label: t("PeopleTranslations:InviteLinkTitle"),
onClick: this.onInvitationDialogClick, onClick: onInvitationDialogClick,
}, },
]; ];
@ -147,24 +102,19 @@ class ArticleMainButtonContent extends React.Component {
{dialogVisible && ( {dialogVisible && (
<InviteDialog <InviteDialog
visible={dialogVisible} visible={dialogVisible}
onClose={this.onInvitationDialogClick} onClose={onInvitationDialogClick}
onCloseButton={this.onInvitationDialogClick} onCloseButton={onInvitationDialogClick}
/> />
)} )}
</> </>
) : ( ) : (
<></> <></>
); );
} };
}
export default withRouter( export default inject(({ auth }) => {
inject(({ auth }) => { const { userCaption, guestCaption, groupCaption } =
const { auth.settingsStore.customNames;
userCaption,
guestCaption,
groupCaption,
} = auth.settingsStore.customNames;
return { return {
isAdmin: auth.isAdmin, isAdmin: auth.isAdmin,
@ -176,9 +126,8 @@ export default withRouter(
isMobileArticle: auth.settingsStore.isMobileArticle, isMobileArticle: auth.settingsStore.isMobileArticle,
showText: auth.settingsStore.showText, showText: auth.settingsStore.showText,
}; };
})( })(
withTranslation(["Article", "Common", "PeopleTranslations"])( withTranslation(["Article", "Common", "PeopleTranslations"])(
withLoader(observer(ArticleMainButtonContent))(<Loaders.ArticleButton />) withLoader(observer(ArticleMainButtonContent))(<Loaders.ArticleButton />)
) )
)
); );

4
packages/client/src/components/dialogs/ArchiveDialog/index.js
View File

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

7
packages/client/src/components/dialogs/ChangeUserStatusDialog/index.js
View File

@ -1,5 +1,4 @@
import React, { memo } from "react"; import React, { memo } from "react";
import { withRouter } from "react-router";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import ModalDialog from "@docspace/components/modal-dialog"; import ModalDialog from "@docspace/components/modal-dialog";
@ -135,8 +134,7 @@ ChangeUserStatusDialog.propTypes = {
userIDs: PropTypes.arrayOf(PropTypes.string).isRequired, 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;
@ -153,5 +151,4 @@ export default withRouter(
setSelection, setSelection,
infoPanelVisible, infoPanelVisible,
}; };
})(observer(ChangeUserStatusDialog)) })(observer(ChangeUserStatusDialog));
);

3
packages/client/src/components/dialogs/ConflictResolveDialog/index.js
View File

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

17
packages/client/src/components/dialogs/ConvertDialog/index.js
View File

@ -1,5 +1,4 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { withRouter } from "react-router";
import ModalDialogContainer from "../ModalDialogContainer"; import ModalDialogContainer from "../ModalDialogContainer";
import ModalDialog from "@docspace/components/modal-dialog"; import ModalDialog from "@docspace/components/modal-dialog";
import Button from "@docspace/components/button"; import Button from "@docspace/components/button";
@ -157,16 +156,10 @@ export default inject(
isFavoritesFolder, isFavoritesFolder,
isShareFolder, isShareFolder,
} = treeFoldersStore; } = 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 { id: folderId } = selectedFolderStore;
const { const {
convertDialogVisible: visible, convertDialogVisible: visible,
@ -191,4 +184,4 @@ export default inject(
setIsConvertSingleFile, setIsConvertSingleFile,
}; };
} }
)(withRouter(observer(ConvertDialog))); )(observer(ConvertDialog));

26
packages/client/src/components/dialogs/DeleteDialog/index.js
View File

@ -1,5 +1,4 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { withRouter } from "react-router";
import ModalDialog from "@docspace/components/modal-dialog"; import ModalDialog from "@docspace/components/modal-dialog";
import { StyledDeleteDialog } from "./StyledDeleteDialog"; import { StyledDeleteDialog } from "./StyledDeleteDialog";
import Button from "@docspace/components/button"; import Button from "@docspace/components/button";
@ -214,23 +213,12 @@ const DeleteDialog = withTranslation([
export default inject( export default inject(
({ filesStore, dialogsStore, filesActionsStore, treeFoldersStore, auth }) => { ({ 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 { const {
deleteDialogVisible: visible, deleteDialogVisible: visible,
@ -268,4 +256,4 @@ export default inject(
isRoom, isRoom,
}; };
} }
)(withRouter(observer(DeleteDialog))); )(observer(DeleteDialog));

49
packages/client/src/components/dialogs/DeleteProfileEverDialog/index.js
View File

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import Button from "@docspace/components/button"; import Button from "@docspace/components/button";
@ -17,44 +17,30 @@ import { combineUrl } from "@docspace/common/utils";
const { deleteUser } = api.people; //TODO: Move to action const { deleteUser } = api.people; //TODO: Move to action
const { Filter } = api; const { Filter } = api;
class DeleteProfileEverDialogComponent extends React.Component { const DeleteProfileEverDialogComponent = (props) => {
constructor(props) { const { user, t, homepage, setFilter, onClose, tReady, visible } = props;
super(props); const [isRequestRunning, setIsRequestRunning] = React.useState(false);
this.state = { const navigate = useNavigate();
isRequestRunning: false,
};
}
onDeleteProfileEver = () => {
const { user, t, history, homepage, setFilter, onClose } = this.props;
const onDeleteProfileEver = () => {
const filter = Filter.getDefault(); const filter = Filter.getDefault();
const params = filter.toUrlParams(); const params = filter.toUrlParams();
const url = combineUrl( const url = `/accounts/filter?${params}`;
window.DocSpaceConfig?.proxy?.url,
homepage,
`/accounts/filter?${params}`
);
this.setState({ isRequestRunning: true }, () => { setIsRequestRunning(true);
deleteUser(user.id) deleteUser(user.id)
.then((res) => { .then((res) => {
toastr.success(t("SuccessfullyDeleteUserInfoMessage")); toastr.success(t("SuccessfullyDeleteUserInfoMessage"));
history.push(url, params); navigate(url, params);
setFilter(filter); setFilter(filter);
return; return;
}) })
.catch((error) => toastr.error(error)) .catch((error) => toastr.error(error))
.finally(() => onClose()); .finally(() => onClose());
});
}; };
render() {
console.log("DeleteProfileEverDialog render");
const { t, tReady, visible, user, onClose, userCaption } = this.props;
const { isRequestRunning } = this.state;
return ( return (
<ModalDialogContainer <ModalDialogContainer
isLoading={!tReady} isLoading={!tReady}
@ -64,11 +50,7 @@ class DeleteProfileEverDialogComponent extends React.Component {
<ModalDialog.Header>{t("DeleteUser")}</ModalDialog.Header> <ModalDialog.Header>{t("DeleteUser")}</ModalDialog.Header>
<ModalDialog.Body> <ModalDialog.Body>
<Text> <Text>
<Trans <Trans i18nKey="DeleteUserMessage" ns="DeleteProfileEverDialog" t={t}>
i18nKey="DeleteUserMessage"
ns="DeleteProfileEverDialog"
t={t}
>
{{ userCaption: t("Common:User") }}{" "} {{ userCaption: t("Common:User") }}{" "}
<strong>{{ user: user.displayName }}</strong> <strong>{{ user: user.displayName }}</strong>
will be deleted. User personal documents which are available to will be deleted. User personal documents which are available to
@ -83,7 +65,7 @@ class DeleteProfileEverDialogComponent extends React.Component {
size="normal" size="normal"
primary={true} primary={true}
scale scale
onClick={this.onDeleteProfileEver} onClick={onDeleteProfileEver}
isLoading={isRequestRunning} isLoading={isRequestRunning}
/> />
<Button <Button
@ -95,8 +77,7 @@ class DeleteProfileEverDialogComponent extends React.Component {
</ModalDialog.Footer> </ModalDialog.Footer>
</ModalDialogContainer> </ModalDialogContainer>
); );
} };
}
const DeleteProfileEverDialog = withTranslation([ const DeleteProfileEverDialog = withTranslation([
"DeleteProfileEverDialog", "DeleteProfileEverDialog",
@ -110,9 +91,7 @@ DeleteProfileEverDialog.propTypes = {
user: PropTypes.object.isRequired, user: PropTypes.object.isRequired,
}; };
export default withRouter( export default inject(({ peopleStore }) => ({
inject(({ peopleStore }) => ({
homepage: config.homepage, homepage: config.homepage,
setFilter: peopleStore.filterStore.setFilterParams, setFilter: peopleStore.filterStore.setFilterParams,
}))(observer(DeleteProfileEverDialog)) }))(observer(DeleteProfileEverDialog));
);

10
packages/client/src/components/dialogs/DeleteThirdPartyDialog/index.js
View File

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

7
packages/client/src/components/dialogs/DeleteUsersDialog/index.js
View File

@ -1,5 +1,4 @@
import React, { memo } from "react"; import React, { memo } from "react";
import { withRouter } from "react-router";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import Button from "@docspace/components/button"; import Button from "@docspace/components/button";
@ -160,13 +159,11 @@ DeleteUsersDialog.propTypes = {
removeUser: PropTypes.func.isRequired, 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));
);

18
packages/client/src/components/dialogs/DownloadDialog/index.js
View File

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

9
packages/client/src/components/dialogs/EmptyTrashDialog/index.js
View File

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

35
packages/client/src/components/dialogs/InviteUsersWarningDialog/index.js
View File

@ -1,25 +1,19 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { withTranslation, Trans } from "react-i18next"; import { withTranslation, Trans } from "react-i18next";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import moment from "moment"; import moment from "moment";
import { combineUrl } from "@docspace/common/utils";
import ModalDialog from "@docspace/components/modal-dialog"; import ModalDialog from "@docspace/components/modal-dialog";
import Button from "@docspace/components/button"; import Button from "@docspace/components/button";
import Text from "@docspace/components/text"; import Text from "@docspace/components/text";
import { getDaysRemaining } from "@docspace/common/utils"; import { getDaysRemaining } from "@docspace/common/utils";
const PROXY_BASE_URL = combineUrl(
window.DocSpaceConfig?.proxy?.url,
"/portal-settings"
);
const InviteUsersWarningDialog = (props) => { const InviteUsersWarningDialog = (props) => {
const { const {
t, t,
tReady, tReady,
history,
language, language,
dueDate, dueDate,
delayDueDate, delayDueDate,
@ -30,6 +24,8 @@ const InviteUsersWarningDialog = (props) => {
isPaymentPageAvailable, isPaymentPageAvailable,
} = props; } = props;
const navigate = useNavigate();
const [datesData, setDatesData] = useState({}); const [datesData, setDatesData] = useState({});
const { fromDate, byDate, delayDaysCount } = datesData; const { fromDate, byDate, delayDaysCount } = datesData;
@ -56,11 +52,9 @@ const InviteUsersWarningDialog = (props) => {
const onUpgradePlan = () => { const onUpgradePlan = () => {
onClose(); onClose();
const paymentPageUrl = combineUrl( const paymentPageUrl = "/portal-settings/payments/portal-payments";
PROXY_BASE_URL,
"/payments/portal-payments" navigate(paymentPageUrl);
);
history.push(paymentPageUrl);
}; };
return ( return (
@ -132,11 +126,8 @@ const InviteUsersWarningDialog = (props) => {
export default inject(({ auth, dialogsStore }) => { export default inject(({ auth, dialogsStore }) => {
const { isPaymentPageAvailable } = auth; const { isPaymentPageAvailable } = auth;
const { const { dueDate, delayDueDate, isGracePeriod } =
dueDate, auth.currentTariffStatusStore;
delayDueDate,
isGracePeriod,
} = auth.currentTariffStatusStore;
const { currentTariffPlanTitle } = auth.currentQuotaStore; const { currentTariffPlanTitle } = auth.currentQuotaStore;
const { const {
@ -154,10 +145,4 @@ export default inject(({ auth, dialogsStore }) => {
delayDueDate, delayDueDate,
isGracePeriod, isGracePeriod,
}; };
})( })(observer(withTranslation(["Payments", "Common"])(InviteUsersWarningDialog)));
observer(
withTranslation(["Payments", "Common"])(
withRouter(InviteUsersWarningDialog)
)
)
);

33
packages/client/src/components/dialogs/ResetApplicationDialog/index.js
View File

@ -4,31 +4,26 @@ import ModalDialog from "@docspace/components/modal-dialog";
import Button from "@docspace/components/button"; import Button from "@docspace/components/button";
import Text from "@docspace/components/text"; import Text from "@docspace/components/text";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import ModalDialogContainer from "../ModalDialogContainer"; import ModalDialogContainer from "../ModalDialogContainer";
import toastr from "@docspace/components/toast/toastr"; import toastr from "@docspace/components/toast/toastr";
class ResetApplicationDialogComponent extends React.Component { const ResetApplicationDialogComponent = (props) => {
constructor(props) { const { t, resetTfaApp, id, onClose, tReady, visible } = props;
super(props);
}
resetApp = async () => { const navigate = useNavigate();
const { t, resetTfaApp, id, onClose, history } = this.props;
const resetApp = async () => {
onClose && onClose(); onClose && onClose();
try { try {
const res = await resetTfaApp(id); const res = await resetTfaApp(id);
toastr.success(t("SuccessResetApplication")); toastr.success(t("SuccessResetApplication"));
if (res) history.push(res.replace(window.location.origin, "")); if (res) navigate(res.replace(window.location.origin, ""));
} catch (e) { } catch (e) {
toastr.error(e); toastr.error(e);
} }
}; };
render() {
//console.log("Render ResetApplicationDialog");
const { t, tReady, visible, onClose } = this.props;
return ( return (
<ModalDialogContainer <ModalDialogContainer
isLoading={!tReady} isLoading={!tReady}
@ -46,7 +41,7 @@ class ResetApplicationDialogComponent extends React.Component {
size="normal" size="normal"
scale scale
primary={true} primary={true}
onClick={this.resetApp} onClick={resetApp}
/> />
<Button <Button
key="CloseBtn" key="CloseBtn"
@ -59,14 +54,12 @@ class ResetApplicationDialogComponent extends React.Component {
</ModalDialog.Footer> </ModalDialog.Footer>
</ModalDialogContainer> </ModalDialogContainer>
); );
} };
}
const ResetApplicationDialog = withRouter( const ResetApplicationDialog = withTranslation([
withTranslation(["ResetApplicationDialog", "Common"])( "ResetApplicationDialog",
ResetApplicationDialogComponent "Common",
) ])(ResetApplicationDialogComponent);
);
ResetApplicationDialog.propTypes = { ResetApplicationDialog.propTypes = {
visible: PropTypes.bool.isRequired, visible: PropTypes.bool.isRequired,

7
packages/client/src/components/dialogs/SendInviteDialog/index.js
View File

@ -1,5 +1,4 @@
import React, { memo } from "react"; import React, { memo } from "react";
import { withRouter } from "react-router";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import ModalDialog from "@docspace/components/modal-dialog"; import ModalDialog from "@docspace/components/modal-dialog";
@ -166,10 +165,8 @@ SendInviteDialog.propTypes = {
setSelected: PropTypes.func.isRequired, 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));
);

12
packages/client/src/components/panels/ChangeOwnerPanel/index.js
View File

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

17
packages/client/src/components/panels/NewFilesPanel/index.js
View File

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

4
packages/client/src/components/panels/OperationsPanel/index.js
View File

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

51
packages/client/src/helpers/confirmRoute.js
View File

@ -1,30 +1,27 @@
import React from "react"; import React from "react";
import { Route } from "react-router-dom"; import { useLocation } from "react-router-dom";
import { ValidationResult } from "./../helpers/constants"; import { ValidationResult } from "./../helpers/constants";
import { withRouter } from "react-router";
import Loader from "@docspace/components/loader"; import Loader from "@docspace/components/loader";
import Section from "@docspace/common/components/Section"; import Section from "@docspace/common/components/Section";
import { checkConfirmLink } from "@docspace/common/api/user"; //TODO: Move AuthStore import { checkConfirmLink } from "@docspace/common/api/user"; //TODO: Move AuthStore
import { combineUrl, getObjectByLocation } from "@docspace/common/utils"; import { combineUrl, getObjectByLocation } from "@docspace/common/utils";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
class ConfirmRoute extends React.Component { const ConfirmRoute = (props) => {
constructor(props) { const [state, setState] = React.useState({
super(props);
this.state = {
linkData: {}, linkData: {},
isLoaded: false, isLoaded: false,
}; });
}
componentDidMount() { const location = useLocation();
const { forUnauthorized, isAuthenticated } = this.props;
React.useEffect(() => {
const { forUnauthorized, isAuthenticated } = props;
if (forUnauthorized && isAuthenticated) { if (forUnauthorized && isAuthenticated) {
this.props.logout(); props.logout();
} }
const { location } = this.props;
const { search } = location; const { search } = location;
const queryParams = getObjectByLocation(location); const queryParams = getObjectByLocation(location);
@ -54,10 +51,7 @@ class ConfirmRoute extends React.Component {
linkData, linkData,
}); });
this.setState({ setState((val) => ({ ...val, isLoaded: true, linkData }));
isLoaded: true,
linkData,
});
break; break;
case ValidationResult.Invalid: case ValidationResult.Invalid:
console.error("invlid link", { confirmLinkData, validationResult }); console.error("invlid link", { confirmLinkData, validationResult });
@ -99,33 +93,22 @@ class ConfirmRoute extends React.Component {
"/error" "/error"
); );
}); });
} }, []);
render() {
const { component: Component, ...rest } = this.props;
// console.log(`ConfirmRoute render`, this.props, this.state); // console.log(`ConfirmRoute render`, this.props, this.state);
return ( return !state.isLoaded ? (
<Route
{...rest}
render={(props) =>
!this.state.isLoaded ? (
<Section> <Section>
<Section.SectionBody> <Section.SectionBody>
<Loader className="pageLoader" type="rombs" size="40px" /> <Loader className="pageLoader" type="rombs" size="40px" />
</Section.SectionBody> </Section.SectionBody>
</Section> </Section>
) : ( ) : (
<Component React.cloneElement(props.children, {
{...(props = { ...props, linkData: this.state.linkData })} linkData: state.linkData,
/> })
)
}
/>
); );
} };
}
export default inject(({ auth }) => { export default inject(({ auth }) => {
const { isAuthenticated, logout } = auth; const { isAuthenticated, logout } = auth;
@ -133,4 +116,4 @@ export default inject(({ auth }) => {
isAuthenticated, isAuthenticated,
logout, logout,
}; };
})(observer(withRouter(ConfirmRoute))); })(observer(ConfirmRoute));

10
packages/client/src/helpers/utils.js
View File

@ -95,15 +95,15 @@ export const onItemClick = (e) => {
return window.open(link, "_blank"); return window.open(link, "_blank");
} }
history.push(link); history.navigate(link);
}; };
export const getPasswordErrorMessage = (t, settings) => { export const getPasswordErrorMessage = (t, settings) => {
return `${t("Common:PasswordMinimumLength")} ${ return `${t("Common:PasswordMinimumLength")} ${
settings ? settings.minLength : 8 settings ? settings?.minLength : 8
} ${settings.digits ? t("Common:PasswordLimitDigits") : ""} ${ } ${settings?.digits ? t("Common:PasswordLimitDigits") : ""} ${
settings.upperCase ? t("Common:PasswordLimitUpperCase") : "" settings?.upperCase ? t("Common:PasswordLimitUpperCase") : ""
} ${settings.specSymbols ? t("Common:PasswordLimitSpecialSymbols") : ""}`; } ${settings?.specSymbols ? t("Common:PasswordLimitSpecialSymbols") : ""}`;
}; };
export const getCategoryType = (location) => { export const getCategoryType = (location) => {

10
packages/client/src/pages/About/AboutHeader.js
View File

@ -2,7 +2,7 @@
import React from "react"; import React from "react";
import styled from "styled-components"; import styled from "styled-components";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import Headline from "@docspace/common/components/Headline"; import Headline from "@docspace/common/components/Headline";
import IconButton from "@docspace/components/icon-button"; import IconButton from "@docspace/components/icon-button";
import { tablet } from "@docspace/components/utils/device"; import { tablet } from "@docspace/components/utils/device";
@ -24,10 +24,12 @@ const HeaderContainer = styled.div`
`; `;
const AboutHeader = (props) => { const AboutHeader = (props) => {
const { t, history } = props; const { t } = props;
const navigate = useNavigate();
const onBack = () => { const onBack = () => {
history.goBack(); navigate(-1);
}; };
return ( return (
@ -46,4 +48,4 @@ const AboutHeader = (props) => {
); );
}; };
export default withRouter(withTranslation(["About"])(AboutHeader)); export default withTranslation(["About"])(AboutHeader);

67
packages/client/src/pages/Accounts.jsx
View File

@ -1,46 +1,18 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { Redirect, Switch } from "react-router-dom"; import { Navigate, Routes, Route, useLocation } from "react-router-dom";
import ErrorBoundary from "@docspace/common/components/ErrorBoundary"; import ErrorBoundary from "@docspace/common/components/ErrorBoundary";
import toastr from "@docspace/components/toast/toastr"; import toastr from "@docspace/components/toast/toastr";
import PrivateRoute from "@docspace/common/components/PrivateRoute"; import PrivateRoute from "@docspace/common/components/PrivateRoute";
import AppLoader from "@docspace/common/components/AppLoader"; import AppLoader from "@docspace/common/components/AppLoader";
import { /*combineUrl,*/ updateTempContent } from "@docspace/common/utils"; import { /*combineUrl,*/ updateTempContent } from "@docspace/common/utils";
import Home from "./AccountsHome"; import Home from "./AccountsHome";
import Profile from "./Profile";
import NotificationComponent from "./Notifications";
import Filter from "@docspace/common/api/people/filter"; import Filter from "@docspace/common/api/people/filter";
import { showLoader, hideLoader } from "@docspace/common/utils"; import { showLoader, hideLoader } from "@docspace/common/utils";
const Error404 = React.lazy(() => import("client/Error404")); const Error404 = React.lazy(() => import("client/Error404"));
const PeopleSection = React.memo(() => {
return (
<Switch>
<PrivateRoute exact path={["/accounts/view/@self"]} component={Profile} />
<PrivateRoute
exact
path={["/accounts/view/@self/notification"]}
component={NotificationComponent}
/>
<PrivateRoute
exact
withManager
path={["/accounts"]}
component={HomeRedirectToFilter}
/>
<PrivateRoute
path={"/accounts/filter"}
withManager
restricted
component={Home}
/>
<PrivateRoute component={Error404Route} />
</Switch>
);
});
const Error404Route = (props) => ( const Error404Route = (props) => (
<React.Suspense fallback={<AppLoader />}> <React.Suspense fallback={<AppLoader />}>
<ErrorBoundary> <ErrorBoundary>
@ -49,12 +21,45 @@ const Error404Route = (props) => (
</React.Suspense> </React.Suspense>
); );
const HomeRedirectToFilter = (props) => { const HomeRedirectToFilter = () => {
const filter = Filter.getDefault(); const filter = Filter.getDefault();
const urlFilter = filter.toUrlParams(); const urlFilter = filter.toUrlParams();
return <Redirect to={`/accounts/filter?${urlFilter}`} />;
return <Navigate replace to={`/accounts/filter?${urlFilter}`} />;
}; };
const PeopleSection = React.memo(() => {
return (
<Routes>
<Route
path="/*"
element={
<PrivateRoute restricted withManager location={location}>
<HomeRedirectToFilter />
</PrivateRoute>
}
/>
<Route
path="/filter"
element={
<PrivateRoute restricted withManager location={location}>
<Home />
</PrivateRoute>
}
/>
<Route
element={
<PrivateRoute location={location}>
<Error404Route />
</PrivateRoute>
}
/>
</Routes>
);
});
const PeopleContent = (props) => { const PeopleContent = (props) => {
const { loadBaseInfo, isLoading, setFirstLoad } = props; const { loadBaseInfo, isLoading, setFirstLoad } = props;

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

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

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

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

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

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

16
packages/client/src/pages/AccountsHome/Section/Filter/index.js
View File

@ -1,6 +1,5 @@
import React from "react"; import React from "react";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { withRouter } from "react-router";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { isMobileOnly } from "react-device-detect"; import { isMobileOnly } from "react-device-detect";
import find from "lodash/find"; import find from "lodash/find";
@ -484,15 +483,9 @@ const SectionFilterContent = ({
); );
}; };
export default withRouter( export default inject(({ auth, peopleStore }) => {
inject(({ auth, peopleStore }) => { const { loadingStore, filterStore, usersStore, groupsStore, viewAs } =
const { peopleStore;
loadingStore,
filterStore,
usersStore,
groupsStore,
viewAs,
} = peopleStore;
const { userStore, isLoaded, isAdmin } = auth; const { userStore, isLoaded, isAdmin } = auth;
const { user } = userStore; const { user } = userStore;
const { groups } = groupsStore; const { groups } = groupsStore;
@ -510,7 +503,7 @@ export default withRouter(
setIsLoading, setIsLoading,
viewAs, viewAs,
}; };
})( })(
observer( observer(
withLayoutSize( withLayoutSize(
withTranslation([ withTranslation([
@ -522,5 +515,4 @@ export default withRouter(
])(withPeopleLoader(SectionFilterContent)(<Loaders.Filter />)) ])(withPeopleLoader(SectionFilterContent)(<Loaders.Filter />))
) )
) )
)
); );

23
packages/client/src/pages/AccountsHome/Section/Header/index.js
View File

@ -10,7 +10,6 @@ import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { isMobile, isMobileOnly } from "react-device-detect"; import { isMobile, isMobileOnly } from "react-device-detect";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { withRouter } from "react-router";
import Headline from "@docspace/common/components/Headline"; import Headline from "@docspace/common/components/Headline";
import Loaders from "@docspace/common/components/Loaders"; import Loaders from "@docspace/common/components/Loaders";
import DropDownItem from "@docspace/components/drop-down-item"; import DropDownItem from "@docspace/components/drop-down-item";
@ -354,17 +353,12 @@ 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;
@ -399,7 +393,7 @@ export default withRouter(
isGracePeriod, isGracePeriod,
setInviteUsersWarningDialogVisible, setInviteUsersWarningDialogVisible,
}; };
})( })(
withTranslation([ withTranslation([
"People", "People",
"Common", "Common",
@ -407,9 +401,6 @@ export default withRouter(
"Files", "Files",
"ChangeUserTypeDialog", "ChangeUserTypeDialog",
])( ])(
withPeopleLoader(observer(SectionHeaderContent))( withPeopleLoader(observer(SectionHeaderContent))(<Loaders.SectionHeader />)
<Loaders.SectionHeader />
)
)
) )
); );

31
packages/client/src/pages/AccountsHome/index.js
View File

@ -1,7 +1,7 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { withRouter } from "react-router"; import { useLocation } from "react-router-dom";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
@ -26,7 +26,7 @@ import {
const PureHome = ({ const PureHome = ({
isLoading, isLoading,
history,
getUsersList, getUsersList,
setIsLoading, setIsLoading,
setIsRefresh, setIsRefresh,
@ -45,8 +45,8 @@ const PureHome = ({
onClickBack, onClickBack,
setPortalTariff, setPortalTariff,
}) => { }) => {
const { location } = history; const location = useLocation();
const { pathname } = location;
//console.log("People Home render"); //console.log("People Home render");
useEffect(() => { useEffect(() => {
@ -58,7 +58,7 @@ const PureHome = ({
}, []); }, []);
useEffect(() => { useEffect(() => {
if (pathname.indexOf("/accounts/filter") > -1) { if (location.pathname.indexOf("/accounts/filter") > -1) {
setSelectedNode(["accounts", "filter"]); setSelectedNode(["accounts", "filter"]);
setIsLoading(true); setIsLoading(true);
setIsRefresh(true); setIsRefresh(true);
@ -74,7 +74,7 @@ const PureHome = ({
setIsRefresh(false); setIsRefresh(false);
}); });
} }
}, [pathname, location, setSelectedNode]); }, [location, setSelectedNode]);
useEffect(() => { useEffect(() => {
if (isMobile) { if (isMobile) {
@ -140,23 +140,14 @@ export default inject(
const { settingsStore, currentTariffStatusStore } = auth; const { settingsStore, currentTariffStatusStore } = auth;
const { setPortalTariff } = currentTariffStatusStore; const { setPortalTariff } = currentTariffStatusStore;
const { showCatalog, withPaging } = settingsStore; const { showCatalog, withPaging } = settingsStore;
const { const { usersStore, selectedGroupStore, loadingStore, viewAs } =
usersStore, peopleStore;
selectedGroupStore,
loadingStore,
viewAs,
} = peopleStore;
const { getUsersList } = usersStore; const { getUsersList } = usersStore;
const { selectedGroup } = selectedGroupStore; const { selectedGroup } = selectedGroupStore;
const { setSelectedNode } = treeFoldersStore; const { setSelectedNode } = treeFoldersStore;
const { onClickBack } = filesActionsStore; const { onClickBack } = filesActionsStore;
const { const { isLoading, setIsLoading, setIsRefresh, firstLoad, setFirstLoad } =
isLoading, loadingStore;
setIsLoading,
setIsRefresh,
firstLoad,
setFirstLoad,
} = loadingStore;
return { return {
setPortalTariff, setPortalTariff,
@ -178,4 +169,4 @@ export default inject(
onClickBack, onClickBack,
}; };
} }
)(observer(withRouter(Home))); )(observer(Home));

197
packages/client/src/pages/Confirm/index.js
View File

@ -1,5 +1,5 @@
import React, { lazy } from "react"; import React, { lazy } from "react";
import { Switch, Route } from "react-router-dom"; import { Routes, Route } from "react-router-dom";
import ConfirmRoute from "../../helpers/confirmRoute"; import ConfirmRoute from "../../helpers/confirmRoute";
const ActivateUserForm = lazy(() => import("./sub-components/activateUser")); const ActivateUserForm = lazy(() => import("./sub-components/activateUser"));
@ -24,74 +24,135 @@ const Error404 = lazy(() => import("../Errors/404"));
const Confirm = () => { const Confirm = () => {
//console.log("Confirm render"); //console.log("Confirm render");
const path = "/confirm";
return (
<Switch>
<ConfirmRoute
forUnauthorized
path={`${path}/LinkInvite`}
component={CreateUserForm}
/>
<ConfirmRoute
forUnauthorized
path={`${path}/Activation`}
component={ActivateUserForm}
/>
<ConfirmRoute
exact
path={`${path}/EmailActivation`}
component={ActivateEmailForm}
/>
<ConfirmRoute
exact
path={`${path}/EmailChange`}
component={ChangeEmailForm}
/>
<ConfirmRoute
forUnauthorized
path={`${path}/PasswordChange`}
component={ChangePasswordForm}
/>
<ConfirmRoute
exact
path={`${path}/ProfileRemove`}
component={ProfileRemoveForm}
/>
<ConfirmRoute
exact
path={`${path}/PhoneActivation`}
component={ChangePhoneForm}
/>
<ConfirmRoute
exact
path={`${path}/PortalOwnerChange`}
component={ChangeOwnerForm}
/>
<ConfirmRoute exact path={`${path}/TfaAuth`} component={TfaAuthForm} />
<ConfirmRoute
exact
path={`${path}/TfaActivation`}
component={TfaActivationForm}
/>
<ConfirmRoute
exact
path={`${path}/PortalRemove`}
component={RemovePortal}
/>
<ConfirmRoute
exact
path={`${path}/PortalSuspend`}
component={DeactivatePortal}
/>
<ConfirmRoute
exact
path={`${path}/PortalContinue`}
component={ContinuePortal}
/>
<ConfirmRoute forUnauthorized path={`${path}/Auth`} component={Auth} />
<Route component={Error404} /> return (
</Switch> <Routes>
<Route
path={`LinkInvite`}
element={
<ConfirmRoute forUnauthorized>
<CreateUserForm />
</ConfirmRoute>
}
/>
<Route
path={`Activation`}
element={
<ConfirmRoute forUnauthorized>
<ActivateUserForm />
</ConfirmRoute>
}
/>
<Route
path={`EmailActivation`}
element={
<ConfirmRoute>
<ActivateEmailForm />
</ConfirmRoute>
}
/>
<Route
path={`EmailChange`}
element={
<ConfirmRoute>
<ChangeEmailForm />
</ConfirmRoute>
}
/>
<Route
path={`PasswordChange`}
element={
<ConfirmRoute forUnauthorized>
<ChangePasswordForm />
</ConfirmRoute>
}
/>
<Route
path={`ProfileRemove`}
element={
<ConfirmRoute>
<ProfileRemoveForm />
</ConfirmRoute>
}
/>
<Route
path={`PhoneActivation`}
element={
<ConfirmRoute>
<ChangePhoneForm />
</ConfirmRoute>
}
/>
<Route
path={`PortalOwnerChange`}
element={
<ConfirmRoute>
<ChangeOwnerForm />
</ConfirmRoute>
}
/>
<Route
path={`TfaAuth`}
element={
<ConfirmRoute>
<TfaAuthForm />
</ConfirmRoute>
}
/>
<Route
path={`TfaActivation`}
element={
<ConfirmRoute>
<TfaActivationForm />
</ConfirmRoute>
}
/>
<Route
path={`PortalRemove`}
element={
<ConfirmRoute>
<RemovePortal />
</ConfirmRoute>
}
/>
<Route
path={`PortalSuspend`}
element={
<ConfirmRoute>
<DeactivatePortal />
</ConfirmRoute>
}
/>
<Route
path={`PortalContinue`}
element={
<ConfirmRoute>
<ContinuePortal />
</ConfirmRoute>
}
/>
<Route
path={`Auth`}
element={
<ConfirmRoute forUnauthorized>
<Auth />
</ConfirmRoute>
}
/>
</Routes>
); );
}; };

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

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

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

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

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

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

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

@ -1,5 +1,4 @@
import React from "react"; import React from "react";
import { withRouter } from "react-router";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import Loader from "@docspace/components/loader"; import Loader from "@docspace/components/loader";
@ -72,7 +71,6 @@ class ChangeEmail extends React.PureComponent {
} }
ChangeEmail.propTypes = { ChangeEmail.propTypes = {
location: PropTypes.object.isRequired,
changeEmail: PropTypes.func.isRequired, changeEmail: PropTypes.func.isRequired,
}; };
const ChangeEmailForm = (props) => ( const ChangeEmailForm = (props) => (
@ -92,4 +90,4 @@ export default inject(({ auth }) => {
changeEmail: userStore.changeEmail, changeEmail: userStore.changeEmail,
defaultPage: settingsStore.defaultPage, defaultPage: settingsStore.defaultPage,
}; };
})(observer(withRouter(ChangeEmailForm))); })(observer(ChangeEmailForm));

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import { Trans, withTranslation } from "react-i18next"; import { Trans, withTranslation } from "react-i18next";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import Text from "@docspace/components/text"; import Text from "@docspace/components/text";
@ -20,21 +20,23 @@ import FormWrapper from "@docspace/components/form-wrapper";
import DocspaceLogo from "../../../DocspaceLogo"; import DocspaceLogo from "../../../DocspaceLogo";
const ContinuePortal = (props) => { const ContinuePortal = (props) => {
const { t, greetingTitle, linkData, history } = props; const { t, greetingTitle, linkData } = props;
const [isReactivate, setIsReactivate] = useState(false); const [isReactivate, setIsReactivate] = useState(false);
const navigate = useNavigate();
const onRestoreClick = async () => { const onRestoreClick = async () => {
try { try {
await continuePortal(linkData.confirmHeader); await continuePortal(linkData.confirmHeader);
setIsReactivate(true); setIsReactivate(true);
setTimeout(() => (location.href = "/"), 10000); setTimeout(() => (window.location.href = "/"), 10000);
} catch (e) { } catch (e) {
toastr.error(e); toastr.error(e);
} }
}; };
const onCancelClick = () => { const onCancelClick = () => {
history.push("/"); navigate("/");
}; };
return ( return (
@ -90,7 +92,5 @@ export default inject(({ auth }) => ({
greetingTitle: auth.settingsStore.greetingSettings, greetingTitle: auth.settingsStore.greetingSettings,
theme: auth.settingsStore.theme, theme: auth.settingsStore.theme,
}))( }))(
withRouter(
withTranslation(["Confirm", "Common"])(withLoader(observer(ContinuePortal))) withTranslation(["Confirm", "Common"])(withLoader(observer(ContinuePortal)))
)
); );

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

@ -1,6 +1,5 @@
import SsoReactSvgUrl from "PUBLIC_DIR/images/sso.react.svg?url"; import SsoReactSvgUrl from "PUBLIC_DIR/images/sso.react.svg?url";
import React, { useEffect, useState, useCallback } from "react"; import React, { useEffect, useState, useCallback } from "react";
import { withRouter } from "react-router";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { createUser, signupOAuth } from "@docspace/common/api/people"; import { createUser, signupOAuth } from "@docspace/common/api/people";
@ -52,7 +51,7 @@ const CreateUserForm = (props) => {
} = props; } = props;
const inputRef = React.useRef(null); const inputRef = React.useRef(null);
const emailFromLink = linkData.email ? linkData.email : ""; const emailFromLink = linkData?.email ? linkData.email : "";
const [moreAuthVisible, setMoreAuthVisible] = useState(false); const [moreAuthVisible, setMoreAuthVisible] = useState(false);
const [ssoLabel, setSsoLabel] = useState(""); const [ssoLabel, setSsoLabel] = useState("");
@ -125,7 +124,7 @@ const CreateUserForm = (props) => {
}; };
fetchData(); fetchData();
}, []); }, [props.isAuthenticated]);
const onSubmit = () => { const onSubmit = () => {
const { defaultPage, linkData, hashSettings } = props; const { defaultPage, linkData, hashSettings } = props;
@ -325,9 +324,8 @@ const CreateUserForm = (props) => {
if (!providersData[item.provider]) return; if (!providersData[item.provider]) return;
if (index > 1) return; if (index > 1) return;
const { icon, label, iconOptions, className } = providersData[ const { icon, label, iconOptions, className } =
item.provider providersData[item.provider];
];
return ( return (
<div className="buttonWrapper" key={`${item.provider}ProviderItem`}> <div className="buttonWrapper" key={`${item.provider}ProviderItem`}>
@ -651,11 +649,6 @@ const CreateUserForm = (props) => {
); );
}; };
CreateUserForm.propTypes = {
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired,
};
export default inject(({ auth }) => { export default inject(({ auth }) => {
const { const {
login, login,
@ -692,9 +685,7 @@ export default inject(({ auth }) => {
currentColorScheme, currentColorScheme,
}; };
})( })(
withRouter(
withTranslation(["Confirm", "Common", "Wizard"])( withTranslation(["Confirm", "Common", "Wizard"])(
withLoader(observer(CreateUserForm)) withLoader(observer(CreateUserForm))
) )
)
); );

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

@ -1,5 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import { Trans, withTranslation } from "react-i18next"; import { Trans, withTranslation } from "react-i18next";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import Text from "@docspace/components/text"; import Text from "@docspace/components/text";
@ -20,15 +20,11 @@ import FormWrapper from "@docspace/components/form-wrapper";
import DocspaceLogo from "../../../DocspaceLogo"; import DocspaceLogo from "../../../DocspaceLogo";
const DeactivatePortal = (props) => { const DeactivatePortal = (props) => {
const { const { t, greetingTitle, linkData, companyInfoSettingsData } = props;
t,
greetingTitle,
linkData,
history,
companyInfoSettingsData,
} = props;
const [isDeactivate, setIsDeactivate] = useState(false); const [isDeactivate, setIsDeactivate] = useState(false);
const navigate = useNavigate();
const url = companyInfoSettingsData?.site const url = companyInfoSettingsData?.site
? companyInfoSettingsData.site ? companyInfoSettingsData.site
: "https://onlyoffice.com"; : "https://onlyoffice.com";
@ -37,14 +33,14 @@ const DeactivatePortal = (props) => {
try { try {
await suspendPortal(linkData.confirmHeader); await suspendPortal(linkData.confirmHeader);
setIsDeactivate(true); setIsDeactivate(true);
setTimeout(() => (location.href = url), 10000); setTimeout(() => (window.location.href = url), 10000);
} catch (e) { } catch (e) {
toastr.error(e); toastr.error(e);
} }
}; };
const onCancelClick = () => { const onCancelClick = () => {
history.push("/"); navigate("/");
}; };
return ( return (
@ -101,9 +97,7 @@ export default inject(({ auth }) => ({
theme: auth.settingsStore.theme, theme: auth.settingsStore.theme,
companyInfoSettingsData: auth.settingsStore.companyInfoSettingsData, companyInfoSettingsData: auth.settingsStore.companyInfoSettingsData,
}))( }))(
withRouter(
withTranslation(["Confirm", "Settings", "Common"])( withTranslation(["Confirm", "Settings", "Common"])(
withLoader(observer(DeactivatePortal)) withLoader(observer(DeactivatePortal))
) )
)
); );

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

@ -1,5 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { withRouter } from "react-router";
import { withTranslation, Trans } from "react-i18next"; import { withTranslation, Trans } from "react-i18next";
import Text from "@docspace/components/text"; import Text from "@docspace/components/text";
import Button from "@docspace/components/button"; import Button from "@docspace/components/button";
@ -13,14 +13,8 @@ import FormWrapper from "@docspace/components/form-wrapper";
import DocspaceLogo from "../../../DocspaceLogo"; import DocspaceLogo from "../../../DocspaceLogo";
const ProfileRemoveForm = (props) => { const ProfileRemoveForm = (props) => {
const { const { t, greetingTitle, linkData, logout, legalTerms, currentColorScheme } =
t, props;
greetingTitle,
linkData,
logout,
legalTerms,
currentColorScheme,
} = props;
const [isProfileDeleted, setIsProfileDeleted] = useState(false); const [isProfileDeleted, setIsProfileDeleted] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@ -137,8 +131,4 @@ export default inject(({ auth }) => ({
logout: auth.logout, logout: auth.logout,
legalTerms: auth.settingsStore.legalTerms, legalTerms: auth.settingsStore.legalTerms,
currentColorScheme: auth.settingsStore.currentColorScheme, currentColorScheme: auth.settingsStore.currentColorScheme,
}))( }))(withTranslation("Confirm")(withLoader(observer(ProfileRemoveForm))));
withRouter(
withTranslation("Confirm")(withLoader(observer(ProfileRemoveForm)))
)
);

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

@ -1,5 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import Text from "@docspace/components/text"; import Text from "@docspace/components/text";
@ -19,14 +19,9 @@ import FormWrapper from "@docspace/components/form-wrapper";
import DocspaceLogo from "../../../DocspaceLogo"; import DocspaceLogo from "../../../DocspaceLogo";
const RemovePortal = (props) => { const RemovePortal = (props) => {
const { const { t, greetingTitle, linkData, companyInfoSettingsData } = props;
t,
greetingTitle,
linkData,
history,
companyInfoSettingsData,
} = props;
const [isRemoved, setIsRemoved] = useState(false); const [isRemoved, setIsRemoved] = useState(false);
const navigate = useNavigate();
const url = companyInfoSettingsData?.site const url = companyInfoSettingsData?.site
? companyInfoSettingsData.site ? companyInfoSettingsData.site
@ -43,7 +38,7 @@ const RemovePortal = (props) => {
}; };
const onCancelClick = () => { const onCancelClick = () => {
history.push("/"); navigate("/");
}; };
return ( return (
@ -99,8 +94,4 @@ export default inject(({ auth }) => ({
greetingTitle: auth.settingsStore.greetingSettings, greetingTitle: auth.settingsStore.greetingSettings,
theme: auth.settingsStore.theme, theme: auth.settingsStore.theme,
companyInfoSettingsData: auth.settingsStore.companyInfoSettingsData, companyInfoSettingsData: auth.settingsStore.companyInfoSettingsData,
}))( }))(withTranslation(["Confirm", "Common"])(withLoader(observer(RemovePortal))));
withRouter(
withTranslation(["Confirm", "Common"])(withLoader(observer(RemovePortal)))
)
);

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

@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import { Trans, withTranslation } from "react-i18next"; import { Trans, withTranslation } from "react-i18next";
import styled from "styled-components"; import styled from "styled-components";
import Button from "@docspace/components/button"; import Button from "@docspace/components/button";
@ -94,7 +94,7 @@ const TfaActivationForm = withLoader((props) => {
qrCode, qrCode,
loginWithCode, loginWithCode,
loginWithCodeAndCookie, loginWithCodeAndCookie,
history,
location, location,
currentColorScheme, currentColorScheme,
} = props; } = props;
@ -103,6 +103,8 @@ const TfaActivationForm = withLoader((props) => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const navigate = useNavigate();
const onSubmit = async () => { const onSubmit = async () => {
try { try {
const { user, hash } = (location && location.state) || {}; const { user, hash } = (location && location.state) || {};
@ -112,10 +114,10 @@ const TfaActivationForm = withLoader((props) => {
if (user && hash) { if (user && hash) {
const url = await loginWithCode(user, hash, code); const url = await loginWithCode(user, hash, code);
history.push(url || "/"); navigate(url || "/");
} else { } else {
const url = await loginWithCodeAndCookie(code, linkData.confirmHeader); const url = await loginWithCodeAndCookie(code, linkData.confirmHeader);
history.push("/"); navigate("/");
} }
} catch (err) { } catch (err) {
let errorMessage = ""; let errorMessage = "";
@ -303,8 +305,4 @@ export default inject(({ auth, confirm }) => ({
tfaIosAppUrl: auth.tfaStore.tfaIosAppUrl, tfaIosAppUrl: auth.tfaStore.tfaIosAppUrl,
tfaWinAppUrl: auth.tfaStore.tfaWinAppUrl, tfaWinAppUrl: auth.tfaStore.tfaWinAppUrl,
currentColorScheme: auth.settingsStore.currentColorScheme, currentColorScheme: auth.settingsStore.currentColorScheme,
}))( }))(withTranslation(["Confirm", "Common"])(observer(TfaActivationWrapper)));
withRouter(
withTranslation(["Confirm", "Common"])(observer(TfaActivationWrapper))
)
);

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

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { withRouter } from "react-router"; import { useNavigate, useLocation } from "react-router-dom";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import styled from "styled-components"; import styled from "styled-components";
import Button from "@docspace/components/button"; import Button from "@docspace/components/button";
@ -48,12 +48,15 @@ const StyledForm = styled(Box)`
`; `;
const TfaAuthForm = withLoader((props) => { const TfaAuthForm = withLoader((props) => {
const { t, loginWithCode, loginWithCodeAndCookie, location, history } = props; const { t, loginWithCode, loginWithCodeAndCookie } = props;
const [code, setCode] = useState(""); const [code, setCode] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const navigate = useNavigate();
const location = useLocation();
const onSubmit = async () => { const onSubmit = async () => {
try { try {
const { user, hash } = (location && location.state) || {}; const { user, hash } = (location && location.state) || {};
@ -63,10 +66,10 @@ const TfaAuthForm = withLoader((props) => {
if (user && hash) { if (user && hash) {
const url = await loginWithCode(user, hash, code); const url = await loginWithCode(user, hash, code);
history.push(url || "/"); navigate(url || "/");
} else { } else {
const url = await loginWithCodeAndCookie(code, linkData.confirmHeader); const url = await loginWithCodeAndCookie(code, linkData.confirmHeader);
history.push(url || "/"); navigate(url || "/");
} }
} catch (err) { } catch (err) {
let errorMessage = ""; let errorMessage = "";
@ -174,8 +177,4 @@ export default inject(({ auth, confirm }) => ({
setIsLoading: confirm.setIsLoading, setIsLoading: confirm.setIsLoading,
loginWithCode: auth.loginWithCode, loginWithCode: auth.loginWithCode,
loginWithCodeAndCookie: auth.tfaStore.loginWithCodeAndCookie, loginWithCodeAndCookie: auth.tfaStore.loginWithCodeAndCookie,
}))( }))(withTranslation(["Confirm", "Common"])(observer(TfaAuthFormWrapper)));
withRouter(
withTranslation(["Confirm", "Common"])(observer(TfaAuthFormWrapper))
)
);

16
packages/client/src/pages/Confirm/withLoader.js
View File

@ -1,5 +1,6 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { observer, inject } from "mobx-react"; import { observer, inject } from "mobx-react";
import { useNavigate } from "react-router-dom";
import Loader from "@docspace/components/loader"; import Loader from "@docspace/components/loader";
import axios from "axios"; import axios from "axios";
import { combineUrl } from "@docspace/common/utils"; import { combineUrl } from "@docspace/common/utils";
@ -15,7 +16,7 @@ export default function withLoader(WrappedComponent) {
passwordSettings, passwordSettings,
getSettings, getSettings,
getPortalPasswordSettings, getPortalPasswordSettings,
history,
getAuthProviders, getAuthProviders,
getCapabilities, getCapabilities,
} = props; } = props;
@ -24,6 +25,8 @@ export default function withLoader(WrappedComponent) {
const type = linkData ? linkData.type : null; const type = linkData ? linkData.type : null;
const confirmHeader = linkData ? linkData.confirmHeader : null; const confirmHeader = linkData ? linkData.confirmHeader : null;
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
if ( if (
(type === "PasswordChange" || (type === "PasswordChange" ||
@ -46,7 +49,7 @@ export default function withLoader(WrappedComponent) {
} }
console.error(errorMessage); console.error(errorMessage);
history.push( navigate(
combineUrl( combineUrl(
window.DocSpaceConfig?.proxy?.url, window.DocSpaceConfig?.proxy?.url,
`/login/error?message=${errorMessage}` `/login/error?message=${errorMessage}`
@ -70,7 +73,7 @@ export default function withLoader(WrappedComponent) {
errorMessage = error; errorMessage = error;
} }
console.error(errorMessage); console.error(errorMessage);
history.push( navigate(
combineUrl( combineUrl(
window.DocSpaceConfig?.proxy?.url, window.DocSpaceConfig?.proxy?.url,
`/login/error?message=${errorMessage}` `/login/error?message=${errorMessage}`
@ -121,11 +124,8 @@ export default function withLoader(WrappedComponent) {
return inject(({ auth, confirm }) => { return inject(({ auth, confirm }) => {
const { isLoaded, isLoading } = confirm; const { isLoaded, isLoading } = confirm;
const { const { passwordSettings, getSettings, getPortalPasswordSettings } =
passwordSettings, auth.settingsStore;
getSettings,
getPortalPasswordSettings,
} = auth.settingsStore;
const { getAuthProviders, getCapabilities } = auth; const { getAuthProviders, getCapabilities } = auth;
return { return {

7
packages/client/src/pages/Errors/520/index.js
View File

@ -1,21 +1,18 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import ErrorContainer from "@docspace/common/components/ErrorContainer"; import ErrorContainer from "@docspace/common/components/ErrorContainer";
import { useParams } from "react-router-dom";
import { I18nextProvider, useTranslation } from "react-i18next"; import { I18nextProvider, useTranslation } from "react-i18next";
import i18n from "./i18n"; import i18n from "./i18n";
const Error520 = ({ match }) => { const Error520 = ({ match }) => {
const { t } = useTranslation(["Common"]); const { t } = useTranslation(["Common"]);
const { error } = (match && match.params) || {}; const { error } = useParams();
return ( return (
<ErrorContainer headerText={t("SomethingWentWrong")} bodyText={error} /> <ErrorContainer headerText={t("SomethingWentWrong")} bodyText={error} />
); );
}; };
Error520.propTypes = {
match: PropTypes.object,
};
export default () => ( export default () => (
<I18nextProvider i18n={i18n}> <I18nextProvider i18n={i18n}>
<Error520 /> <Error520 />

325
packages/client/src/pages/Files.jsx
View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
//import { Provider as FilesProvider } from "mobx-react"; //import { Provider as FilesProvider } from "mobx-react";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { Switch, withRouter, Redirect } from "react-router-dom"; import { Routes, useLocation, Navigate, Route } from "react-router-dom";
//import config from "PACKAGE_FILE"; //import config from "PACKAGE_FILE";
import PrivateRoute from "@docspace/common/components/PrivateRoute"; import PrivateRoute from "@docspace/common/components/PrivateRoute";
import AppLoader from "@docspace/common/components/AppLoader"; import AppLoader from "@docspace/common/components/AppLoader";
@ -30,6 +30,8 @@ import {
import GlobalEvents from "../components/GlobalEvents"; import GlobalEvents from "../components/GlobalEvents";
import Accounts from "./Accounts"; import Accounts from "./Accounts";
import Profile from "./Profile";
import NotificationComponent from "./Notifications";
// const homepage = config.homepage; // const homepage = config.homepage;
@ -49,10 +51,9 @@ import Accounts from "./Accounts";
const Error404 = React.lazy(() => import("client/Error404")); const Error404 = React.lazy(() => import("client/Error404"));
const FilesArticle = React.memo(({ history, withMainButton }) => { const FilesArticle = React.memo(({ withMainButton }) => {
const isFormGallery = history.location.pathname const location = useLocation();
.split("/") const isFormGallery = location.pathname.split("/").includes("form-gallery");
.includes("form-gallery");
return !isFormGallery ? ( return !isFormGallery ? (
<Article withMainButton={withMainButton}> <Article withMainButton={withMainButton}>
@ -73,89 +74,6 @@ const FilesArticle = React.memo(({ history, withMainButton }) => {
); );
}); });
const FilesSection = React.memo(({ withMainButton }) => {
return (
<Switch>
{/*<PrivateRoute exact path={HISTORY_URL} component={VersionHistory} />*/}
{/* <PrivateRoute path={"/private"} component={PrivateRoomsPage} /> */}
<PrivateRoute
exact
path={"/settings"}
component={() => <Redirect to="/settings/common" />}
/>
<PrivateRoute
exact
path={["/", "/rooms"]}
component={() => <Redirect to="/rooms/shared" />}
/>
<PrivateRoute
restricted
withManager
withCollaborator
path={[
"/rooms/personal",
"/rooms/personal/filter",
"/files/trash",
"/files/trash/filter",
]}
component={Home}
/>
<PrivateRoute
path={[
"/rooms/shared",
"/rooms/shared/filter",
"/rooms/shared/:room",
"/rooms/shared/:room/filter",
"/rooms/archived",
"/rooms/archived/filter",
"/rooms/archived/:room",
"/rooms/archived/:room/filter",
// "/files/favorite",
// "/files/favorite/filter",
// "/files/recent",
// "/files/recent/filter",
"/products/files/",
]}
component={Home}
/>
{/* <PrivateRoute path={["/rooms/personal/filter"]} component={Home} /> */}
{/* <PrivateRoute path={"/#preview"} component={Home} /> */}
{/* <PrivateRoute path={"/rooms"} component={Home} /> */}
{/* <PrivateRoute path={ROOMS_URL} component={VirtualRooms} /> */}
<PrivateRoute
exact
restricted
withManager
path={["/accounts", "/accounts/filter", "/accounts/create/:type"]}
component={Accounts}
/>
<PrivateRoute
exact
path={["/accounts/view/@self", "/accounts/view/@self/notification"]}
component={Accounts}
/>
<PrivateRoute
exact
restricted
path={"/settings/admin"}
component={Settings}
/>
{withMainButton && (
<PrivateRoute exact path={"/settings/common"} component={Settings} />
)}
<PrivateRoute component={Error404Route} />
</Switch>
);
});
const Error404Route = (props) => ( const Error404Route = (props) => (
<React.Suspense fallback={<AppLoader />}> <React.Suspense fallback={<AppLoader />}>
<ErrorBoundary> <ErrorBoundary>
@ -164,35 +82,155 @@ const Error404Route = (props) => (
</React.Suspense> </React.Suspense>
); );
class FilesContent extends React.Component { const FilesSection = React.memo(({ withMainButton }) => {
constructor(props) { return (
super(props); <Routes>
<Route
path="/"
element={
<PrivateRoute location={location}>
<Navigate to="/rooms/shared" replace />
</PrivateRoute>
}
/>
<Route
path="/rooms"
element={
<PrivateRoute location={location}>
<Navigate to="/rooms/shared" replace />
</PrivateRoute>
}
/>
<Route
path="/rooms/personal/*"
element={
<PrivateRoute
restricted
withManager
withCollaborator
location={location}
>
<Home />
</PrivateRoute>
}
/>
<Route
path="/files/trash/*"
element={
<PrivateRoute
restricted
withManager
withCollaborator
location={location}
>
<Home />
</PrivateRoute>
}
/>
<Route
path="/rooms/shared/*"
element={
<PrivateRoute location={location}>
<Home />
</PrivateRoute>
}
/>
<Route
path="/rooms/archived/*"
element={
<PrivateRoute location={location}>
<Home />
</PrivateRoute>
}
/>
<Route
path="/products/files/"
element={
<PrivateRoute location={location}>
<Home />
</PrivateRoute>
}
/>
<Route
path="/accounts/*"
element={
<PrivateRoute restricted withManager location={location}>
<Accounts />
</PrivateRoute>
}
/>
<Route
path="/accounts/create/:type"
element={
<PrivateRoute restricted withManager location={location}>
<Accounts />
</PrivateRoute>
}
/>
<Route
path="/accounts/view/@self"
element={
<PrivateRoute location={location}>
<Profile />
</PrivateRoute>
}
/>
<Route
path="accounts/view/@self/notification"
element={
<PrivateRoute location={location}>
<NotificationComponent />
</PrivateRoute>
}
/>
<Route
path={"/settings"}
element={
<PrivateRoute withCollaborator restricted location={location}>
<Navigate to="/settings/common" replace />
</PrivateRoute>
}
/>
<Route
path={"/settings/*"}
element={
<PrivateRoute withCollaborator restricted location={location}>
<Settings />
</PrivateRoute>
}
/>
<Route
element={
<PrivateRoute location={location}>
<Error404Route />
</PrivateRoute>
}
/>
</Routes>
);
});
const FilesContent = (props) => {
const pathname = window.location.pathname.toLowerCase(); const pathname = window.location.pathname.toLowerCase();
this.isEditor = pathname.indexOf("doceditor") !== -1; const isEditor = pathname.indexOf("doceditor") !== -1;
this.isDesktopInit = false; const [isDesktopInit, setIsDesktopInit] = React.useState(false);
}
componentDidMount() {
loadScript("/static/scripts/tiff.min.js", "img-tiff-script");
this.props
.loadFilesInfo()
.catch((err) => toastr.error(err))
.finally(() => {
this.props.setIsLoaded(true);
updateTempContent();
});
}
componentWillUnmount() {
const script = document.getElementById("img-tiff-script");
document.body.removeChild(script);
}
componentDidUpdate(prevProps) {
const { const {
loadFilesInfo,
setIsLoaded,
isAuthenticated, isAuthenticated,
user, user,
isEncryption, isEncryption,
@ -200,18 +238,41 @@ class FilesContent extends React.Component {
setEncryptionKeys, setEncryptionKeys,
isLoaded, isLoaded,
isDesktop, isDesktop,
} = this.props; showMenu,
// console.log("componentDidUpdate: ", this.props); isFrame,
if (isAuthenticated && !this.isDesktopInit && isDesktop && isLoaded) { withMainButton,
this.isDesktopInit = true;
t,
} = props;
React.useEffect(() => {
loadScript("/static/scripts/tiff.min.js", "img-tiff-script");
loadFilesInfo()
.catch((err) => toastr.error(err))
.finally(() => {
setIsLoaded(true);
updateTempContent();
});
return () => {
const script = document.getElementById("img-tiff-script");
document.body.removeChild(script);
};
}, []);
React.useEffect(() => {
if (isAuthenticated && !isDesktopInit && isDesktop && isLoaded) {
setIsDesktopInit(true);
regDesktop( regDesktop(
user, user,
isEncryption, isEncryption,
encryptionKeys, encryptionKeys,
setEncryptionKeys, setEncryptionKeys,
this.isEditor, isEditor,
null, null,
this.props.t t
); );
console.log( console.log(
"%c%s", "%c%s",
@ -220,25 +281,31 @@ class FilesContent extends React.Component {
encryptionKeys encryptionKeys
); );
} }
} }, [
t,
render() { isAuthenticated,
const { showMenu, isFrame, withMainButton, history } = this.props; user,
isEncryption,
encryptionKeys,
setEncryptionKeys,
isLoaded,
isDesktop,
isDesktopInit,
]);
return ( return (
<> <>
<GlobalEvents /> <GlobalEvents />
<Panels /> <Panels />
{isFrame ? ( {isFrame ? (
showMenu && <FilesArticle history={history} /> showMenu && <FilesArticle />
) : ( ) : (
<FilesArticle history={history} withMainButton={withMainButton} /> <FilesArticle withMainButton={withMainButton} />
)} )}
<FilesSection withMainButton={withMainButton} /> <FilesSection withMainButton={withMainButton} />
</> </>
); );
} };
}
const Files = inject(({ auth, filesStore }) => { const Files = inject(({ auth, filesStore }) => {
const { const {
@ -250,6 +317,8 @@ const Files = inject(({ auth, filesStore }) => {
isEncryptionSupport, isEncryptionSupport,
} = auth.settingsStore; } = auth.settingsStore;
if (!auth.userStore.user) return;
const { isVisitor } = auth.userStore.user; const { isVisitor } = auth.userStore.user;
const withMainButton = !isVisitor; const withMainButton = !isVisitor;
@ -272,6 +341,6 @@ const Files = inject(({ auth, filesStore }) => {
//auth.setProductVersion(config.version); //auth.setProductVersion(config.version);
}, },
}; };
})(withTranslation("Common")(observer(withRouter(FilesContent)))); })(withTranslation("Common")(observer(FilesContent)));
export default () => <Files />; export default () => <Files />;

14
packages/client/src/pages/FormGallery/Header.js
View File

@ -4,7 +4,7 @@ import React from "react";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import IconButton from "@docspace/components/icon-button"; import IconButton from "@docspace/components/icon-button";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { withRouter } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { import {
StyledHeadline, StyledHeadline,
StyledContainer, StyledContainer,
@ -18,20 +18,22 @@ import { getCategoryUrl } from "SRC_DIR/helpers/utils";
const SectionHeaderContent = (props) => { const SectionHeaderContent = (props) => {
const { const {
t, t,
history,
match,
isInfoPanelVisible, isInfoPanelVisible,
setIsInfoPanelVisible, setIsInfoPanelVisible,
setGallerySelected, setGallerySelected,
categoryType, categoryType,
} = props; } = props;
const navigate = useNavigate();
const params = useParams();
const onBackToFiles = () => { const onBackToFiles = () => {
setGallerySelected(null); setGallerySelected(null);
const filter = FilesFilter.getDefault(); const filter = FilesFilter.getDefault();
filter.folder = match.params.folderId; filter.folder = params.folderId;
const filterParamsStr = filter.toUrlParams(); const filterParamsStr = filter.toUrlParams();
@ -39,7 +41,7 @@ const SectionHeaderContent = (props) => {
const pathname = `${url}?${filterParamsStr}`; const pathname = `${url}?${filterParamsStr}`;
history.push( navigate(
combineUrl(window.DocSpaceConfig?.proxy?.url, config.homepage, pathname) combineUrl(window.DocSpaceConfig?.proxy?.url, config.homepage, pathname)
); );
}; };
@ -86,4 +88,4 @@ export default inject(({ auth, filesStore, oformsStore }) => {
setGallerySelected, setGallerySelected,
categoryType, categoryType,
}; };
})(withTranslation("Common")(withRouter(observer(SectionHeaderContent)))); })(withTranslation("Common")(observer(SectionHeaderContent)));

119
packages/client/src/pages/FormGallery/TilesView/sub-components/Tile.js
View File

@ -9,7 +9,7 @@ import { ReactSVG } from "react-svg";
import { combineUrl } from "@docspace/common/utils"; import { combineUrl } from "@docspace/common/utils";
import config from "PACKAGE_FILE"; import config from "PACKAGE_FILE";
import FilesFilter from "@docspace/common/api/files/filter"; import FilesFilter from "@docspace/common/api/files/filter";
import { withRouter } from "react-router-dom"; import { useParams, useNavigate } from "react-router-dom";
import { import {
StyledTile, StyledTile,
@ -20,27 +20,39 @@ import {
} from "../StyledTileView"; } from "../StyledTileView";
import { getCategoryUrl } from "SRC_DIR/helpers/utils"; import { getCategoryUrl } from "SRC_DIR/helpers/utils";
class Tile extends React.PureComponent { const Tile = (props) => {
constructor(props) { const [errorLoadSrc, setErrorLoadSrc] = React.useState(false);
super(props);
this.state = { const cm = React.useRef();
errorLoadSrc: false, const tile = React.useRef();
const {
t,
thumbnailClick,
item,
setIsInfoPanelVisible,
categoryType,
isInfoPanelVisible,
setGallerySelected,
children,
contextButtonSpacerWidth,
tileContextClick,
isActive,
isSelected,
title,
showHotkeyBorder,
getIcon,
} = props;
const params = useParams();
const navigate = useNavigate();
const onError = () => {
setErrorLoadSrc(true);
}; };
this.cm = React.createRef(); const getIconFile = () => {
this.tile = React.createRef();
}
onError = () => {
this.setState({
errorLoadSrc: true,
});
};
getIconFile = () => {
const { thumbnailClick, item } = this.props;
// const src = // const src =
// item.attributes.template_image.data.attributes.formats.small.url; // item.attributes.template_image.data.attributes.formats.small.url;
const src = item.attributes.card_prewiew.data.attributes.url; const src = item.attributes.card_prewiew.data.attributes.url;
@ -56,7 +68,7 @@ class Tile extends React.PureComponent {
src={src} src={src}
className="thumbnail-image" className="thumbnail-image"
alt="Thumbnail-img" alt="Thumbnail-img"
onError={this.onError} onError={onError}
/> />
</Link> </Link>
) : ( ) : (
@ -64,27 +76,25 @@ class Tile extends React.PureComponent {
); );
}; };
getContextModel = () => { const getContextModel = () => {
return [ return [
{ {
key: "create", key: "create",
label: this.props.t("Common:Create"), label: t("Common:Create"),
onClick: this.onCreateForm, onClick: onCreateForm,
}, },
{ {
key: "template-info", key: "template-info",
label: this.props.t("TemplateInfo"), label: t("TemplateInfo"),
onClick: this.onShowTemplateInfo, onClick: onShowTemplateInfo,
}, },
]; ];
}; };
onCreateForm = () => { const onCreateForm = () => {
const { match, history, setIsInfoPanelVisible, categoryType } = this.props;
const filter = FilesFilter.getDefault(); const filter = FilesFilter.getDefault();
filter.folder = match.params.folderId; filter.folder = params.folderId;
const filterParamsStr = filter.toUrlParams(); const filterParamsStr = filter.toUrlParams();
@ -94,58 +104,46 @@ class Tile extends React.PureComponent {
setIsInfoPanelVisible(false); setIsInfoPanelVisible(false);
history.push( navigate(
combineUrl(window.DocSpaceConfig?.proxy?.url, config.homepage, pathname) combineUrl(window.DocSpaceConfig?.proxy?.url, config.homepage, pathname)
); );
}; };
onShowTemplateInfo = () => { const onShowTemplateInfo = () => {
this.onSelectForm(); onSelectForm();
if (!this.props.isInfoPanelVisible) this.props.setIsInfoPanelVisible(true); if (!isInfoPanelVisible) setIsInfoPanelVisible(true);
}; };
getOptions = () => ["create", "template-info"]; const getOptions = () => ["create", "template-info"];
onSelectForm = () => { const onSelectForm = () => {
this.props.setGallerySelected(this.props.item); setGallerySelected(item);
}; };
render() {
const {
children,
contextButtonSpacerWidth,
tileContextClick,
isActive,
isSelected,
title,
showHotkeyBorder,
getIcon,
} = this.props;
const src = getIcon(32, ".docxf"); const src = getIcon(32, ".docxf");
const element = <img className="react-svg-icon" src={src} />; const element = <img className="react-svg-icon" src={src} />;
const onContextMenu = (e) => { const onContextMenu = (e) => {
tileContextClick && tileContextClick(); tileContextClick && tileContextClick();
if (!this.cm.current.menuRef.current) { if (!cm.current.menuRef.current) {
this.tile.current.click(e); //TODO: need fix context menu to global tile.current.click(e); //TODO: need fix context menu to global
} }
this.cm.current.show(e); cm.current.show(e);
}; };
const icon = this.getIconFile(); const icon = getIconFile();
//TODO: OFORM isActive //TODO: OFORM isActive
return ( return (
<StyledTile <StyledTile
ref={this.tile} ref={tile}
isSelected={isSelected} isSelected={isSelected}
onContextMenu={onContextMenu} onContextMenu={onContextMenu}
isActive={isActive} isActive={isActive}
showHotkeyBorder={showHotkeyBorder} showHotkeyBorder={showHotkeyBorder}
onDoubleClick={this.onCreateForm} onDoubleClick={onCreateForm}
onClick={this.onSelectForm} onClick={onSelectForm}
className="files-item" className="files-item"
> >
<StyledFileTileTop isActive={isActive}>{icon}</StyledFileTileTop> <StyledFileTileTop isActive={isActive}>{icon}</StyledFileTileTop>
@ -160,23 +158,22 @@ class Tile extends React.PureComponent {
<ContextMenuButton <ContextMenuButton
className="expandButton" className="expandButton"
directionX="right" directionX="right"
getData={this.getOptions} getData={getOptions}
isNew={true} isNew={true}
onClick={onContextMenu} onClick={onContextMenu}
title={title} title={title}
/> />
<ContextMenu <ContextMenu
getContextModel={this.getContextModel} getContextModel={getContextModel}
ref={this.cm} ref={cm}
withBackdrop={true} withBackdrop={true}
/> />
</StyledOptionButton> </StyledOptionButton>
</StyledFileTileBottom> </StyledFileTileBottom>
</StyledTile> </StyledTile>
); );
} };
}
Tile.propTypes = { Tile.propTypes = {
children: PropTypes.oneOfType([ children: PropTypes.oneOfType([
@ -214,4 +211,4 @@ export default inject(
categoryType, categoryType,
}; };
} }
)(withTranslation(["FormGallery", "Common"])(withRouter(observer(Tile)))); )(withTranslation(["FormGallery", "Common"])(observer(Tile)));

9
packages/client/src/pages/Home/InfoPanel/Body/helpers/DetailsHelper.js
View File

@ -64,7 +64,7 @@ class DetailsHelper {
constructor(props) { constructor(props) {
this.t = props.t; this.t = props.t;
this.item = props.item; this.item = props.item;
this.history = props.history; this.navigate = props.navigate;
this.openUser = props.openUser; this.openUser = props.openUser;
this.personal = props.personal; this.personal = props.personal;
this.culture = props.culture; this.culture = props.culture;
@ -112,7 +112,8 @@ class DetailsHelper {
}; };
getNeededProperties = () => { getNeededProperties = () => {
return (this.item.isRoom return (
this.item.isRoom
? [ ? [
"Owner", "Owner",
this.item.providerKey && "Storage Type", this.item.providerKey && "Storage Type",
@ -225,7 +226,7 @@ class DetailsHelper {
/// Property // /// Property //
getItemOwner = () => { getItemOwner = () => {
const onOpenUser = () => this.openUser(this.item.createdBy, this.history); const onOpenUser = () => this.openUser(this.item.createdBy, this.navigate);
return this.personal || this.isVisitor return this.personal || this.isVisitor
? text(decode(this.item.createdBy?.displayName)) ? text(decode(this.item.createdBy?.displayName))
@ -277,7 +278,7 @@ class DetailsHelper {
}; };
getItemLastModifiedBy = () => { getItemLastModifiedBy = () => {
const onOpenUser = () => this.openUser(this.item.updatedBy, this.history); const onOpenUser = () => this.openUser(this.item.updatedBy, this.navigate);
return this.personal || this.isVisitor return this.personal || this.isVisitor
? text(decode(this.item.updatedBy?.displayName)) ? text(decode(this.item.updatedBy?.displayName))

3
packages/client/src/pages/Home/InfoPanel/Body/index.js
View File

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

6
packages/client/src/pages/Home/InfoPanel/Body/views/Details/index.js
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect, useCallback } from "react"; import React, { useState, useEffect, useCallback } from "react";
import { useHistory } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { inject } from "mobx-react"; import { inject } from "mobx-react";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
@ -25,14 +25,14 @@ const Details = ({
const [isThumbnailError, setIsThumbmailError] = useState(false); const [isThumbnailError, setIsThumbmailError] = useState(false);
const onThumbnailError = () => setIsThumbmailError(true); const onThumbnailError = () => setIsThumbmailError(true);
const history = useHistory(); const navigate = useNavigate();
const detailsHelper = new DetailsHelper({ const detailsHelper = new DetailsHelper({
isVisitor, isVisitor,
t, t,
item: selection, item: selection,
openUser, openUser,
history, navigate,
personal, personal,
culture, culture,
}); });

6
packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockUser.js
View File

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { useHistory } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { decode } from "he"; import { decode } from "he";
import Link from "@docspace/components/link"; import Link from "@docspace/components/link";
@ -13,10 +13,10 @@ const HistoryBlockUser = ({
isCollaborator, isCollaborator,
}) => { }) => {
const username = user.displayName; const username = user.displayName;
const history = useHistory(); const navigate = useNavigate();
const onUserClick = () => { const onUserClick = () => {
openUser(user, history); openUser(user, navigate);
}; };
return ( return (

20
packages/client/src/pages/Home/MediaViewer/index.js
View File

@ -1,9 +1,8 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { withRouter } from "react-router"; import { useNavigate, useLocation } from "react-router-dom";
import queryString from "query-string"; import queryString from "query-string";
import history from "@docspace/common/history";
import MediaViewer from "@docspace/common/components/MediaViewer"; import MediaViewer from "@docspace/common/components/MediaViewer";
const FilesMediaViewer = (props) => { const FilesMediaViewer = (props) => {
@ -16,7 +15,7 @@ const FilesMediaViewer = (props) => {
currentMediaFileId, currentMediaFileId,
deleteItemAction, deleteItemAction,
setMediaViewerData, setMediaViewerData,
location,
setRemoveMediaItem, setRemoveMediaItem,
userAccess, userAccess,
deleteDialogVisible, deleteDialogVisible,
@ -52,6 +51,9 @@ const FilesMediaViewer = (props) => {
setSelection, setSelection,
} = props; } = props;
const navigate = useNavigate();
const location = useLocation();
useEffect(() => { useEffect(() => {
if (visible) { if (visible) {
resetSelection(); resetSelection();
@ -97,7 +99,7 @@ const FilesMediaViewer = (props) => {
const onChangeUrl = (id) => { const onChangeUrl = (id) => {
const url = "/products/files/#preview/" + id; const url = "/products/files/#preview/" + id;
setCurrentId(id); setCurrentId(id);
window.history.pushState(null, null, url); navigate(url);
}; };
const resetSelection = () => { const resetSelection = () => {
@ -109,7 +111,7 @@ const FilesMediaViewer = (props) => {
if (queryParams.has(queryName)) { if (queryParams.has(queryName)) {
queryParams.delete(queryName); queryParams.delete(queryName);
history.replace({ navigate(_, {
search: queryParams.toString(), search: queryParams.toString(),
}); });
} }
@ -169,7 +171,7 @@ const FilesMediaViewer = (props) => {
const targetFile = files.find((item) => item.id === currentMediaFileId); const targetFile = files.find((item) => item.id === currentMediaFileId);
if (targetFile) setBufferSelection(targetFile); if (targetFile) setBufferSelection(targetFile);
window.history.replaceState(null, null, url); navigate(url, { replace: true });
}; };
return ( return (
@ -304,8 +306,4 @@ export default inject(
setSelection, setSelection,
}; };
} }
)( )(withTranslation(["Files", "Translations"])(observer(FilesMediaViewer)));
withRouter(
withTranslation(["Files", "Translations"])(observer(FilesMediaViewer))
)
);

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

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

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

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

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

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

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

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

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

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

3
packages/client/src/pages/Home/Section/Body/index.js
View File

@ -1,5 +1,4 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { withRouter } from "react-router";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { isMobile, isMobileOnly } from "react-device-detect"; 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)))()
) )
)
); );

10
packages/client/src/pages/Home/Section/Filter/index.js
View File

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

286
packages/client/src/pages/Home/Section/Header/index.js
View File

@ -24,7 +24,7 @@ import CatalogTrashReactSvgUrl from "PUBLIC_DIR/images/catalog.trash.react.svg?u
import React from "react"; import React from "react";
import copy from "copy-to-clipboard"; import copy from "copy-to-clipboard";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import toastr from "@docspace/components/toast/toastr"; import toastr from "@docspace/components/toast/toastr";
import Loaders from "@docspace/common/components/Loaders"; import Loaders from "@docspace/common/components/Loaders";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
@ -94,13 +94,12 @@ const StyledContainer = styled.div`
} }
`; `;
class SectionHeaderContent extends React.Component { const SectionHeaderContent = (props) => {
constructor(props) { const [navigationItems, setNavigationItems] = React.useState([]);
super(props);
this.state = { navigationItems: [] };
}
onCreate = (format) => { const navigate = useNavigate();
const onCreate = (format) => {
const event = new Event(Events.CREATE); const event = new Event(Events.CREATE);
const payload = { const payload = {
@ -113,9 +112,9 @@ class SectionHeaderContent extends React.Component {
window.dispatchEvent(event); window.dispatchEvent(event);
}; };
onCreateRoom = () => { const onCreateRoom = () => {
if (this.props.isGracePeriod) { if (props.isGracePeriod) {
this.props.setInviteUsersWarningDialogVisible(true); props.setInviteUsersWarningDialogVisible(true);
return; return;
} }
@ -123,21 +122,21 @@ class SectionHeaderContent extends React.Component {
window.dispatchEvent(event); window.dispatchEvent(event);
}; };
createDocument = () => this.onCreate("docx"); const createDocument = () => onCreate("docx");
createSpreadsheet = () => this.onCreate("xlsx"); const createSpreadsheet = () => onCreate("xlsx");
createPresentation = () => this.onCreate("pptx"); const createPresentation = () => onCreate("pptx");
createForm = () => this.onCreate("docxf"); const createForm = () => onCreate("docxf");
createFormFromFile = () => { const createFormFromFile = () => {
this.props.setSelectFileDialogVisible(true); props.setSelectFileDialogVisible(true);
}; };
onShowGallery = () => { const onShowGallery = () => {
const { history, currentFolderId } = this.props; const { currentFolderId } = props;
history.push( navigate(
combineUrl( combineUrl(
window.DocSpaceConfig?.proxy?.url, window.DocSpaceConfig?.proxy?.url,
config.homepage, config.homepage,
@ -146,10 +145,10 @@ class SectionHeaderContent extends React.Component {
); );
}; };
createFolder = () => this.onCreate(); const createFolder = () => onCreate();
// TODO: add privacy room check for files // TODO: add privacy room check for files
onUploadAction = (type) => { const onUploadAction = (type) => {
const element = const element =
type === "file" type === "file"
? document.getElementById("customFileInput") ? document.getElementById("customFileInput")
@ -158,21 +157,16 @@ class SectionHeaderContent extends React.Component {
element?.click(); element?.click();
}; };
getContextOptionsPlus = () => { const getContextOptionsPlus = () => {
const { const { t, isPrivacyFolder, isRoomsFolder, enablePlugins, security } =
t, props;
isPrivacyFolder,
isRoomsFolder,
enablePlugins,
security,
} = this.props;
const options = isRoomsFolder const options = isRoomsFolder
? [ ? [
{ {
key: "new-room", key: "new-room",
label: t("NewRoom"), label: t("NewRoom"),
onClick: this.onCreateRoom, onClick: onCreateRoom,
icon: FolderLockedReactSvgUrl, icon: FolderLockedReactSvgUrl,
}, },
] ]
@ -181,21 +175,21 @@ class SectionHeaderContent extends React.Component {
id: "personal_new-documnet", id: "personal_new-documnet",
key: "new-document", key: "new-document",
label: t("Common:NewDocument"), label: t("Common:NewDocument"),
onClick: this.createDocument, onClick: createDocument,
icon: ActionsDocumentsReactSvgUrl, icon: ActionsDocumentsReactSvgUrl,
}, },
{ {
id: "personal_new-spreadsheet", id: "personal_new-spreadsheet",
key: "new-spreadsheet", key: "new-spreadsheet",
label: t("Common:NewSpreadsheet"), label: t("Common:NewSpreadsheet"),
onClick: this.createSpreadsheet, onClick: createSpreadsheet,
icon: SpreadsheetReactSvgUrl, icon: SpreadsheetReactSvgUrl,
}, },
{ {
id: "personal_new-presentation", id: "personal_new-presentation",
key: "new-presentation", key: "new-presentation",
label: t("Common:NewPresentation"), label: t("Common:NewPresentation"),
onClick: this.createPresentation, onClick: createPresentation,
icon: ActionsPresentationReactSvgUrl, icon: ActionsPresentationReactSvgUrl,
}, },
{ {
@ -209,14 +203,14 @@ class SectionHeaderContent extends React.Component {
key: "new-form", key: "new-form",
label: t("Translations:SubNewForm"), label: t("Translations:SubNewForm"),
icon: FormBlankReactSvgUrl, icon: FormBlankReactSvgUrl,
onClick: this.createForm, onClick: createForm,
}, },
{ {
id: "personal_template_new-form-file", id: "personal_template_new-form-file",
key: "new-form-file", key: "new-form-file",
label: t("Translations:SubNewFormFile"), label: t("Translations:SubNewFormFile"),
icon: FormFileReactSvgUrl, icon: FormFileReactSvgUrl,
onClick: this.createFormFromFile, onClick: createFormFromFile,
disabled: isPrivacyFolder, disabled: isPrivacyFolder,
}, },
{ {
@ -224,7 +218,7 @@ class SectionHeaderContent extends React.Component {
key: "oforms-gallery", key: "oforms-gallery",
label: t("Common:OFORMsGallery"), label: t("Common:OFORMsGallery"),
icon: FormGalleryReactSvgUrl, icon: FormGalleryReactSvgUrl,
onClick: this.onShowGallery, onClick: onShowGallery,
disabled: isPrivacyFolder || (isMobile && isTablet), disabled: isPrivacyFolder || (isMobile && isTablet),
}, },
], ],
@ -233,20 +227,20 @@ class SectionHeaderContent extends React.Component {
id: "personal_new-folder", id: "personal_new-folder",
key: "new-folder", key: "new-folder",
label: t("Common:NewFolder"), label: t("Common:NewFolder"),
onClick: this.createFolder, onClick: createFolder,
icon: CatalogFolderReactSvgUrl, icon: CatalogFolderReactSvgUrl,
}, },
{ key: "separator", isSeparator: true }, { key: "separator", isSeparator: true },
{ {
key: "upload-files", key: "upload-files",
label: t("Article:UploadFiles"), label: t("Article:UploadFiles"),
onClick: () => this.onUploadAction("file"), onClick: () => onUploadAction("file"),
icon: ActionsUploadReactSvgUrl, icon: ActionsUploadReactSvgUrl,
}, },
{ {
key: "upload-folder", key: "upload-folder",
label: t("Article:UploadFolder"), label: t("Article:UploadFolder"),
onClick: () => this.onUploadAction("folder"), onClick: () => onUploadAction("folder"),
icon: ActionsUploadReactSvgUrl, icon: ActionsUploadReactSvgUrl,
}, },
]; ];
@ -267,9 +261,8 @@ class SectionHeaderContent extends React.Component {
return options; return options;
}; };
createLinkForPortalUsers = () => { const createLinkForPortalUsers = () => {
const { currentFolderId } = this.props; const { currentFolderId, t } = props;
const { t } = this.props;
copy( copy(
`${window.location.origin}/filter?folder=${currentFolderId}` //TODO: Change url by category `${window.location.origin}/filter?folder=${currentFolderId}` //TODO: Change url by category
@ -278,28 +271,28 @@ class SectionHeaderContent extends React.Component {
toastr.success(t("Translations:LinkCopySuccess")); toastr.success(t("Translations:LinkCopySuccess"));
}; };
onMoveAction = () => { const onMoveAction = () => {
this.props.setIsFolderActions(true); props.setIsFolderActions(true);
this.props.setBufferSelection(this.props.selectedFolder); props.setBufferSelection(props.selectedFolder);
return this.props.setMoveToPanelVisible(true); return props.setMoveToPanelVisible(true);
}; };
onCopyAction = () => { const onCopyAction = () => {
this.props.setIsFolderActions(true); props.setIsFolderActions(true);
this.props.setBufferSelection(this.props.currentFolderId); props.setBufferSelection(props.currentFolderId);
return this.props.setCopyPanelVisible(true); return props.setCopyPanelVisible(true);
}; };
downloadAction = () => { const downloadAction = () => {
this.props.setBufferSelection(this.props.currentFolderId); props.setBufferSelection(props.currentFolderId);
this.props.setIsFolderActions(true); props.setIsFolderActions(true);
this.props props
.downloadAction(this.props.t("Translations:ArchivingData"), [ .downloadAction(props.t("Translations:ArchivingData"), [
this.props.currentFolderId, props.currentFolderId,
]) ])
.catch((err) => toastr.error(err)); .catch((err) => toastr.error(err));
}; };
renameAction = () => { const renameAction = () => {
const { selectedFolder } = this.props; const { selectedFolder } = props;
const event = new Event(Events.RENAME); const event = new Event(Events.RENAME);
@ -308,13 +301,13 @@ class SectionHeaderContent extends React.Component {
window.dispatchEvent(event); window.dispatchEvent(event);
}; };
onOpenSharingPanel = () => { const onOpenSharingPanel = () => {
this.props.setBufferSelection(this.props.currentFolderId); props.setBufferSelection(props.currentFolderId);
this.props.setIsFolderActions(true); props.setIsFolderActions(true);
return this.props.setSharingPanelVisible(true); return props.setSharingPanelVisible(true);
}; };
onDeleteAction = () => { const onDeleteAction = () => {
const { const {
t, t,
deleteAction, deleteAction,
@ -324,9 +317,10 @@ class SectionHeaderContent extends React.Component {
currentFolderId, currentFolderId,
getFolderInfo, getFolderInfo,
setBufferSelection, setBufferSelection,
} = this.props; setIsFolderActions,
} = props;
this.props.setIsFolderActions(true); setIsFolderActions(true);
if (confirmDelete || isThirdPartySelection) { if (confirmDelete || isThirdPartySelection) {
getFolderInfo(currentFolderId).then((data) => { getFolderInfo(currentFolderId).then((data) => {
@ -347,58 +341,66 @@ class SectionHeaderContent extends React.Component {
} }
}; };
onEmptyTrashAction = () => { const onEmptyTrashAction = () => {
const { activeFiles, activeFolders } = this.props; const { activeFiles, activeFolders, setEmptyTrashDialogVisible } = props;
const isExistActiveItems = [...activeFiles, ...activeFolders].length > 0; const isExistActiveItems = [...activeFiles, ...activeFolders].length > 0;
if (isExistActiveItems) return; if (isExistActiveItems) return;
this.props.setEmptyTrashDialogVisible(true); setEmptyTrashDialogVisible(true);
}; };
onRestoreAllAction = () => { const onRestoreAllAction = () => {
const { activeFiles, activeFolders } = this.props; const { activeFiles, activeFolders, setRestoreAllPanelVisible } = props;
const isExistActiveItems = [...activeFiles, ...activeFolders].length > 0; const isExistActiveItems = [...activeFiles, ...activeFolders].length > 0;
if (isExistActiveItems) return; if (isExistActiveItems) return;
this.props.setRestoreAllPanelVisible(true); setRestoreAllPanelVisible(true);
}; };
onRestoreAllArchiveAction = () => { const onRestoreAllArchiveAction = () => {
const { activeFiles, activeFolders } = this.props; const {
activeFiles,
activeFolders,
isGracePeriod,
setInviteUsersWarningDialogVisible,
setArchiveAction,
setRestoreAllArchive,
setArchiveDialogVisible,
} = props;
const isExistActiveItems = [...activeFiles, ...activeFolders].length > 0; const isExistActiveItems = [...activeFiles, ...activeFolders].length > 0;
if (isExistActiveItems) return; if (isExistActiveItems) return;
if (this.props.isGracePeriod) { if (isGracePeriod) {
this.props.setInviteUsersWarningDialogVisible(true); setInviteUsersWarningDialogVisible(true);
return; return;
} }
this.props.setArchiveAction("unarchive"); setArchiveAction("unarchive");
this.props.setRestoreAllArchive(true); setRestoreAllArchive(true);
this.props.setArchiveDialogVisible(true); setArchiveDialogVisible(true);
}; };
onShowInfo = () => { const onShowInfo = () => {
const { setIsInfoPanelVisible } = this.props; const { setIsInfoPanelVisible } = props;
setIsInfoPanelVisible(true); setIsInfoPanelVisible(true);
}; };
onToggleInfoPanel = () => { const onToggleInfoPanel = () => {
const { isInfoPanelVisible, setIsInfoPanelVisible } = this.props; const { isInfoPanelVisible, setIsInfoPanelVisible } = props;
setIsInfoPanelVisible(!isInfoPanelVisible); setIsInfoPanelVisible(!isInfoPanelVisible);
}; };
onCopyLinkAction = () => { const onCopyLinkAction = () => {
const { t, selectedFolder, onCopyLink } = this.props; const { t, selectedFolder, onCopyLink } = props;
onCopyLink && onCopyLink({ ...selectedFolder, isFolder: true }, t); onCopyLink && onCopyLink({ ...selectedFolder, isFolder: true }, t);
}; };
getContextOptionsFolder = () => { const getContextOptionsFolder = () => {
const { const {
t, t,
isRoom, isRoom,
@ -418,7 +420,7 @@ class SectionHeaderContent extends React.Component {
canDeleteAll, canDeleteAll,
security, security,
} = this.props; } = props;
const isDisabled = isRecycleBinFolder || isRoom; const isDisabled = isRecycleBinFolder || isRoom;
@ -428,7 +430,7 @@ class SectionHeaderContent extends React.Component {
id: "header_option_empty-archive", id: "header_option_empty-archive",
key: "empty-archive", key: "empty-archive",
label: t("ArchiveAction"), label: t("ArchiveAction"),
onClick: this.onEmptyTrashAction, onClick: onEmptyTrashAction,
disabled: !canDeleteAll, disabled: !canDeleteAll,
icon: ClearTrashReactSvgUrl, icon: ClearTrashReactSvgUrl,
}, },
@ -436,7 +438,7 @@ class SectionHeaderContent extends React.Component {
id: "header_option_restore-all", id: "header_option_restore-all",
key: "restore-all", key: "restore-all",
label: t("RestoreAll"), label: t("RestoreAll"),
onClick: this.onRestoreAllArchiveAction, onClick: onRestoreAllArchiveAction,
disabled: !canRestoreAll, disabled: !canRestoreAll,
icon: MoveReactSvgUrl, icon: MoveReactSvgUrl,
}, },
@ -448,7 +450,7 @@ class SectionHeaderContent extends React.Component {
id: "header_option_sharing-settings", id: "header_option_sharing-settings",
key: "sharing-settings", key: "sharing-settings",
label: t("SharingPanel:SharingSettingsTitle"), label: t("SharingPanel:SharingSettingsTitle"),
onClick: this.onOpenSharingPanel, onClick: onOpenSharingPanel,
disabled: true, disabled: true,
icon: ShareReactSvgUrl, icon: ShareReactSvgUrl,
}, },
@ -456,7 +458,7 @@ class SectionHeaderContent extends React.Component {
id: "header_option_link-portal-users", id: "header_option_link-portal-users",
key: "link-portal-users", key: "link-portal-users",
label: t("LinkForPortalUsers"), label: t("LinkForPortalUsers"),
onClick: this.createLinkForPortalUsers, onClick: createLinkForPortalUsers,
disabled: true, disabled: true,
icon: InvitationLinkReactSvgUrl, icon: InvitationLinkReactSvgUrl,
}, },
@ -464,7 +466,7 @@ class SectionHeaderContent extends React.Component {
id: "header_option_link-for-room-members", id: "header_option_link-for-room-members",
key: "link-for-room-members", key: "link-for-room-members",
label: t("LinkForRoomMembers"), label: t("LinkForRoomMembers"),
onClick: this.onCopyLinkAction, onClick: onCopyLinkAction,
disabled: isRecycleBinFolder || isPersonalRoom, disabled: isRecycleBinFolder || isPersonalRoom,
icon: InvitationLinkReactSvgUrl, icon: InvitationLinkReactSvgUrl,
}, },
@ -472,7 +474,7 @@ class SectionHeaderContent extends React.Component {
id: "header_option_empty-trash", id: "header_option_empty-trash",
key: "empty-trash", key: "empty-trash",
label: t("RecycleBinAction"), label: t("RecycleBinAction"),
onClick: this.onEmptyTrashAction, onClick: onEmptyTrashAction,
disabled: !isRecycleBinFolder, disabled: !isRecycleBinFolder,
icon: ClearTrashReactSvgUrl, icon: ClearTrashReactSvgUrl,
}, },
@ -480,7 +482,7 @@ class SectionHeaderContent extends React.Component {
id: "header_option_restore-all", id: "header_option_restore-all",
key: "restore-all", key: "restore-all",
label: t("RestoreAll"), label: t("RestoreAll"),
onClick: this.onRestoreAllAction, onClick: onRestoreAllAction,
disabled: !isRecycleBinFolder, disabled: !isRecycleBinFolder,
icon: MoveReactSvgUrl, icon: MoveReactSvgUrl,
}, },
@ -488,7 +490,7 @@ class SectionHeaderContent extends React.Component {
id: "header_option_show-info", id: "header_option_show-info",
key: "show-info", key: "show-info",
label: t("Common:Info"), label: t("Common:Info"),
onClick: this.onShowInfo, onClick: onShowInfo,
disabled: isDisabled, disabled: isDisabled,
icon: InfoOutlineReactSvgUrl, icon: InfoOutlineReactSvgUrl,
}, },
@ -521,7 +523,7 @@ class SectionHeaderContent extends React.Component {
key: "room-info", key: "room-info",
label: t("Common:Info"), label: t("Common:Info"),
icon: InfoOutlineReactSvgUrl, icon: InfoOutlineReactSvgUrl,
onClick: this.onToggleInfoPanel, onClick: onToggleInfoPanel,
disabled: !isRoom, disabled: !isRoom,
}, },
{ {
@ -544,7 +546,7 @@ class SectionHeaderContent extends React.Component {
id: "header_option_download", id: "header_option_download",
key: "download", key: "download",
label: t("Common:Download"), label: t("Common:Download"),
onClick: this.downloadAction, onClick: downloadAction,
disabled: isDisabled, disabled: isDisabled,
icon: DownloadReactSvgUrl, icon: DownloadReactSvgUrl,
}, },
@ -552,7 +554,7 @@ class SectionHeaderContent extends React.Component {
id: "header_option_move-to", id: "header_option_move-to",
key: "move-to", key: "move-to",
label: t("MoveTo"), label: t("MoveTo"),
onClick: this.onMoveAction, onClick: onMoveAction,
disabled: isDisabled || !security?.MoveTo, disabled: isDisabled || !security?.MoveTo,
icon: MoveReactSvgUrl, icon: MoveReactSvgUrl,
}, },
@ -560,7 +562,7 @@ class SectionHeaderContent extends React.Component {
id: "header_option_copy", id: "header_option_copy",
key: "copy", key: "copy",
label: t("Translations:Copy"), label: t("Translations:Copy"),
onClick: this.onCopyAction, onClick: onCopyAction,
disabled: isDisabled || !security?.CopyTo, disabled: isDisabled || !security?.CopyTo,
icon: CopyReactSvgUrl, icon: CopyReactSvgUrl,
}, },
@ -568,7 +570,7 @@ class SectionHeaderContent extends React.Component {
id: "header_option_rename", id: "header_option_rename",
key: "rename", key: "rename",
label: t("Rename"), label: t("Rename"),
onClick: this.renameAction, onClick: renameAction,
disabled: isDisabled || !security?.Rename, disabled: isDisabled || !security?.Rename,
icon: RenameReactSvgUrl, icon: RenameReactSvgUrl,
}, },
@ -582,29 +584,24 @@ class SectionHeaderContent extends React.Component {
id: "header_option_delete", id: "header_option_delete",
key: "delete", key: "delete",
label: t("Common:Delete"), label: t("Common:Delete"),
onClick: this.onDeleteAction, onClick: onDeleteAction,
disabled: isDisabled || !security?.Delete, disabled: isDisabled || !security?.Delete,
icon: CatalogTrashReactSvgUrl, icon: CatalogTrashReactSvgUrl,
}, },
]; ];
}; };
onSelect = (e) => { const onSelect = (e) => {
const key = e.currentTarget.dataset.key; const key = e.currentTarget.dataset.key;
this.props.setSelected(key); props.setSelected(key);
}; };
onClose = () => { const onClose = () => {
this.props.setSelected("close"); props.setSelected("close");
}; };
getMenuItems = () => { const getMenuItems = () => {
const { const { t, cbMenuItems, getCheckboxItemLabel, getCheckboxItemId } = props;
t,
cbMenuItems,
getCheckboxItemLabel,
getCheckboxItemId,
} = this.props;
const checkboxOptions = ( const checkboxOptions = (
<> <>
{cbMenuItems.map((key) => { {cbMenuItems.map((key) => {
@ -616,7 +613,7 @@ class SectionHeaderContent extends React.Component {
key={key} key={key}
label={label} label={label}
data-key={key} data-key={key}
onClick={this.onSelect} onClick={onSelect}
/> />
); );
})} })}
@ -626,17 +623,13 @@ class SectionHeaderContent extends React.Component {
return checkboxOptions; return checkboxOptions;
}; };
onChange = (checked) => { const onChange = (checked) => {
this.props.setSelected(checked ? "all" : "none"); props.setSelected(checked ? "all" : "none");
}; };
onClickFolder = (id, isRootRoom) => { const onClickFolder = (id, isRootRoom) => {
const { const { setSelectedNode, setIsLoading, fetchFiles, moveToRoomsPage } =
setSelectedNode, props;
setIsLoading,
fetchFiles,
moveToRoomsPage,
} = this.props;
if (isRootRoom) { if (isRootRoom) {
return moveToRoomsPage(); return moveToRoomsPage();
@ -649,9 +642,6 @@ class SectionHeaderContent extends React.Component {
.finally(() => setIsLoading(false)); .finally(() => setIsLoading(false));
}; };
render() {
//console.log("Body header render");
const { const {
t, t,
tReady, tReady,
@ -681,15 +671,14 @@ class SectionHeaderContent extends React.Component {
security, security,
onClickBack, onClickBack,
hideContextMenuInsideArchiveRoom, hideContextMenuInsideArchiveRoom,
} = this.props; activeFiles,
activeFolders,
} = props;
const menuItems = this.getMenuItems(); const menuItems = getMenuItems();
const isLoading = !title || !tReady; const isLoading = !title || !tReady;
const headerMenu = getHeaderMenu(t); const headerMenu = getHeaderMenu(t);
const isEmptyTrash = !![ const isEmptyTrash = !![...activeFiles, ...activeFolders].length;
...this.props.activeFiles,
...this.props.activeFolders,
].length;
return [ return [
<Consumer key="header"> <Consumer key="header">
@ -701,12 +690,12 @@ class SectionHeaderContent extends React.Component {
{isHeaderVisible && headerMenu.length ? ( {isHeaderVisible && headerMenu.length ? (
<TableGroupMenu <TableGroupMenu
checkboxOptions={menuItems} checkboxOptions={menuItems}
onChange={this.onChange} onChange={onChange}
isChecked={isHeaderChecked} isChecked={isHeaderChecked}
isIndeterminate={isHeaderIndeterminate} isIndeterminate={isHeaderIndeterminate}
headerMenu={headerMenu} headerMenu={headerMenu}
isInfoPanelVisible={isInfoPanelVisible} isInfoPanelVisible={isInfoPanelVisible}
toggleInfoPanel={this.onToggleInfoPanel} toggleInfoPanel={onToggleInfoPanel}
isMobileView={isMobileOnly} isMobileView={isMobileOnly}
isBlocked={isGroupMenuBlocked} isBlocked={isGroupMenuBlocked}
/> />
@ -727,25 +716,25 @@ class SectionHeaderContent extends React.Component {
tReady={tReady} tReady={tReady}
menuItems={menuItems} menuItems={menuItems}
navigationItems={navigationPath} navigationItems={navigationPath}
getContextOptionsPlus={this.getContextOptionsPlus} getContextOptionsPlus={getContextOptionsPlus}
getContextOptionsFolder={this.getContextOptionsFolder} getContextOptionsFolder={getContextOptionsFolder}
onClose={this.onClose} onClose={onClose}
onClickFolder={this.onClickFolder} onClickFolder={onClickFolder}
isTrashFolder={isRecycleBinFolder} isTrashFolder={isRecycleBinFolder}
isRecycleBinFolder={isRecycleBinFolder || isArchiveFolder} isRecycleBinFolder={isRecycleBinFolder || isArchiveFolder}
isEmptyFilesList={ isEmptyFilesList={
isArchiveFolder ? isEmptyArchive : isEmptyFilesList isArchiveFolder ? isEmptyArchive : isEmptyFilesList
} }
clearTrash={this.onEmptyTrashAction} clearTrash={onEmptyTrashAction}
onBackToParentFolder={onClickBack} onBackToParentFolder={onClickBack}
toggleInfoPanel={this.onToggleInfoPanel} toggleInfoPanel={onToggleInfoPanel}
isInfoPanelVisible={isInfoPanelVisible} isInfoPanelVisible={isInfoPanelVisible}
titles={{ titles={{
trash: t("EmptyRecycleBin"), trash: t("EmptyRecycleBin"),
trashWarning: t("TrashErasureWarning"), trashWarning: t("TrashErasureWarning"),
}} }}
withMenu={!isRoomsFolder} withMenu={!isRoomsFolder}
onPlusClick={this.onCreateRoom} onPlusClick={onCreateRoom}
isEmptyPage={isEmptyPage} isEmptyPage={isEmptyPage}
isRoom={isRoom} isRoom={isRoom}
/> />
@ -763,8 +752,7 @@ class SectionHeaderContent extends React.Component {
/> />
), ),
]; ];
} };
}
export default inject( export default inject(
({ ({
@ -841,14 +829,8 @@ export default inject(
const { setIsVisible, isVisible } = auth.infoPanelStore; const { setIsVisible, isVisible } = auth.infoPanelStore;
const { const { title, id, roomType, pathParts, navigationPath, security } =
title, selectedFolderStore;
id,
roomType,
pathParts,
navigationPath,
security,
} = selectedFolderStore;
const selectedFolder = { ...selectedFolderStore }; const selectedFolder = { ...selectedFolderStore };
@ -971,9 +953,5 @@ export default inject(
"InfoPanel", "InfoPanel",
"SharingPanel", "SharingPanel",
"Article", "Article",
])( ])(withLoader(observer(SectionHeaderContent))(<Loaders.SectionHeader />))
withLoader(withRouter(observer(SectionHeaderContent)))(
<Loaders.SectionHeader />
)
)
); );

11
packages/client/src/pages/Home/index.js
View File

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

9
packages/client/src/pages/My/index.js
View File

@ -5,7 +5,6 @@ import PeopleStore from "../../store/PeopleStore";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import Section from "@docspace/common/components/Section"; import Section from "@docspace/common/components/Section";
import toastr from "@docspace/components/toast/toastr"; import toastr from "@docspace/components/toast/toastr";
import { withRouter } from "react-router";
import { Provider as PeopleProvider, inject, observer } from "mobx-react"; import { Provider as PeopleProvider, inject, observer } from "mobx-react";
import { I18nextProvider, withTranslation } from "react-i18next"; import { I18nextProvider, withTranslation } from "react-i18next";
@ -89,14 +88,12 @@ class My extends React.Component {
My.propTypes = { My.propTypes = {
fetchProfile: PropTypes.func.isRequired, fetchProfile: PropTypes.func.isRequired,
history: PropTypes.object.isRequired,
match: PropTypes.object.isRequired, match: PropTypes.object.isRequired,
profile: PropTypes.object, profile: PropTypes.object,
language: PropTypes.string, 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,
@ -105,9 +102,7 @@ const MyProfile = withRouter(
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(); const peopleStore = new PeopleStore();
export default ({ i18n, ...rest }) => { export default ({ i18n, ...rest }) => {

8
packages/client/src/pages/Notifications/Section/Header/index.js
View File

@ -1,15 +1,17 @@
import React from "react"; import React from "react";
import config from "PACKAGE_FILE"; import config from "PACKAGE_FILE";
import { useNavigate } from "react-router-dom";
import IconButton from "@docspace/components/icon-button"; import IconButton from "@docspace/components/icon-button";
import { combineUrl } from "@docspace/common/utils"; import { combineUrl } from "@docspace/common/utils";
import Headline from "@docspace/common/components/Headline"; import Headline from "@docspace/common/components/Headline";
import { StyledSectionHeader } from "../../StyledComponent"; import { StyledSectionHeader } from "../../StyledComponent";
const SectionHeaderContent = ({ history, t }) => { const SectionHeaderContent = ({ t }) => {
const navigate = useNavigate();
const onClickBack = () => { const onClickBack = () => {
history.push( navigate(
combineUrl( combineUrl(
window.DocSpaceConfig?.proxy?.url, window.DocSpaceConfig?.proxy?.url,
config.homepage, config.homepage,

10
packages/client/src/pages/Notifications/index.js
View File

@ -8,17 +8,18 @@ import SectionBodyContent from "./Section/Body/index";
import SectionHeaderContent from "./Section/Header/index"; import SectionHeaderContent from "./Section/Header/index";
const NotificationComponent = (props) => { const NotificationComponent = (props) => {
const { history, setSelectedNode } = props; const { setSelectedNode, setFirstLoad } = props;
const { t, ready } = useTranslation("Notifications"); const { t, ready } = useTranslation("Notifications");
useEffect(() => { useEffect(() => {
setFirstLoad(false);
setSelectedNode(["accounts"]); setSelectedNode(["accounts"]);
}, []); }, []);
return ( return (
<Section> <Section>
<Section.SectionHeader> <Section.SectionHeader>
<SectionHeaderContent history={history} t={t} /> <SectionHeaderContent t={t} />
</Section.SectionHeader> </Section.SectionHeader>
<Section.SectionBody> <Section.SectionBody>
@ -28,10 +29,11 @@ const NotificationComponent = (props) => {
); );
}; };
export default inject(({ treeFoldersStore }) => { export default inject(({ treeFoldersStore, filesStore }) => {
const { setSelectedNode } = treeFoldersStore; const { setSelectedNode } = treeFoldersStore;
const { setFirstLoad } = filesStore;
return { return {
setFirstLoad,
setSelectedNode, setSelectedNode,
}; };
})(observer(NotificationComponent)); })(observer(NotificationComponent));

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

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { withRouter } from "react-router"; import { useNavigate, useLocation, useParams } from "react-router-dom";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
@ -94,16 +94,36 @@ const getTreeItems = (data, path, t) => {
}); });
}; };
class ArticleBodyContent extends React.Component { const ArticleBodyContent = (props) => {
constructor(props) { const {
super(props); t,
const fullSettingsUrl = props.match.url; tReady,
const locationPathname = props.location.pathname; setIsLoadedArticleBody,
toggleArticleOpen,
showText,
isNotPaidPeriod,
isOwner,
isLoadedArticleBody,
} = props;
const fullSettingsUrlLength = fullSettingsUrl.length; const [selectedKeys, setSelectedKeys] = React.useState([]);
const resultPath = locationPathname.slice(fullSettingsUrlLength + 1);
const prevLocation = React.useRef(null);
const navigate = useNavigate();
const location = useLocation();
React.useEffect(() => {
prevLocation.current = location;
}, [location]);
React.useEffect(() => {
const locationPathname = location.pathname;
const resultPath = locationPathname;
const arrayOfParams = resultPath.split("/"); const arrayOfParams = resultPath.split("/");
arrayOfParams.splice(0, 2);
let link = ""; let link = "";
const selectedItem = arrayOfParams[arrayOfParams.length - 1]; const selectedItem = arrayOfParams[arrayOfParams.length - 1];
@ -116,6 +136,7 @@ class ArticleBodyContent extends React.Component {
} else if (selectedItem === "accessrights") { } else if (selectedItem === "accessrights") {
link = `/${resultPath}/owner`; link = `/${resultPath}/owner`;
} }
const CurrentSettingsCategoryKey = getCurrentSettingsCategory( const CurrentSettingsCategoryKey = getCurrentSettingsCategory(
arrayOfParams, arrayOfParams,
settingsTree settingsTree
@ -125,78 +146,69 @@ class ArticleBodyContent extends React.Component {
link = getSelectedLinkByKey(CurrentSettingsCategoryKey, settingsTree); link = getSelectedLinkByKey(CurrentSettingsCategoryKey, settingsTree);
} }
this.state = { setSelectedKeys([CurrentSettingsCategoryKey]);
selectedKeys: [CurrentSettingsCategoryKey], }, []);
};
}
componentDidUpdate(prevProps, prevState) {
const { tReady, setIsLoadedArticleBody } = this.props;
React.useEffect(() => {
if (tReady) setIsLoadedArticleBody(true); if (tReady) setIsLoadedArticleBody(true);
if (prevProps.location.pathname !== this.props.location.pathname) { if (prevLocation.current.pathname !== location.pathname) {
if (this.props.location.pathname.includes("common")) { if (location.pathname.includes("common")) {
this.setState({ selectedKeys: ["0-0"] }); setSelectedKeys(["0-0"]);
} }
if (this.props.location.pathname.includes("security")) { if (location.pathname.includes("security")) {
this.setState({ selectedKeys: ["1-0"] }); setSelectedKeys(["1-0"]);
} }
if (this.props.location.pathname.includes("backup")) { if (location.pathname.includes("backup")) {
this.setState({ selectedKeys: ["2-0"] }); setSelectedKeys(["2-0"]);
} }
if (this.props.location.pathname.includes("restore")) { if (location.pathname.includes("restore")) {
this.setState({ selectedKeys: ["3-0"] }); setSelectedKeys(["3-0"]);
} }
if (this.props.location.pathname.includes("integration")) { if (location.pathname.includes("integration")) {
this.setState({ selectedKeys: ["4-0"] }); setSelectedKeys(["4-0"]);
} }
if (this.props.location.pathname.includes("developer")) { if (location.pathname.includes("developer")) {
this.setState({ selectedKeys: ["5-0"] }); setSelectedKeys(["5-0"]);
} }
if (this.props.location.pathname.includes("delete-data")) { if (location.pathname.includes("delete-data")) {
this.setState({ selectedKeys: ["6-0"] }); setSelectedKeys(["6-0"]);
} }
if (this.props.location.pathname.includes("payments")) { if (location.pathname.includes("payments")) {
this.setState({ selectedKeys: ["7-0"] }); setSelectedKeys(["7-0"]);
}
} }
} }
}, [tReady, setIsLoadedArticleBody, location.pathname, selectedKeys]);
onSelect = (value) => { const onSelect = (value) => {
const { selectedKeys } = this.state;
const { toggleArticleOpen } = this.props;
if (isArrayEqual([value], selectedKeys)) { if (isArrayEqual([value], selectedKeys)) {
return; return;
} }
this.setState({ selectedKeys: [value + "-0"] }); setSelectedKeys([value + "-0"]);
if (isMobileOnly || isMobile()) { if (isMobileOnly || isMobile()) {
toggleArticleOpen(); toggleArticleOpen();
} }
const { match, history } = this.props; const settingsPath = `/portal-settings${getSelectedLinkByKey(
const settingsPath = getSelectedLinkByKey(value + "-0", settingsTree); value + "-0",
const newPath = match.path + settingsPath; settingsTree
const currentUrl = window.location.href.replace(window.location.origin, ""); )}`;
if (newPath === currentUrl) return; if (settingsPath === location.pathname) return;
history.push(newPath); navigate(`${settingsPath}`, { relative: false });
}; };
mapKeys = (tKey) => { const mapKeys = (tKey) => {
const { t } = this.props;
switch (tKey) { switch (tKey) {
case "AccessRights": case "AccessRights":
return t("Common:AccessRights"); return t("Common:AccessRights");
@ -237,11 +249,9 @@ class ArticleBodyContent extends React.Component {
} }
}; };
catalogItems = () => { const catalogItems = () => {
const { selectedKeys } = this.state;
const { showText, isNotPaidPeriod, t, isOwner } = this.props;
const items = []; const items = [];
let resultTree = [...settingsTree]; let resultTree = [...settingsTree];
if (isNotPaidPeriod) { if (isNotPaidPeriod) {
@ -261,6 +271,8 @@ class ArticleBodyContent extends React.Component {
} }
} }
if (selectedKeys.length === 0) return <></>;
resultTree.map((item) => { resultTree.map((item) => {
items.push( items.push(
<CatalogItem <CatalogItem
@ -268,10 +280,10 @@ class ArticleBodyContent extends React.Component {
id={item.key} id={item.key}
icon={item.icon} icon={item.icon}
showText={showText} showText={showText}
text={this.mapKeys(item.tKey)} text={mapKeys(item.tKey)}
value={item.link} value={item.link}
isActive={item.key === selectedKeys[0][0]} isActive={item.key === selectedKeys[0][0]}
onClick={() => this.onSelect(item.key)} onClick={() => onSelect(item.key)}
folderId={item.id} folderId={item.id}
style={{ marginTop: `${item.key.includes(7) ? "16px" : "0"}` }} style={{ marginTop: `${item.key.includes(7) ? "16px" : "0"}` }}
/> />
@ -281,13 +293,10 @@ class ArticleBodyContent extends React.Component {
return items; return items;
}; };
render() { const items = catalogItems();
const items = this.catalogItems();
const { isLoadedArticleBody } = this.props;
return !isLoadedArticleBody ? <LoaderArticleBody /> : <>{items}</>; return !isLoadedArticleBody ? <LoaderArticleBody /> : <>{items}</>;
} };
}
export default inject(({ auth, common }) => { export default inject(({ auth, common }) => {
const { isLoadedArticleBody, setIsLoadedArticleBody } = common; const { isLoadedArticleBody, setIsLoadedArticleBody } = common;
@ -306,8 +315,6 @@ export default inject(({ auth, common }) => {
}; };
})( })(
withLoading( withLoading(
withRouter(
withTranslation(["Settings", "Common"])(observer(ArticleBodyContent)) withTranslation(["Settings", "Common"])(observer(ArticleBodyContent))
) )
)
); );

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

@ -4,7 +4,7 @@ import ActionsHeaderTouchReactSvgUrl from "PUBLIC_DIR/images/actions.header.touc
import React from "react"; import React from "react";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { withRouter } from "react-router"; import { useNavigate, useLocation } from "react-router-dom";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import Headline from "@docspace/common/components/Headline"; import Headline from "@docspace/common/components/Headline";
import IconButton from "@docspace/components/icon-button"; import IconButton from "@docspace/components/icon-button";
@ -117,20 +117,29 @@ const StyledContainer = styled.div`
} }
`; `;
class SectionHeaderContent extends React.Component { const SectionHeaderContent = (props) => {
constructor(props) { const {
super(props); isBrandingAndCustomizationAvailable,
isRestoreAndAutoBackupAvailable,
tReady,
setIsLoadedSectionHeader,
} = props;
const { match, location } = props; const navigate = useNavigate();
const fullSettingsUrl = match.url; const location = useLocation();
const locationPathname = location.pathname;
const fullSettingsUrlLength = fullSettingsUrl.length; const [state, setState] = React.useState({
header: "",
isCategoryOrHeader: false,
showSelector: false,
isHeaderVisible: false,
});
const resultPath = locationPathname.slice(fullSettingsUrlLength + 1); React.useEffect(() => {
const arrayOfParams = resultPath.split("/"); const arrayOfParams = location.pathname.split("/");
const key = getKeyByLink(arrayOfParams, settingsTree); const key = getKeyByLink(arrayOfParams, settingsTree);
const currKey = key.length > 3 ? key : key[0]; const currKey = key.length > 3 ? key : key[0];
const header = getTKeyByKey(currKey, settingsTree); const header = getTKeyByKey(currKey, settingsTree);
const isCategory = checkPropertyByLink( const isCategory = checkPropertyByLink(
@ -144,20 +153,14 @@ class SectionHeaderContent extends React.Component {
"isHeader" "isHeader"
); );
this.state = { setState((val) => ({
...val,
header, header,
isCategoryOrHeader: isCategory || isHeader, isCategoryOrHeader: isCategory || isHeader,
showSelector: false, }));
isHeaderVisible: false, }, [location.pathname]);
};
}
isAvailableSettings = (key) => {
const {
isBrandingAndCustomizationAvailable,
isRestoreAndAutoBackupAvailable,
} = this.props;
const isAvailableSettings = (key) => {
switch (key) { switch (key) {
case "DNSSettings": case "DNSSettings":
return isBrandingAndCustomizationAvailable; return isBrandingAndCustomizationAvailable;
@ -167,14 +170,13 @@ class SectionHeaderContent extends React.Component {
return true; return true;
} }
}; };
componentDidUpdate() {
const { tReady, setIsLoadedSectionHeader } = this.props;
React.useEffect(() => {
if (tReady) setIsLoadedSectionHeader(true); if (tReady) setIsLoadedSectionHeader(true);
const arrayOfParams = this.getArrayOfParams(); const arrayOfParams = getArrayOfParams();
const key = getKeyByLink(arrayOfParams, settingsTree); const key = getKeyByLink(arrayOfParams, settingsTree, 2);
const currKey = key.length > 3 ? key : key[0]; const currKey = key.length > 3 ? key : key[0];
const header = getTKeyByKey(currKey, settingsTree); const header = getTKeyByKey(currKey, settingsTree);
const isCategory = checkPropertyByLink( const isCategory = checkPropertyByLink(
@ -189,83 +191,85 @@ class SectionHeaderContent extends React.Component {
); );
const isCategoryOrHeader = isCategory || isHeader; const isCategoryOrHeader = isCategory || isHeader;
const isNeedPaidIcon = !this.isAvailableSettings(header); const isNeedPaidIcon = !isAvailableSettings(header);
this.state.isNeedPaidIcon !== isNeedPaidIcon && state.isNeedPaidIcon !== isNeedPaidIcon &&
this.setState({ isNeedPaidIcon }); setState((val) => ({ ...val, isNeedPaidIcon }));
header !== this.state.header && this.setState({ header }); header !== state.header && setState((val) => ({ ...val, header }));
isCategoryOrHeader !== this.state.isCategoryOrHeader && isCategoryOrHeader !== state.isCategoryOrHeader &&
this.setState({ isCategoryOrHeader }); setState((val) => ({ ...val, isCategoryOrHeader }));
} }, [
tReady,
setIsLoadedSectionHeader,
getArrayOfParams,
isAvailableSettings,
state.isNeedPaidIcon,
state.header,
state.isCategoryOrHeader,
]);
onBackToParent = () => { const onBackToParent = () => {
let newArrayOfParams = this.getArrayOfParams(); let newArrayOfParams = getArrayOfParams();
newArrayOfParams.splice(-1, 1); newArrayOfParams.splice(-1, 1);
const newPath = "/portal-settings/" + newArrayOfParams.join("/"); const newPath = "/portal-settings/" + newArrayOfParams.join("/");
this.props.history.push( navigate(combineUrl(window.DocSpaceConfig?.proxy?.url, newPath));
combineUrl(window.DocSpaceConfig?.proxy?.url, newPath)
);
}; };
getArrayOfParams = () => { const getArrayOfParams = () => {
const { match, location } = this.props;
const fullSettingsUrl = match.url;
const locationPathname = location.pathname; const locationPathname = location.pathname;
const fullSettingsUrlLength = fullSettingsUrl.length; const resultPath = locationPathname;
const resultPath = locationPathname.slice(fullSettingsUrlLength + 1);
const arrayOfParams = resultPath.split("/").filter((param) => { const arrayOfParams = resultPath.split("/").filter((param) => {
return param !== "filter"; return param !== "filter";
}); });
return arrayOfParams; return arrayOfParams;
}; };
addUsers = (items) => { const addUsers = (items) => {
const { addUsers } = this.props; const { addUsers } = props;
if (!addUsers) return; if (!addUsers) return;
addUsers(items); addUsers(items);
}; };
onToggleSelector = (isOpen = !this.props.selectorIsOpen) => { const onToggleSelector = (isOpen = !props.selectorIsOpen) => {
const { toggleSelector } = this.props; const { toggleSelector } = props;
toggleSelector(isOpen); toggleSelector(isOpen);
}; };
onClose = () => { const onClose = () => {
const { deselectUser } = this.props; const { deselectUser } = props;
deselectUser(); deselectUser();
}; };
onCheck = (checked) => { const onCheck = (checked) => {
const { setSelected } = this.props; const { setSelected } = props;
setSelected(checked ? "all" : "close"); setSelected(checked ? "all" : "close");
}; };
onSelectAll = () => { const onSelectAll = () => {
const { setSelected } = this.props; const { setSelected } = props;
setSelected("all"); setSelected("all");
}; };
removeAdmins = () => { const removeAdmins = () => {
const { removeAdmins } = this.props; const { removeAdmins } = props;
if (!removeAdmins) return; if (!removeAdmins) return;
removeAdmins(); removeAdmins();
}; };
render() {
const { const {
t, t,
isLoadedSectionHeader, isLoadedSectionHeader,
addUsers,
isHeaderIndeterminate, isHeaderIndeterminate,
isHeaderChecked, isHeaderChecked,
isHeaderVisible, isHeaderVisible,
selection, selection,
} = this.props; } = props;
const { header, isCategoryOrHeader, isNeedPaidIcon } = this.state; const { header, isCategoryOrHeader, isNeedPaidIcon } = state;
const arrayOfParams = this.getArrayOfParams(); const arrayOfParams = getArrayOfParams();
const menuItems = ( const menuItems = (
<> <>
@ -273,7 +277,7 @@ class SectionHeaderContent extends React.Component {
key="all" key="all"
label={t("Common:SelectAll")} label={t("Common:SelectAll")}
data-index={1} data-index={1}
onClick={this.onSelectAll} onClick={onSelectAll}
/> />
</> </>
); );
@ -282,7 +286,7 @@ class SectionHeaderContent extends React.Component {
{ {
label: t("Common:Delete"), label: t("Common:Delete"),
disabled: !selection || !selection.length > 0, disabled: !selection || !selection.length > 0,
onClick: this.removeAdmins, onClick: removeAdmins,
iconUrl: DeleteReactSvgUrl, iconUrl: DeleteReactSvgUrl,
}, },
]; ];
@ -293,7 +297,7 @@ class SectionHeaderContent extends React.Component {
<div className="group-button-menu-container"> <div className="group-button-menu-container">
<TableGroupMenu <TableGroupMenu
checkboxOptions={menuItems} checkboxOptions={menuItems}
onChange={this.onCheck} onChange={onCheck}
isChecked={isHeaderChecked} isChecked={isHeaderChecked}
isIndeterminate={isHeaderIndeterminate} isIndeterminate={isHeaderIndeterminate}
headerMenu={headerMenu} headerMenu={headerMenu}
@ -308,7 +312,7 @@ class SectionHeaderContent extends React.Component {
iconName={ArrowPathReactSvgUrl} iconName={ArrowPathReactSvgUrl}
size="17" size="17"
isFill={true} isFill={true}
onClick={this.onBackToParent} onClick={onBackToParent}
className="arrow-button" className="arrow-button"
/> />
)} )}
@ -333,7 +337,7 @@ class SectionHeaderContent extends React.Component {
iconName={ActionsHeaderTouchReactSvgUrl} iconName={ActionsHeaderTouchReactSvgUrl}
size="17" size="17"
isFill={true} isFill={true}
onClick={this.onToggleSelector} onClick={onToggleSelector}
className="action-button" className="action-button"
/> />
</div> </div>
@ -342,8 +346,7 @@ class SectionHeaderContent extends React.Component {
)} )}
</StyledContainer> </StyledContainer>
); );
} };
}
export default inject(({ auth, setup, common }) => { export default inject(({ auth, setup, common }) => {
const { currentQuotaStore } = auth; const { currentQuotaStore } = auth;
@ -386,8 +389,6 @@ export default inject(({ auth, setup, common }) => {
}; };
})( })(
withLoading( withLoading(
withRouter(
withTranslation(["Settings", "Common"])(observer(SectionHeaderContent)) withTranslation(["Settings", "Common"])(observer(SectionHeaderContent))
) )
)
); );

18
packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js
View File

@ -8,7 +8,7 @@ import Button from "@docspace/components/button";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { combineUrl } from "@docspace/common/utils"; import { combineUrl } from "@docspace/common/utils";
import config from "PACKAGE_FILE"; import config from "PACKAGE_FILE";
import history from "@docspace/common/history"; import { useNavigate } from "react-router-dom";
import { isMobileOnly } from "react-device-detect"; import { isMobileOnly } from "react-device-detect";
import { isSmallTablet } from "@docspace/components/utils/device"; import { isSmallTablet } from "@docspace/components/utils/device";
import checkScrollSettingsBlock from "../utils"; import checkScrollSettingsBlock from "../utils";
@ -36,6 +36,7 @@ const DNSSettings = (props) => {
const [hasScroll, setHasScroll] = useState(false); const [hasScroll, setHasScroll] = useState(false);
const isLoadedSetting = isLoaded && tReady; const isLoadedSetting = isLoaded && tReady;
const [isCustomizationView, setIsCustomizationView] = useState(false); const [isCustomizationView, setIsCustomizationView] = useState(false);
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
setDocumentTitle(t("DNSSettings")); setDocumentTitle(t("DNSSettings"));
@ -53,9 +54,8 @@ const DNSSettings = (props) => {
} }
// TODO: Remove div with height 64 and remove settings-mobile class // TODO: Remove div with height 64 and remove settings-mobile class
const settingsMobile = document.getElementsByClassName( const settingsMobile =
"settings-mobile" document.getElementsByClassName("settings-mobile")[0];
)[0];
if (settingsMobile) { if (settingsMobile) {
settingsMobile.style.display = "none"; settingsMobile.style.display = "none";
@ -89,7 +89,7 @@ const DNSSettings = (props) => {
if (newUrl === currentUrl) return; if (newUrl === currentUrl) return;
history.push(newUrl); navigate(newUrl);
} else { } else {
setIsCustomizationView(false); setIsCustomizationView(false);
} }
@ -169,12 +169,8 @@ const DNSSettings = (props) => {
export default inject(({ auth, common }) => { export default inject(({ auth, common }) => {
const { theme, helpLink } = auth.settingsStore; const { theme, helpLink } = auth.settingsStore;
const { const { isLoaded, setIsLoadedDNSSettings, initSettings, setIsLoaded } =
isLoaded, common;
setIsLoadedDNSSettings,
initSettings,
setIsLoaded,
} = common;
const { currentQuotaStore } = auth; const { currentQuotaStore } = auth;
const { isBrandingAndCustomizationAvailable } = currentQuotaStore; const { isBrandingAndCustomizationAvailable } = currentQuotaStore;
return { return {

447
packages/client/src/pages/PortalSettings/categories/common/Customization/language-and-time-zone.js
View File

@ -13,7 +13,7 @@ import { LANGUAGE, COOKIE_EXPIRATION_YEAR } from "@docspace/common/constants";
import { LanguageTimeSettingsTooltip } from "../sub-components/common-tooltips"; import { LanguageTimeSettingsTooltip } from "../sub-components/common-tooltips";
import { combineUrl, setCookie } from "@docspace/common/utils"; import { combineUrl, setCookie } from "@docspace/common/utils";
import config from "PACKAGE_FILE"; import config from "PACKAGE_FILE";
import history from "@docspace/common/history"; import { useNavigate } from "react-router-dom";
import { isMobileOnly } from "react-device-detect"; import { isMobileOnly } from "react-device-detect";
import { isSmallTablet } from "@docspace/components/utils/device"; import { isSmallTablet } from "@docspace/components/utils/device";
import checkScrollSettingsBlock from "../utils"; import checkScrollSettingsBlock from "../utils";
@ -45,127 +45,7 @@ let timezoneDefaultFromSessionStorage = "";
const settingNames = ["language", "timezone"]; const settingNames = ["language", "timezone"];
class LanguageAndTimeZone extends React.Component { const LanguageAndTimeZone = (props) => {
constructor(props) {
super(props);
const { t } = props;
languageFromSessionStorage = getFromSessionStorage("language");
languageDefaultFromSessionStorage = getFromSessionStorage(
"languageDefault"
);
timezoneFromSessionStorage = getFromSessionStorage("timezone");
timezoneDefaultFromSessionStorage = getFromSessionStorage(
"timezoneDefault"
);
setDocumentTitle(t("StudioTimeLanguageSettings"));
this.state = {
isLoading: false,
timezone: timezoneFromSessionStorage || "",
timezoneDefault: timezoneDefaultFromSessionStorage || "",
language: languageFromSessionStorage || "",
languageDefault: languageDefaultFromSessionStorage || "",
hasChanged: false,
showReminder: false,
hasScroll: false,
isCustomizationView: false,
};
}
componentDidMount() {
const { languageDefault, timezoneDefault } = this.state;
const {
i18n,
language,
timezone,
rawTimezones,
portalTimeZoneId,
isLoaded,
cultures,
portalLanguage,
tReady,
setIsLoadedLngTZSettings,
initSettings,
setIsLoaded,
} = this.props;
if (!isLoaded) initSettings().then(() => setIsLoaded(true));
const isLoadedSetting =
isLoaded && tReady && this.state.timezone && this.state.language;
if (isLoadedSetting) {
setIsLoadedLngTZSettings(isLoadedSetting);
}
this.checkInnerWidth();
window.addEventListener("resize", this.checkInnerWidth);
if (
rawTimezones.length > 0 &&
isLoaded === true &&
tReady === true &&
this.state.timezone === ""
) {
const timezones = mapTimezonesToArray(rawTimezones);
const timezone =
timezoneFromSessionStorage ||
findSelectedItemByKey(timezones, portalTimeZoneId) ||
rawTimezones[0];
const timezoneDefault =
findSelectedItemByKey(timezones, portalTimeZoneId) || timezones[0];
this.setState({
timezone,
timezoneDefault,
});
}
if (
cultures.length > 0 &&
isLoaded === true &&
tReady === true &&
this.state.language === ""
) {
const cultureNames = mapCulturesToArray(cultures, i18n);
const language =
languageFromSessionStorage ||
findSelectedItemByKey(cultureNames, portalLanguage) ||
cultureNames[0];
const languageDefault =
findSelectedItemByKey(cultureNames, portalLanguage) || cultureNames[0];
this.setState({
language,
languageDefault,
});
}
if (!languageDefault) {
this.setState({
languageDefault: language,
});
}
if (timezoneDefault || timezone) {
this.checkChanges();
}
if (languageDefault || language) {
this.checkChanges();
}
}
componentDidUpdate(prevProps, prevState) {
const { timezoneDefault, languageDefault, hasScroll } = this.state;
const { const {
i18n, i18n,
language, language,
@ -177,27 +57,59 @@ class LanguageAndTimeZone extends React.Component {
portalLanguage, portalLanguage,
tReady, tReady,
setIsLoadedLngTZSettings, setIsLoadedLngTZSettings,
} = this.props; t,
setIsLoaded,
timezone,
initSettings,
} = props;
const navigate = useNavigate();
const [state, setState] = React.useState({
isLoading: false,
timezone: "",
timezoneDefault: "",
language: "",
languageDefault: "",
hasChanged: false,
showReminder: false,
hasScroll: false,
isCustomizationView: false,
});
const prevProps = React.useRef({ language: "", tReady: "", isLoaded: "" });
const prevState = React.useRef({ language: "", timezone: "" });
React.useEffect(() => {
languageFromSessionStorage = getFromSessionStorage("language");
languageDefaultFromSessionStorage =
getFromSessionStorage("languageDefault");
timezoneFromSessionStorage = getFromSessionStorage("timezone");
timezoneDefaultFromSessionStorage =
getFromSessionStorage("timezoneDefault");
setDocumentTitle(t("StudioTimeLanguageSettings"));
if (!isLoaded) initSettings().then(() => setIsLoaded(true));
if (
isLoaded !== prevProps.isLoaded ||
tReady !== prevProps.tReady ||
this.state.language !== prevState.language ||
this.state.timezone !== prevState.timezone
) {
const isLoadedSetting = const isLoadedSetting =
isLoaded && tReady && this.state.timezone && this.state.language; isLoaded &&
tReady &&
timezoneFromSessionStorage &&
languageFromSessionStorage;
if (isLoadedSetting) { if (isLoadedSetting) {
setIsLoadedLngTZSettings(isLoadedSetting); setIsLoadedLngTZSettings(isLoadedSetting);
} }
} checkInnerWidth();
window.addEventListener("resize", checkInnerWidth);
if ( if (
rawTimezones.length > 0 && rawTimezones.length > 0 &&
isLoaded === true && isLoaded &&
tReady === true && tReady &&
this.state.timezone === "" timezoneFromSessionStorage === ""
) { ) {
const timezones = mapTimezonesToArray(rawTimezones); const timezones = mapTimezonesToArray(rawTimezones);
@ -209,19 +121,104 @@ class LanguageAndTimeZone extends React.Component {
const timezoneDefault = const timezoneDefault =
findSelectedItemByKey(timezones, portalTimeZoneId) || timezones[0]; findSelectedItemByKey(timezones, portalTimeZoneId) || timezones[0];
this.setState({ setState((val) => ({
...val,
timezone, timezone,
timezoneDefault, timezoneDefault,
}); }));
} }
if ( if (
cultures.length > 0 && cultures.length > 0 &&
isLoaded === true && isLoaded &&
tReady === true && tReady &&
this.state.language === "" languageFromSessionStorage === ""
) { ) {
const cultureNames = mapCulturesToArray(cultures, i18n); const cultureNames = mapCulturesToArray(cultures, i18n);
const language =
languageFromSessionStorage ||
findSelectedItemByKey(cultureNames, portalLanguage) ||
cultureNames[0];
const languageDefault =
findSelectedItemByKey(cultureNames, portalLanguage) || cultureNames[0];
setState((val) => ({
...val,
language,
languageDefault,
}));
}
if (!languageDefaultFromSessionStorage) {
setState((val) => ({
...val,
languageDefault: languageFromSessionStorage,
}));
}
if (timezoneDefaultFromSessionStorage || timezone) {
checkChanges();
}
if (languageDefaultFromSessionStorage || language) {
checkChanges();
}
return () => {
window.removeEventListener("resize", checkInnerWidth);
};
}, []);
React.useState(() => {
prevProps.current = {
language: language,
tReady: tReady,
isLoaded: isLoaded,
};
}, [language, tReady, isLoaded]);
React.useState(() => {
prevState.current = { language: state.language, timezone: state.timezone };
}, [state.language, state.timezone]);
React.useEffect(() => {
const { timezoneDefault, languageDefault, hasScroll } = state;
if (
isLoaded !== prevProps.current.isLoaded ||
tReady !== prevProps.current.tReady ||
state.language !== prevState.current.language ||
state.timezone !== prevState.current.timezone
) {
const isLoadedSetting =
isLoaded && tReady && state.timezone && state.language;
if (isLoadedSetting) {
setIsLoadedLngTZSettings(isLoadedSetting);
}
}
if (
rawTimezones.length > 0 &&
isLoaded &&
tReady &&
state.timezone === ""
) {
const timezones = mapTimezonesToArray(rawTimezones);
const timezone =
timezoneFromSessionStorage ||
findSelectedItemByKey(timezones, portalTimeZoneId) ||
rawTimezones[0];
const timezoneDefault =
findSelectedItemByKey(timezones, portalTimeZoneId) || timezones[0];
setState((val) => ({ ...val, timezone, timezoneDefault }));
}
if (cultures.length > 0 && isLoaded && tReady && state.language === "") {
const cultureNames = mapCulturesToArray(cultures, i18n);
const language = const language =
languageFromSessionStorage || languageFromSessionStorage ||
findSelectedItemByKey(cultureNames, portalLanguage) || findSelectedItemByKey(cultureNames, portalLanguage) ||
@ -230,10 +227,7 @@ class LanguageAndTimeZone extends React.Component {
const languageDefault = const languageDefault =
findSelectedItemByKey(cultureNames, portalLanguage) || cultureNames[0]; findSelectedItemByKey(cultureNames, portalLanguage) || cultureNames[0];
this.setState({ setState((val) => ({ ...val, language, languageDefault }));
language,
languageDefault,
});
} }
const checkScroll = checkScrollSettingsBlock(); const checkScroll = checkScrollSettingsBlock();
@ -242,67 +236,81 @@ class LanguageAndTimeZone extends React.Component {
const scrollLngTZSettings = checkScroll(); const scrollLngTZSettings = checkScroll();
if (scrollLngTZSettings !== hasScroll) { if (scrollLngTZSettings !== hasScroll) {
this.setState({ setState((val) => ({ ...val, hasScroll: scrollLngTZSettings }));
hasScroll: scrollLngTZSettings,
});
} }
// TODO: Remove div with height 64 and remove settings-mobile class // TODO: Remove div with height 64 and remove settings-mobile class
const settingsMobile = document.getElementsByClassName( const settingsMobile =
"settings-mobile" document.getElementsByClassName("settings-mobile")[0];
)[0];
if (settingsMobile) { if (settingsMobile) {
settingsMobile.style.display = "none"; settingsMobile.style.display = "none";
} }
if (language !== prevProps.language) { if (language !== prevProps.current.language) {
i18n.changeLanguage(language).then(() => { i18n.changeLanguage(language).then(() => {
const newLocaleSelectedLanguage = const newLocaleSelectedLanguage =
findSelectedItemByKey(cultureNames, this.state.language.key) || findSelectedItemByKey(cultureNames, state.language.key) ||
cultureNames[0]; cultureNames[0];
this.setState({ setState((val) => ({
...val,
language: languageFromSessionStorage || newLocaleSelectedLanguage, language: languageFromSessionStorage || newLocaleSelectedLanguage,
}); }));
}); });
} }
if (timezoneDefault && languageDefault) { if (timezoneDefault && languageDefault) {
this.checkChanges(); checkChanges();
}
} }
}, [
state.timezoneDefault,
state.languageDefault,
state.hasScroll,
state.timezone,
state.language,
i18n,
language,
cultureNames,
rawTimezones,
portalTimeZoneId,
isLoaded,
cultures,
portalLanguage,
tReady,
setIsLoadedLngTZSettings,
componentWillUnmount() { timezone,
window.removeEventListener("resize", this.checkInnerWidth);
}
onLanguageSelect = (language) => { initSettings,
this.setState({ language }); ]);
if (this.settingIsEqualInitialValue("language", language)) {
const onLanguageSelect = (language) => {
setState((val) => ({ ...val, language }));
if (settingIsEqualInitialValue("language", language)) {
saveToSessionStorage("language", ""); saveToSessionStorage("language", "");
saveToSessionStorage("languageDefault", ""); saveToSessionStorage("languageDefault", "");
} else { } else {
saveToSessionStorage("language", language); saveToSessionStorage("language", language);
} }
this.checkChanges(); checkChanges();
}; };
onTimezoneSelect = (timezone) => { const onTimezoneSelect = (timezone) => {
this.setState({ timezone }); setState((val) => ({ ...val, timezone }));
if (this.settingIsEqualInitialValue("timezone", timezone)) { if (settingIsEqualInitialValue("timezone", timezone)) {
saveToSessionStorage("timezone", ""); saveToSessionStorage("timezone", "");
saveToSessionStorage("timezoneDefault", ""); saveToSessionStorage("timezoneDefault", "");
} else { } else {
saveToSessionStorage("timezone", timezone); saveToSessionStorage("timezone", timezone);
} }
this.checkChanges(); checkChanges();
}; };
onSaveLngTZSettings = () => { const onSaveLngTZSettings = () => {
const { t, setLanguageAndTime, user, language: lng } = this.props; const { t, setLanguageAndTime, user, language: lng } = props;
const { language, timezone } = this.state; const { language, timezone } = state;
this.setState({ isLoading: true }, function () { setState((val) => ({ ...val, isLoading: true }));
setLanguageAndTime(language.key, timezone.key) setLanguageAndTime(language.key, timezone.key)
.then( .then(
() => () =>
@ -316,72 +324,69 @@ class LanguageAndTimeZone extends React.Component {
() => !user.cultureName && lng !== language.key && location.reload() () => !user.cultureName && lng !== language.key && location.reload()
) )
.catch((error) => toastr.error(error)) .catch((error) => toastr.error(error))
.finally(() => this.setState({ isLoading: false })); .finally(() => setState((val) => ({ ...val, isLoading: false })));
});
this.setState({ setState((val) => ({
...val,
showReminder: false, showReminder: false,
timezoneDefault: this.state.timezone, timezoneDefault: state.timezone,
languageDefault: this.state.language, languageDefault: state.language,
}); }));
saveToSessionStorage("languageDefault", language); saveToSessionStorage("languageDefault", language);
saveToSessionStorage("timezoneDefault", timezone); saveToSessionStorage("timezoneDefault", timezone);
}; };
onCancelClick = () => { const onCancelClick = () => {
settingNames.forEach((settingName) => { settingNames.forEach((settingName) => {
const valueFromSessionStorage = getFromSessionStorage(settingName); const valueFromSessionStorage = getFromSessionStorage(settingName);
if ( if (
valueFromSessionStorage !== "none" && valueFromSessionStorage !== "none" &&
valueFromSessionStorage !== null && valueFromSessionStorage !== null &&
!this.settingIsEqualInitialValue(settingName, valueFromSessionStorage) !settingIsEqualInitialValue(settingName, valueFromSessionStorage)
) { ) {
const defaultValue = this.state[settingName + "Default"]; const defaultValue = state[settingName + "Default"];
this.setState({ [settingName]: defaultValue || null }); setState((val) => ({ ...val, [settingName]: defaultValue || null }));
saveToSessionStorage(settingName, ""); saveToSessionStorage(settingName, "");
} }
}); });
this.setState({ setState((val) => ({ ...val, showReminder: false }));
showReminder: false,
});
this.checkChanges(); checkChanges();
}; };
settingIsEqualInitialValue = (settingName, value) => { const settingIsEqualInitialValue = (settingName, value) => {
const defaultValue = JSON.stringify(this.state[settingName + "Default"]); const defaultValue = JSON.stringify(state[settingName + "Default"]);
const currentValue = JSON.stringify(value); const currentValue = JSON.stringify(value);
return defaultValue === currentValue; return defaultValue === currentValue;
}; };
checkChanges = () => { const checkChanges = () => {
let hasChanged = false; let hasChanged = false;
settingNames.forEach((settingName) => { settingNames.forEach((settingName) => {
const valueFromSessionStorage = getFromSessionStorage(settingName); const valueFromSessionStorage = getFromSessionStorage(settingName);
if ( if (
valueFromSessionStorage && valueFromSessionStorage &&
!this.settingIsEqualInitialValue(settingName, valueFromSessionStorage) !settingIsEqualInitialValue(settingName, valueFromSessionStorage)
) )
hasChanged = true; hasChanged = true;
}); });
if (hasChanged !== this.state.hasChanged) { if (hasChanged !== state.hasChanged) {
this.setState({ setState((val) => ({
...val,
hasChanged: hasChanged, hasChanged: hasChanged,
showReminder: hasChanged, showReminder: hasChanged,
}); }));
} }
}; };
checkInnerWidth = () => { const checkInnerWidth = () => {
if (!isSmallTablet()) { if (!isSmallTablet()) {
this.setState({ setState((val) => ({ ...val, isCustomizationView: true }));
isCustomizationView: true,
});
const currentUrl = window.location.href.replace( const currentUrl = window.location.href.replace(
window.location.origin, window.location.origin,
@ -396,44 +401,37 @@ class LanguageAndTimeZone extends React.Component {
if (newUrl === currentUrl) return; if (newUrl === currentUrl) return;
history.push(newUrl); navigate(newUrl);
} else { } else {
this.setState({ setState((val) => ({ ...val, isCustomizationView: false }));
isCustomizationView: false,
});
} }
}; };
onClickLink = (e) => { const onClickLink = (e) => {
e.preventDefault(); e.preventDefault();
history.push(e.target.pathname); navigate(e.target.pathname);
}; };
render() {
const { const {
t,
theme, theme,
isMobileView, isMobileView,
rawTimezones,
cultures,
i18n,
isLoadedPage, isLoadedPage,
helpLink, helpLink,
organizationName, organizationName,
currentColorScheme, currentColorScheme,
} = this.props; } = props;
const { const {
language,
isLoading, isLoading,
timezone,
showReminder, showReminder,
hasScroll, hasScroll,
isCustomizationView, isCustomizationView,
} = this.state; } = state;
const timezones = mapTimezonesToArray(rawTimezones); const timezones = mapTimezonesToArray(rawTimezones);
const cultureNames = mapCulturesToArray(cultures, i18n); const cultureNamesNew = mapCulturesToArray(cultures, i18n);
const tooltipLanguageTimeSettings = ( const tooltipLanguageTimeSettings = (
<LanguageTimeSettingsTooltip <LanguageTimeSettingsTooltip
@ -445,7 +443,7 @@ class LanguageAndTimeZone extends React.Component {
/> />
); );
const settingsBlock = !(language && timezone) ? null : ( const settingsBlock = !(state.language && state.timezone) ? null : (
<div className="settings-block"> <div className="settings-block">
<FieldContainer <FieldContainer
id="fieldContainerLanguage" id="fieldContainerLanguage"
@ -455,9 +453,9 @@ class LanguageAndTimeZone extends React.Component {
<ComboBox <ComboBox
tabIndex={1} tabIndex={1}
id="comboBoxLanguage" id="comboBoxLanguage"
options={cultureNames} options={cultureNamesNew}
selectedOption={language} selectedOption={state.language}
onSelect={this.onLanguageSelect} onSelect={onLanguageSelect}
isDisabled={isLoading} isDisabled={isLoading}
noBorder={false} noBorder={false}
scaled={true} scaled={true}
@ -476,8 +474,8 @@ class LanguageAndTimeZone extends React.Component {
tabIndex={2} tabIndex={2}
id="comboBoxTimezone" id="comboBoxTimezone"
options={timezones} options={timezones}
selectedOption={timezone} selectedOption={state.timezone}
onSelect={this.onTimezoneSelect} onSelect={onTimezoneSelect}
isDisabled={isLoading} isDisabled={isLoading}
noBorder={false} noBorder={false}
scaled={true} scaled={true}
@ -518,8 +516,8 @@ class LanguageAndTimeZone extends React.Component {
<SaveCancelButtons <SaveCancelButtons
tabIndex={3} tabIndex={3}
className="save-cancel-buttons" className="save-cancel-buttons"
onSaveClick={this.onSaveLngTZSettings} onSaveClick={onSaveLngTZSettings}
onCancelClick={this.onCancelClick} onCancelClick={onCancelClick}
showReminder={showReminder} showReminder={showReminder}
reminderTest={t("YouHaveUnsavedChanges")} reminderTest={t("YouHaveUnsavedChanges")}
saveButtonLabel={t("Common:SaveButton")} saveButtonLabel={t("Common:SaveButton")}
@ -529,8 +527,7 @@ class LanguageAndTimeZone extends React.Component {
/> />
</StyledSettingsComponent> </StyledSettingsComponent>
); );
} };
}
export default inject(({ auth, setup, common }) => { export default inject(({ auth, setup, common }) => {
const { const {
@ -549,12 +546,8 @@ export default inject(({ auth, setup, common }) => {
const { user } = auth.userStore; const { user } = auth.userStore;
const { setLanguageAndTime } = setup; const { setLanguageAndTime } = setup;
const { const { isLoaded, setIsLoadedLngTZSettings, initSettings, setIsLoaded } =
isLoaded, common;
setIsLoadedLngTZSettings,
initSettings,
setIsLoaded,
} = common;
return { return {
theme: auth.settingsStore.theme, theme: auth.settingsStore.theme,
user, user,

26
packages/client/src/pages/PortalSettings/categories/common/Customization/portal-renaming.js
View File

@ -9,7 +9,7 @@ import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { combineUrl } from "@docspace/common/utils"; import { combineUrl } from "@docspace/common/utils";
import config from "PACKAGE_FILE"; import config from "PACKAGE_FILE";
import history from "@docspace/common/history"; import { useNavigate } from "react-router-dom";
import { isMobileOnly } from "react-device-detect"; import { isMobileOnly } from "react-device-detect";
import { isSmallTablet } from "@docspace/components/utils/device"; import { isSmallTablet } from "@docspace/components/utils/device";
import checkScrollSettingsBlock from "../utils"; import checkScrollSettingsBlock from "../utils";
@ -36,11 +36,12 @@ const PortalRenaming = (props) => {
domain, domain,
} = props; } = props;
const navigate = useNavigate();
const portalNameFromSessionStorage = getFromSessionStorage("portalName"); const portalNameFromSessionStorage = getFromSessionStorage("portalName");
const portalNameDefaultFromSessionStorage = getFromSessionStorage( const portalNameDefaultFromSessionStorage =
"portalNameDefault" getFromSessionStorage("portalNameDefault");
);
const portalNameInitially = const portalNameInitially =
portalNameFromSessionStorage === null || portalNameFromSessionStorage === null ||
@ -98,9 +99,8 @@ const PortalRenaming = (props) => {
} }
// TODO: Remove div with height 64 and remove settings-mobile class // TODO: Remove div with height 64 and remove settings-mobile class
const settingsMobile = document.getElementsByClassName( const settingsMobile =
"settings-mobile" document.getElementsByClassName("settings-mobile")[0];
)[0];
if (settingsMobile) { if (settingsMobile) {
settingsMobile.style.display = "none"; settingsMobile.style.display = "none";
@ -129,7 +129,7 @@ const PortalRenaming = (props) => {
setPortalName(portalName); setPortalName(portalName);
setPortalNameDefault(portalName); setPortalNameDefault(portalName);
window.location.href = res; navigate(res);
}) })
.catch((error) => { .catch((error) => {
let errorMessage = ""; let errorMessage = "";
@ -260,7 +260,7 @@ const PortalRenaming = (props) => {
if (newUrl === currentUrl) return; if (newUrl === currentUrl) return;
history.push(newUrl); navigate(newUrl);
} else { } else {
setIsCustomizationView(false); setIsCustomizationView(false);
} }
@ -340,12 +340,8 @@ const PortalRenaming = (props) => {
export default inject(({ auth, setup, common }) => { export default inject(({ auth, setup, common }) => {
const { theme, tenantAlias, baseDomain } = auth.settingsStore; const { theme, tenantAlias, baseDomain } = auth.settingsStore;
const { setPortalRename, getAllSettings } = setup; const { setPortalRename, getAllSettings } = setup;
const { const { isLoaded, setIsLoadedPortalRenaming, initSettings, setIsLoaded } =
isLoaded, common;
setIsLoadedPortalRenaming,
initSettings,
setIsLoaded,
} = common;
return { return {
theme, theme,
setPortalRename, setPortalRename,

287
packages/client/src/pages/PortalSettings/categories/common/Customization/welcome-page-settings.js
View File

@ -12,7 +12,7 @@ import { inject, observer } from "mobx-react";
import { CustomTitlesTooltip } from "../sub-components/common-tooltips"; import { CustomTitlesTooltip } from "../sub-components/common-tooltips";
import { combineUrl } from "@docspace/common/utils"; import { combineUrl } from "@docspace/common/utils";
import config from "PACKAGE_FILE"; import config from "PACKAGE_FILE";
import history from "@docspace/common/history"; import { useNavigate } from "react-router-dom";
import { isMobileOnly } from "react-device-detect"; import { isMobileOnly } from "react-device-detect";
import { isSmallTablet } from "@docspace/components/utils/device"; import { isSmallTablet } from "@docspace/components/utils/device";
import checkScrollSettingsBlock from "../utils"; import checkScrollSettingsBlock from "../utils";
@ -24,12 +24,50 @@ let greetingTitleFromSessionStorage = "";
let greetingTitleDefaultFromSessionStorage = ""; let greetingTitleDefaultFromSessionStorage = "";
const settingNames = ["greetingTitle"]; const settingNames = ["greetingTitle"];
class WelcomePageSettings extends React.Component { const WelcomePageSettings = (props) => {
constructor(props) { const {
super(props); t,
greetingSettings,
isLoaded,
setIsLoadedWelcomePageSettings,
tReady,
initSettings,
setIsLoaded,
setGreetingTitle,
restoreGreetingTitle,
isMobileView,
isLoadedPage,
greetingSettingsIsDefault,
const { t, greetingSettings /*, organizationName*/ } = props; getSettings,
getGreetingSettingsIsDefault,
} = props;
const navigate = useNavigate();
const [state, setState] = React.useState({
isLoading: false,
greetingTitle: "",
greetingTitleDefault: "",
isLoadingGreetingSave: false,
isLoadingGreetingRestore: false,
hasChanged: false,
showReminder: false,
hasScroll: false,
isCustomizationView: false,
});
const prevState = React.useRef({
isLoadingGreetingSave: false,
isLoadingGreetingRestore: false,
});
const prevProps = React.useRef({
isLoaded: "",
tReady: "",
greetingSettings: "",
});
React.useEffect(() => {
greetingTitleFromSessionStorage = getFromSessionStorage("greetingTitle"); greetingTitleFromSessionStorage = getFromSessionStorage("greetingTitle");
greetingTitleDefaultFromSessionStorage = getFromSessionStorage( greetingTitleDefaultFromSessionStorage = getFromSessionStorage(
@ -50,61 +88,35 @@ class WelcomePageSettings extends React.Component {
? greetingSettings ? greetingSettings
: greetingTitleDefaultFromSessionStorage; : greetingTitleDefaultFromSessionStorage;
this.state = {
isLoading: false,
greetingTitle,
greetingTitleDefault,
isLoadingGreetingSave: false,
isLoadingGreetingRestore: false,
hasChanged: false,
showReminder: false,
hasScroll: false,
isCustomizationView: false,
};
}
componentDidMount() {
const {
isLoaded,
setIsLoadedWelcomePageSettings,
tReady,
initSettings,
setIsLoaded,
} = this.props;
const { greetingTitleDefault, greetingTitle } = this.state;
if (!isLoaded) initSettings().then(() => setIsLoaded(true)); if (!isLoaded) initSettings().then(() => setIsLoaded(true));
this.checkInnerWidth(); checkInnerWidth();
window.addEventListener("resize", this.checkInnerWidth); window.addEventListener("resize", checkInnerWidth);
const isLoadedSetting = isLoaded && tReady; const isLoadedSetting = isLoaded && tReady;
if (isLoadedSetting) setIsLoadedWelcomePageSettings(isLoadedSetting); if (isLoadedSetting) setIsLoadedWelcomePageSettings(isLoadedSetting);
if (greetingTitleDefault || greetingTitle) { if (greetingTitleDefault || greetingTitle) {
this.checkChanges(); checkChanges();
}
} }
componentDidUpdate(prevProps, prevState) { setState((val) => ({
const { ...val,
isLoaded,
setIsLoadedWelcomePageSettings,
tReady,
greetingSettings,
getSettings,
getGreetingSettingsIsDefault,
} = this.props;
const {
hasScroll,
greetingTitle, greetingTitle,
isLoadingGreetingSave, greetingTitleDefault,
isLoadingGreetingRestore, }));
} = this.state;
if (isLoaded !== prevProps.isLoaded || tReady !== prevProps.tReady) { return () => {
window.removeEventListener("resize", checkInnerWidth);
};
}, []);
React.useEffect(() => {
if (
isLoaded !== prevProps.current.isLoaded ||
tReady !== prevProps.current.tReady
) {
const isLoadedSetting = isLoaded && tReady; const isLoadedSetting = isLoaded && tReady;
if (isLoadedSetting) { if (isLoadedSetting) {
@ -117,92 +129,104 @@ class WelcomePageSettings extends React.Component {
window.addEventListener("resize", checkScroll); window.addEventListener("resize", checkScroll);
const scrollLngTZSettings = checkScroll(); const scrollLngTZSettings = checkScroll();
if (scrollLngTZSettings !== hasScroll) { if (scrollLngTZSettings !== state.hasScroll) {
this.setState({ setState((val) => ({ ...val, hasScroll: scrollLngTZSettings }));
hasScroll: scrollLngTZSettings,
});
} }
// TODO: Remove div with height 64 and remove settings-mobile class // TODO: Remove div with height 64 and remove settings-mobile class
const settingsMobile = document.getElementsByClassName( const settingsMobile =
"settings-mobile" document.getElementsByClassName("settings-mobile")[0];
)[0];
if (settingsMobile) { if (settingsMobile) {
settingsMobile.style.display = "none"; settingsMobile.style.display = "none";
} }
if (greetingSettings !== prevProps.greetingSettings) { if (greetingSettings !== prevProps.greetingSettings) {
this.setState({ setState((val) => ({ ...val, greetingTitle: greetingSettings }));
greetingTitle: greetingSettings,
});
} }
if (this.state.greetingTitleDefault || greetingTitle) { if (state.greetingTitleDefault || state.greetingTitle) {
this.checkChanges(); checkChanges();
} }
if ( if (
(isLoadingGreetingSave !== prevState.isLoadingGreetingSave && (state.isLoadingGreetingSave !== prevState.isLoadingGreetingSave &&
isLoadingGreetingSave === false) || state.isLoadingGreetingSave === false) ||
(isLoadingGreetingRestore !== prevState.isLoadingGreetingRestore && (state.isLoadingGreetingRestore !== prevState.isLoadingGreetingRestore &&
isLoadingGreetingRestore === false) state.isLoadingGreetingRestore === false)
) { ) {
getSettings(); getSettings();
getGreetingSettingsIsDefault(); getGreetingSettingsIsDefault();
} }
} }, [
isLoaded,
setIsLoadedWelcomePageSettings,
tReady,
greetingSettings,
getSettings,
getGreetingSettingsIsDefault,
state.hasScroll,
state.greetingTitle,
state.isLoadingGreetingSave,
state.isLoadingGreetingRestore,
]);
componentWillUnmount() { React.useEffect(() => {
window.removeEventListener("resize", this.checkInnerWidth); prevProps.current = { isLoaded, tReady, greetingSettings };
} }, [isLoaded, tReady, greetingSettings]);
onChangeGreetingTitle = (e) => { React.useEffect(() => {
this.setState({ greetingTitle: e.target.value }); prevState.current = {
isLoadingGreetingSave: state.isLoadingGreetingSave,
isLoadingGreetingRestore: state.isLoadingGreetingRestore,
};
}, [state.isLoadingGreetingSave, state.isLoadingGreetingRestore]);
if (this.settingIsEqualInitialValue("greetingTitle", e.target.value)) { const onChangeGreetingTitle = (e) => {
setState((val) => ({ ...val, greetingTitle: e.target.value }));
if (settingIsEqualInitialValue("greetingTitle", e.target.value)) {
saveToSessionStorage("greetingTitle", "none"); saveToSessionStorage("greetingTitle", "none");
saveToSessionStorage("greetingTitleDefault", "none"); saveToSessionStorage("greetingTitleDefault", "none");
} else { } else {
saveToSessionStorage("greetingTitle", e.target.value); saveToSessionStorage("greetingTitle", e.target.value);
this.setState({ setState((val) => ({
...val,
showReminder: true, showReminder: true,
}); }));
} }
this.checkChanges(); checkChanges();
}; };
onSaveGreetingSettings = () => { const onSaveGreetingSettings = () => {
const { setGreetingTitle, t } = this.props; const { greetingTitle } = state;
const { greetingTitle } = this.state; setState((val) => ({ ...val, isLoadingGreetingSave: true }));
this.setState({ isLoadingGreetingSave: true }, function () {
setGreetingTitle(greetingTitle) setGreetingTitle(greetingTitle)
.then(() => { .then(() => {
toastr.success(t("SuccessfullySaveGreetingSettingsMessage")); toastr.success(t("SuccessfullySaveGreetingSettingsMessage"));
}) })
.catch((error) => toastr.error(error)) .catch((error) => toastr.error(error))
.finally(() => this.setState({ isLoadingGreetingSave: false })); .finally(() =>
}); setState((val) => ({ ...val, isLoadingGreetingSave: false }))
);
this.setState({ setState((val) => ({ ...val, showReminder: false }));
showReminder: false,
});
saveToSessionStorage("greetingTitle", greetingTitle); saveToSessionStorage("greetingTitle", greetingTitle);
saveToSessionStorage("greetingTitleDefault", greetingTitle); saveToSessionStorage("greetingTitleDefault", greetingTitle);
}; };
onRestoreGreetingSettings = () => { const onRestoreGreetingSettings = () => {
const { restoreGreetingTitle, t, greetingSettings } = this.props; setState((val) => ({ ...val, isLoadingGreetingRestore: true }));
this.setState({ isLoadingGreetingRestore: true }, function () {
restoreGreetingTitle() restoreGreetingTitle()
.then(() => { .then(() => {
this.setState({ setState((val) => ({
...val,
greetingTitle: greetingSettings, greetingTitle: greetingSettings,
greetingTitleDefault: greetingSettings, greetingTitleDefault: greetingSettings,
showReminder: false, showReminder: false,
}); }));
saveToSessionStorage("greetingTitle", "none"); saveToSessionStorage("greetingTitle", "none");
saveToSessionStorage("greetingTitleDefault", "none"); saveToSessionStorage("greetingTitleDefault", "none");
@ -210,17 +234,18 @@ class WelcomePageSettings extends React.Component {
toastr.success(t("SuccessfullySaveGreetingSettingsMessage")); toastr.success(t("SuccessfullySaveGreetingSettingsMessage"));
}) })
.catch((error) => toastr.error(error)) .catch((error) => toastr.error(error))
.finally(() => this.setState({ isLoadingGreetingRestore: false })); .finally(() =>
}); setState((val) => ({ ...val, isLoadingGreetingRestore: false }))
);
}; };
settingIsEqualInitialValue = (stateName, value) => { const settingIsEqualInitialValue = (stateName, value) => {
const defaultValue = JSON.stringify(this.state[stateName + "Default"]); const defaultValue = JSON.stringify(state[stateName + "Default"]);
const currentValue = JSON.stringify(value); const currentValue = JSON.stringify(value);
return defaultValue === currentValue; return defaultValue === currentValue;
}; };
checkChanges = () => { const checkChanges = () => {
let hasChanged = false; let hasChanged = false;
settingNames.forEach((settingName) => { settingNames.forEach((settingName) => {
@ -228,24 +253,23 @@ class WelcomePageSettings extends React.Component {
if ( if (
valueFromSessionStorage !== "none" && valueFromSessionStorage !== "none" &&
valueFromSessionStorage !== null && valueFromSessionStorage !== null &&
!this.settingIsEqualInitialValue(settingName, valueFromSessionStorage) !settingIsEqualInitialValue(settingName, valueFromSessionStorage)
) )
hasChanged = true; hasChanged = true;
}); });
if (hasChanged !== this.state.hasChanged) { if (hasChanged !== state.hasChanged) {
this.setState({ setState((val) => ({
...val,
hasChanged: hasChanged, hasChanged: hasChanged,
showReminder: hasChanged, showReminder: hasChanged,
}); }));
} }
}; };
checkInnerWidth = () => { const checkInnerWidth = () => {
if (!isSmallTablet()) { if (!isSmallTablet()) {
this.setState({ setState((val) => ({ ...val, isCustomizationView: true }));
isCustomizationView: true,
});
const currentUrl = window.location.href.replace( const currentUrl = window.location.href.replace(
window.location.origin, window.location.origin,
@ -260,35 +284,17 @@ class WelcomePageSettings extends React.Component {
if (newUrl === currentUrl) return; if (newUrl === currentUrl) return;
history.push(newUrl); navigate(newUrl);
} else { } else {
this.setState({ setState((val) => ({ ...val, isCustomizationView: false }));
isCustomizationView: false,
});
} }
}; };
onClickLink = (e) => { const onClickLink = (e) => {
e.preventDefault(); e.preventDefault();
history.push(e.target.pathname); navigate(e.target.pathname);
}; };
render() {
const {
t,
isMobileView,
isLoadedPage,
greetingSettingsIsDefault,
} = this.props;
const {
greetingTitle,
isLoadingGreetingSave,
isLoadingGreetingRestore,
showReminder,
hasScroll,
isCustomizationView,
} = this.state;
const tooltipCustomTitlesTooltip = <CustomTitlesTooltip t={t} />; const tooltipCustomTitlesTooltip = <CustomTitlesTooltip t={t} />;
const settingsBlock = ( const settingsBlock = (
@ -303,9 +309,11 @@ class WelcomePageSettings extends React.Component {
tabIndex={5} tabIndex={5}
id="textInputContainerWelcomePage" id="textInputContainerWelcomePage"
scale={true} scale={true}
value={greetingTitle} value={state.greetingTitle}
onChange={this.onChangeGreetingTitle} onChange={onChangeGreetingTitle}
isDisabled={isLoadingGreetingSave || isLoadingGreetingRestore} isDisabled={
state.isLoadingGreetingSave || state.isLoadingGreetingRestore
}
placeholder={t("EnterTitle")} placeholder={t("EnterTitle")}
/> />
</FieldContainer> </FieldContainer>
@ -316,14 +324,12 @@ class WelcomePageSettings extends React.Component {
<LoaderCustomization welcomePage={true} /> <LoaderCustomization welcomePage={true} />
) : ( ) : (
<StyledSettingsComponent <StyledSettingsComponent
hasScroll={hasScroll} hasScroll={state.hasScroll}
className="category-item-wrapper" className="category-item-wrapper"
> >
{isCustomizationView && !isMobileView && ( {state.isCustomizationView && !isMobileView && (
<div className="category-item-heading"> <div className="category-item-heading">
<div className="category-item-title"> <div className="category-item-title">{t("CustomTitlesWelcome")}</div>
{t("CustomTitlesWelcome")}
</div>
<HelpButton <HelpButton
offsetRight={0} offsetRight={0}
iconName={CombinedShapeSvgUrl} iconName={CombinedShapeSvgUrl}
@ -341,28 +347,23 @@ class WelcomePageSettings extends React.Component {
tabIndex={6} tabIndex={6}
id="buttonsWelcomePage" id="buttonsWelcomePage"
className="save-cancel-buttons" className="save-cancel-buttons"
onSaveClick={this.onSaveGreetingSettings} onSaveClick={onSaveGreetingSettings}
onCancelClick={this.onRestoreGreetingSettings} onCancelClick={onRestoreGreetingSettings}
showReminder={showReminder} showReminder={state.showReminder}
reminderTest={t("YouHaveUnsavedChanges")} reminderTest={t("YouHaveUnsavedChanges")}
saveButtonLabel={t("Common:SaveButton")} saveButtonLabel={t("Common:SaveButton")}
cancelButtonLabel={t("Common:Restore")} cancelButtonLabel={t("Common:Restore")}
displaySettings={true} displaySettings={true}
hasScroll={hasScroll} hasScroll={state.hasScroll}
disableRestoreToDefault={greetingSettingsIsDefault} disableRestoreToDefault={greetingSettingsIsDefault}
/> />
</StyledSettingsComponent> </StyledSettingsComponent>
); );
} };
}
export default inject(({ auth, setup, common }) => { export default inject(({ auth, setup, common }) => {
const { const { greetingSettings, organizationName, theme, getSettings } =
greetingSettings, auth.settingsStore;
organizationName,
theme,
getSettings,
} = auth.settingsStore;
const { setGreetingTitle, restoreGreetingTitle } = setup; const { setGreetingTitle, restoreGreetingTitle } = setup;
const { const {
isLoaded, isLoaded,

32
packages/client/src/pages/PortalSettings/categories/common/appearance.js
View File

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

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

@ -7,11 +7,11 @@ import Link from "@docspace/components/link";
import { combineUrl } from "@docspace/common/utils"; import { combineUrl } from "@docspace/common/utils";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import withCultureNames from "@docspace/common/hoc/withCultureNames"; import withCultureNames from "@docspace/common/hoc/withCultureNames";
import history from "@docspace/common/history";
import { Base } from "@docspace/components/themes"; import { Base } from "@docspace/components/themes";
import LoaderCustomizationNavbar from "./sub-components/loaderCustomizationNavbar"; import LoaderCustomizationNavbar from "./sub-components/loaderCustomizationNavbar";
import { StyledArrowRightIcon } from "./Customization/StyledSettings"; import { StyledArrowRightIcon } from "./Customization/StyledSettings";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import Badge from "@docspace/components/badge"; import Badge from "@docspace/components/badge";
const StyledComponent = styled.div` const StyledComponent = styled.div`
@ -73,13 +73,15 @@ const CustomizationNavbar = ({
currentColorScheme, currentColorScheme,
}) => { }) => {
const isLoadedSetting = isLoaded && tReady; const isLoadedSetting = isLoaded && tReady;
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
if (isLoadedSetting) setIsLoadedCustomizationNavbar(isLoadedSetting); if (isLoadedSetting) setIsLoadedCustomizationNavbar(isLoadedSetting);
}, [isLoadedSetting]); }, [isLoadedSetting]);
const onClickLink = (e) => { const onClickLink = (e) => {
e.preventDefault(); e.preventDefault();
history.push(e.target.pathname); navigate(e.target.pathname);
}; };
return !isLoadedPage ? ( return !isLoadedPage ? (
@ -200,11 +202,8 @@ const CustomizationNavbar = ({
}; };
export default inject(({ auth, common }) => { export default inject(({ auth, common }) => {
const { const { helpUrlCommonSettings, theme, currentColorScheme } =
helpUrlCommonSettings, auth.settingsStore;
theme,
currentColorScheme,
} = auth.settingsStore;
const { isLoaded, setIsLoadedCustomizationNavbar } = common; const { isLoaded, setIsLoadedCustomizationNavbar } = common;
return { return {
theme, theme,
@ -214,9 +213,7 @@ export default inject(({ auth, common }) => {
currentColorScheme, currentColorScheme,
}; };
})( })(
withRouter(
withCultureNames( withCultureNames(
observer(withTranslation(["Settings", "Common"])(CustomizationNavbar)) observer(withTranslation(["Settings", "Common"])(CustomizationNavbar))
) )
)
); );

5
packages/client/src/pages/PortalSettings/categories/common/customization.js
View File

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

12
packages/client/src/pages/PortalSettings/categories/common/index.js
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Submenu from "@docspace/components/submenu"; import Submenu from "@docspace/components/submenu";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { combineUrl } from "@docspace/common/utils"; import { combineUrl } from "@docspace/common/utils";
import config from "PACKAGE_FILE"; import config from "PACKAGE_FILE";
@ -15,7 +15,7 @@ import { resetSessionStorage } from "../../utils";
const SubmenuCommon = (props) => { const SubmenuCommon = (props) => {
const { const {
t, t,
history,
tReady, tReady,
setIsLoadedSubmenu, setIsLoadedSubmenu,
loadBaseInfo, loadBaseInfo,
@ -24,6 +24,8 @@ const SubmenuCommon = (props) => {
} = props; } = props;
const [currentTab, setCurrentTab] = useState(0); const [currentTab, setCurrentTab] = useState(0);
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
return () => { return () => {
resetSessionStorage(); resetSessionStorage();
@ -69,7 +71,7 @@ const SubmenuCommon = (props) => {
]; ];
const onSelect = (e) => { const onSelect = (e) => {
history.push( navigate(
combineUrl( combineUrl(
window.DocSpaceConfig?.proxy?.url, window.DocSpaceConfig?.proxy?.url,
config.homepage, config.homepage,
@ -106,6 +108,4 @@ export default inject(({ common }) => {
isLoadedSubmenu, isLoadedSubmenu,
getWhiteLabelLogoUrls, getWhiteLabelLogoUrls,
}; };
})( })(withLoading(withTranslation("Settings")(observer(SubmenuCommon))));
withLoading(withRouter(withTranslation("Settings")(observer(SubmenuCommon))))
);

14
packages/client/src/pages/PortalSettings/categories/data-management/backup/index.js
View File

@ -1,6 +1,7 @@
import HelpReactSvgUrl from "PUBLIC_DIR/images/help.react.svg?url"; import HelpReactSvgUrl from "PUBLIC_DIR/images/help.react.svg?url";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { withTranslation, Trans } from "react-i18next"; import { withTranslation, Trans } from "react-i18next";
import { useNavigate } from "react-router-dom";
import Submenu from "@docspace/components/submenu"; import Submenu from "@docspace/components/submenu";
import Link from "@docspace/components/link"; import Link from "@docspace/components/link";
import HelpButton from "@docspace/components/help-button"; import HelpButton from "@docspace/components/help-button";
@ -15,10 +16,12 @@ const Backup = ({
helpUrlCreatingBackup, helpUrlCreatingBackup,
buttonSize, buttonSize,
t, t,
history,
isNotPaidPeriod, isNotPaidPeriod,
currentColorScheme, currentColorScheme,
}) => { }) => {
const navigate = useNavigate();
const renderTooltip = (helpInfo) => { const renderTooltip = (helpInfo) => {
return ( return (
<> <>
@ -67,7 +70,7 @@ const Backup = ({
]; ];
const onSelect = (e) => { const onSelect = (e) => {
history.push( navigate(
combineUrl( combineUrl(
window.DocSpaceConfig?.proxy?.url, window.DocSpaceConfig?.proxy?.url,
config.homepage, config.homepage,
@ -87,11 +90,8 @@ export default inject(({ auth }) => {
const { settingsStore, currentTariffStatusStore } = auth; const { settingsStore, currentTariffStatusStore } = auth;
const { isNotPaidPeriod } = currentTariffStatusStore; const { isNotPaidPeriod } = currentTariffStatusStore;
const { const { helpUrlCreatingBackup, isTabletView, currentColorScheme } =
helpUrlCreatingBackup, settingsStore;
isTabletView,
currentColorScheme,
} = settingsStore;
const buttonSize = isTabletView ? "normal" : "small"; const buttonSize = isTabletView ? "normal" : "small";

4
packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/index.js
View File

@ -1,7 +1,6 @@
import React, { useState, useEffect, useCallback } from "react"; import React, { useState, useEffect, useCallback } from "react";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { getSettingsThirdParty } from "@docspace/common/api/files"; import { getSettingsThirdParty } from "@docspace/common/api/files";
import { import {
getBackupStorage, getBackupStorage,
@ -48,7 +47,6 @@ const RestoreBackup = (props) => {
isEnableRestore, isEnableRestore,
setRestoreResource, setRestoreResource,
buttonSize, buttonSize,
history,
} = props; } = props;
const [radioButtonState, setRadioButtonState] = useState(LOCAL_FILE); const [radioButtonState, setRadioButtonState] = useState(LOCAL_FILE);
@ -236,7 +234,6 @@ const RestoreBackup = (props) => {
isVisibleDialog={isVisibleBackupListDialog} isVisibleDialog={isVisibleBackupListDialog}
onModalClose={onModalClose} onModalClose={onModalClose}
isNotify={checkboxState.notification} isNotify={checkboxState.notification}
history={history}
/> />
)} )}
<Checkbox <Checkbox
@ -265,7 +262,6 @@ const RestoreBackup = (props) => {
radioButtonState={radioButtonState} radioButtonState={radioButtonState}
isCheckedThirdPartyStorage={radioButtonState === STORAGE_SPACE} isCheckedThirdPartyStorage={radioButtonState === STORAGE_SPACE}
isCheckedLocalFile={radioButtonState === LOCAL_FILE} isCheckedLocalFile={radioButtonState === LOCAL_FILE}
history={history}
t={t} t={t}
buttonSize={buttonSize} buttonSize={buttonSize}
/> />

8
packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/ButtonComponent.js
View File

@ -1,7 +1,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import config from "PACKAGE_FILE"; import config from "PACKAGE_FILE";
import { useNavigate } from "react-router-dom";
import Button from "@docspace/components/button"; import Button from "@docspace/components/button";
import FloatingButton from "@docspace/common/components/FloatingButton"; import FloatingButton from "@docspace/common/components/FloatingButton";
import { TenantStatus } from "@docspace/common/constants"; import { TenantStatus } from "@docspace/common/constants";
@ -20,7 +20,7 @@ const ButtonContainer = (props) => {
restoreResource, restoreResource,
isCheckedThirdPartyStorage, isCheckedThirdPartyStorage,
isCheckedLocalFile, isCheckedLocalFile,
history,
isEnableRestore, isEnableRestore,
t, t,
buttonSize, buttonSize,
@ -30,6 +30,8 @@ const ButtonContainer = (props) => {
getStorageParams, getStorageParams,
} = props; } = props;
const navigate = useNavigate();
const [isUploadingLocalFile, setIsUploadingLocalFile] = useState(false); const [isUploadingLocalFile, setIsUploadingLocalFile] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@ -97,7 +99,7 @@ const ButtonContainer = (props) => {
command: "restore-backup", command: "restore-backup",
}); });
history.push( navigate(
combineUrl( combineUrl(
window.DocSpaceConfig?.proxy?.url, window.DocSpaceConfig?.proxy?.url,
config.homepage, config.homepage,

90
packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/backup-list/index.js
View File

@ -1,6 +1,7 @@
import HelpReactSvgUrl from "PUBLIC_DIR/images/help.react.svg?url"; import HelpReactSvgUrl from "PUBLIC_DIR/images/help.react.svg?url";
import React from "react"; import React from "react";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { useNavigate } from "react-router-dom";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import ModalDialog from "@docspace/components/modal-dialog"; import ModalDialog from "@docspace/components/modal-dialog";
@ -56,80 +57,79 @@ const StyledModalDialog = styled(ModalDialog)`
} }
`; `;
class BackupListModalDialog extends React.Component { const BackupListModalDialog = (props) => {
constructor(props) { const [state, setState] = React.useState({
super(props);
this.state = {
isLoading: true, isLoading: true,
filesList: [], filesList: [],
selectedFileIndex: null, selectedFileIndex: null,
selectedFileId: null, selectedFileId: null,
isChecked: false, isChecked: false,
}; });
}
componentDidMount() { const navigate = useNavigate();
React.useEffect(() => {
getBackupHistory() getBackupHistory()
.then((filesList) => .then((filesList) =>
this.setState({ setState((val) => ({ ...val, filesList, isLoading: false }))
filesList,
isLoading: false,
})
) )
.catch(() => this.setState({ isLoading: false })); .catch(() => setState((val) => ({ ...val, isLoading: false })));
} }, []);
onSelectFile = (e) => { const onSelectFile = (e) => {
const fileInfo = e.target.name; const fileInfo = e.target.name;
const fileArray = fileInfo.split("_"); const fileArray = fileInfo.split("_");
const id = fileArray.pop(); const id = fileArray.pop();
const index = fileArray.shift(); const index = fileArray.shift();
this.setState({ setState((val) => ({
...val,
selectedFileIndex: +index, selectedFileIndex: +index,
selectedFileId: id, selectedFileId: id,
}); }));
}; };
onCleanBackupList = () => { const onCleanBackupList = () => {
this.setState({ isLoading: true }, function () { setState((val) => ({ ...val, isLoading: true }));
deleteBackupHistory() deleteBackupHistory()
.then(() => getBackupHistory()) .then(() => getBackupHistory())
.then((filesList) => this.setState({ filesList, isLoading: false })) .then((filesList) =>
setState((val) => ({ ...val, filesList, isLoading: false }))
)
.catch((error) => { .catch((error) => {
toastr.error(error); toastr.error(error);
this.setState({ isLoading: false }); setState((val) => ({ ...val, isLoading: false }));
});
}); });
}; };
onDeleteBackup = (backupId) => { const onDeleteBackup = (backupId) => {
if (!backupId) return; if (!backupId) return;
this.setState({ isLoading: true }, function () { setState((val) => ({ ...val, isLoading: true }));
deleteBackup(backupId) deleteBackup(backupId)
.then(() => getBackupHistory()) .then(() => getBackupHistory())
.then((filesList) => .then((filesList) =>
this.setState({ setState((val) => ({
...val,
filesList, filesList,
isLoading: false, isLoading: false,
selectedFileIndex: null, selectedFileIndex: null,
selectedFileId: null, selectedFileId: null,
}) }))
) )
.catch((error) => { .catch((error) => {
toastr.error(error); toastr.error(error);
this.setState({ isLoading: false }); setState((val) => ({ ...val, isLoading: false }));
});
}); });
}; };
onRestorePortal = () => { const onRestorePortal = () => {
const { selectedFileId } = this.state; const { selectedFileId } = state;
const { isNotify, history, socketHelper, t, setTenantStatus } = this.props; const { isNotify, socketHelper, t, setTenantStatus } = props;
if (!selectedFileId) { if (!selectedFileId) {
toastr.error(t("RecoveryFileNotSelected")); toastr.error(t("RecoveryFileNotSelected"));
return; return;
} }
this.setState({ isLoading: true }, function () { setState((val) => ({ ...val, isLoading: true }));
const backupId = selectedFileId; const backupId = selectedFileId;
const storageType = "0"; const storageType = "0";
const storageParams = [ const storageParams = [
@ -147,7 +147,7 @@ class BackupListModalDialog extends React.Component {
}); });
}) })
.then(() => .then(() =>
history.push( navigate(
combineUrl( combineUrl(
window.DocSpaceConfig?.proxy?.url, window.DocSpaceConfig?.proxy?.url,
config.homepage, config.homepage,
@ -157,30 +157,21 @@ class BackupListModalDialog extends React.Component {
) )
.catch((error) => toastr.error(error)) .catch((error) => toastr.error(error))
.finally(() => .finally(() =>
this.setState({ setState((val) => ({
...val,
isLoading: false, isLoading: false,
selectedFileIndex: null, selectedFileIndex: null,
selectedFileId: null, selectedFileId: null,
}) }))
); );
});
}; };
onChangeCheckbox = () => { const onChangeCheckbox = () => {
this.setState({ setState((val) => ({ ...val, isChecked: !val.isChecked }));
isChecked: !this.state.isChecked,
});
}; };
render() { const { onModalClose, isVisibleDialog, t, isCopyingToLocal, theme } = props;
const { const { filesList, isLoading, selectedFileIndex, isChecked } = state;
onModalClose,
isVisibleDialog,
t,
isCopyingToLocal,
theme,
} = this.props;
const { filesList, isLoading, selectedFileIndex, isChecked } = this.state;
const helpContent = () => ( const helpContent = () => (
<> <>
@ -294,8 +285,7 @@ class BackupListModalDialog extends React.Component {
</ModalDialog.Footer> </ModalDialog.Footer>
</StyledModalDialog> </StyledModalDialog>
); );
} };
}
BackupListModalDialog.propTypes = { BackupListModalDialog.propTypes = {
onModalClose: PropTypes.func.isRequired, onModalClose: PropTypes.func.isRequired,

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

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import { withTranslation, Trans } from "react-i18next"; import { withTranslation, Trans } from "react-i18next";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
@ -20,12 +20,14 @@ const DataManagementWrapper = (props) => {
helpUrlCreatingBackup, helpUrlCreatingBackup,
buttonSize, buttonSize,
t, t,
history,
isNotPaidPeriod, isNotPaidPeriod,
currentColorScheme, currentColorScheme,
toDefault, toDefault,
} = props; } = props;
const navigate = useNavigate();
const [currentTab, setCurrentTab] = useState(0); const [currentTab, setCurrentTab] = useState(0);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@ -93,7 +95,7 @@ const DataManagementWrapper = (props) => {
}, []); }, []);
const onSelect = (e) => { const onSelect = (e) => {
history.push( navigate(
combineUrl( combineUrl(
window.DocSpaceConfig?.proxy?.url, window.DocSpaceConfig?.proxy?.url,
config.homepage, config.homepage,
@ -120,11 +122,8 @@ export default inject(({ auth, setup, backup }) => {
const { settingsStore, currentTariffStatusStore } = auth; const { settingsStore, currentTariffStatusStore } = auth;
const { isNotPaidPeriod } = currentTariffStatusStore; const { isNotPaidPeriod } = currentTariffStatusStore;
const { toDefault } = backup; const { toDefault } = backup;
const { const { helpUrlCreatingBackup, isTabletView, currentColorScheme } =
helpUrlCreatingBackup, settingsStore;
isTabletView,
currentColorScheme,
} = settingsStore;
const buttonSize = isTabletView ? "normal" : "small"; const buttonSize = isTabletView ? "normal" : "small";
return { return {
@ -137,8 +136,4 @@ export default inject(({ auth, setup, backup }) => {
currentColorScheme, currentColorScheme,
toDefault, toDefault,
}; };
})( })(withTranslation(["Settings", "Common"])(observer(DataManagementWrapper)));
withTranslation(["Settings", "Common"])(
withRouter(observer(DataManagementWrapper))
)
);

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

@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import Submenu from "@docspace/components/submenu"; import Submenu from "@docspace/components/submenu";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import PortalDeactivationSection from "./portalDeactivation"; import PortalDeactivationSection from "./portalDeactivation";
@ -10,7 +10,9 @@ import { combineUrl } from "@docspace/common/utils";
import config from "../../../../../package.json"; import config from "../../../../../package.json";
const DeleteData = (props) => { const DeleteData = (props) => {
const { t, history, isNotPaidPeriod, tReady } = props; const { t, isNotPaidPeriod, tReady } = props;
const navigate = useNavigate();
const [currentTab, setCurrentTab] = useState(0); const [currentTab, setCurrentTab] = useState(0);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@ -36,7 +38,7 @@ const DeleteData = (props) => {
}, []); }, []);
const onSelect = (e) => { const onSelect = (e) => {
history.push( navigate(
combineUrl( combineUrl(
window.DocSpaceConfig?.proxy?.url, window.DocSpaceConfig?.proxy?.url,
config.homepage, config.homepage,
@ -64,4 +66,4 @@ export default inject(({ auth }) => {
return { return {
isNotPaidPeriod, isNotPaidPeriod,
}; };
})(observer(withTranslation("Settings")(withRouter(DeleteData)))); })(observer(withTranslation("Settings")(DeleteData)));

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

@ -1,5 +1,4 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { withRouter } from "react-router";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { inject } from "mobx-react"; import { inject } from "mobx-react";
import Text from "@docspace/components/text"; import Text from "@docspace/components/text";
@ -13,13 +12,8 @@ import { isDesktop } from "@docspace/components/utils/device";
import { EmployeeActivationStatus } from "@docspace/common/constants"; import { EmployeeActivationStatus } from "@docspace/common/constants";
const PortalDeactivation = (props) => { const PortalDeactivation = (props) => {
const { const { t, getPortalOwner, owner, currentColorScheme, sendActivationLink } =
t, props;
getPortalOwner,
owner,
currentColorScheme,
sendActivationLink,
} = props;
const [isDesktopView, setIsDesktopView] = useState(false); const [isDesktopView, setIsDesktopView] = useState(false);
const fetchData = async () => { const fetchData = async () => {
@ -104,8 +98,4 @@ export default inject(({ auth }) => {
currentColorScheme, currentColorScheme,
sendActivationLink, sendActivationLink,
}; };
})( })(withTranslation("Settings", "MainBar", "People")(PortalDeactivation));
withTranslation(["Settings", "MainBar", "People"])(
withRouter(PortalDeactivation)
)
);

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

@ -1,5 +1,4 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { withRouter } from "react-router";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { inject } from "mobx-react"; import { inject } from "mobx-react";
import Text from "@docspace/components/text"; import Text from "@docspace/components/text";
@ -17,13 +16,8 @@ import { isDesktop } from "@docspace/components/utils/device";
import { EmployeeActivationStatus } from "@docspace/common/constants"; import { EmployeeActivationStatus } from "@docspace/common/constants";
const PortalDeletion = (props) => { const PortalDeletion = (props) => {
const { const { t, getPortalOwner, owner, currentColorScheme, sendActivationLink } =
t, props;
getPortalOwner,
owner,
currentColorScheme,
sendActivationLink,
} = props;
const [isDialogVisible, setIsDialogVisible] = useState(false); const [isDialogVisible, setIsDialogVisible] = useState(false);
const [stripeUrl, setStripeUrl] = useState(null); const [stripeUrl, setStripeUrl] = useState(null);
const [isDesktopView, setIsDesktopView] = useState(false); const [isDesktopView, setIsDesktopView] = useState(false);
@ -123,7 +117,5 @@ export default inject(({ auth }) => {
sendActivationLink, sendActivationLink,
}; };
})( })(
withTranslation(["Settings", "MainBar", "People", "Common"])( withTranslation(["Settings", "MainBar", "People", "Common"])(PortalDeletion)
withRouter(PortalDeletion)
)
); );

9
packages/client/src/pages/PortalSettings/categories/integration/index.js
View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Submenu from "@docspace/components/submenu"; import Submenu from "@docspace/components/submenu";
import { withRouter } from "react-router"; import { useNavigate } from "react-router-dom";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import { combineUrl } from "@docspace/common/utils"; import { combineUrl } from "@docspace/common/utils";
@ -15,9 +15,10 @@ import AppLoader from "@docspace/common/components/AppLoader";
import SSOLoader from "./sub-components/ssoLoader"; import SSOLoader from "./sub-components/ssoLoader";
const IntegrationWrapper = (props) => { const IntegrationWrapper = (props) => {
const { t, tReady, history, loadBaseInfo, enablePlugins, toDefault } = props; const { t, tReady, loadBaseInfo, enablePlugins, toDefault } = props;
const [currentTab, setCurrentTab] = useState(0); const [currentTab, setCurrentTab] = useState(0);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
return () => { return () => {
@ -62,7 +63,7 @@ const IntegrationWrapper = (props) => {
}, []); }, []);
const onSelect = (e) => { const onSelect = (e) => {
history.push( navigate(
combineUrl( combineUrl(
window.DocSpaceConfig?.proxy?.url, window.DocSpaceConfig?.proxy?.url,
config.homepage, config.homepage,
@ -91,6 +92,6 @@ export default inject(({ setup, auth, ssoStore }) => {
}; };
})( })(
withTranslation(["Settings", "SingleSignOn", "Translations"])( withTranslation(["Settings", "SingleSignOn", "Translations"])(
withRouter(observer(IntegrationWrapper)) observer(IntegrationWrapper)
) )
); );

3
packages/client/src/pages/PortalSettings/categories/payments/ContactContainer.js
View File

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

Some files were not shown because too many files have changed in this diff Show More