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

Web: Changed routing by new categoryType

Browse Source
This commit is contained in:
Alexey Safronov 2022-07-31 20:14:28 +03:00
parent 359c160ac1
commit d0289756ec
8 changed files with 291 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,7 +63,7 @@ import DialogsWrapper from "./components/dialogs/DialogsWrapper";
const Payments = React.lazy(() => import("./pages/Payments"));
const Error404 = React.lazy(() => import("studio/Error404"));
const Error401 = React.lazy(() => import("studio/Error401"));
const Home = React.lazy(() => import("./pages/Files")); //import("./components/pages/Home"));
const Files = React.lazy(() => import("./pages/Files")); //import("./components/pages/Home"));
const About = React.lazy(() => import("./pages/About"));
const Wizard = React.lazy(() => import("./pages/Wizard"));
@ -75,6 +75,8 @@ const EnterCode = !IS_PERSONAL && React.lazy(() => import("login/codeLogin"));
const InvalidError = React.lazy(() => import("./pages/Errors/Invalid"));
const PreparationPortal = React.lazy(() => import("./pages/PreparationPortal"));
const FormGallery = React.lazy(() => import("./pages/FormGallery"));
const PortalSettingsRoute = (props) => (
<React.Suspense fallback={<AppLoader />}>
<ErrorBoundary>
@ -105,10 +107,10 @@ const Error401Route = (props) => (
</ErrorBoundary>
</React.Suspense>
);
const HomeRoute = (props) => (
const FilesRoute = (props) => (
<React.Suspense fallback={<AppLoader />}>
<ErrorBoundary>
<Home {...props} />
<Files {...props} />
</ErrorBoundary>
</React.Suspense>
);
@ -147,13 +149,13 @@ const WizardRoute = (props) => (
</React.Suspense>
);
const MyProfileRoute = (props) => (
<React.Suspense fallback={<AppLoader />}>
<ErrorBoundary>
<MyProfile {...props} />
</ErrorBoundary>
</React.Suspense>
);
// const MyProfileRoute = (props) => (
// <React.Suspense fallback={<AppLoader />}>
// <ErrorBoundary>
// <MyProfile {...props} />
// </ErrorBoundary>
// </React.Suspense>
// );
const EnterCodeRoute =
!IS_PERSONAL &&
@ -173,7 +175,15 @@ const InvalidRoute = (props) => (
</React.Suspense>
);
const RedirectToHome = () => <Redirect to={PROXY_HOMEPAGE_URL} />;
const FormGalleryRoute = (props) => (
<React.Suspense fallback={<AppLoader />}>
<ErrorBoundary>
<FormGallery {...props} />
</ErrorBoundary>
</React.Suspense>
);
// const RedirectToHome = () => <Redirect to={PROXY_HOMEPAGE_URL} />;
const Shell = ({ items = [], page = "home", ...rest }) => {
const {
@ -484,27 +494,50 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
exact
path={[
"/",
"/filter",
"/rooms",
"/settings",
"/settings/common",
"/settings/admin",
"/settings/connected-clouds",
"/form-gallery/:folderId",
]}
component={HomeRoute}
/>
<Route
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",
"/settings",
"/settings/common",
"/settings/admin",
"/settings/connected-clouds",
]}
component={HomeRoute}
component={FilesRoute}
/>
<PrivateRoute
path={"/form-gallery/:folderId"}
component={FormGalleryRoute}
/>
<PublicRoute exact path={"/wizard"} component={WizardRoute} />
<PrivateRoute path={"/about"} component={AboutRoute} />
{loginRoutes}

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

@ -21,6 +21,8 @@ import Loaders from "@docspace/common/components/Loaders";
import withLoader from "../../../HOCs/withLoader";
import { withTranslation } from "react-i18next";
import toastr from "studio/toastr";
import { getCategoryUrl } from "SRC_DIR/helpers/utils";
import { CategoryType } from "SRC_DIR/helpers/constants";
const StyledBlock = styled.div`
padding: 0 20px;
@ -78,13 +80,19 @@ const ArticleBodyContent = (props) => {
if (filesSection) {
const filter = RoomsFilter.getDefault();
const urlFilter = filter.toUrlParams();
const url = getCategoryUrl(
data === archiveFolderId
? CategoryType.Archive
: CategoryType.Shared
);
const filterParamsStr = filter.toUrlParams();
history.push(
combineUrl(
AppServerConfig.proxyURL,
homepage,
`/rooms?${urlFilter}`
`${url}?${filterParamsStr}`
)
);
}

17
packages/client/src/helpers/constants.js
View File

@ -34,4 +34,19 @@ export const ValidationResult = Object.freeze({
export const GUID_EMPTY = "00000000-0000-0000-0000-000000000000";
export const ID_NO_GROUP_MANAGER = "4a515a15-d4d6-4b8e-828e-e0586f18f3a3";
export const ADS_TIMEOUT = 300000; // 5 min
export const ADS_TIMEOUT = 300000; // 5 min
/**
* Enum for type of confirm link.
* @readonly
*/
export const CategoryType = Object.freeze({
Personal: 0,
Shared: 1,
SharedRoom: 2,
Archive: 3,
ArchivedRoom: 4,
Favorite: 5,
Recent: 6,
Trash: 7,
});

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

@ -2,6 +2,8 @@ import authStore from "@docspace/common/store/AuthStore";
import { toCommunityHostname } from "@docspace/common/utils";
import history from "@docspace/common/history";
import { useEffect, useState } from "react";
import { CategoryType } from "./constants";
import { FolderType } from "@docspace/common/constants";
export const setDocumentTitle = (subTitle = null) => {
const { isAuthenticated, settingsStore, product: currentModule } = authStore;
@ -110,3 +112,84 @@ export const useThemeDetector = () => {
return systemTheme;
};
export const getCategoryType = (location) => {
let categoryType = CategoryType.Personal;
const { pathname } = location;
if (pathname.startsWith("/rooms")) {
if (pathname.indexOf("personal") > -1) {
categoryType = CategoryType.Personal;
} else if (pathname.indexOf("shared") > -1) {
categoryType =
pathname.indexOf("shared/filter") > -1
? CategoryType.Shared
: CategoryType.SharedRoom;
} else if (pathname.indexOf("archive") > -1) {
categoryType = CategoryType.Archive;
}
} else if (pathname.startsWith("/favorite") > -1) {
categoryType = CategoryType.Favorite;
} else if (pathname.startsWith("/recent") > -1) {
categoryType = CategoryType.Recent;
} else if (pathname.startsWith("/trash") > -1) {
categoryType = CategoryType.Trash;
}
return categoryType;
};
export const getCategoryTypeByFolderType = (folderType, parentId) => {
switch (folderType) {
case FolderType.Rooms:
return parentId > 0 ? CategoryType.SharedRoom : CategoryType.Shared;
case FolderType.Archive:
return CategoryType.Archive;
case FolderType.Favorites:
return CategoryType.Favorite;
case FolderType.Recent:
return CategoryType.Recent;
case FolderType.TRASH:
return CategoryType.Trash;
default:
return CategoryType.Personal;
}
};
export const getCategoryUrl = (categoryType, folderId = null) => {
const cType = categoryType;
switch (cType) {
case CategoryType.Personal:
return "/rooms/personal/filter";
case CategoryType.Shared:
return "/rooms/shared/filter";
case CategoryType.SharedRoom:
return `/rooms/shared/${folderId}/filter`;
case CategoryType.Archive:
return "/rooms/archived/filter";
case CategoryType.ArchivedRoom:
return "/rooms/archived/${folderId}/filter";
case CategoryType.Favorite:
return "/files/favorite/filter";
case CategoryType.Recent:
return "/files/recent/filter";
case CategoryType.Trash:
return "/files/trash/filter";
default:
throw new Error("Unknown category type");
}
};

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

@ -1,7 +1,7 @@
import React from "react";
//import { Provider as FilesProvider } from "mobx-react";
import { inject, observer } from "mobx-react";
import { Switch, withRouter } from "react-router-dom";
import { Switch, withRouter, Redirect } from "react-router-dom";
//import config from "PACKAGE_FILE";
import PrivateRoute from "@docspace/common/components/PrivateRoute";
import AppLoader from "@docspace/common/components/AppLoader";
@ -28,7 +28,7 @@ import {
ArticleHeaderContent,
ArticleMainButtonContent,
} from "../components/Article";
import FormGallery from "./FormGallery";
import GlobalEvents from "../components/GlobalEvents";
import Accounts from "./Accounts";
@ -76,11 +76,44 @@ const FilesArticle = React.memo(({ history }) => {
const FilesSection = React.memo(() => {
return (
<Switch>
{/*<PrivateRoute exact path={HISTORY_URL} component={VersionHistory} />*/}
{/* <PrivateRoute path={"/private"} component={PrivateRoomsPage} /> */}
<PrivateRoute
exact
path={["/setiings", "/settings/:setting"]}
component={Settings}
path={["/", "/rooms"]}
component={() => <Redirect to="/rooms/personal" />}
/>
<PrivateRoute
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",
]}
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
path={[
@ -93,14 +126,11 @@ const FilesSection = React.memo(() => {
]}
component={Accounts}
/>
{/*<PrivateRoute exact path={HISTORY_URL} component={VersionHistory} />*/}
<PrivateRoute path={"/private"} component={PrivateRoomsPage} />
<PrivateRoute exact path={"/"} component={Home} />
<PrivateRoute path={"/filter"} component={Home} />
<PrivateRoute path={"/#preview"} component={Home} />
<PrivateRoute path={"/rooms"} component={Home} />
<PrivateRoute path={"/form-gallery/:folderId"} component={FormGallery} />
{/* <PrivateRoute path={ROOMS_URL} component={VirtualRooms} /> */}
<PrivateRoute
exact
path={["/setiings", "/settings/:setting"]}
component={Settings}
/>
<PrivateRoute component={Error404Route} />
</Switch>
);

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

@ -22,6 +22,7 @@ import { Events } from "@docspace/client/src/helpers/filesConstants";
import config from "PACKAGE_FILE";
import { combineUrl } from "@docspace/common/utils";
import RoomsFilter from "@docspace/common/api/rooms/filter";
import { getCategoryUrl } from "SRC_DIR/helpers/utils";
const StyledContainer = styled.div`
.table-container_group-menu {
@ -387,6 +388,8 @@ class SectionHeaderContent extends React.Component {
history,
setAlreadyFetchingRooms,
categoryType,
} = this.props;
setIsLoading(true);
@ -397,14 +400,14 @@ class SectionHeaderContent extends React.Component {
.then(() => {
const filter = RoomsFilter.getDefault();
const urlFilter = filter.toUrlParams();
const filterParamsStr = filter.toUrlParams();
const url = getCategoryUrl(this.categoryType, filter.folder);
const pathname = `${url}?${filterParamsStr}`;
history.push(
combineUrl(
AppServerConfig.proxyURL,
config.homepage,
`/rooms?${urlFilter}`
)
combineUrl(AppServerConfig.proxyURL, config.homepage, pathname)
);
})
.finally(() => {
@ -538,6 +541,8 @@ export default inject(
activeFolders,
setAlreadyFetchingRooms,
categoryType,
} = filesStore;
const {
@ -633,6 +638,8 @@ export default inject(
isArchiveFolder,
setAlreadyFetchingRooms,
categoryType,
};
}
)(

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

@ -28,10 +28,12 @@ import { createTreeFolders } from "../../helpers/files-helpers";
import MediaViewer from "./MediaViewer";
import DragTooltip from "../../components/DragTooltip";
import { observer, inject } from "mobx-react";
import config from "PACKAGE_FILE";
//import config from "PACKAGE_FILE";
import { Consumer } from "@docspace/components/utils/context";
import { Events } from "@docspace/client/src/helpers/filesConstants";
import RoomsFilter from "@docspace/common/api/rooms/filter";
import { getCategoryType } from "SRC_DIR/helpers/utils";
import { CategoryType } from "SRC_DIR/helpers/constants";
class PureHome extends React.Component {
componentDidMount() {
@ -40,7 +42,7 @@ class PureHome extends React.Component {
fetchRooms,
alreadyFetchingRooms,
setAlreadyFetchingRooms,
homepage,
//homepage,
setIsLoading,
setFirstLoad,
expandedKeys,
@ -57,19 +59,12 @@ class PureHome extends React.Component {
localStorage.removeItem("isFirstUrl");
}
const reg = new RegExp(`${homepage}((/?)$|/filter)`, "gmi"); //TODO: Always find?
const roomsReg = new RegExp(`${homepage}((/?)$|/rooms)`, "gmi");
const match = window.location.pathname.match(reg);
const roomsMatch = window.location.pathname.match(roomsReg);
const categoryType = getCategoryType(location);
let filterObj = null;
let isRooms = false;
if (
window.location.href.indexOf("/files/#preview") > 1 &&
playlist.length < 1
) {
if (window.location.href.indexOf("/#preview") > 1 && playlist.length < 1) {
const pathname = window.location.href;
const fileId = pathname.slice(pathname.indexOf("#preview") + 9);
@ -89,11 +84,21 @@ class PureHome extends React.Component {
return;
}
if (match && match.length > 0) {
if (window.location.href.includes("#preview")) {
if (
categoryType == CategoryType.Shared ||
categoryType == CategoryType.Archive
) {
filterObj = RoomsFilter.getFilter(window.location);
isRooms = true;
if (!filterObj) {
setIsLoading(true);
this.fetchDefaultRooms();
return;
}
} else {
filterObj = FilesFilter.getFilter(window.location);
if (!filterObj) {
@ -104,23 +109,6 @@ class PureHome extends React.Component {
}
}
if (roomsMatch && roomsMatch.length > 0) {
if (window.location.href.includes("#preview")) {
return;
}
isRooms = true;
filterObj = RoomsFilter.getFilter(window.location);
if (!filterObj) {
setIsLoading(true);
this.fetchDefaultRooms();
return;
}
}
if (!filterObj) return;
if (isRooms && alreadyFetchingRooms) return setAlreadyFetchingRooms(false);
@ -257,9 +245,9 @@ class PureHome extends React.Component {
}
fetchDefaultFiles = () => {
const { isVisitor, fetchFiles, setIsLoading, setFirstLoad } = this.props;
const { fetchFiles, setIsLoading, setFirstLoad } = this.props;
const filterObj = FilesFilter.getDefault();
const folderId = isVisitor ? "@common" : filterObj.folder;
const folderId = filterObj.folder;
fetchFiles(folderId).finally(() => {
setIsLoading(false);
@ -555,7 +543,7 @@ export default inject(
}
return {
homepage: config.homepage,
//homepage: config.homepage,
firstLoad,
dragging,
viewAs,

52
packages/client/src/store/FilesStore.js
View File

@ -19,6 +19,12 @@ import config from "PACKAGE_FILE";
import { thumbnailStatuses } from "@docspace/client/src/helpers/filesConstants";
import { loopTreeFolders } from "../helpers/files-helpers";
import { openDocEditor as openEditor } from "@docspace/client/src/helpers/filesUtils";
import { getCategoryUrl } from "SRC_DIR/helpers/utils";
import { CategoryType } from "SRC_DIR/helpers/constants";
import {
getCategoryType,
getCategoryTypeByFolderType,
} from "SRC_DIR/helpers/utils";
const { FilesFilter, RoomsFilter } = api;
const storageViewAs = localStorage.getItem("viewAs");
@ -62,6 +68,8 @@ class FilesStore {
filter = FilesFilter.getDefault(); //TODO: FILTER
roomsFilter = RoomsFilter.getDefault();
categoryType = getCategoryType(window.location);
loadTimeout = null;
hotkeyCaret = null;
hotkeyCaretStart = null;
@ -583,12 +591,22 @@ class FilesStore {
return api.files.setFileOwner(folderIds, fileIds, ownerId);
};
setFilterUrl = (filter, isRooms = false) => {
const urlFilter = filter.toUrlParams();
setFilterUrl = (filter) => {
const filterParamsStr = filter.toUrlParams();
const str = isRooms ? `/rooms?${urlFilter}` : `/filter?${urlFilter}`;
const url = getCategoryUrl(this.categoryType, filter.folder);
history.push(combineUrl(AppServerConfig.proxyURL, config.homepage, str));
const pathname = `${url}?${filterParamsStr}`;
console.log("setFilterUrl", {
categoryType: this.categoryType,
url,
filterParamsStr,
});
history.push(
combineUrl(AppServerConfig.proxyURL, config.homepage, pathname)
);
};
isEmptyLastPageAfterOperation = (newSelection) => {
@ -697,6 +715,19 @@ class FilesStore {
const isPrivacyFolder =
data.current.rootFolderType === FolderType.Privacy;
runInAction(() => {
this.categoryType = getCategoryTypeByFolderType(
data.current.rootFolderType,
data.current.parentId
);
});
console.log("fetchFiles", {
categoryType: this.categoryType,
rootFolderType: data.current.rootFolderType,
parentId: data.current.parentId,
});
this.setFilesFilter(filterData); //TODO: FILTER
runInAction(() => {
@ -837,6 +868,19 @@ class FilesStore {
}
}
runInAction(() => {
this.categoryType = getCategoryTypeByFolderType(
data.current.rootFolderType,
data.current.parentId
);
});
console.log("fetchRooms", {
categoryType: this.categoryType,
rootFolderType: data.current.rootFolderType,
parentId: data.current.parentId,
});
this.setRoomsFilter(filterData);
runInAction(() => {