15 files changed, 199 insertions, 181 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 4dd5ff686..0c72c1413 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -14,8 +14,8 @@ import ErrorBoundary from '../util/ErrorBoundary';
 // import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
-import { workspacesState } from '../../features/workspaces/state';
 import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
+import { workspaceStore } from '../../features/workspaces';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -53,7 +53,7 @@ const styles = theme => ({
     width: `calc(100% + ${theme.workspaceDrawerWidth}px)`,
     transition: 'transform 0.5s ease',
     transform() {
-      return workspacesState.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaceDrawerWidth}px)`;
+      return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaceDrawerWidth}px)`;
     },
   },
 });
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index ada920cb6..13148b9b3 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -35,12 +35,13 @@ export default @observer class ServiceView extends Component {
 
   autorunDisposer = null;
 
+  forceRepaintTimeout = null;
+
   componentDidMount() {
     this.autorunDisposer = autorun(() => {
-      if (!this.isMounted) return;
       if (this.props.service.isActive) {
         this.setState({ forceRepaint: true });
-        setTimeout(() => {
+        this.forceRepaintTimeout = setTimeout(() => {
           this.setState({ forceRepaint: false });
         }, 100);
       }
@@ -49,6 +50,7 @@ export default @observer class ServiceView extends Component {
 
   componentWillUnmount() {
     this.autorunDisposer();
+    clearTimeout(this.forceRepaintTimeout);
   }
 
   updateTargetUrl = (event) => {
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
index 61053f6d1..b0c7fed7b 100644
--- a/src/components/ui/AppLoader/index.js
+++ b/src/components/ui/AppLoader/index.js
@@ -23,11 +23,11 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
   static propTypes = {
     classes: PropTypes.object.isRequired,
     theme: PropTypes.object.isRequired,
-  }
+  };
 
   state = {
     step: 0,
-  }
+  };
 
   interval = null;
 
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 772458eab..4329c3097 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -20,9 +20,9 @@ import Services from '../../components/services/content/Services';
 import AppLoader from '../../components/ui/AppLoader';
 
 import { state as delayAppState } from '../../features/delayApp';
-import { workspacesState } from '../../features/workspaces/state';
 import { workspaceActions } from '../../features/workspaces/actions';
 import WorkspaceDrawer from '../../features/workspaces/components/WorkspaceDrawer';
+import { workspaceStore } from '../../features/workspaces';
 
 export default @inject('stores', 'actions') @observer class AppLayoutContainer extends Component {
   static defaultProps = {
@@ -108,7 +108,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
         updateService={updateService}
         toggleMuteApp={toggleMuteApp}
         toggleWorkspaceDrawer={workspaceActions.toggleWorkspaceDrawer}
-        isWorkspaceDrawerOpen={workspacesState.isWorkspaceDrawerOpen}
+        isWorkspaceDrawerOpen={workspaceStore.isWorkspaceDrawerOpen}
         showMessageBadgeWhenMutedSetting={settings.all.app.showMessageBadgeWhenMuted}
         showMessageBadgesEvenWhenMuted={ui.showMessageBadgesEvenWhenMuted}
       />
diff --git a/src/containers/settings/SettingsWindow.js b/src/containers/settings/SettingsWindow.js
index 8cbde24c1..663b9e2e4 100644
--- a/src/containers/settings/SettingsWindow.js
+++ b/src/containers/settings/SettingsWindow.js
@@ -7,7 +7,7 @@ import ServicesStore from '../../stores/ServicesStore';
 import Layout from '../../components/settings/SettingsLayout';
 import Navigation from '../../components/settings/navigation/SettingsNavigation';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
-import { workspacesState } from '../../features/workspaces/state';
+import { workspaceStore } from '../../features/workspaces';
 
 export default @inject('stores', 'actions') @observer class SettingsContainer extends Component {
   render() {
@@ -17,7 +17,7 @@ export default @inject('stores', 'actions') @observer class SettingsContainer ex
     const navigation = (
       <Navigation
         serviceCount={stores.services.all.length}
-        workspaceCount={workspacesState.workspaces.length}
+        workspaceCount={workspaceStore.workspaces.length}
       />
     );
 
diff --git a/src/features/workspaces/api.js b/src/features/workspaces/api.js
index 733cb5593..4e076d233 100644
--- a/src/features/workspaces/api.js
+++ b/src/features/workspaces/api.js
@@ -1,39 +1,60 @@
 import { pick } from 'lodash';
 import { sendAuthRequest } from '../../api/utils/auth';
 import { API, API_VERSION } from '../../environment';
+import Request from '../../stores/lib/Request';
+import CachedRequest from '../../stores/lib/CachedRequest';
+import Workspace from './models/Workspace';
 
-export default {
+const debug = require('debug')('Franz:feature:workspaces:api');
+
+export const workspaceApi = {
   getUserWorkspaces: async () => {
     const url = `${API}/${API_VERSION}/workspace`;
-    const request = await sendAuthRequest(url, { method: 'GET' });
-    if (!request.ok) throw request;
-    return request.json();
+    debug('getUserWorkspaces GET', url);
+    const result = await sendAuthRequest(url, { method: 'GET' });
+    debug('getUserWorkspaces RESULT', result);
+    if (!result.ok) throw result;
+    const workspaces = await result.json();
+    return workspaces.map(data => new Workspace(data));
   },
 
   createWorkspace: async (name) => {
     const url = `${API}/${API_VERSION}/workspace`;
-    const request = await sendAuthRequest(url, {
+    const options = {
       method: 'POST',
       body: JSON.stringify({ name }),
-    });
-    if (!request.ok) throw request;
-    return request.json();
+    };
+    debug('createWorkspace POST', url, options);
+    const result = await sendAuthRequest(url, options);
+    debug('createWorkspace RESULT', result);
+    if (!result.ok) throw result;
+    return new Workspace(await result.json());
   },
 
   deleteWorkspace: async (workspace) => {
     const url = `${API}/${API_VERSION}/workspace/${workspace.id}`;
-    const request = await sendAuthRequest(url, { method: 'DELETE' });
-    if (!request.ok) throw request;
-    return request.json();
+    debug('deleteWorkspace DELETE', url);
+    const result = await sendAuthRequest(url, { method: 'DELETE' });
+    debug('deleteWorkspace RESULT', result);
+    if (!result.ok) throw result;
+    return (await result.json()).deleted;
   },
 
   updateWorkspace: async (workspace) => {
     const url = `${API}/${API_VERSION}/workspace/${workspace.id}`;
-    const request = await sendAuthRequest(url, {
+    const options = {
       method: 'PUT',
       body: JSON.stringify(pick(workspace, ['name', 'services'])),
-    });
-    if (!request.ok) throw request;
-    return request.json();
+    };
+    debug('updateWorkspace UPDATE', url, options);
+    const result = await sendAuthRequest(url, options);
+    debug('updateWorkspace RESULT', result);
+    if (!result.ok) throw result;
+    return new Workspace(await result.json());
   },
 };
+
+export const getUserWorkspacesRequest = new CachedRequest(workspaceApi, 'getUserWorkspaces');
+export const createWorkspaceRequest = new Request(workspaceApi, 'createWorkspace');
+export const deleteWorkspaceRequest = new Request(workspaceApi, 'deleteWorkspace');
+export const updateWorkspaceRequest = new Request(workspaceApi, 'updateWorkspace');
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index c18eb0e11..6dc779be9 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -6,9 +6,9 @@ import { defineMessages, intlShape } from 'react-intl';
 import { H1, Icon } from '@meetfranz/ui';
 import ReactTooltip from 'react-tooltip';
 
-import { workspacesState } from '../state';
 import WorkspaceDrawerItem from './WorkspaceDrawerItem';
 import { workspaceActions } from '../actions';
+import { workspaceStore } from '../index';
 
 const messages = defineMessages({
   headline: {
@@ -70,7 +70,12 @@ class WorkspaceDrawer extends Component {
       getServicesForWorkspace,
     } = this.props;
     const { intl } = this.context;
-    const { activeWorkspace, isSwitchingWorkspace, nextWorkspace } = workspacesState;
+    const {
+      activeWorkspace,
+      isSwitchingWorkspace,
+      nextWorkspace,
+      workspaces,
+    } = workspaceStore;
     const actualWorkspace = isSwitchingWorkspace ? nextWorkspace : activeWorkspace;
     return (
       <div className={classes.drawer}>
@@ -95,7 +100,7 @@ class WorkspaceDrawer extends Component {
             services={getServicesForWorkspace(null)}
             isActive={actualWorkspace == null}
           />
-          {workspacesState.workspaces.map(workspace => (
+          {workspaces.map(workspace => (
             <WorkspaceDrawerItem
               key={workspace.id}
               name={workspace.name}
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index 68ce6fd87..c012ab008 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -5,8 +5,8 @@ import injectSheet from 'react-jss';
 import classnames from 'classnames';
 import { defineMessages, intlShape } from 'react-intl';
 
-import { workspacesState } from '../state';
 import LoaderComponent from '../../../components/ui/Loader';
+import { workspaceStore } from '../index';
 
 const messages = defineMessages({
   switchingTo: {
@@ -56,7 +56,7 @@ class WorkspaceSwitchingIndicator extends Component {
   render() {
     const { classes } = this.props;
     const { intl } = this.context;
-    const { isSwitchingWorkspace, isWorkspaceDrawerOpen, nextWorkspace } = workspacesState;
+    const { isSwitchingWorkspace, isWorkspaceDrawerOpen, nextWorkspace } = workspaceStore;
     if (!isSwitchingWorkspace) return null;
     const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services';
     return (
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.js b/src/features/workspaces/containers/EditWorkspaceScreen.js
index 1b13bc2d4..1c4633e71 100644
--- a/src/features/workspaces/containers/EditWorkspaceScreen.js
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.js
@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import EditWorkspaceForm from '../components/EditWorkspaceForm';
-import { workspacesState } from '../state';
 import ServicesStore from '../../../stores/ServicesStore';
 import Workspace from '../models/Workspace';
+import { workspaceStore } from '../index';
 
 @inject('stores', 'actions') @observer
 class EditWorkspaceScreen extends Component {
@@ -22,14 +22,14 @@ class EditWorkspaceScreen extends Component {
   };
 
   onDelete = () => {
-    const { workspaceBeingEdited } = workspacesState;
+    const { workspaceBeingEdited } = workspaceStore;
     const { actions } = this.props;
     if (!workspaceBeingEdited) return null;
     actions.workspaces.delete({ workspace: workspaceBeingEdited });
   };
 
   onSave = (values) => {
-    const { workspaceBeingEdited } = workspacesState;
+    const { workspaceBeingEdited } = workspaceStore;
     const { actions } = this.props;
     const workspace = new Workspace(
       Object.assign({}, workspaceBeingEdited, values),
@@ -38,7 +38,7 @@ class EditWorkspaceScreen extends Component {
   };
 
   render() {
-    const { workspaceBeingEdited } = workspacesState;
+    const { workspaceBeingEdited } = workspaceStore;
     const { stores } = this.props;
     if (!workspaceBeingEdited) return null;
     return (
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
index bd1ddcd43..5fdea217e 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { workspacesState } from '../state';
 import WorkspacesDashboard from '../components/WorkspacesDashboard';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
+import { workspaceStore } from '../index';
+import { getUserWorkspacesRequest } from '../api';
 
 @inject('actions') @observer
 class WorkspacesScreen extends Component {
@@ -20,8 +21,8 @@ class WorkspacesScreen extends Component {
     return (
       <ErrorBoundary>
         <WorkspacesDashboard
-          workspaces={workspacesState.workspaces}
-          isLoadingWorkspaces={workspacesState.isLoadingWorkspaces}
+          workspaces={workspaceStore.workspaces}
+          isLoadingWorkspaces={getUserWorkspacesRequest.isExecuting}
           onCreateWorkspaceSubmit={data => actions.workspaces.create(data)}
           onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })}
         />
diff --git a/src/features/workspaces/index.js b/src/features/workspaces/index.js
index 1644c0e2f..68f82bdee 100644
--- a/src/features/workspaces/index.js
+++ b/src/features/workspaces/index.js
@@ -1,26 +1,9 @@
-import { reaction, runInAction } from 'mobx';
+import { reaction } from 'mobx';
 import WorkspacesStore from './store';
-import api from './api';
-import { workspacesState, resetState } from './state';
 
 const debug = require('debug')('Franz:feature:workspaces');
 
-let store = null;
-
-export const filterServicesByActiveWorkspace = (services) => {
-  const {
-    activeWorkspace,
-    isFeatureActive,
-  } = workspacesState;
-
-  if (!isFeatureActive) return services;
-  if (activeWorkspace) return services.filter(s => activeWorkspace.services.includes(s.id));
-  return services;
-};
-
-export const getActiveWorkspaceServices = services => (
-  filterServicesByActiveWorkspace(services)
-);
+export const workspaceStore = new WorkspacesStore();
 
 export default function initWorkspaces(stores, actions) {
   const { features, user } = stores;
@@ -33,38 +16,16 @@ export default function initWorkspaces(stores, actions) {
       )
     ),
     (isEnabled) => {
-      if (isEnabled) {
+      if (isEnabled && !workspaceStore.isFeatureActive) {
         debug('Initializing `workspaces` feature');
-        store = new WorkspacesStore(stores, api, actions, workspacesState);
-        store.initialize();
-        runInAction(() => { workspacesState.isFeatureActive = true; });
-      } else if (store) {
+        workspaceStore.start(stores, actions);
+      } else if (workspaceStore.isFeatureActive) {
         debug('Disabling `workspaces` feature');
-        runInAction(() => { workspacesState.isFeatureActive = false; });
-        store.teardown();
-        store = null;
-        resetState(); // Reset state to default
+        workspaceStore.stop();
       }
     },
     {
       fireImmediately: true,
     },
   );
-
-  // Update active service on workspace switches
-  reaction(() => ({
-    isFeatureActive: workspacesState.isFeatureActive,
-    activeWorkspace: workspacesState.activeWorkspace,
-  }), ({ isFeatureActive, activeWorkspace }) => {
-    if (!isFeatureActive) return;
-    if (activeWorkspace) {
-      const services = stores.services.allDisplayed;
-      const activeService = services.find(s => s.isActive);
-      const workspaceServices = filterServicesByActiveWorkspace(services);
-      const isActiveServiceInWorkspace = workspaceServices.includes(activeService);
-      if (!isActiveServiceInWorkspace) {
-        actions.service.setActive({ serviceId: workspaceServices[0].id });
-      }
-    }
-  });
 }
diff --git a/src/features/workspaces/state.js b/src/features/workspaces/state.js
deleted file mode 100644
index c916480c0..000000000
--- a/src/features/workspaces/state.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { observable } from 'mobx';
-
-const defaultState = {
-  activeWorkspace: null,
-  nextWorkspace: null,
-  isLoadingWorkspaces: false,
-  isFeatureActive: false,
-  isSwitchingWorkspace: false,
-  isWorkspaceDrawerOpen: false,
-  workspaces: [],
-  workspaceBeingEdited: null,
-};
-
-export const workspacesState = observable(defaultState);
-
-export function resetState() {
-  Object.assign(workspacesState, defaultState);
-}
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index f6b9b2ff4..883f36ffb 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -1,54 +1,39 @@
-import { observable, reaction, action } from 'mobx';
-import Store from '../../stores/lib/Store';
-import CachedRequest from '../../stores/lib/CachedRequest';
-import Workspace from './models/Workspace';
+import {
+  computed,
+  observable,
+  action,
+} from 'mobx';
+import Reaction from '../../stores/lib/Reaction';
 import { matchRoute } from '../../helpers/routing-helpers';
 import { workspaceActions } from './actions';
+import {
+  createWorkspaceRequest,
+  deleteWorkspaceRequest,
+  getUserWorkspacesRequest,
+  updateWorkspaceRequest,
+} from './api';
 
-const debug = require('debug')('Franz:feature:workspaces');
+const debug = require('debug')('Franz:feature:workspaces:store');
 
-export default class WorkspacesStore extends Store {
-  @observable allWorkspacesRequest = new CachedRequest(this.api, 'getUserWorkspaces');
+export default class WorkspacesStore {
+  @observable isFeatureActive = false;
 
-  constructor(stores, api, actions, state) {
-    super(stores, api, actions);
-    this.state = state;
-  }
+  @observable activeWorkspace = null;
+
+  @observable nextWorkspace = null;
+
+  @observable workspaceBeingEdited = null;
+
+  @observable isSwitchingWorkspace = false;
 
-  setup() {
-    debug('fetching workspaces');
-    this.allWorkspacesRequest.execute();
-
-    /**
-     * Update the state workspaces array when workspaces request has results.
-     */
-    reaction(
-      () => this.allWorkspacesRequest.result,
-      workspaces => this._setWorkspaces(workspaces),
-    );
-    /**
-     * Update the loading state when workspace request is executing.
-     */
-    reaction(
-      () => this.allWorkspacesRequest.isExecuting,
-      isExecuting => this._setIsLoadingWorkspaces(isExecuting),
-    );
-    /**
-     * Update the state with the workspace to be edited when route matches.
-     */
-    reaction(
-      () => ({
-        pathname: this.stores.router.location.pathname,
-        workspaces: this.state.workspaces,
-      }),
-      ({ pathname }) => {
-        const match = matchRoute('/settings/workspaces/edit/:id', pathname);
-        if (match) {
-          this.state.workspaceBeingEdited = this._getWorkspaceById(match.id);
-        }
-      },
-    );
+  @observable isWorkspaceDrawerOpen = false;
 
+  @computed get workspaces() {
+    return getUserWorkspacesRequest.execute().result || [];
+  }
+
+  constructor() {
+    // Wire-up action handlers
     workspaceActions.edit.listen(this._edit);
     workspaceActions.create.listen(this._create);
     workspaceActions.delete.listen(this._delete);
@@ -57,28 +42,62 @@ export default class WorkspacesStore extends Store {
     workspaceActions.deactivate.listen(this._deactivateActiveWorkspace);
     workspaceActions.toggleWorkspaceDrawer.listen(this._toggleWorkspaceDrawer);
     workspaceActions.openWorkspaceSettings.listen(this._openWorkspaceSettings);
+
+    // Register and start reactions
+    this._registerReactions([
+      this._updateWorkspaceBeingEdited,
+      this._updateActiveServiceOnWorkspaceSwitch,
+    ]);
   }
 
-  _getWorkspaceById = id => this.state.workspaces.find(w => w.id === id);
+  start(stores, actions) {
+    debug('WorkspacesStore::start');
+    this.stores = stores;
+    this.actions = actions;
+    this._reactions.forEach(r => r.start());
+    this.isFeatureActive = true;
+  }
 
-  @action _setWorkspaces = (workspaces) => {
-    debug('setting user workspaces', workspaces.slice());
-    this.state.workspaces = workspaces.map(data => new Workspace(data));
-  };
+  stop() {
+    debug('WorkspacesStore::stop');
+    this._reactions.forEach(r => r.stop());
+    this.isFeatureActive = false;
+  }
 
-  @action _setIsLoadingWorkspaces = (isLoading) => {
-    this.state.isLoadingWorkspaces = isLoading;
+  filterServicesByActiveWorkspace = (services) => {
+    const { activeWorkspace, isFeatureActive } = this;
+
+    if (!isFeatureActive) return services;
+    if (activeWorkspace) {
+      return services.filter(s => (
+        activeWorkspace.services.includes(s.id)
+      ));
+    }
+    return services;
   };
 
+  // ========== PRIVATE ========= //
+
+  _reactions = [];
+
+  _registerReactions(reactions) {
+    reactions.forEach(r => this._reactions.push(new Reaction(r)));
+  }
+
+  _getWorkspaceById = id => this.workspaces.find(w => w.id === id);
+
+  // Actions
+
   @action _edit = ({ workspace }) => {
     this.stores.router.push(`/settings/workspaces/edit/${workspace.id}`);
   };
 
   @action _create = async ({ name }) => {
     try {
-      const result = await this.api.createWorkspace(name);
-      const workspace = new Workspace(result);
-      this.state.workspaces.push(workspace);
+      const workspace = await createWorkspaceRequest.execute(name);
+      await getUserWorkspacesRequest.patch((result) => {
+        result.push(workspace);
+      });
       this._edit({ workspace });
     } catch (error) {
       throw error;
@@ -87,8 +106,10 @@ export default class WorkspacesStore extends Store {
 
   @action _delete = async ({ workspace }) => {
     try {
-      await this.api.deleteWorkspace(workspace);
-      this.state.workspaces.remove(workspace);
+      await deleteWorkspaceRequest.execute(workspace);
+      await getUserWorkspacesRequest.patch((result) => {
+        result.remove(workspace);
+      });
       this.stores.router.push('/settings/workspaces');
     } catch (error) {
       throw error;
@@ -97,9 +118,11 @@ export default class WorkspacesStore extends Store {
 
   @action _update = async ({ workspace }) => {
     try {
-      await this.api.updateWorkspace(workspace);
-      const localWorkspace = this.state.workspaces.find(ws => ws.id === workspace.id);
-      Object.assign(localWorkspace, workspace);
+      await updateWorkspaceRequest.execute(workspace);
+      await getUserWorkspacesRequest.patch((result) => {
+        const localWorkspace = result.find(ws => ws.id === workspace.id);
+        Object.assign(localWorkspace, workspace);
+      });
       this.stores.router.push('/settings/workspaces');
     } catch (error) {
       throw error;
@@ -107,33 +130,56 @@ export default class WorkspacesStore extends Store {
   };
 
   @action _setActiveWorkspace = ({ workspace }) => {
-    Object.assign(this.state, {
-      isSwitchingWorkspace: true,
-      nextWorkspace: workspace,
-    });
-    setTimeout(() => { this.state.activeWorkspace = workspace; }, 100);
+    // Indicate that we are switching to another workspace
+    this.isSwitchingWorkspace = true;
+    this.nextWorkspace = workspace;
+    // Delay switching to next workspace so that the services loading does not drag down UI
+    setTimeout(() => { this.activeWorkspace = workspace; }, 100);
+    // Indicate that we are done switching to the next workspace
     setTimeout(() => {
-      Object.assign(this.state, {
-        isSwitchingWorkspace: false,
-        nextWorkspace: null,
-      });
+      this.isSwitchingWorkspace = false;
+      this.nextWorkspace = null;
     }, 1000);
   };
 
   @action _deactivateActiveWorkspace = () => {
-    Object.assign(this.state, {
-      isSwitchingWorkspace: true,
-      nextWorkspace: null,
-    });
-    setTimeout(() => { this.state.activeWorkspace = null; }, 100);
-    setTimeout(() => { this.state.isSwitchingWorkspace = false; }, 1000);
+    // Indicate that we are switching to default workspace
+    this.isSwitchingWorkspace = true;
+    this.nextWorkspace = null;
+    // Delay switching to next workspace so that the services loading does not drag down UI
+    setTimeout(() => { this.activeWorkspace = null; }, 100);
+    // Indicate that we are done switching to the default workspace
+    setTimeout(() => { this.isSwitchingWorkspace = false; }, 1000);
   };
 
   @action _toggleWorkspaceDrawer = () => {
-    this.state.isWorkspaceDrawerOpen = !this.state.isWorkspaceDrawerOpen;
+    this.isWorkspaceDrawerOpen = !this.isWorkspaceDrawerOpen;
   };
 
   @action _openWorkspaceSettings = () => {
     this.actions.ui.openSettings({ path: 'workspaces' });
   };
+
+  // Reactions
+
+  _updateWorkspaceBeingEdited = () => {
+    const { pathname } = this.stores.router.location;
+    const match = matchRoute('/settings/workspaces/edit/:id', pathname);
+    if (match) {
+      this.workspaceBeingEdited = this._getWorkspaceById(match.id);
+    }
+  };
+
+  _updateActiveServiceOnWorkspaceSwitch = () => {
+    if (!this.isFeatureActive) return;
+    if (this.activeWorkspace) {
+      const services = this.stores.services.allDisplayed;
+      const activeService = services.find(s => s.isActive);
+      const workspaceServices = this.filterServicesByActiveWorkspace(services);
+      const isActiveServiceInWorkspace = workspaceServices.includes(activeService);
+      if (!isActiveServiceInWorkspace) {
+        this.actions.service.setActive({ serviceId: workspaceServices[0].id });
+      }
+    }
+  };
 }
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index 2a88515f4..3435e04f7 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -3,7 +3,7 @@ import { observable, autorun } from 'mobx';
 import { defineMessages } from 'react-intl';
 
 import { isMac, ctrlKey, cmdKey } from '../environment';
-import { workspacesState } from '../features/workspaces/state';
+import { workspaceStore } from '../features/workspaces/index';
 import { workspaceActions } from '../features/workspaces/actions';
 
 const { app, Menu, dialog } = remote;
@@ -784,7 +784,7 @@ export default class FranzMenu {
   }
 
   workspacesMenu() {
-    const { workspaces, activeWorkspace } = workspacesState;
+    const { workspaces, activeWorkspace, isWorkspaceDrawerOpen } = workspaceStore;
     const { intl } = window.franz;
     const menu = [];
 
@@ -800,7 +800,7 @@ export default class FranzMenu {
 
     // Open workspace drawer:
     const drawerLabel = (
-      workspacesState.isWorkspaceDrawerOpen ? menuItems.closeWorkspaceDrawer : menuItems.openWorkspaceDrawer
+      isWorkspaceDrawerOpen ? menuItems.closeWorkspaceDrawer : menuItems.openWorkspaceDrawer
     );
     menu.push({
       label: intl.formatMessage(drawerLabel),
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index cc8eed65b..0ec6bf550 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -12,7 +12,7 @@ import Request from './lib/Request';
 import CachedRequest from './lib/CachedRequest';
 import { matchRoute } from '../helpers/routing-helpers';
 import { gaEvent } from '../lib/analytics';
-import { filterServicesByActiveWorkspace, getActiveWorkspaceServices } from '../features/workspaces';
+import { workspaceStore } from '../features/workspaces';
 
 const debug = require('debug')('Franz:ServiceStore');
 
@@ -109,7 +109,7 @@ export default class ServicesStore extends Store {
 
   @computed get allDisplayed() {
     const services = this.stores.settings.all.app.showDisabledServices ? this.all : this.enabled;
-    return filterServicesByActiveWorkspace(services);
+    return workspaceStore.filterServicesByActiveWorkspace(services);
   }
 
   // This is just used to avoid unnecessary rerendering of resource-heavy webviews
@@ -117,7 +117,7 @@ export default class ServicesStore extends Store {
     const { showDisabledServices } = this.stores.settings.all.app;
     const services = this.allServicesRequest.execute().result || [];
     const filteredServices = showDisabledServices ? services : services.filter(service => service.isEnabled);
-    return getActiveWorkspaceServices(filteredServices);
+    return workspaceStore.filterServicesByActiveWorkspace(filteredServices);
   }
 
   @computed get filtered() {