Desktop app

.circleci/config.yml

@@ -19,7 +19,8 @@ aliases:
   - &yarn
     |
       yarn
-      cd ./mobile && yarn && yarn setup
+      cd ./mobile && yarn && yarn setup && cd ..
+      cd ./desktop && yarn && cd ..
 
   - &install-rethinkdb
     name: Install RethinkDB 2.3.5
@@ -110,6 +111,9 @@ jobs:
       - run:
           name: Run Unit Tests
           command: yarn run test:ci
+      - run:
+          name: Build desktop apps
+          command: yarn run build:desktop
       - run:
           name: Run E2E Tests
           command: test $CYPRESS_RECORD_KEY && yarn run test:e2e -- --record || yarn run test:e2e

.gitignore

@@ -18,6 +18,7 @@ build-mercury
 build-vulcan
 build-hyperion
 build-pluto
+build-electron
 build-analytics
 package-lock.json
 .vscode
@@ -32,6 +33,7 @@ api/.env
 .expo
 mobile/.expo
 test-results.json
+desktop/release
 public/uploads
 cypress/screenshots/
 cypress/videos/

README.md

@@ -104,6 +104,7 @@ spectrum/
 ├── api        # API server
 ├── athena     # Worker server (notifications and general processing)
 ├── chronos    # Worker server (cron jobs)
+├── desktop    # desktop apps (build with electron)
 ├── docs
 ├── email-templates
 ├── hermes     # Worker server (email sending)
@@ -241,6 +242,14 @@ To develop the frontend and web UI run
 yarn run dev:web
 ```
 
+#### Develop the desktop app
+
+To develop the desktop app you have to have the dev web server running in the background (`yarn run dev:web`) and then, in another terminal tab, run:
+
+```
+yarn run dev:desktop
+```
+
 #### Develop the mobile apps
 
 To start the mobile apps run:
@@ -269,4 +278,3 @@ Refer to [the Expo documentation on how to install the simulators](https://docs.
 ## License
 
 BSD 3-Clause, see the [LICENSE](./LICENSE) file.
-

api/models/notification.js

@@ -69,15 +69,15 @@ const hasChanged = (field: string) =>
     .row('old_val')(field)
     .ne(db.row('new_val')(field));
 
-const MODIFIED_AT_CHANGED = hasChanged('entityAddedAt');
+const ENTITY_ADDED = hasChanged('entityAddedAt');
 
 const getNewNotificationsChangefeed = () =>
   db
     .table('usersNotifications')
     .changes({
       includeInitial: false,
     })
-    .filter(NEW_DOCUMENTS.or(MODIFIED_AT_CHANGED))('new_val')
+    .filter(NEW_DOCUMENTS.or(ENTITY_ADDED))('new_val')
     .eqJoin('notificationId', db.table('notifications'))
     .without({
       left: ['notificationId', 'createdAt', 'id', 'entityAddedAt'],
@@ -100,7 +100,7 @@ const getNewDirectMessageNotificationsChangefeed = () =>
     .changes({
       includeInitial: false,
     })
-    .filter(NEW_DOCUMENTS.or(MODIFIED_AT_CHANGED))('new_val')
+    .filter(NEW_DOCUMENTS.or(ENTITY_ADDED))('new_val')
     .eqJoin('notificationId', db.table('notifications'))
     .without({
       left: ['notificationId', 'createdAt', 'id', 'entityAddedAt'],

athena/utils/push-notifications/index.js

@@ -2,7 +2,7 @@
 const debug = require('debug')('athena:utils:send-push-notifications');
 import { getSubscriptions } from '../../models/web-push-subscription';
 import { getExpoSubscriptions } from 'api/models/expo-push-subscription';
-import formatNotification from './notification-formatting';
+import formatNotification from 'shared/notification-to-text';
 import { sendWebPushNotification } from './send-web-push-notification';
 import { sendExpoPushNotifications } from './send-expo-push-notifications';
 import type { DBNotificationsJoin } from 'shared/types';

desktop/README.md

@@ -0,0 +1,23 @@
+# Desktop
+
+**This folder contains all sources used to build spectrum desktop application.**
+
+The project uses [Electron](https://electronjs.org/) to build cross platform desktop apps with JavaScript, HTML, and CSS.
+
+## Directory Structure
+
+* `release/` - the release build for each platform (mac, win, linux).
+* `resources/` - the resources folder (icons, images ...).
+* `src/` the source code of electron application.
+* `package.json` - dependencies & devdependencies.
+* `yarn.lock` - Yarn lockfile to get consistent installs across machine.
+
+## Scripts
+
+The project uses [Electron-builder](https://www.electron.build/)  to package & build a ready for distribution Electron app for macOS, Windows and Linux with “auto update” support out of the box.
+
+* `dev` - run electron app in development mode.
+* `package` - Build unpacked dir. Useful to test.
+* `package:<target>` build electron app for target platform (mac, linux, win).
+* `package:all` - build electron app for all platform.
+* `ship` - build and publish artifacts (to GitHub Releases). See https://goo.gl/tSFycD

desktop/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "Spectrum",
+  "description": "The community platform for the future.",
+  "homepage": "https://spectrum.chat",
+  "author": {
+    "name": "Space Program Inc.",
+    "email": "hey@spectrum.chat"
+  },
+  "version": "1.0.0",
+  "main": "src/main.js",
+  "private": true,
+  "dependencies": {
+    "electron-is-dev": "^0.3.0",
+    "electron-log": "^2.2.14",
+    "electron-updater": "^2.21.4"
+  },
+  "devDependencies": {
+    "electron": "^1.8.4",
+    "electron-builder": "^20.8.1"
+  },
+  "scripts": {
+    "dev": "electron ./src/main.js",
+    "package": "build --dir",
+    "package:mac": "build --mac",
+    "package:linux": "build --linux",
+    "package:win": "build --win --x64",
+    "package:all": "build -mwl",
+    "ship": "build -p always"
+  },
+  "build": {
+    "productName": "Spectrum",
+    "appId": "chat.spectrum",
+    "copyright": "Copyright © 2018 Space Program Inc.",
+    "files": [
+      "src/**/*",
+      "node_modules/**/*",
+      "resources/**/*",
+      "package.json"
+    ],
+    "directories": {
+      "buildResources": "resources",
+      "output": "release"
+    },
+    "mac": {
+      "category": "public.app-category.social-networking",
+      "target": "default",
+      "icon": "resources/icons/mac/icon.icns"
+    },
+    "dmg": {
+      "background": "resources/background.tiff",
+      "iconTextSize": 14,
+      "contents": [
+        {
+          "x": 158,
+          "y": 213,
+          "type": "file"
+        },
+        {
+          "x": 385,
+          "y": 213,
+          "type": "link",
+          "path": "/Applications"
+        }
+      ]
+    },
+    "linux": {
+      "icon": "resources/icons/png/icon-512x512.png",
+      "category": "Network",
+      "target": [
+        "AppImage",
+        "deb"
+      ]
+    },
+    "win": {
+      "target": "nsis",
+      "icon": "resources/icons/win/icon.ico"
+    }
+  }
+}

desktop/src/autoUpdate.js

@@ -0,0 +1,62 @@
+const { app, dialog } = require('electron');
+const { autoUpdater } = require('electron-updater');
+const log = require('electron-log');
+
+// Setup logger
+autoUpdater.logger = log;
+autoUpdater.logger.transports.file.level = 'info';
+
+log.info('App starting...');
+
+// Setup update event
+autoUpdater.on('checking-for-update', () => {
+  log.info('Checking for update... Please wait.');
+});
+autoUpdater.on('update-available', info => {
+  log.info('Update available.');
+  log.info('Vesrion', info.version);
+  log.info('Release date', info.releaseDate);
+});
+autoUpdater.on('update-not-available', info => {
+  log.info('Update not available.');
+});
+autoUpdater.on('download-progress', progress => {
+  log.info(`Download progress: ${Math.floor(progress.percent)}`);
+});
+autoUpdater.on('update-downloaded', info => {
+  log.info('Update downloaded');
+});
+autoUpdater.on('error', error => {
+  log.info('Update error', error);
+});
+
+function updateDownloaded() {
+  // Ask user to update the app
+  dialog.showMessageBox(
+    {
+      type: 'question',
+      message: 'A new version of ' + app.getName() + ' has been downloaded',
+      buttons: ['Install and Relaunch', 'Later'],
+      defaultId: 0,
+    },
+    response => {
+      if (response === 1) {
+        dialog.showMessageBox({
+          title: 'Installing Later',
+          message: 'Update will be installed when you exit the app',
+        });
+      } else {
+        autoUpdater.quitAndInstall();
+      }
+    }
+  );
+}
+
+function checkForUpdates() {
+  autoUpdater.on('update-downloaded', updateDownloaded);
+
+  // init for updates
+  autoUpdater.checkForUpdates();
+}
+
+module.exports = checkForUpdates;

desktop/src/config.js

@@ -0,0 +1,24 @@
+const { app } = require('electron');
+const { resolve } = require('path');
+
+/**
+ * Applications Configuration
+ **/
+
+module.exports = {
+  APP_NAME: 'Spectrum',
+  APP_VERSION: app.getVersion(),
+  APP_REMOTE_URL: 'https://spectrum.chat/',
+  APP_DEV_URL: 'http://localhost:3000',
+
+  GITHUB_URL: 'https://github.com/withspectrum/spectrum',
+  GITHUB_URL_LICENSE:
+    'https://github.com/withspectrum/spectrum/blob/alpha/LICENSE',
+  GITHUB_URL_ISSUES: 'https://github.com/withspectrum/spectrum/issues',
+
+  WINDOW_MIN_HEIGHT: 500,
+  WINDOW_MIN_WIDTH: 770,
+  WINDOW_BG_COLOR: '#FFFFFF',
+
+  ICON: resolve(__dirname, '../resources/icons/png/icon-512x512.png'),
+};

desktop/src/main.js

@@ -0,0 +1,90 @@
+const { app, BrowserWindow, Menu, shell, ipcMain } = require('electron');
+const isDev = require('electron-is-dev');
+const https = require('https');
+const path = require('path');
+const url = require('url');
+
+const checkForUpdates = require('./autoUpdate');
+const buildMenu = require('./menu');
+const CONFIG = require('./config');
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let win;
+
+const startUrl = isDev ? CONFIG.APP_DEV_URL : CONFIG.APP_REMOTE_URL;
+
+function createWindow() {
+  if (!isDev) {
+    // trigger autoupdate check
+    checkForUpdates();
+  }
+
+  // create a `splash` window
+  splash = new BrowserWindow({
+    width: 768,
+    height: 408,
+    transparent: true,
+    frame: false,
+    alwaysOnTop: true,
+  });
+  splash.loadURL(`file://${__dirname}/splash.html`);
+
+  // Create the main browser window.
+  mainWindow = new BrowserWindow({
+    height: 800,
+    width: 1300,
+    minHeight: CONFIG.WINDOW_MIN_HEIGHT,
+    minWidth: CONFIG.WINDOW_MIN_WIDTH,
+    backgroundColor: CONFIG.WINDOW_BG_COLOR,
+    /**
+     * Disable Electron's Node integration to prevent untrusted client
+     * code from having access to the process and file system:
+     *  - https://github.com/atom/electron/issues/254
+     *  - https://github.com/atom/electron/issues/1753
+     */
+    webPreferences: {
+      nodeIntegration: false,
+      preload: __dirname + '/preload.js',
+    },
+    show: false,
+  });
+
+  // Load Remote Url
+  mainWindow.loadURL(startUrl);
+
+  // Build application menu
+  buildMenu();
+
+  mainWindow.on('closed', () => {
+    win = null;
+  });
+
+  // if main window is ready to show, then destroy the splash window and show up the main window
+  mainWindow.once('ready-to-show', () => {
+    splash.destroy();
+    mainWindow.show();
+  });
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow);
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+  // On OS X it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow();
+  }
+});