feat: allow user to set app to developer mode

closes #88

public/app/config/channels.js

@@ -20,6 +20,8 @@ module.exports = {
   GET_USER_FOLDER_CHANNEL: 'user:folder:get',
   GET_LANGUAGE_CHANNEL: 'user:lang:get',
   SET_LANGUAGE_CHANNEL: 'user:lang:set',
+  SET_DEVELOPER_MODE_CHANNEL: 'user:developer-mode:set',
+  GET_DEVELOPER_MODE_CHANNEL: 'user:developer-mode:get',
   GET_APP_INSTANCE_RESOURCES_CHANNEL: 'app-instance-resources:get',
   POST_APP_INSTANCE_RESOURCE_CHANNEL: 'app-instance-resource:post',
   PATCH_APP_INSTANCE_RESOURCE_CHANNEL: 'app-instance-resource:patch',

public/app/config/config.js

@@ -34,8 +34,10 @@ const VAR_FOLDER = `${app.getPath('userData')}/var`;
 const DATABASE_PATH = `${VAR_FOLDER}/db.json`;
 const TEMPORARY_EXTRACT_FOLDER = 'tmp';
 const DEFAULT_LANG = 'en';
+const DEFAULT_DEVELOPER_MODE = false;
 
 module.exports = {
+  DEFAULT_DEVELOPER_MODE,
   DOWNLOADABLE_MIME_TYPES,
   TEMPORARY_EXTRACT_FOLDER,
   RESOURCE,

public/app/config/messages.js

@@ -28,8 +28,15 @@ const ERROR_GETTING_USER_FOLDER =
   'There was an error getting your user folder.';
 const ERROR_GETTING_LANGUAGE = 'There was an error getting the language.';
 const ERROR_SETTING_LANGUAGE = 'There was an error setting the language.';
+const INVALID_SPACE_ID = 'Invalid space ID.';
+const ERROR_GETTING_DEVELOPER_MODE =
+  'There was an error getting the developer mode';
+const ERROR_SETTING_DEVELOPER_MODE =
+  'There was an error setting the developer mode';
 
 module.exports = {
+  ERROR_GETTING_DEVELOPER_MODE,
+  ERROR_SETTING_DEVELOPER_MODE,
   ERROR_GETTING_LANGUAGE,
   ERROR_SETTING_LANGUAGE,
   ERROR_DOWNLOADING_MESSAGE,
@@ -52,4 +59,5 @@ module.exports = {
   ERROR_GETTING_GEOLOCATION,
   ERROR_GETTING_SPACES_NEARBY,
   ERROR_GETTING_USER_FOLDER,
+  INVALID_SPACE_ID,
 };

public/electron.js

@@ -38,6 +38,7 @@ const {
   DATABASE_PATH,
   TEMPORARY_EXTRACT_FOLDER,
   DEFAULT_LANG,
+  DEFAULT_DEVELOPER_MODE,
 } = require('./app/config/config');
 const {
   LOAD_SPACE_CHANNEL,
@@ -62,6 +63,8 @@ const {
   POST_APP_INSTANCE_RESOURCE_CHANNEL,
   PATCH_APP_INSTANCE_RESOURCE_CHANNEL,
   GET_APP_INSTANCE_CHANNEL,
+  GET_DEVELOPER_MODE_CHANNEL,
+  SET_DEVELOPER_MODE_CHANNEL,
 } = require('./app/config/channels');
 const {
   ERROR_SPACE_ALREADY_AVAILABLE,
@@ -601,7 +604,7 @@ app.on('ready', async () => {
     }
   });
 
-  // called when getting language
+  // called when setting language
   ipcMain.on(SET_LANGUAGE_CHANNEL, (event, lang) => {
     try {
       db.set('user.lang', lang).write();
@@ -612,6 +615,29 @@ app.on('ready', async () => {
     }
   });
 
+  // called when getting developer mode
+  ipcMain.on(GET_DEVELOPER_MODE_CHANNEL, () => {
+    try {
+      const developerMode =
+        db.get('user.developerMode').value() || DEFAULT_DEVELOPER_MODE;
+      mainWindow.webContents.send(GET_DEVELOPER_MODE_CHANNEL, developerMode);
+    } catch (e) {
+      logger.error(e);
+      mainWindow.webContents.send(GET_DEVELOPER_MODE_CHANNEL, ERROR_GENERAL);
+    }
+  });
+
+  // called when setting developer mode
+  ipcMain.on(SET_DEVELOPER_MODE_CHANNEL, (event, developerMode) => {
+    try {
+      db.set('user.developerMode', developerMode).write();
+      mainWindow.webContents.send(SET_DEVELOPER_MODE_CHANNEL, developerMode);
+    } catch (e) {
+      logger.error(e);
+      mainWindow.webContents.send(SET_DEVELOPER_MODE_CHANNEL, ERROR_GENERAL);
+    }
+  });
+
   // called when getting AppInstanceResources
   ipcMain.on(GET_APP_INSTANCE_RESOURCES_CHANNEL, (event, data = {}) => {
     const defaultResponse = [];

src/actions/user.js

@@ -7,25 +7,36 @@ import {
   FLAG_GETTING_LANGUAGE,
   FLAG_SETTING_LANGUAGE,
   GET_LANGUAGE_SUCCEEDED,
+  SET_LANGUAGE_SUCCEEDED,
+  FLAG_GETTING_DEVELOPER_MODE,
+  FLAG_SETTING_DEVELOPER_MODE,
+  GET_DEVELOPER_MODE_SUCCEEDED,
+  SET_DEVELOPER_MODE_SUCCEEDED,
 } from '../types';
 import {
   ERROR_GETTING_GEOLOCATION,
   ERROR_GETTING_LANGUAGE,
   ERROR_GETTING_USER_FOLDER,
   ERROR_MESSAGE_HEADER,
   ERROR_SETTING_LANGUAGE,
+  ERROR_SETTING_DEVELOPER_MODE,
+  ERROR_GETTING_DEVELOPER_MODE,
 } from '../config/messages';
 import {
   GET_USER_FOLDER_CHANNEL,
   GET_LANGUAGE_CHANNEL,
   SET_LANGUAGE_CHANNEL,
+  GET_DEVELOPER_MODE_CHANNEL,
+  SET_DEVELOPER_MODE_CHANNEL,
 } from '../config/channels';
 import { createFlag } from './common';
 import { ERROR_GENERAL } from '../config/errors';
 
 const flagGettingUserFolder = createFlag(FLAG_GETTING_USER_FOLDER);
 const flagGettingLanguage = createFlag(FLAG_GETTING_LANGUAGE);
 const flagSettingLanguage = createFlag(FLAG_SETTING_LANGUAGE);
+const flagGettingDeveloperMode = createFlag(FLAG_GETTING_DEVELOPER_MODE);
+const flagSettingDeveloperMode = createFlag(FLAG_SETTING_DEVELOPER_MODE);
 
 const getGeolocation = async () => async dispatch => {
   // only fetch location if online
@@ -107,7 +118,7 @@ const setLanguage = async ({ lang }) => dispatch => {
         toastr.error(ERROR_MESSAGE_HEADER, ERROR_SETTING_LANGUAGE);
       } else {
         dispatch({
-          type: GET_LANGUAGE_SUCCEEDED,
+          type: SET_LANGUAGE_SUCCEEDED,
           payload: language,
         });
       }
@@ -119,4 +130,56 @@ const setLanguage = async ({ lang }) => dispatch => {
   }
 };
 
-export { getUserFolder, getGeolocation, getLanguage, setLanguage };
+const getDeveloperMode = async () => dispatch => {
+  try {
+    dispatch(flagGettingDeveloperMode(true));
+    window.ipcRenderer.send(GET_DEVELOPER_MODE_CHANNEL);
+    window.ipcRenderer.once(
+      GET_DEVELOPER_MODE_CHANNEL,
+      (event, developerMode) => {
+        if (developerMode === ERROR_GENERAL) {
+          toastr.error(ERROR_MESSAGE_HEADER, ERROR_GETTING_DEVELOPER_MODE);
+        } else {
+          dispatch({
+            type: GET_DEVELOPER_MODE_SUCCEEDED,
+            payload: developerMode,
+          });
+        }
+        dispatch(flagGettingDeveloperMode(false));
+      }
+    );
+  } catch (e) {
+    console.error(e);
+    toastr.error(ERROR_MESSAGE_HEADER, ERROR_GETTING_DEVELOPER_MODE);
+  }
+};
+
+const setDeveloperMode = async developerMode => dispatch => {
+  try {
+    dispatch(flagSettingDeveloperMode(true));
+    window.ipcRenderer.send(SET_DEVELOPER_MODE_CHANNEL, developerMode);
+    window.ipcRenderer.once(SET_DEVELOPER_MODE_CHANNEL, (event, mode) => {
+      if (mode === ERROR_GENERAL) {
+        toastr.error(ERROR_MESSAGE_HEADER, ERROR_SETTING_DEVELOPER_MODE);
+      } else {
+        dispatch({
+          type: SET_DEVELOPER_MODE_SUCCEEDED,
+          payload: mode,
+        });
+      }
+      dispatch(flagSettingDeveloperMode(false));
+    });
+  } catch (e) {
+    console.error(e);
+    toastr.error(ERROR_MESSAGE_HEADER, ERROR_SETTING_DEVELOPER_MODE);
+  }
+};
+
+export {
+  getUserFolder,
+  getGeolocation,
+  getLanguage,
+  setLanguage,
+  getDeveloperMode,
+  setDeveloperMode,
+};

src/components/Settings.js

@@ -13,10 +13,12 @@ import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import { FormGroup } from '@material-ui/core';
 import { withTranslation } from 'react-i18next';
 import Styles from '../Styles';
 import MainMenu from './common/MainMenu';
 import LanguageSelect from './common/LanguageSelect';
+import DeveloperSwitch from './common/DeveloperSwitch';
 
 class Settings extends Component {
   state = {
@@ -46,6 +48,7 @@ class Settings extends Component {
   render() {
     const { classes, theme, t } = this.props;
     const { open } = this.state;
+
     return (
       <div className={classes.root}>
         <CssBaseline />
@@ -96,7 +99,10 @@ class Settings extends Component {
           <Typography variant="h5" color="inherit">
             {t('Settings')}
           </Typography>
-          <LanguageSelect />
+          <FormGroup>
+            <LanguageSelect />
+            <DeveloperSwitch />
+          </FormGroup>
         </main>
       </div>
     );

src/components/common/DeveloperSwitch.js

@@ -0,0 +1,86 @@
+import React, { Component } from 'react';
+import FormControl from '@material-ui/core/FormControl';
+import { withStyles } from '@material-ui/core/styles';
+import { withTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { getDeveloperMode, setDeveloperMode } from '../../actions';
+import Loader from './Loader';
+
+const styles = theme => ({
+  formControl: {
+    margin: theme.spacing.unit,
+    minWidth: 120,
+  },
+});
+
+class DeveloperSwitch extends Component {
+  static propTypes = {
+    developerMode: PropTypes.bool.isRequired,
+    activity: PropTypes.bool.isRequired,
+    t: PropTypes.func.isRequired,
+    dispatchGetDeveloperMode: PropTypes.func.isRequired,
+    dispatchSetDeveloperMode: PropTypes.func.isRequired,
+    classes: PropTypes.shape({
+      formControl: PropTypes.string.isRequired,
+    }).isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    const { dispatchGetDeveloperMode } = this.props;
+    dispatchGetDeveloperMode();
+  }
+
+  handleChange = async ({ target }) => {
+    const { dispatchSetDeveloperMode } = this.props;
+    const { checked } = target;
+    dispatchSetDeveloperMode(checked);
+  };
+
+  render() {
+    const { classes, t, developerMode, activity } = this.props;
+
+    if (activity) {
+      return <Loader />;
+    }
+
+    const control = (
+      <Switch
+        checked={developerMode}
+        onChange={this.handleChange}
+        value={developerMode}
+        color="primary"
+      />
+    );
+
+    return (
+      <FormControl className={classes.formControl}>
+        <FormControlLabel control={control} label={t('Developer Mode')} />
+      </FormControl>
+    );
+  }
+}
+
+const mapStateToProps = ({ User }) => ({
+  developerMode: User.getIn(['current', 'developerMode']),
+  activity: User.getIn(['current', 'activity']).size,
+});
+
+const mapDispatchToProps = {
+  dispatchGetDeveloperMode: getDeveloperMode,
+  dispatchSetDeveloperMode: setDeveloperMode,
+};
+
+const ConnectedComponent = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(DeveloperSwitch);
+
+const StyledComponent = withStyles(styles)(ConnectedComponent);
+
+const TranslatedComponent = withTranslation()(StyledComponent);
+
+export default TranslatedComponent;

src/components/common/LanguageSelect.js

@@ -9,6 +9,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { langs } from '../../config/i18n';
 import { getLanguage, setLanguage } from '../../actions';
+import Loader from './Loader';
 
 const styles = theme => ({
   formControl: {
@@ -19,6 +20,7 @@ const styles = theme => ({
 
 class LanguageSelect extends Component {
   static propTypes = {
+    activity: PropTypes.bool.isRequired,
     i18n: PropTypes.shape({
       changeLanguage: PropTypes.func.isRequired,
     }).isRequired,
@@ -27,7 +29,7 @@ class LanguageSelect extends Component {
     dispatchSetLanguage: PropTypes.func.isRequired,
     dispatchGetLanguage: PropTypes.func.isRequired,
     classes: PropTypes.shape({
-      formControl: PropTypes.object.isRequired,
+      formControl: PropTypes.string.isRequired,
     }).isRequired,
   };
 
@@ -52,7 +54,11 @@ class LanguageSelect extends Component {
     ));
 
   render() {
-    const { classes, t, lang } = this.props;
+    const { classes, t, lang, activity } = this.props;
+
+    if (activity) {
+      return <Loader />;
+    }
 
     return (
       <FormControl className={classes.formControl}>
@@ -74,7 +80,7 @@ class LanguageSelect extends Component {
 
 const mapStateToProps = ({ User }) => ({
   lang: User.getIn(['current', 'lang']),
-  activity: User.getIn(['current', 'activity']),
+  activity: User.getIn(['current', 'activity']).size,
 });
 
 const mapDispatchToProps = {

src/components/common/Loader.js

@@ -4,7 +4,7 @@ import ReactLoading from 'react-loading';
 
 const Loader = ({ type }) => (
   <div className="Loader">
-    <ReactLoading type={type} color="#444" />
+    <ReactLoading type={type} color="#5348d3" />
   </div>
 );
 

src/config/channels.js

@@ -20,6 +20,8 @@ module.exports = {
   GET_USER_FOLDER_CHANNEL: 'user:folder:get',
   GET_LANGUAGE_CHANNEL: 'user:lang:get',
   SET_LANGUAGE_CHANNEL: 'user:lang:set',
+  SET_DEVELOPER_MODE_CHANNEL: 'user:developer-mode:set',
+  GET_DEVELOPER_MODE_CHANNEL: 'user:developer-mode:get',
   GET_APP_INSTANCE_RESOURCES_CHANNEL: 'app-instance-resources:get',
   POST_APP_INSTANCE_RESOURCE_CHANNEL: 'app-instance-resource:post',
   PATCH_APP_INSTANCE_RESOURCE_CHANNEL: 'app-instance-resource:patch',

src/config/constants.js

@@ -7,6 +7,7 @@ export const APPLICATION = 'Application';
 export const IFRAME = 'application/octet-stream';
 export const DEFAULT_RADIUS = 50;
 export const DEFAULT_LANGUAGE = 'en';
+export const DEFAULT_DEVELOPER_MODE = false;
 export const SHORT_ID_LENGTH = 6;
 export const SMART_GATEWAY_HOST = 'gateway.golabz.eu';
 export const SMART_GATEWAY_QUERY_STRING_DIVIDER = '#';