[mobile] add redux-thunk package, add api into store, add orientation setting into document settings

apps/documenteditor/mobile/locale/en.json

@@ -1,17 +1,23 @@
 {
-      "ViewSettings": {
-        "textSettings": "Settings",
-        "textDone": "Done",
-        "textFindAndReplace": "Find and Replace",
-        "textDocumentSettings": "Document Settings",
-        "textApplicationSettings": "Application Settings",
-        "textDownload": "Download",
-        "textPrint": "Print",
-        "textDocumentInfo": "Document Info",
-        "textHelp": "Help",
-        "textAbout": "About"
-      },
-    "Collaboration": {
-      "textEditUser": "Users who are editing the file:"
-    }
+  "ViewSettings": {
+    "textSettings": "Settings",
+    "textDone": "Done",
+    "textFindAndReplace": "Find and Replace",
+    "textDocumentSettings": "Document Settings",
+    "textApplicationSettings": "Application Settings",
+    "textDownload": "Download",
+    "textPrint": "Print",
+    "textDocumentInfo": "Document Info",
+    "textHelp": "Help",
+    "textAbout": "About",
+    "textOrientation": "Orientation",
+    "textPortrait": "Portrait",
+    "textLandscape": "Landscape",
+    "textFormat": "Format",
+    "textMargins": "Margins",
+    "textBack": "Back"
+  },
+  "Collaboration": {
+    "textEditUser": "Users who are editing the file:"
+  }
 }

apps/documenteditor/mobile/src/components/app.jsx

@@ -1,36 +1,19 @@
 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 { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { App, Panel, View, Popup, Page, Navbar, NavRight, Link, Block, BlockTitle, List, ListItem } from 'framework7-react';
 
 import i18n from '../js/i18n';
 import routes from '../js/routes';
 
+import { initApi } from '../store/actions/actions';
+
 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'
 
-export default class extends React.Component {
+class ComponentApp extends React.Component {
   constructor() {
     super();
 
@@ -251,6 +234,8 @@ export default class extends React.Component {
                   Common.Gateway.appReady();
 
                   Common.Notifications.trigger('engineCreated', this.api);
+                  const { initApi } = this.props;
+                  initApi(this.api);
               }, error => {
                   console.log('promise failed ' + error);
               });
@@ -263,3 +248,9 @@ export default class extends React.Component {
       document.body.appendChild(script);
   }
 }
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+    initApi
+}, dispatch);
+
+export default connect(undefined, mapDispatchToProps)(ComponentApp);

apps/documenteditor/mobile/src/components/settings/Settings.jsx

@@ -1,17 +1,7 @@
-import React, {Component} from 'react';
-import {
-    View,
-    Page,
-    Navbar,
-    NavRight,
-    Link,
-    Popup,
-    Icon,
-    ListItem,
-    List
-} from 'framework7-react';
-
+import React, { Component } from 'react';
+import { View, Page, Navbar, NavRight, Link, Popup, Icon, ListItem, List } from 'framework7-react';
 import { withTranslation } from 'react-i18next';
+import {changePageOrient} from "../../store/actions/actions";
 
 class Settings extends Component {
     constructor(props) {

apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx

@@ -1,42 +1,27 @@
-import React, {Component} from 'react';
-import {
-    Page,
-    Navbar,
-    List,
-    ListItem,
-    BlockTitle
-} from 'framework7-react';
+import React from 'react';
+import {Page, Navbar, List, ListItem, BlockTitle} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
 
-export default class DocumentSettings extends Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        const textDocumentSettings = "Document Settings";
-        const textBack = "Back";
-        const textOrientation = "Orientation";
-        const textPortrait = "Portrait";
-        const textLandscape = "Landscape";
-        const textFormat = "Format";
-        const textMargins = "Margins";
+const PageDocumentSettings = (props) => {
+    const { t } = useTranslation();
+    const format = "A4";
+    const formatSize = "21 cm x 29.7 cm";
 
-        const format = "A4";
-        const formatSize = "21 cm x 29.7 cm";
+    return (
+        <Page>
+            <Navbar title={t('ViewSettings.textDocumentSettings')} backLink={t('ViewSettings.textBack')} />
+            <BlockTitle>{t('ViewSettings.textOrientation')}</BlockTitle>
+            <List>
+                <ListItem checkbox title={t('ViewSettings.textPortrait')} name="orientation-checkbox" checked={props.isPortrait} onClick={(e) => props.changePageOrient(true)}></ListItem>
+                <ListItem checkbox title={t('ViewSettings.textLandscape')} name="orientation-checkbox" checked={!props.isPortrait} onClick={(e) => props.changePageOrient(false)}></ListItem>
+            </List>
+            <BlockTitle>{t('ViewSettings.textFormat')}</BlockTitle>
+            <List mediaList>
+                <ListItem title={format} subtitle={formatSize} link="/document-formats/"></ListItem>
+                <ListItem checkbox title={t('ViewSettings.textMargins')} link="/margins/"></ListItem>
+            </List>
+        </Page>
+    )
+};
 
-        return (
-            <Page>
-                <Navbar title={textDocumentSettings} backLink={textBack} />
-                <BlockTitle>{textOrientation}</BlockTitle>
-                <List>
-                    <ListItem checkbox title={textPortrait} name="orientation-checkbox" defaultChecked></ListItem>
-                    <ListItem checkbox title={textLandscape} name="orientation-checkbox"></ListItem>
-                </List>
-                <BlockTitle>{textFormat}</BlockTitle>
-                <List mediaList>
-                    <ListItem title={format} subtitle={formatSize} link="/document-formats/"></ListItem>
-                    <ListItem checkbox title={textMargins} link="/margins/"></ListItem>
-                </List>
-            </Page>
-        )
-    }
-};
+export default PageDocumentSettings;

apps/documenteditor/mobile/src/controllers/Settings.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { changePageOrient } from '../store/actions/actions';
+import DocumentSettingsView from '../components/settings/document-settings/DocumentSettings';
+
+const DocumentSettingsController = connect(
+    state => ({
+        isPortrait: state.settings.isPortrait
+    }),
+    dispatch => bindActionCreators({
+        changePageOrient
+    }, dispatch)
+)(DocumentSettingsView);
+
+export { DocumentSettingsController as DocumentSettings};

apps/documenteditor/mobile/src/js/routes.js

@@ -1,6 +1,6 @@
 
 import HomePage from '../pages/home.jsx';
-import DocumentSettings from "../components/settings/document-settings/DocumentSettings.jsx";
+import { DocumentSettings } from "../controllers/Settings";
 import Margins from "../components/settings/document-settings/Margins.jsx";
 import DocumentFormats from "../components/settings/document-settings/DocumentFormats.jsx";
 
@@ -18,7 +18,7 @@ var routes = [
   },
   {
     path: '/document-settings/',
-    component: DocumentSettings,
+    component: DocumentSettings
   },
   {
     path: '/users/',

apps/documenteditor/mobile/src/pages/home.jsx

@@ -19,9 +19,9 @@ import {
   Icon, Popup
 } from 'framework7-react';
 
-import EditPopup from '../components/edit/Edit.jsx';
-import SettingsPopup from '../components/settings/Settings.jsx';
-import { CollaborationPopover, CollaborationSheet } from '../../../../common/mobile/lib/view/Collaboration.jsx'
+import EditPopup from '../components/edit/Edit';
+import SettingsPopup from '../components/settings/Settings';
+import { CollaborationPopover, CollaborationSheet } from '../../../../common/mobile/lib/view/Collaboration.jsx';
 
 export default class Home extends Component {
   constructor(props) {

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { resetPageOrient } from "../store/actions/actions";
+
+export default function (dispatch, getState, api) {
+    // document settings
+    api.asc_registerCallback('asc_onPageOrient', (isPortrait) => {
+        dispatch(resetPageOrient(isPortrait === true));
+    });
+}

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

@@ -0,0 +1,30 @@
+import registerApi from '../ApiRegisterCallback';
+
+export const INIT_API = 'INIT_API';
+export const initApi = value => {
+    return (dispatch, getState) => {
+        registerApi(dispatch, getState, value);
+        dispatch({
+            type: INIT_API,
+            api: value
+        });
+    }
+};
+
+// action of settings
+export const RESET_PAGE_ORIENT = 'RESET_PAGE_ORIENT';
+export const resetPageOrient = value => {
+    return {
+        type: RESET_PAGE_ORIENT,
+        isPortrait: value
+    }
+};
+export const changePageOrient = (value) => {
+    return (dispatch, getState) => {
+        const { api } = getState();
+        if (api.apiObj) {
+            api.apiObj.change_PageOrient(value);
+        }
+    };
+};
+

apps/documenteditor/mobile/src/store/actions/settings.js

@@ -0,0 +1,10 @@
+// action types
+export const RESET_PAGE_ORIENT = 'RESET_PAGE_ORIENT';
+
+// action creators
+export const resetPageOrient = value => {
+    return {
+        type: RESET_PAGE_ORIENT,
+        isPortrait: value
+    }
+};

apps/documenteditor/mobile/src/store/reducers/initApi.js

@@ -0,0 +1,12 @@
+import { INIT_API } from '../actions/actions'
+
+const apiReducer = (state = [], action) => {
+    if (action.type == INIT_API) {
+        return Object.assign({}, state, {
+            apiObj: action.api
+        });
+    }
+    return state;
+};
+
+export default apiReducer ;

apps/documenteditor/mobile/src/store/reducers/root.js

@@ -1,10 +1,14 @@
 import { combineReducers } from 'redux';
+import apiReducer from "./initApi";
 import usersReducer from '../../../../../common/mobile/lib/store/users'
+import settingsReducer from './settings'
 
 export const initialState = {
     users: []
 };
 
 export const rootReducer = combineReducers({
-    users: usersReducer
+    api: apiReducer,
+    users: usersReducer,
+    settings: settingsReducer
 });

apps/documenteditor/mobile/src/store/reducers/settings.js

@@ -0,0 +1,12 @@
+import { RESET_PAGE_ORIENT } from '../actions/actions'
+
+const settingsReducer = (state = [], action) => {
+    if (action.type == RESET_PAGE_ORIENT) {
+        return Object.assign({}, state, {
+            isPortrait: action.isPortrait
+        });
+    }
+    return state;
+};
+
+export default settingsReducer ;

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

@@ -1,7 +1,8 @@
-import { createStore } from 'redux'
+import { createStore, applyMiddleware } from 'redux';
 import { rootReducer, initialState } from './reducers/root'
+import thunk from 'redux-thunk';
 
-const store = createStore(rootReducer, initialState);
+const store = createStore(rootReducer, initialState, applyMiddleware(thunk));
 
 !window.Common && (window.Common = {});
 Common.Store = { get: () => store };

vendor/framework7-react/package.json

@@ -65,6 +65,7 @@
     "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0",
-    "workbox-webpack-plugin": "^5.1.3"
+    "workbox-webpack-plugin": "^5.1.3",
+    "redux-thunk": "^2.3.0"
   }
 }