redux store changed to mobx

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}
+export default CollaborationController;

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
+}

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 (
-        <Page name="collab__users">
-            <Navbar title="Users" backLink="Back"></Navbar>
-            <BlockTitle>{t("Collaboration.textEditUser")}</BlockTitle>
-            <List className="coauth__list">
-                {userlist.map((model, i) => (
-                    <ListItem title={model.asc_getUserName()} key={i}>
-                        <Icon slot="media" icon="coauth__list__icon" style={{ backgroundColor:model.asc_getColor() }}></Icon>
-                    </ListItem>
-                ))}
-            </List>
-        </Page>)
+@inject('users')
+@observer
+class PageUsers extends Component {
+    constructor(props){
+        super(props)
+    }
+
+    render() {
+        const { t } = this.props;
+        const userlist = this.props.users;
+        return (
+            <Page name="collab__users">
+                <Navbar title="Users" backLink="Back"></Navbar>
+                <BlockTitle>{t("Collaboration.textEditUser")}</BlockTitle>
+                <List className="coauth__list">
+                    {userlist.users.map((model, i) => (
+                        <ListItem title={model.asc_getUserName()} key={i}>
+                            <Icon slot="media" icon="coauth__list__icon"
+                                  style={{backgroundColor: model.asc_getColor()}}></Icon>
+                        </ListItem>
+                    ))}
+                </List>
+            </Page>)
+    }
 };
 
 const PageCollaboration = () => {
@@ -77,5 +86,6 @@ class CollaborationSheet extends Component {
     }
 }
 
+const pageusers = withTranslation()(PageUsers);
 // export withTranslation()(CollaborationPopover);
-export {CollaborationPopover, CollaborationSheet, PageCollaboration, PageUsers, }
+export {CollaborationPopover, CollaborationSheet, PageCollaboration, pageusers as PageUsers}

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 (

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 (
         <Page>
             <Navbar title={textDocumentSettings} backLink={textBack} />
             <BlockTitle>{textOrientation}</BlockTitle>
             <List>
-                <ListItem radio title={textPortrait} name="orientation-checkbox" checked={props.isPortrait} onClick={e => props.onPageOrientation('portrait')}></ListItem>
-                <ListItem radio title={textLandscape} name="orientation-checkbox" checked={!props.isPortrait} onClick={e => props.onPageOrientation('landscape')}></ListItem>
+                <ListItem radio title={textPortrait} name="orientation-checkbox" checked={storeSettings.isPortrait} onClick={e => props.onPageOrientation('portrait')}></ListItem>
+                <ListItem radio title={textLandscape} name="orientation-checkbox" checked={!storeSettings.isPortrait} onClick={e => props.onPageOrientation('landscape')}></ListItem>
             </List>
             <BlockTitle>{textFormat}</BlockTitle>
             <List mediaList>
@@ -37,8 +32,4 @@ const DocumentSettings = props => {
      )
 };
 
-const mapStateToProps = (state) => {
-    return state.settings;
-};
-
-export default connect(mapStateToProps)(DocumentSettings);
+export default inject("storeDocumentSettings")(observer(DocumentSettings));

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 <CollaborationController />
     }
 }
 
-export default connect(null,null,null,{forwardRef:true})(MainController);
+export default MainController;

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(
     <I18nextProvider i18n={i18n}>
-        <Provider store={store}>
+        <Provider {...stores}>
             <Suspense fallback="loading">
                 <App />
             </Suspense>

apps/documenteditor/mobile/src/store/documentSettings.js

@@ -0,0 +1,6 @@
+
+import {action, observable} from 'mobx';
+
+export class storeDocumentSettings {
+    @observable isPortrait = true
+}

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()
+};
+