Web: Fixed Files opening + added devtool: "inline-source-map"

products/ASC.Files/Client/package.json

@@ -2,6 +2,7 @@
   "name": "@appserver/files",
   "version": "0.1.0",
   "private": "true",
+  "homepage": "/products/files",
   "scripts": {
     "start": "webpack-cli serve",
     "build": "webpack --mode production",

products/ASC.Files/Client/public/index.html

@@ -254,6 +254,7 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
     <script>
+      console.log("FILES APP STARTED");
       var pathname = window.location.pathname.toLowerCase();
       if (
         pathname.indexOf("doceditor") === -1 &&

products/ASC.Files/Client/src/App.js

@@ -1,48 +1,8 @@
 import React from "react";
-import store from "studio/store";
+//import Shell from "studio/shell";
-import ErrorBoundary from "@appserver/common/components/ErrorBoundary";
-import { Provider as MobxProvider } from "mobx-react";
-import ThemeProvider from "@appserver/components/theme-provider";
-import "./custom.scss";
-import { Base, Dark } from "@appserver/components/themes";
-import initFilesStore from "./store/InitFilesStore";
-import filesStore from "./store/FilesStore";
-import settingsStore from "./store/SettingsStore";
-import mediaViewerDataStore from "./store/MediaViewerDataStore";
-import formatsStore from "./store/FormatsStore";
-import versionHistoryStore from "./store/VersionHistoryStore";
-import uploadDataStore from "./store/UploadDataStore";
-import dialogsStore from "./store/DialogsStore";
-import treeFoldersStore from "./store/TreeFoldersStore";
-import selectedFolderStore from "./store/SelectedFolderStore";
-import "./i18n";
-
-const Shell = React.lazy(() => import("./Files"));
 
 const App = () => {
-  return (
+  return <Shell />;
-    <ThemeProvider theme={Base}>
-      <MobxProvider
-        auth={store.auth}
-        initFilesStore={initFilesStore}
-        filesStore={filesStore}
-        settingsStore={settingsStore}
-        mediaViewerDataStore={mediaViewerDataStore}
-        formatsStore={formatsStore}
-        versionHistoryStore={versionHistoryStore}
-        uploadDataStore={uploadDataStore}
-        dialogsStore={dialogsStore}
-        treeFoldersStore={treeFoldersStore}
-        selectedFolderStore={selectedFolderStore}
-      >
-        <ErrorBoundary>
-          <React.Suspense fallback={null}>
-            <Shell />
-          </React.Suspense>
-        </ErrorBoundary>
-      </MobxProvider>
-    </ThemeProvider>
-  );
 };
 
 export default App;

products/ASC.Files/Client/src/Files.jsx

@@ -1,41 +1,30 @@
-import React, { useEffect, Suspense } from "react";
+import React from "react";
-//import { Box, Text } from "@appserver/components/src";
+import { Provider as FilesProvider } from "mobx-react";
-// import { useStore } from "react-redux";
-// import dynamic from "@redux-dynostore/react-redux";
-// import { attachReducer } from "@redux-dynostore/core";
-//import rootReducer from "./store/rootReducer";
-//import portalReducer from "./store/portal/reducers";
 import { inject, observer } from "mobx-react";
-
+import { Switch, Route } from "react-router-dom";
-import { Router, Switch, Redirect, Route } from "react-router-dom";
 import Home from "./components/pages/Home";
 import DocEditor from "./components/pages/DocEditor";
 import Settings from "./components/pages/Settings";
 import VersionHistory from "./components/pages/VersionHistory";
 import config from "../package.json";
-import "./i18n";
-
-import Layout from "@appserver/common/components/Layout";
-import history from "@appserver/common/history";
 import PrivateRoute from "@appserver/common/components/PrivateRoute";
-import PublicRoute from "@appserver/common/components/PublicRoute";
-import NavMenu from "@appserver/common/components/NavMenu";
-import Main from "@appserver/common/components/Main";
-import ScrollToTop from "@appserver/common/components/Layout/ScrollToTop";
 import toastr from "@appserver/common/components/Toast/toastr";
 import { updateTempContent } from "@appserver/common/utils";
+import initFilesStore from "./store/InitFilesStore";
+import filesStore from "./store/FilesStore";
+import settingsStore from "./store/SettingsStore";
+import mediaViewerDataStore from "./store/MediaViewerDataStore";
+import formatsStore from "./store/FormatsStore";
+import versionHistoryStore from "./store/VersionHistoryStore";
+import uploadDataStore from "./store/UploadDataStore";
+import dialogsStore from "./store/DialogsStore";
+import treeFoldersStore from "./store/TreeFoldersStore";
+import selectedFolderStore from "./store/SelectedFolderStore";
+import "./custom.scss";
+import "./i18n";
 //import { regDesktop } from "@appserver/common/src/desktop";
 
-const Error520 = React.lazy(() =>
+const Error404 = React.lazy(() => import("@appserver/common/pages/errors/404"));
-  import("@appserver/common/pages/errors/520")
-);
-const Error404 = React.lazy(() =>
-  import("@appserver/common/pages/errors/404")
-);
-const Offline = React.lazy(() =>
-  import("@appserver/common/pages/errors/offline")
-);
-//const Login = React.lazy(() => import("login/page"));
 
 class FilesContent extends React.Component {
   constructor(props) {
@@ -85,17 +74,10 @@ class FilesContent extends React.Component {
   //   }
 
   render() {
-    const { homepage, isDesktop } = this.props;
+    const { homepage /*, isDesktop*/ } = this.props;
 
-    return navigator.onLine ? (
+    return (
-      <Layout>
-        <Router history={history}>
-          <ScrollToTop />
-          {!this.isEditor && <NavMenu />}
-          <Main isDesktop={isDesktop}>
-            <Suspense fallback={null}>
       <Switch>
-                <Redirect exact from="/" to={`${homepage}`} />
         <PrivateRoute
           exact
           path={`${homepage}/settings/:setting`}
@@ -103,10 +85,7 @@ class FilesContent extends React.Component {
         />
         <Route
           exact
-                  path={[
+          path={[`${homepage}/doceditor`, `/Products/Files/DocEditor.aspx`]}
-                    `${homepage}/doceditor`,
-                    `/Products/Files/DocEditor.aspx`,
-                  ]}
           component={DocEditor}
         />
         <PrivateRoute
@@ -116,48 +95,45 @@ class FilesContent extends React.Component {
         />
         <PrivateRoute exact path={homepage} component={Home} />
         <PrivateRoute path={`${homepage}/filter`} component={Home} />
-                {/* <PublicRoute
-                  exact
-                  path={[
-                    "/login",
-                    "/login/error=:error",
-                    "/login/confirmed-email=:confirmedEmail",
-                  ]}
-                  component={Login}
-                /> */}
-                <PrivateRoute
-                  exact
-                  path={`/error=:error`}
-                  component={Error520}
-                />
         <PrivateRoute component={Error404} />
       </Switch>
-            </Suspense>
-          </Main>
-        </Router>
-      </Layout>
-    ) : (
-      <Offline />
     );
   }
 }
 
-export default inject(({ auth, initFilesStore }) => {
+const Files = inject(({ auth, initFilesStore }) => {
-  const homepage = "/products/files"; //TODO: add homepage to config?
+  const homepage = config.homepage; // "/products/files"; //TODO: add homepage to config?
   return {
-    isDesktop: auth.settingsStore.isDesktopClient,
+    //isDesktop: auth.settingsStore.isDesktopClient,
     user: auth.userStore.user,
     isAuthenticated: auth.isAuthenticated,
     homepage: auth.settingsStore.homepage || homepage,
     encryptionKeys: auth.settingsStore.encryptionKeys,
     isEncryption: auth.settingsStore.isEncryptionSupport,
-    isLoaded: initFilesStore.isLoaded,
+    isLoaded: auth.isLoaded && initFilesStore.isLoaded,
     setIsLoaded: initFilesStore.setIsLoaded,
     setEncryptionKeys: auth.settingsStore.setEncryptionKeys,
     loadFilesInfo: async () => {
-      await auth.init();
+      //await auth.init();
       await initFilesStore.initFiles();
       auth.setProductVersion(config.version);
     },
   };
 })(observer(FilesContent));
+
+export default () => (
+  <FilesProvider
+    initFilesStore={initFilesStore}
+    filesStore={filesStore}
+    settingsStore={settingsStore}
+    mediaViewerDataStore={mediaViewerDataStore}
+    formatsStore={formatsStore}
+    versionHistoryStore={versionHistoryStore}
+    uploadDataStore={uploadDataStore}
+    dialogsStore={dialogsStore}
+    treeFoldersStore={treeFoldersStore}
+    selectedFolderStore={selectedFolderStore}
+  >
+    <Files />
+  </FilesProvider>
+);

products/ASC.Files/Client/webpack.config.js

@@ -7,6 +7,7 @@ const deps = require("./package.json").dependencies;
 module.exports = {
   entry: "./src/index",
   mode: "development",
+  devtool: "inline-source-map",
   devServer: {
     contentBase: [path.join(__dirname, "public"), path.join(__dirname, "dist")],
     contentBasePublicPath: "/products/files/",
@@ -14,13 +15,14 @@ module.exports = {
     historyApiFallback: true,
     hot: false,
     hotOnly: false,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
+      "Access-Control-Allow-Headers":
+        "X-Requested-With, content-type, Authorization",
     },
-
+    //openPage: "http://localhost:8092/products/files",
-  output: {
-    publicPath: "auto",
-    chunkFilename: "[id].[contenthash].js",
   },
-
   resolve: {
     extensions: [".jsx", ".js", ".json"],
     fallback: {
@@ -28,6 +30,11 @@ module.exports = {
     },
   },
 
+  output: {
+    publicPath: "auto",
+    chunkFilename: "[id].[contenthash].js",
+  },
+
   module: {
     rules: [
       {
@@ -86,7 +93,7 @@ module.exports = {
         studio: "studio@http://localhost:5001/remoteEntry.js",
       },
       exposes: {
-        "./page": "./src/bootstrap.js", //TODO: "./page": "./src/App.js",
+        "./app": "./src/Files.jsx",
       },
       shared: {
         ...deps,

products/ASC.People/Client/webpack.config.js

@@ -7,6 +7,7 @@ const deps = require("./package.json").dependencies;
 module.exports = {
   entry: "./src/index",
   mode: "development",
+  devtool: "inline-source-map",
   devServer: {
     contentBase: [path.join(__dirname, "public"), path.join(__dirname, "dist")],
     contentBasePublicPath: "/products/people/",
@@ -85,7 +86,7 @@ module.exports = {
         studio: "studio@http://localhost:5001/remoteEntry.js",
       },
       exposes: {
-        "./page": "./src/People.jsx",
+        "./app": "./src/People.jsx",
       },
       shared: {
         ...deps,

web/ASC.Web.Client/src/App.js

@@ -1,30 +1,12 @@
 import React from "react";
-import store from "studio/store";
 import ErrorBoundary from "@appserver/common/components/ErrorBoundary";
-import { Provider as MobxProvider } from "mobx-react";
+import Shell from "studio/shell";
-import ThemeProvider from "@appserver/components/theme-provider";
-import "./custom.scss";
-import { Base, Dark } from "@appserver/components/themes";
-import "./i18n";
 
-const Shell = React.lazy(() => import("./Shell")); //import("studio/shell"));
 const App = () => {
   return (
-    <ThemeProvider theme={Base}>
-      <MobxProvider
-        {...store}
-        // auth={authStore}
-        // payments={paymentStore}
-        // wizard={wizardStore}
-        // setup={setupStore}
-      >
     <ErrorBoundary>
-          <React.Suspense fallback={null}>
       <Shell />
-          </React.Suspense>
     </ErrorBoundary>
-      </MobxProvider>
-    </ThemeProvider>
   );
 };
 

web/ASC.Web.Client/src/Shell.jsx

@@ -12,14 +12,20 @@ import ScrollToTop from "@appserver/common/components/Layout/ScrollToTop";
 import history from "@appserver/common/history";
 import toastr from "@appserver/common/components/Toast";
 import { updateTempContent } from "@appserver/common/utils";
+import { Provider as MobxProvider } from "mobx-react";
+import ThemeProvider from "@appserver/components/theme-provider";
+import { Base, Dark } from "@appserver/components/themes";
+import store from "studio/store";
 import config from "../package.json";
+import "./custom.scss";
+import "./i18n";
 
 const Payments = React.lazy(() => import("./components/pages/Payments"));
 const Error404 = React.lazy(() => import("@appserver/common/pages/errors/404"));
 const Home = React.lazy(() => import("./components/pages/Home"));
-const Login = React.lazy(() => import("login/page"));
+const Login = React.lazy(() => import("login/app"));
-const People = React.lazy(() => import("people/page"));
+const People = React.lazy(() => import("people/app"));
-const Files = React.lazy(() => import("files/page"));
+const Files = React.lazy(() => import("files/app"));
 const About = React.lazy(() => import("./components/pages/About"));
 const Settings = React.lazy(() => import("./components/pages/Settings"));
 const ComingSoon = React.lazy(() => import("./components/pages/ComingSoon"));
@@ -224,7 +230,7 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
 
 // export default connect(mapStateToProps, mapDispatchToProps)(Shell);
 
-export default inject(({ auth }) => {
+const ShellWrapper = inject(({ auth }) => {
   const { init, isLoaded } = auth;
 
   const pathname = window.location.pathname.toLowerCase();
@@ -239,3 +245,11 @@ export default inject(({ auth }) => {
     isLoaded,
   };
 })(observer(Shell));
+
+export default () => (
+  <ThemeProvider theme={Base}>
+    <MobxProvider {...store}>
+      <ShellWrapper />
+    </MobxProvider>
+  </ThemeProvider>
+);

web/ASC.Web.Client/webpack.config.js

@@ -7,6 +7,7 @@ const deps = require("./package.json").dependencies;
 module.exports = {
   entry: "./src/index",
   mode: "development",
+  devtool: "inline-source-map",
   devServer: {
     contentBase: [path.join(__dirname, "public"), path.join(__dirname, "dist")],
     port: 5001,

web/ASC.Web.Login/webpack.config.js

@@ -7,7 +7,7 @@ const deps = require("./package.json").dependencies;
 module.exports = {
   entry: "./src/index",
   mode: "development",
-
+  devtool: "inline-source-map",
   devServer: {
     contentBase: [path.join(__dirname, "public"), path.join(__dirname, "dist")],
     contentBasePublicPath: "/login",
@@ -76,7 +76,7 @@ module.exports = {
         studio: "studio@http://localhost:5001/remoteEntry.js",
       },
       exposes: {
-        "./page": "./src/Login.jsx",
+        "./app": "./src/Login.jsx",
       },
       shared: {
         ...deps,