feat: allow developer to edit the database directly

closes #90

package.json

@@ -65,6 +65,7 @@
     "i18next": "15.1.0",
     "immutable": "4.0.0-rc.12",
     "is-online": "8.2.0",
+    "lodash": "4.17.11",
     "lowdb": "1.0.0",
     "md5": "2.2.1",
     "mime-types": "2.1.24",
@@ -78,6 +79,7 @@
     "react-dom": "16.8.6",
     "react-i18next": "10.9.0",
     "react-immutable-proptypes": "2.1.0",
+    "react-json-view": "1.19.1",
     "react-loading": "2.0.3",
     "react-redux": "7.0.3",
     "react-redux-toastr": "7.4.9",

public/app/config/channels.js

@@ -1,5 +1,6 @@
-// this file needs to use module.exports as it is used both by react and electron
-// make sure this file is identical in both src/config and public/app/config
+// this file needs to use module.exports as it is used both by react and
+// electron make sure this file is identical in both src/config/channels.js
+// and public/app/config/channels.js
 
 module.exports = {
   SAVE_SPACE_CHANNEL: 'space:save',
@@ -28,4 +29,6 @@ module.exports = {
   DELETE_APP_INSTANCE_RESOURCE_CHANNEL: 'app-instance-resource:delete',
   GET_APP_INSTANCE_CHANNEL: 'app-instance:get',
   PATCH_APP_INSTANCE_CHANNEL: 'app-instance:patch',
+  GET_DATABASE_CHANNEL: 'developer:database:get',
+  SET_DATABASE_CHANNEL: 'developer:database:set',
 };

public/app/config/messages.js

@@ -1,5 +1,6 @@
-// this file needs to use module.exports as it is used both by react and electron
-// make sure this file is identical in both src/config and public/app/config
+// this file needs to use module.exports as it is used both by react and
+// electron make sure this file is identical in both src/config/messages.js
+// and public/app/config/messages.js
 
 const ERROR_DOWNLOADING_MESSAGE = 'There was a problem downloading your files';
 const ERROR_LOADING_MESSAGE = 'There was a problem loading your space';
@@ -33,6 +34,8 @@ 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';
+const ERROR_GETTING_DATABASE = 'There was an error getting the database.';
+const ERROR_SETTING_DATABASE = 'There was an error updating the database.';
 
 module.exports = {
   ERROR_GETTING_DEVELOPER_MODE,
@@ -60,4 +63,6 @@ module.exports = {
   ERROR_GETTING_SPACES_NEARBY,
   ERROR_GETTING_USER_FOLDER,
   INVALID_SPACE_ID,
+  ERROR_GETTING_DATABASE,
+  ERROR_SETTING_DATABASE,
 };

public/electron.js

@@ -65,6 +65,8 @@ const {
   GET_APP_INSTANCE_CHANNEL,
   GET_DEVELOPER_MODE_CHANNEL,
   SET_DEVELOPER_MODE_CHANNEL,
+  GET_DATABASE_CHANNEL,
+  SET_DATABASE_CHANNEL,
 } = require('./app/config/channels');
 const {
   ERROR_SPACE_ALREADY_AVAILABLE,
@@ -778,6 +780,32 @@ app.on('ready', async () => {
       mainWindow.webContents.send(GET_APP_INSTANCE_CHANNEL, null);
     }
   });
+
+  // called when getting the database
+  ipcMain.on(GET_DATABASE_CHANNEL, async () => {
+    try {
+      // get space from local db
+      const database = db.getState();
+      mainWindow.webContents.send(GET_DATABASE_CHANNEL, database);
+    } catch (err) {
+      logger.error(err);
+      mainWindow.webContents.send(GET_DATABASE_CHANNEL, null);
+    }
+  });
+
+  // called when setting the database
+  ipcMain.on(SET_DATABASE_CHANNEL, async (event, payload) => {
+    try {
+      // get space from local db
+      db.setState(payload).write();
+      const database = db.getState();
+
+      mainWindow.webContents.send(SET_DATABASE_CHANNEL, database);
+    } catch (err) {
+      logger.error(err);
+      mainWindow.webContents.send(SET_DATABASE_CHANNEL, null);
+    }
+  });
 });
 
 app.on('window-all-closed', () => {

src/App.css

@@ -1,32 +1,7 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.Main {
+  width: 100%;
+  height: 100%;
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  align-items: center;
 }

src/App.js

@@ -2,36 +2,48 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import ReduxToastr from 'react-redux-toastr';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import { HashRouter as Router, Route, Switch } from 'react-router-dom';
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import red from '@material-ui/core/colors/red';
 import { withTranslation } from 'react-i18next';
 import Home from './Home';
 import VisitSpace from './components/VisitSpace';
 import SpacesNearby from './components/SpacesNearby';
 import Settings from './components/Settings';
 import LoadSpace from './components/LoadSpace';
 import SpaceScreen from './components/space/SpaceScreen';
+import DeveloperScreen from './components/developer/DeveloperScreen';
 import {
   SETTINGS_PATH,
   SPACE_PATH,
   HOME_PATH,
   SPACES_NEARBY_PATH,
   VISIT_PATH,
   LOAD_SPACE_PATH,
+  DEVELOPER_PATH,
 } from './config/paths';
-import { getGeolocation, getUserFolder, getLanguage } from './actions/user';
+import {
+  getGeolocation,
+  getUserFolder,
+  getLanguage,
+  getDeveloperMode,
+} from './actions/user';
 import { DEFAULT_LANGUAGE } from './config/constants';
+import './App.css';
 
 const theme = createMuiTheme({
   typography: {
     useNextVariants: true,
   },
   palette: {
-    primary: { light: '#5348d3', main: '#5348d3', dark: '#5348d3' },
+    primary: { light: '#5050d2', main: '#5050d2', dark: '#5050d2' },
     secondary: { light: '#00b904', main: '#00b904', dark: '#00b904' },
   },
   status: {
-    danger: 'red',
+    danger: {
+      background: red,
+      color: '#fff',
+    },
   },
 });
 
@@ -42,6 +54,7 @@ export class App extends Component {
     dispatchGetGeolocation: PropTypes.func.isRequired,
     dispatchGetUserFolder: PropTypes.func.isRequired,
     dispatchGetLanguage: PropTypes.func.isRequired,
+    dispatchGetDeveloperMode: PropTypes.func.isRequired,
     lang: PropTypes.string,
     i18n: PropTypes.shape({
       changeLanguage: PropTypes.func.isRequired,
@@ -54,8 +67,14 @@ export class App extends Component {
 
   constructor(props) {
     super(props);
-    const { dispatchGetUserFolder, dispatchGetLanguage } = this.props;
+    const {
+      dispatchGetUserFolder,
+      dispatchGetLanguage,
+      dispatchGetDeveloperMode,
+    } = this.props;
+
     dispatchGetLanguage();
+    dispatchGetDeveloperMode();
     dispatchGetUserFolder();
   }
 
@@ -101,6 +120,7 @@ export class App extends Component {
               <Route exact path={LOAD_SPACE_PATH} component={LoadSpace} />
               <Route exact path={SETTINGS_PATH} component={Settings} />
               <Route exact path={SPACE_PATH} component={SpaceScreen} />
+              <Route exact path={DEVELOPER_PATH} component={DeveloperScreen} />
             </Switch>
           </div>
         </Router>
@@ -117,6 +137,7 @@ const mapDispatchToProps = {
   dispatchGetGeolocation: getGeolocation,
   dispatchGetUserFolder: getUserFolder,
   dispatchGetLanguage: getLanguage,
+  dispatchGetDeveloperMode: getDeveloperMode,
 };
 
 const ConnectedApp = connect(

src/App.test.js

@@ -12,6 +12,7 @@ describe('<App />', () => {
     dispatchGetGeolocation: jest.fn(),
     dispatchGetUserFolder: jest.fn(),
     dispatchGetLanguage: jest.fn(),
+    dispatchGetDeveloperMode: jest.fn(),
   };
   const component = shallow(<App {...props} />);
   it('renders correctly', () => {

src/Styles.js

@@ -61,6 +61,14 @@ const Styles = theme => ({
   button: {
     margin: theme.spacing.unit,
   },
+  screenTitle: {
+    marginBottom: theme.spacing.unit * 2,
+  },
+  alert: {
+    backgroundColor: theme.status.danger.background[500],
+    color: theme.status.danger.color,
+    textAlign: 'center',
+  },
 });
 
 export default Styles;

src/actions/developer.js

@@ -0,0 +1,62 @@
+import { toastr } from 'react-redux-toastr';
+import { createFlag } from './common';
+import {
+  FLAG_GETTING_DATABASE,
+  GET_DATABASE_SUCCEEDED,
+  FLAG_SETTING_DATABASE,
+  SET_DATABASE_SUCCEEDED,
+} from '../types';
+import { GET_DATABASE_CHANNEL, SET_DATABASE_CHANNEL } from '../config/channels';
+import { ERROR_GENERAL } from '../config/errors';
+import {
+  ERROR_GETTING_DATABASE,
+  ERROR_MESSAGE_HEADER,
+  ERROR_SETTING_DATABASE,
+} from '../config/messages';
+
+const flagGettingDatabase = createFlag(FLAG_GETTING_DATABASE);
+const flagSettingDatabase = createFlag(FLAG_SETTING_DATABASE);
+
+const getDatabase = async () => dispatch => {
+  try {
+    dispatch(flagGettingDatabase(true));
+    window.ipcRenderer.send(GET_DATABASE_CHANNEL);
+    window.ipcRenderer.once(GET_DATABASE_CHANNEL, (event, db) => {
+      if (db === ERROR_GENERAL) {
+        toastr.error(ERROR_MESSAGE_HEADER, ERROR_GETTING_DATABASE);
+      } else {
+        dispatch({
+          type: GET_DATABASE_SUCCEEDED,
+          payload: db,
+        });
+      }
+      dispatch(flagGettingDatabase(false));
+    });
+  } catch (err) {
+    console.error(err);
+    toastr.error(ERROR_MESSAGE_HEADER, ERROR_GETTING_DATABASE);
+  }
+};
+
+const setDatabase = async database => dispatch => {
+  try {
+    dispatch(flagSettingDatabase(true));
+    window.ipcRenderer.send(SET_DATABASE_CHANNEL, database);
+    window.ipcRenderer.once(SET_DATABASE_CHANNEL, (event, db) => {
+      if (db === ERROR_GENERAL) {
+        toastr.error(ERROR_MESSAGE_HEADER, ERROR_GETTING_DATABASE);
+      } else {
+        dispatch({
+          type: SET_DATABASE_SUCCEEDED,
+          payload: db,
+        });
+      }
+      dispatch(flagSettingDatabase(false));
+    });
+  } catch (err) {
+    console.error(err);
+    toastr.error(ERROR_MESSAGE_HEADER, ERROR_SETTING_DATABASE);
+  }
+};
+
+export { getDatabase, setDatabase };

src/actions/index.js

@@ -3,3 +3,4 @@ export * from './space';
 export * from './user';
 export * from './appInstanceResource';
 export * from './appInstance';
+export * from './developer';

src/components/LoadSpace.css

@@ -1,11 +1,3 @@
-.Main {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
 .LoadSpace {
-    height: 100%;
-}
+  height: 100%;
+}

src/components/common/DeveloperSwitch.js

@@ -66,7 +66,7 @@ class DeveloperSwitch extends Component {
 
 const mapStateToProps = ({ User }) => ({
   developerMode: User.getIn(['current', 'developerMode']),
-  activity: User.getIn(['current', 'activity']).size,
+  activity: Boolean(User.getIn(['current', 'activity']).size),
 });
 
 const mapDispatchToProps = {

src/components/common/LanguageSelect.js

@@ -80,7 +80,7 @@ class LanguageSelect extends Component {
 
 const mapStateToProps = ({ User }) => ({
   lang: User.getIn(['current', 'lang']),
-  activity: User.getIn(['current', 'activity']).size,
+  activity: Boolean(User.getIn(['current', 'activity']).size),
 });
 
 const mapDispatchToProps = {