From 14ffba35b785f8093c31140cd1e21c3852ba5edb Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Tue, 29 Sep 2020 21:59:57 +0300 Subject: [PATCH] redux store changed to mobx --- .../mobile/lib/controller/Collaboration.jsx | 51 ++++++++++--------- apps/common/mobile/lib/store/users.js | 17 +++---- apps/common/mobile/lib/view/Collaboration.jsx | 44 +++++++++------- .../mobile/src/components/app.jsx | 27 +--------- .../document-settings/DocumentSettings.jsx | 21 +++----- .../mobile/src/controller/Main.jsx | 15 +++--- apps/documenteditor/mobile/src/js/app.js | 6 +-- .../mobile/src/store/documentSettings.js | 6 +++ .../mobile/src/store/mainStore.js | 9 ++++ 9 files changed, 96 insertions(+), 100 deletions(-) create mode 100644 apps/documenteditor/mobile/src/store/documentSettings.js create mode 100644 apps/documenteditor/mobile/src/store/mainStore.js diff --git a/apps/common/mobile/lib/controller/Collaboration.jsx b/apps/common/mobile/lib/controller/Collaboration.jsx index 14ac7c170..a5fd1f57e 100644 --- a/apps/common/mobile/lib/controller/Collaboration.jsx +++ b/apps/common/mobile/lib/controller/Collaboration.jsx @@ -1,30 +1,35 @@ -import React, { useState } from 'react' -import { resetUsers } from '../store/actions/actions.js' +import React, { Component } from 'react' import Notifications from '../../utils/notifications.js' +import {observer, inject} from "mobx-react" -const Collaboration = () => { - const onChangeEditUsers = (users) => { - const store = Common.Store.get(); - store.dispatch(resetUsers(Object.values(users))); + +@inject('users') +class CollaborationController extends Component { + constructor(props){ + super(props) + + Common.Notifications.on('engineCreated', api => { + // this.api = api; + api.asc_registerCallback('asc_onAuthParticipantsChanged', this.onChangeEditUsers.bind(this)); + api.asc_registerCallback('asc_onParticipantsChanged', this.onChangeEditUsers.bind(this)); + // this.api.asc_registerCallback('asc_onAddComment', _.bind(this.onApiAddComment, this)); + // this.api.asc_registerCallback('asc_onAddComments', _.bind(this.onApiAddComments, this)); + // this.api.asc_registerCallback('asc_onChangeCommentData', _.bind(this.onApiChangeCommentData, this)); + // this.api.asc_registerCallback('asc_onRemoveComment', _.bind(this.onApiRemoveComment, this)); + // this.api.asc_registerCallback('asc_onRemoveComments', _.bind(this.onApiRemoveComments, this)); + // this.api.asc_registerCallback('asc_onShowComment', _.bind(this.apiShowComments, this)); + // this.api.asc_registerCallback('asc_onHideComment', _.bind(this.apiHideComments, this)); + }); + } + + onChangeEditUsers(users) { + const storeUsers = this.props.users; + storeUsers.reset(users); }; - Common.Notifications.on('engineCreated', api => { - // this.api = api; - api.asc_registerCallback('asc_onAuthParticipantsChanged', onChangeEditUsers); - api.asc_registerCallback('asc_onParticipantsChanged', onChangeEditUsers); - // this.api.asc_registerCallback('asc_onAddComment', _.bind(this.onApiAddComment, this)); - // this.api.asc_registerCallback('asc_onAddComments', _.bind(this.onApiAddComments, this)); - // this.api.asc_registerCallback('asc_onChangeCommentData', _.bind(this.onApiChangeCommentData, this)); - // this.api.asc_registerCallback('asc_onRemoveComment', _.bind(this.onApiRemoveComment, this)); - // this.api.asc_registerCallback('asc_onRemoveComments', _.bind(this.onApiRemoveComments, this)); - // this.api.asc_registerCallback('asc_onShowComment', _.bind(this.apiShowComments, this)); - // this.api.asc_registerCallback('asc_onHideComment', _.bind(this.apiHideComments, this)); - }); - - return { - setApi(api) { - } + render() { + return null } }; -export {Collaboration as CollaborationController} \ No newline at end of file +export default CollaborationController; \ No newline at end of file diff --git a/apps/common/mobile/lib/store/users.js b/apps/common/mobile/lib/store/users.js index 3f38e433b..a98f1e502 100644 --- a/apps/common/mobile/lib/store/users.js +++ b/apps/common/mobile/lib/store/users.js @@ -1,11 +1,10 @@ -import * as actionTypes from './actions/actions' -const usersReducer = (state = [], action) => { - if (action.type == actionTypes.RESET_USERS) { - return [...action.payload]; +import {observable, action} from 'mobx'; + +export class storeUsers { + @observable users = [] + + @action reset(users) { + this.users = Object.values(users) } - - return state; -}; - -export default usersReducer \ No newline at end of file +} diff --git a/apps/common/mobile/lib/view/Collaboration.jsx b/apps/common/mobile/lib/view/Collaboration.jsx index 01dda0a47..5250581ae 100644 --- a/apps/common/mobile/lib/view/Collaboration.jsx +++ b/apps/common/mobile/lib/view/Collaboration.jsx @@ -1,24 +1,33 @@ import React, { Component } from 'react'; -import { useSelector } from 'react-redux'; +import { observer, inject } from "mobx-react"; import { Popover, List, ListItem, Navbar, NavTitle, NavRight } from 'framework7-react'; import { Sheet, Toolbar, BlockTitle, Link, Page, View, Icon } from 'framework7-react'; import { withTranslation, useTranslation } from 'react-i18next'; -const PageUsers = () => { - const { t } = useTranslation(); - const userlist = useSelector(state => state.users); - return ( - - - {t("Collaboration.textEditUser")} - - {userlist.map((model, i) => ( - - - - ))} - - ) +@inject('users') +@observer +class PageUsers extends Component { + constructor(props){ + super(props) + } + + render() { + const { t } = this.props; + const userlist = this.props.users; + return ( + + + {t("Collaboration.textEditUser")} + + {userlist.users.map((model, i) => ( + + + + ))} + + ) + } }; const PageCollaboration = () => { @@ -77,5 +86,6 @@ class CollaborationSheet extends Component { } } +const pageusers = withTranslation()(PageUsers); // export withTranslation()(CollaborationPopover); -export {CollaborationPopover, CollaborationSheet, PageCollaboration, PageUsers, } \ No newline at end of file +export {CollaborationPopover, CollaborationSheet, PageCollaboration, pageusers as PageUsers} \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/components/app.jsx b/apps/documenteditor/mobile/src/components/app.jsx index afabb44a1..e3fe2a629 100644 --- a/apps/documenteditor/mobile/src/components/app.jsx +++ b/apps/documenteditor/mobile/src/components/app.jsx @@ -1,33 +1,11 @@ import React from 'react'; -import { - App, - Panel, - Views, - View, - Popup, - Page, - Navbar, - Toolbar, - NavRight, - Link, - Block, - BlockTitle, - LoginScreen, - LoginScreenTitle, - List, - ListItem, - ListInput, - ListButton, - BlockFooter -} from 'framework7-react'; +import {App,Panel,Views,View,Popup,Page,Navbar,Toolbar,NavRight,Link,Block,BlockTitle,LoginScreen,LoginScreenTitle,List,ListItem,ListInput,ListButton,BlockFooter} from 'framework7-react'; -import i18n from '../js/i18n'; import routes from '../js/routes'; import '../../../../common/Gateway.js'; import '../../../../common/main/lib/util/utils.js'; -import { CollaborationController } from '../../../../common/mobile/lib/controller/Collaboration.jsx'; import Notifications from '../../../../common/mobile/utils/notifications.js' import MainController from '../controller/Main'; @@ -52,9 +30,6 @@ export default class extends React.Component { } Common.Notifications = new Notifications(); - - Common.Controllers = {}; - Common.Controllers.Collaboration = new CollaborationController(); } render() { return ( diff --git a/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx b/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx index b254b52af..935c37b11 100644 --- a/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx +++ b/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx @@ -1,12 +1,6 @@ import React, {Component} from 'react'; -import { connect } from 'react-redux'; -import { - Page, - Navbar, - List, - ListItem, - BlockTitle -} from 'framework7-react'; +import {observer, inject} from "mobx-react"; +import {Page,Navbar,List,ListItem,BlockTitle} from 'framework7-react'; const DocumentSettings = props => { const textDocumentSettings = "Document Settings"; @@ -20,13 +14,14 @@ const DocumentSettings = props => { const format = "A4"; const formatSize = "21 cm x 29.7 cm"; + const storeSettings = props.storeDocumentSettings; return ( {textOrientation} - props.onPageOrientation('portrait')}> - props.onPageOrientation('landscape')}> + props.onPageOrientation('portrait')}> + props.onPageOrientation('landscape')}> {textFormat} @@ -37,8 +32,4 @@ const DocumentSettings = props => { ) }; -const mapStateToProps = (state) => { - return state.settings; -}; - -export default connect(mapStateToProps)(DocumentSettings); +export default inject("storeDocumentSettings")(observer(DocumentSettings)); diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index beb1b149b..da996ac93 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/apps/documenteditor/mobile/src/controller/Main.jsx @@ -1,8 +1,9 @@ -import {Component} from 'react' -import {connect} from 'react-redux' -import * as Actions from '../store/actions/actions' +import React, {Component} from 'react' +import {inject} from "mobx-react"; +import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx' +@inject("storeDocumentSettings") class MainController extends Component { constructor(props) { super(props) @@ -157,15 +158,15 @@ class MainController extends Component { } bindEvents() { - const {dispatch} = this.props; + const storeSettings = this.props.storeDocumentSettings; this.api.asc_registerCallback('asc_onPageOrient', isPortrait => { - dispatch(Actions.changePageOrientation(isPortrait === true)); + storeSettings.isPortrait = isPortrait === true; }); } render() { - return null + return } } -export default connect(null,null,null,{forwardRef:true})(MainController); +export default MainController; diff --git a/apps/documenteditor/mobile/src/js/app.js b/apps/documenteditor/mobile/src/js/app.js index 403dbd18c..d49dc1e8c 100644 --- a/apps/documenteditor/mobile/src/js/app.js +++ b/apps/documenteditor/mobile/src/js/app.js @@ -24,8 +24,8 @@ import App from '../components/app.jsx'; import { I18nextProvider } from 'react-i18next'; import i18n from './i18n'; -import { Provider } from 'react-redux' -import { store } from '../store/store.js' +import { Provider } from 'mobx-react' +import { stores } from '../store/mainStore' // Init F7 React Plugin Framework7.use(Framework7React) @@ -33,7 +33,7 @@ Framework7.use(Framework7React) // Mount React App ReactDOM.render( - + diff --git a/apps/documenteditor/mobile/src/store/documentSettings.js b/apps/documenteditor/mobile/src/store/documentSettings.js new file mode 100644 index 000000000..bfe004a91 --- /dev/null +++ b/apps/documenteditor/mobile/src/store/documentSettings.js @@ -0,0 +1,6 @@ + +import {action, observable} from 'mobx'; + +export class storeDocumentSettings { + @observable isPortrait = true +} diff --git a/apps/documenteditor/mobile/src/store/mainStore.js b/apps/documenteditor/mobile/src/store/mainStore.js new file mode 100644 index 000000000..18be6a125 --- /dev/null +++ b/apps/documenteditor/mobile/src/store/mainStore.js @@ -0,0 +1,9 @@ + +import {storeDocumentSettings} from './documentSettings' +import {storeUsers} from '../../../../common/mobile/lib/store/users' + +export const stores = { + storeDocumentSettings: new storeDocumentSettings(), + users: new storeUsers() +}; +