diff --git a/lerna.json b/lerna.json index de657d1449..b09d69bed8 100644 --- a/lerna.json +++ b/lerna.json @@ -6,7 +6,8 @@ "packages/asc-web-common", "web/ASC.Web.Login", "web/ASC.Web.Client", - "products/ASC.People/Client" + "products/ASC.People/Client", + "products/ASC.Files/Client" ], "useWorkspaces": true } diff --git a/package.json b/package.json index 884cfc03f0..18194612bf 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "packages/asc-web-common", "web/ASC.Web.Login", "web/ASC.Web.Client", - "products/ASC.People/Client" + "products/ASC.People/Client", + "products/ASC.Files/Client" ], "scripts": { "wipe": "rm -fr node_modules yarn.lock web/**/node_modules products/**/node_modules", diff --git a/products/ASC.Files/Client/Dockerfile b/products/ASC.Files/Client/Dockerfile new file mode 100644 index 0000000000..cbd791f88b --- /dev/null +++ b/products/ASC.Files/Client/Dockerfile @@ -0,0 +1,15 @@ +FROM node:12 +WORKDIR /usr/src/app + +COPY package.json ./ +COPY yarn.lock ./ + +RUN yarn install + +COPY . . + +RUN yarn build + +EXPOSE 5008 + +CMD [ "yarn", "build:start" ] diff --git a/products/ASC.Files/Client/package.json b/products/ASC.Files/Client/package.json index 8623811197..2aa724ad20 100644 --- a/products/ASC.Files/Client/package.json +++ b/products/ASC.Files/Client/package.json @@ -1,71 +1,76 @@ { "name": "@appserver/files", "version": "0.1.0", - "private": true, - "homepage": "/products/files", - "dependencies": { - "@welldone-software/why-did-you-render": "^4.2.5", - "connected-react-router": "6.6.1", - "copy-to-clipboard": "^3.2.0", - "history": "4.10.1", - "i18next": "19.0.3", - "i18next-browser-languagedetector": "4.0.1", - "i18next-xhr-backend": "3.2.2", - "lodash": "4.17.19", - "lodash-es": "4.17.15", - "merge": "^1.2.1", - "node-sass": "^4.13.0", - "oidc-client": "^1.10.1", - "prop-types": "^15.7.2", - "react": "^16.12.0", - "react-content-loader": "^5.1.1", - "react-device-detect": "^1.11.14", - "react-dom": "^16.12.0", - "react-i18next": "11.3.0", - "react-redux": "7.1.3", - "react-router": "5.1.2", - "react-router-dom": "5.1.2", - "react-virtualized-auto-sizer": "^1.0.2", - "react-window": "^1.8.5", - "redux": "4.0.5", - "redux-thunk": "2.3.0", - "reselect": "^4.0.0", - "styled-components": "^5.0.0" + "private": "true", + "scripts": { + "build": "webpack --mode production", + "build:dev": "webpack --mode development", + "build:start": "cd dist && PORT=5008 npx serve", + "start": "webpack-dev-server --mode development", + "start:live": "webpack-dev-server --open --mode development --liveReload", + "docker:build": "docker build . -t files", + "docker:run": "docker run -p 5008:5008 files" }, "devDependencies": { - "copy-webpack-plugin": "^5.1.1", - "cross-env": "^6.0.3", - "customize-cra": "^1.0.0", - "prettier": "2.1.2", - "react-app-rewired": "^2.1.6", - "react-scripts": "3.4.3", + "@babel/core": "7.9.6", + "@babel/plugin-proposal-class-properties": "^7.12.1", + "@babel/plugin-proposal-export-default-from": "^7.12.1", + "@babel/plugin-transform-runtime": "^7.12.1", + "@babel/preset-env": "^7.12.7", + "@babel/preset-react": "7.9.4", + "@svgr/webpack": "^5.5.0", + "babel-loader": "8.1.0", + "css-loader": "^3.6.0", + "html-webpack-plugin": "4.5.0", + "i18next": "^19.8.4", + "json-loader": "^0.5.7", + "react-i18next": "^11.7.3", + "source-map-loader": "^1.1.2", + "style-loader": "1.2.1", + "webpack": "5.0.0", + "webpack-cli": "3.3.11", + "webpack-dev-server": "3.11.0" + }, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@redux-dynostore/core": "^3.1.1", + "@redux-dynostore/react-redux": "^3.1.1", + "attr-accept": "^2.2.2", + "axios": "^0.21.0", + "email-addresses": "^3.1.0", + "i18next-xhr-backend": "^3.2.2", + "moment": "^2.29.1", + "prop-types": "^15.7.2", + "rc-tree": "^4.0.0-beta.2", + "re-resizable": "^6.9.0", + "react": "^16.14.0", + "react-autosize-textarea": "^7.1.0", + "react-content-loader": "^5.1.4", + "react-custom-scrollbars": "^4.2.1", + "react-device-detect": "^1.14.0", + "react-dom": "^16.14.0", + "react-dropzone": "^11.2.4", + "react-onclickoutside": "^6.9.0", + "react-redux": "^7.2.2", + "react-resize-detector": "^5.2.0", + "react-router": "^5.2.0", + "react-router-dom": "^5.2.0", + "react-string-format": "^0.1.0", + "react-svg": "^11.1.2", + "react-text-mask": "^5.4.3", + "react-toastify": "^6.1.0", + "react-tooltip": "^4.2.11", + "react-virtualized-auto-sizer": "^1.0.2", + "react-window": "^1.8.6", + "react-window-infinite-loader": "^1.0.5", + "redux": "^4.0.5", "redux-devtools-extension": "^2.13.8", - "rimraf": "3.0.2", - "webpack-bundle-analyzer": "^3.8.0", - "workbox-build": "^5.1.3" - }, - "eslintConfig": { - "extends": "react-app" - }, - "scripts": { - "analyse": "node analyse.js", - "start": "react-app-rewired start", - "build": "rimraf ./build && react-app-rewired build && npm run build-sw && npm run clean-cra-sw", - "build-sw": "node ./src/sw-build.js", - "clean-cra-sw": "rm -f build/precache-manifest.*.js && rm -f build/service-worker.js", - "test": "cross-env CI=true react-app-rewired test --env=jsdom", - "eject": "react-scripts eject" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] + "redux-thunk": "^2.3.0", + "reselect": "^4.0.0", + "resize-image": "^0.1.0", + "sass": "^1.29.0", + "sass-loader": "^10.1.0", + "sjcl": "^1.0.8", + "styled-components": "^5.2.1" } } diff --git a/products/ASC.Files/Client/src/FilesContent.jsx b/products/ASC.Files/Client/src/FilesContent.jsx new file mode 100644 index 0000000000..33cc03ef84 --- /dev/null +++ b/products/ASC.Files/Client/src/FilesContent.jsx @@ -0,0 +1,22 @@ +import React, { useEffect } from "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"; +const FilesContent = (props) => { + const store = useStore(); + + // useEffect(() => { + // console.log("Store object", store); + // store.reducerManager.add("portal", portalReducer); + + // return store.reducerManager.remove("portal"); + // }, []); + + return
FILES PAGE
; +}; + +export default FilesContent; + +//export default dynamic("portal", attachReducer(portalReducer))(FilesContent); diff --git a/products/ASC.Files/Client/src/FilesPage.jsx b/products/ASC.Files/Client/src/FilesPage.jsx new file mode 100644 index 0000000000..f0677247f1 --- /dev/null +++ b/products/ASC.Files/Client/src/FilesPage.jsx @@ -0,0 +1,13 @@ +import { Provider } from "react-redux"; +import store from "studio/store"; +import Frame from "studio/frame"; + +import "./custom.scss"; + +const FilesPage = () => ( + + + +); + +ReactDOM.render(, document.getElementById("app")); diff --git a/products/ASC.Files/Client/src/index.html b/products/ASC.Files/Client/src/index.html new file mode 100644 index 0000000000..d416fd979d --- /dev/null +++ b/products/ASC.Files/Client/src/index.html @@ -0,0 +1,11 @@ + + + + + + Files + + +
+ + diff --git a/products/ASC.Files/Client/src/index.js b/products/ASC.Files/Client/src/index.js index 76c9a631ef..39443691f8 100644 --- a/products/ASC.Files/Client/src/index.js +++ b/products/ASC.Files/Client/src/index.js @@ -1,29 +1,31 @@ +import("./FilesPage"); + //import "./wdyr"; -import React from "react"; -import ReactDOM from "react-dom"; -import { Provider } from "react-redux"; +// import React from "react"; +// import ReactDOM from "react-dom"; +// import { Provider } from "react-redux"; -import store from "./store/store"; -import "./custom.scss"; -import App from "./App"; +// import store from "./store/store"; +// import "./custom.scss"; +// import App from "./App"; -import * as serviceWorker from "./serviceWorker"; -import { ErrorBoundary, utils } from "@appserver/common"; -const { redirectToDefaultPage } = utils; +// import * as serviceWorker from "./serviceWorker"; +// import { ErrorBoundary, utils } from "@appserver/common"; +// const { redirectToDefaultPage } = utils; -redirectToDefaultPage(); +// redirectToDefaultPage(); -ReactDOM.render( - - - - - , - document.getElementById("root") -); +// ReactDOM.render( +// +// +// +// +// , +// document.getElementById("root") +// ); -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.register(); +// // If you want your app to work offline and load faster, you can change +// // unregister() to register() below. Note this comes with some pitfalls. +// // Learn more about service workers: https://bit.ly/CRA-PWA +// serviceWorker.register(); diff --git a/products/ASC.Files/Client/webpack.config.js b/products/ASC.Files/Client/webpack.config.js new file mode 100644 index 0000000000..f9c22b622c --- /dev/null +++ b/products/ASC.Files/Client/webpack.config.js @@ -0,0 +1,102 @@ +const HtmlWebPackPlugin = require("html-webpack-plugin"); +const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); +const path = require("path"); + +const deps = require("./package.json").dependencies; +module.exports = { + output: { + publicPath: "http://localhost:5008/", + filename: "bundle.js", + path: path.resolve(__dirname, "dist"), + }, + + resolve: { + extensions: [".jsx", ".js", ".json"], + fallback: { + crypto: false, + }, + }, + + devServer: { + port: 5008, + contentBase: path.join(__dirname, "public"), + }, + + module: { + rules: [ + { + test: /\.m?js/, + type: "javascript/auto", + resolve: { + fullySpecified: false, + }, + }, + { + test: /\.react.svg$/, + use: ["@svgr/webpack"], + }, + { test: /\.json$/, loader: "json-loader" }, + { + test: /\.css$/i, + use: ["style-loader", "css-loader"], + }, + { + test: /\.s[ac]ss$/i, + use: [ + // Creates `style` nodes from JS strings + "style-loader", + // Translates CSS into CommonJS + "css-loader", + // Compiles Sass to CSS + "sass-loader", + ], + }, + { + test: /\.(js|jsx)$/, + exclude: /node_modules/, + use: [ + { + loader: "babel-loader", + options: { + presets: ["@babel/preset-react", "@babel/preset-env"], + plugins: [ + "@babel/plugin-transform-runtime", + "@babel/plugin-proposal-class-properties", + "@babel/plugin-proposal-export-default-from", + ], + }, + }, + "source-map-loader", + ], + }, + ], + }, + + plugins: [ + new ModuleFederationPlugin({ + name: "files", + filename: "remoteEntry.js", + remotes: { + studio: "studio@http://localhost:5001/remoteEntry.js", + files: "files@http://localhost:5008/remoteEntry.js", + }, + exposes: { + "./page": "./src/FilesContent.jsx", + }, + shared: { + ...deps, + react: { + singleton: true, + requiredVersion: deps.react, + }, + "react-dom": { + singleton: true, + requiredVersion: deps["react-dom"], + }, + }, + }), + new HtmlWebPackPlugin({ + template: "./src/index.html", + }), + ], +}; diff --git a/products/ASC.People/Client/Dockerfile b/products/ASC.People/Client/Dockerfile index 06e50746cb..128832b5d3 100644 --- a/products/ASC.People/Client/Dockerfile +++ b/products/ASC.People/Client/Dockerfile @@ -10,6 +10,6 @@ COPY . . RUN yarn build -EXPOSE 8080 +EXPOSE 5002 CMD [ "yarn", "build:start" ] diff --git a/products/ASC.People/Client/package.json b/products/ASC.People/Client/package.json index 5062ba9fe8..eabba80a43 100644 --- a/products/ASC.People/Client/package.json +++ b/products/ASC.People/Client/package.json @@ -35,6 +35,8 @@ "@babel/runtime": "^7.12.5", "@redux-dynostore/core": "^3.1.1", "@redux-dynostore/react-redux": "^3.1.1", + "@redux-dynostore/react-redux-subspace": "^3.1.1", + "@redux-dynostore/redux-subspace": "^3.1.1", "attr-accept": "^2.2.2", "axios": "^0.21.0", "email-addresses": "^3.1.0", diff --git a/products/ASC.People/Client/src/PeopleContent.jsx b/products/ASC.People/Client/src/PeopleContent.jsx index 377e2bbd1a..55e116cb9a 100644 --- a/products/ASC.People/Client/src/PeopleContent.jsx +++ b/products/ASC.People/Client/src/PeopleContent.jsx @@ -7,12 +7,10 @@ import portalReducer from "./store/portal/reducers"; const PeopleContent = (props) => { const store = useStore(); - // useEffect(() => { - // console.log("Store object", store); - // store.reducerManager.add("portal", portalReducer); - - // return store.reducerManager.remove("portal"); - // }, []); + useEffect(() => { + console.log("Store object", store); + return store.detachReducers(["portal"]); + }, []); return
PEOPLE PAGE
; }; diff --git a/web/ASC.Web.Client/src/Frame.jsx b/web/ASC.Web.Client/src/Frame.jsx index 3deda03812..5efd685afd 100644 --- a/web/ASC.Web.Client/src/Frame.jsx +++ b/web/ASC.Web.Client/src/Frame.jsx @@ -21,6 +21,7 @@ const { const Home = React.lazy(() => import("studio/home")); const Login = React.lazy(() => import("login/page")); const People = React.lazy(() => import("people/page")); +const Files = React.lazy(() => import("files/page")); const HomeRoute = () => ( @@ -46,6 +47,14 @@ const PeopleRoute = () => ( ); +const FilesRoute = () => ( + + + + + +); + const Frame = ({ items = [], page = "home", ...rest }) => { useEffect(() => { //utils.removeTempContent(); @@ -88,6 +97,10 @@ const Frame = ({ items = [], page = "home", ...rest }) => { path={["/products/people", "/products/people/filter"]} component={PeopleRoute} /> +