From bb873e1105b52a0a9ed7bf9d039ac1c92a426fbe Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Sun, 20 Sep 2020 15:04:46 +0300 Subject: [PATCH] [mobile] add redux-thunk package, add api into store, add orientation setting into document settings --- apps/documenteditor/mobile/locale/en.json | 36 ++++++----- .../mobile/src/components/app.jsx | 37 +++++------ .../src/components/settings/Settings.jsx | 16 +---- .../document-settings/DocumentSettings.jsx | 63 +++++++------------ .../mobile/src/controllers/Settings.jsx | 16 +++++ apps/documenteditor/mobile/src/js/routes.js | 4 +- apps/documenteditor/mobile/src/pages/home.jsx | 6 +- .../mobile/src/store/ApiRegisterCallback.js | 9 +++ .../mobile/src/store/actions/actions.js | 30 +++++++++ .../mobile/src/store/actions/settings.js | 10 +++ .../mobile/src/store/reducers/initApi.js | 12 ++++ .../mobile/src/store/reducers/root.js | 6 +- .../mobile/src/store/reducers/settings.js | 12 ++++ apps/documenteditor/mobile/src/store/store.js | 5 +- vendor/framework7-react/package.json | 3 +- 15 files changed, 166 insertions(+), 99 deletions(-) create mode 100644 apps/documenteditor/mobile/src/controllers/Settings.jsx create mode 100644 apps/documenteditor/mobile/src/store/ApiRegisterCallback.js create mode 100644 apps/documenteditor/mobile/src/store/actions/actions.js create mode 100644 apps/documenteditor/mobile/src/store/actions/settings.js create mode 100644 apps/documenteditor/mobile/src/store/reducers/initApi.js create mode 100644 apps/documenteditor/mobile/src/store/reducers/settings.js diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index ec605c06e..8db7459d5 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/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:" + } } \ 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 29c0d0f78..cc5b8540e 100644 --- a/apps/documenteditor/mobile/src/components/app.jsx +++ b/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); diff --git a/apps/documenteditor/mobile/src/components/settings/Settings.jsx b/apps/documenteditor/mobile/src/components/settings/Settings.jsx index 25cf7d6cb..f97746f92 100644 --- a/apps/documenteditor/mobile/src/components/settings/Settings.jsx +++ b/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) { 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 8c86ccc35..3a517be76 100644 --- a/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx +++ b/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 ( + + + {t('ViewSettings.textOrientation')} + + props.changePageOrient(true)}> + props.changePageOrient(false)}> + + {t('ViewSettings.textFormat')} + + + + + + ) +}; - return ( - - - {textOrientation} - - - - - {textFormat} - - - - - - ) - } -}; \ No newline at end of file +export default PageDocumentSettings; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/controllers/Settings.jsx b/apps/documenteditor/mobile/src/controllers/Settings.jsx new file mode 100644 index 000000000..e94391ca0 --- /dev/null +++ b/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}; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/js/routes.js b/apps/documenteditor/mobile/src/js/routes.js index cefa3d19b..941f83b78 100644 --- a/apps/documenteditor/mobile/src/js/routes.js +++ b/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/', diff --git a/apps/documenteditor/mobile/src/pages/home.jsx b/apps/documenteditor/mobile/src/pages/home.jsx index fbe35436a..ca5411b44 100644 --- a/apps/documenteditor/mobile/src/pages/home.jsx +++ b/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) { diff --git a/apps/documenteditor/mobile/src/store/ApiRegisterCallback.js b/apps/documenteditor/mobile/src/store/ApiRegisterCallback.js new file mode 100644 index 000000000..6fddbaae7 --- /dev/null +++ b/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)); + }); +} \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/actions/actions.js b/apps/documenteditor/mobile/src/store/actions/actions.js new file mode 100644 index 000000000..916929937 --- /dev/null +++ b/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); + } + }; +}; + diff --git a/apps/documenteditor/mobile/src/store/actions/settings.js b/apps/documenteditor/mobile/src/store/actions/settings.js new file mode 100644 index 000000000..efc934149 --- /dev/null +++ b/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 + } +}; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/reducers/initApi.js b/apps/documenteditor/mobile/src/store/reducers/initApi.js new file mode 100644 index 000000000..732cc18e2 --- /dev/null +++ b/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 ; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/reducers/root.js b/apps/documenteditor/mobile/src/store/reducers/root.js index 7a876a0d0..9f2d7ad92 100644 --- a/apps/documenteditor/mobile/src/store/reducers/root.js +++ b/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 }); \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/reducers/settings.js b/apps/documenteditor/mobile/src/store/reducers/settings.js new file mode 100644 index 000000000..cda8b5af8 --- /dev/null +++ b/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 ; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/store.js b/apps/documenteditor/mobile/src/store/store.js index 93f91abca..9b2fead10 100644 --- a/apps/documenteditor/mobile/src/store/store.js +++ b/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 }; diff --git a/vendor/framework7-react/package.json b/vendor/framework7-react/package.json index 50bec7d9a..c9c7ae84a 100644 --- a/vendor/framework7-react/package.json +++ b/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" } }