From 0c72a6a1408d07410ecb37fbc98d02d97f17d167 Mon Sep 17 00:00:00 2001 From: Vladislav Makhov Date: Mon, 1 Feb 2021 14:01:09 +0300 Subject: [PATCH] web: add mobx provider --- web/ASC.Web.Client/src/App.js | 45 ++++++++++++++++------- web/ASC.Web.Client/src/index.js | 15 ++++++-- web/ASC.Web.Common/src/store/UserStore.js | 12 +++++- 3 files changed, 53 insertions(+), 19 deletions(-) diff --git a/web/ASC.Web.Client/src/App.js b/web/ASC.Web.Client/src/App.js index a305897594..f945c693ac 100644 --- a/web/ASC.Web.Client/src/App.js +++ b/web/ASC.Web.Client/src/App.js @@ -1,4 +1,4 @@ -import React, { Suspense, lazy, useEffect } from "react"; +import React, { Suspense, lazy /*useEffect*/ } from "react"; import { Router, Route, Switch } from "react-router-dom"; import { connect } from "react-redux"; import { @@ -16,7 +16,7 @@ import { toastr, } from "asc-web-common"; import Home from "./components/pages/Home"; -import { observer } from "mobx-react"; +import { inject, observer } from "mobx-react"; const About = lazy(() => import("./components/pages/About")); const Confirm = lazy(() => import("./components/pages/Confirm")); @@ -31,7 +31,7 @@ const { //getModules, getIsAuthenticated, } = CommonStore.auth.actions; -const { userStore } = CommonStore; +//const { userStore } = CommonStore; class App extends React.Component { constructor(props) { @@ -43,7 +43,7 @@ class App extends React.Component { componentDidMount() { const { getPortalSettings, - //getUser, + getUser, //getModules, setIsLoaded, getIsAuthenticated, @@ -57,14 +57,13 @@ class App extends React.Component { setIsLoaded(); return; } - const requests = []; if (!isAuthenticated) { requests.push(getPortalSettings()); } else if ( !window.location.pathname.includes("confirm/EmailActivation") ) { - //requests.push(getUser()); + requests.push(getUser()); requests.push(getPortalSettings()); //requests.push(getModules()); } @@ -147,12 +146,32 @@ const mapDispatchToProps = (dispatch) => { }; }; -const AppWrapper = observer((props) => { - useEffect(() => { - userStore.setCurrentUser(); - }, []); +// const AppWrapper = inject(({ userStore }, { ...props }) => ({ +// setCurrentUser: userStore.setCurrentUser, +// user: userStore.user, +// props, +// }))( +// observer(({ props, setCurrentUser, user }) => { +// useEffect(() => { +// setCurrentUser(); +// }, [setCurrentUser]); - return ; -}); +// return ; +// }) +// ); -export default connect(mapStateToProps, mapDispatchToProps)(AppWrapper); +export default connect( + mapStateToProps, + mapDispatchToProps +)( + inject(({ userStore }) => ({ + user: userStore.user, + isAuthenticated: userStore.isAuthenticated, + getUser: userStore.setCurrentUser, + }))(observer(App)) +); + +// export default inject(({ userStore }) => ({ +// user: userStore.user, +// getUser: userStore.setCurrentUser, +// }))(observer(connect(mapStateToProps, mapDispatchToProps)(App))); diff --git a/web/ASC.Web.Client/src/index.js b/web/ASC.Web.Client/src/index.js index 0b23aec805..1c2f35a6ef 100644 --- a/web/ASC.Web.Client/src/index.js +++ b/web/ASC.Web.Client/src/index.js @@ -5,13 +5,20 @@ import store from "./store/store"; import "./custom.scss"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; -import { ErrorBoundary } from "asc-web-common"; +import { ErrorBoundary, store as commonStore } from "asc-web-common"; +import { Provider as NewProvider } from "mobx-react"; +const { userStore } = commonStore; +const stores = { + userStore, +}; ReactDOM.render( - - - + + + + + , document.getElementById("root") ); diff --git a/web/ASC.Web.Common/src/store/UserStore.js b/web/ASC.Web.Common/src/store/UserStore.js index e67025af8e..48471afeb1 100644 --- a/web/ASC.Web.Common/src/store/UserStore.js +++ b/web/ASC.Web.Common/src/store/UserStore.js @@ -1,4 +1,8 @@ -import { makeAutoObservable } from "mobx"; +import { + action, + /*makeAutoObservable,*/ makeObservable, + observable, +} from "mobx"; import api from "../api"; import { LANGUAGE } from "../constants"; @@ -7,7 +11,11 @@ class UserStore { isAuthenticated = false; constructor() { - makeAutoObservable(this); + makeObservable(this, { + user: observable, + isAuthenticated: observable, + setCurrentUser: action.bound, + }); } async setCurrentUser() {