basic setup of workspaces settings screen

12 files changed, 216 insertions, 16 deletions

diff --git a/src/api/utils/auth.js b/src/api/utils/auth.js
new file mode 100644
index 000000000..47ac94c19
--- /dev/null
+++ b/src/api/utils/auth.js
@@ -0,0 +1,24 @@
+import { remote } from 'electron';
+import localStorage from 'mobx-localstorage';
+
+const { app } = remote;
+
+export const prepareAuthRequest = (options, auth = true) => {
+  const request = Object.assign(options, {
+    mode: 'cors',
+    headers: Object.assign({
+      'Content-Type': 'application/json',
+      'X-Franz-Source': 'desktop',
+      'X-Franz-Version': app.getVersion(),
+      'X-Franz-platform': process.platform,
+      'X-Franz-Timezone-Offset': new Date().getTimezoneOffset(),
+      'X-Franz-System-Locale': app.getLocale(),
+    }, options.headers),
+  });
+
+  if (auth) {
+    request.headers.Authorization = `Bearer ${localStorage.getItem('authToken')}`;
+  }
+
+  return request;
+};
diff --git a/src/app.js b/src/app.js
index 6660feb46..ee1b12939 100644
--- a/src/app.js
+++ b/src/app.js
@@ -39,6 +39,7 @@ import PricingScreen from './containers/auth/PricingScreen';
 import InviteScreen from './containers/auth/InviteScreen';
 import AuthLayoutContainer from './containers/auth/AuthLayoutContainer';
 import SubscriptionPopupScreen from './containers/subscription/SubscriptionPopupScreen';
+import WorkspacesScreen from './containers/settings/WorkspacesScreen';
 
 // Add Polyfills
 smoothScroll.polyfill();
@@ -75,6 +76,7 @@ window.addEventListener('load', () => {
                   <Route path="/settings/recipes/:filter" component={RecipesScreen} />
                   <Route path="/settings/services" component={ServicesScreen} />
                   <Route path="/settings/services/:action/:id" component={EditServiceScreen} />
+                  <Route path="/settings/workspaces" component={WorkspacesScreen} />
                   <Route path="/settings/user" component={AccountScreen} />
                   <Route path="/settings/user/edit" component={EditUserScreen} />
                   <Route path="/settings/app" component={EditSettingsScreen} />
diff --git a/src/components/settings/workspaces/WorkspaceItem.js b/src/components/settings/workspaces/WorkspaceItem.js
new file mode 100644
index 000000000..82a578ebd
--- /dev/null
+++ b/src/components/settings/workspaces/WorkspaceItem.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import Workspace from '../../../models/Workspace';
+
+// const messages = defineMessages({});
+
+@observer
+class WorkspaceItem extends Component {
+  static propTypes = {
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { workspace } = this.props;
+    // const { intl } = this.context;
+
+    return (
+      <tr
+        className={classnames({
+          'service-table__row': true,
+        })}
+      >
+        <td
+          className="service-table__column-name"
+          onClick={() => console.log('go to workspace', workspace.name)}
+        >
+          {workspace.name}
+        </td>
+      </tr>
+    );
+  }
+}
+
+export default WorkspaceItem;
diff --git a/src/components/settings/workspaces/WorkspacesDashboard.js b/src/components/settings/workspaces/WorkspacesDashboard.js
new file mode 100644
index 000000000..830f32f08
--- /dev/null
+++ b/src/components/settings/workspaces/WorkspacesDashboard.js
@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Loader from '../../ui/Loader';
+import WorkspaceItem from './WorkspaceItem';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.workspaces.headline',
+    defaultMessage: '!!!Your workspaces',
+  },
+  noServicesAdded: {
+    id: 'settings.workspaces.noWorkspacesAdded',
+    defaultMessage: '!!!You haven\'t added any workspaces yet.',
+  },
+});
+
+@observer
+class WorkspacesDashboard extends Component {
+  static propTypes = {
+    workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { workspaces, isLoading } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <h1>{intl.formatMessage(messages.headline)}</h1>
+        </div>
+        <div className="settings__body">
+          {isLoading ? (
+            <Loader />
+          ) : (
+            <table className="service-table">
+              <tbody>
+                {workspaces.map(workspace => <WorkspaceItem workspace={workspace} />)}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WorkspacesDashboard;
diff --git a/src/containers/settings/WorkspacesScreen.js b/src/containers/settings/WorkspacesScreen.js
new file mode 100644
index 000000000..e767fdfbe
--- /dev/null
+++ b/src/containers/settings/WorkspacesScreen.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import { gaPage } from '../../lib/analytics';
+import { state } from '../../features/workspaces/state';
+
+import WorkspacesDashboard from '../../components/settings/workspaces/WorkspacesDashboard';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
+
+@observer
+class WorkspacesScreen extends Component {
+  static propTypes = {};
+
+  componentDidMount() {
+    gaPage('Settings/Workspaces Dashboard');
+  }
+
+  render() {
+    return (
+      <ErrorBoundary>
+        <WorkspacesDashboard
+          workspaces={state.workspaces}
+          isLoading={state.isLoading}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default WorkspacesScreen;
diff --git a/src/environment.js b/src/environment.js
index 73b1c7ab2..d67fd6adb 100644
--- a/src/environment.js
+++ b/src/environment.js
@@ -28,3 +28,4 @@ if (!isDevMode || (isDevMode && useLiveAPI)) {
 }
 
 export const API = api;
+export const API_VERSION = 'v1';
diff --git a/src/features/workspaces/api.js b/src/features/workspaces/api.js
index 1ee2440fe..97badbd01 100644
--- a/src/features/workspaces/api.js
+++ b/src/features/workspaces/api.js
@@ -1,9 +1,13 @@
-// TODO: use real server instead
-const workspaces = [
-  { id: 'workspace-1', name: 'Private' },
-  { id: 'workspace-2', name: 'Office' },
-];
+import { prepareAuthRequest } from '../../api/utils/auth';
+import { API, API_VERSION } from '../../environment';
 
 export default {
-  getUserWorkspaces: () => Promise.resolve(workspaces),
+  getUserWorkspaces: async () => {
+    const url = `${API}/${API_VERSION}/workspace`;
+    const request = await window.fetch(url, prepareAuthRequest({
+      method: 'GET',
+    }));
+    if (!request.ok) throw request;
+    return request.json();
+  },
 };
diff --git a/src/features/workspaces/index.js b/src/features/workspaces/index.js
index b4cfd3c2d..50ac3b414 100644
--- a/src/features/workspaces/index.js
+++ b/src/features/workspaces/index.js
@@ -1,14 +1,11 @@
-import { observable, reaction } from 'mobx';
-import { merge } from 'lodash';
+import { reaction } from 'mobx';
 import WorkspacesStore from './store';
 import api from './api';
+import { state, resetState } from './state';
 
 const debug = require('debug')('Franz:feature:workspaces');
 
 let store = null;
-const defaultState = { workspaces: [] };
-
-export const state = observable(defaultState);
 
 export default function initWorkspaces(stores, actions) {
   const { features, user } = stores;
@@ -27,8 +24,7 @@ export default function initWorkspaces(stores, actions) {
         debug('Disabling `workspaces` feature');
         store.teardown();
         store = null;
-        // Reset state to default
-        merge(state, defaultState);
+        resetState(); // Reset state to default
       }
     },
     {
diff --git a/src/features/workspaces/state.js b/src/features/workspaces/state.js
new file mode 100644
index 000000000..ed3fe9f00
--- /dev/null
+++ b/src/features/workspaces/state.js
@@ -0,0 +1,12 @@
+import { observable } from 'mobx';
+
+const defaultState = {
+  isLoading: false,
+  workspaces: [],
+};
+
+export const state = observable(defaultState);
+
+export function resetState() {
+  Object.assign(state, defaultState);
+}
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index 4b4e729ed..2b6d55cc7 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -1,6 +1,7 @@
 import { observable, reaction } from 'mobx';
 import Store from '../../stores/lib/Store';
 import CachedRequest from '../../stores/lib/CachedRequest';
+import Workspace from '../../models/Workspace';
 
 const debug = require('debug')('Franz:feature:workspaces');
 
@@ -18,12 +19,20 @@ export default class WorkspacesStore extends Store {
 
     reaction(
       () => this.allWorkspacesRequest.result,
-      workspaces => this.setWorkspaces(workspaces),
+      workspaces => this._setWorkspaces(workspaces),
+    );
+    reaction(
+      () => this.allWorkspacesRequest.isExecuting,
+      isExecuting => this._setIsLoading(isExecuting),
     );
   }
 
-  setWorkspaces = (workspaces) => {
+  _setWorkspaces = (workspaces) => {
     debug('setting user workspaces', workspaces.slice());
-    this.state.workspaces = workspaces;
+    this.state.workspaces = workspaces.map(data => new Workspace(data));
+  };
+
+  _setIsLoading = (isLoading) => {
+    this.state.isLoading = isLoading;
   };
 }
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 1b869aff1..1652b5585 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -196,6 +196,7 @@
   "settings.user.form.accountType.individual": "Individual",
   "settings.user.form.accountType.non-profit": "Non-Profit",
   "settings.user.form.accountType.company": "Company",
+  "settings.workspaces.headline": "Your workspaces",
   "subscription.type.free": "free",
   "subscription.type.month": "month",
   "subscription.type.year": "year",
diff --git a/src/models/Workspace.js b/src/models/Workspace.js
new file mode 100644
index 000000000..ede2710dc
--- /dev/null
+++ b/src/models/Workspace.js
@@ -0,0 +1,25 @@
+import { observable } from 'mobx';
+
+export default class Workspace {
+  id = null;
+
+  @observable name = null;
+
+  @observable order = null;
+
+  @observable services = [];
+
+  @observable userId = null;
+
+  constructor(data) {
+    if (!data.id) {
+      throw Error('Workspace requires Id');
+    }
+
+    this.id = data.id;
+    this.name = data.name;
+    this.order = data.order;
+    this.services = data.services;
+    this.userId = data.userId;
+  }
+}