setup logic to display workspace edit page

9 files changed, 116 insertions, 8 deletions

diff --git a/src/actions/index.js b/src/actions/index.js
index 59acabb0b..a406af50a 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -11,6 +11,7 @@ import payment from './payment';
 import news from './news';
 import settings from './settings';
 import requests from './requests';
+import workspace from './workspace';
 
 const actions = Object.assign({}, {
   service,
@@ -23,6 +24,7 @@ const actions = Object.assign({}, {
   news,
   settings,
   requests,
+  workspace,
 });
 
 export default defineActions(actions, PropTypes.checkPropTypes);
diff --git a/src/actions/workspace.js b/src/actions/workspace.js
new file mode 100644
index 000000000..ab07a96c0
--- /dev/null
+++ b/src/actions/workspace.js
@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+import Workspace from '../models/Workspace';
+
+export default {
+  edit: {
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+  },
+};
diff --git a/src/app.js b/src/app.js
index ee1b12939..320ba679f 100644
--- a/src/app.js
+++ b/src/app.js
@@ -40,6 +40,7 @@ import InviteScreen from './containers/auth/InviteScreen';
 import AuthLayoutContainer from './containers/auth/AuthLayoutContainer';
 import SubscriptionPopupScreen from './containers/subscription/SubscriptionPopupScreen';
 import WorkspacesScreen from './containers/settings/WorkspacesScreen';
+import EditWorkspaceScreen from './containers/settings/EditWorkspaceScreen';
 
 // Add Polyfills
 smoothScroll.polyfill();
@@ -77,6 +78,7 @@ window.addEventListener('load', () => {
                   <Route path="/settings/services" component={ServicesScreen} />
                   <Route path="/settings/services/:action/:id" component={EditServiceScreen} />
                   <Route path="/settings/workspaces" component={WorkspacesScreen} />
+                  <Route path="/settings/workspaces/:action/:id" component={EditWorkspaceScreen} />
                   <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
index a71e6583d..088d61433 100644
--- a/src/components/settings/workspaces/WorkspaceItem.js
+++ b/src/components/settings/workspaces/WorkspaceItem.js
@@ -11,6 +11,7 @@ import Workspace from '../../../models/Workspace';
 class WorkspaceItem extends Component {
   static propTypes = {
     workspace: PropTypes.instanceOf(Workspace).isRequired,
+    onItemClick: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -18,7 +19,7 @@ class WorkspaceItem extends Component {
   };
 
   render() {
-    const { workspace } = this.props;
+    const { workspace, onItemClick } = this.props;
     // const { intl } = this.context;
 
     return (
@@ -29,7 +30,7 @@ class WorkspaceItem extends Component {
       >
         <td
           className="workspace-table__column-name"
-          onClick={() => console.log('go to workspace', workspace.name)}
+          onClick={() => onItemClick(workspace)}
         >
           {workspace.name}
         </td>
diff --git a/src/components/settings/workspaces/WorkspacesDashboard.js b/src/components/settings/workspaces/WorkspacesDashboard.js
index b286adc68..a5bb18cb7 100644
--- a/src/components/settings/workspaces/WorkspacesDashboard.js
+++ b/src/components/settings/workspaces/WorkspacesDashboard.js
@@ -22,6 +22,7 @@ class WorkspacesDashboard extends Component {
   static propTypes = {
     workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
     isLoading: PropTypes.bool.isRequired,
+    onWorkspaceClick: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -29,7 +30,7 @@ class WorkspacesDashboard extends Component {
   };
 
   render() {
-    const { workspaces, isLoading } = this.props;
+    const { workspaces, isLoading, onWorkspaceClick } = this.props;
     const { intl } = this.context;
 
     return (
@@ -47,6 +48,7 @@ class WorkspacesDashboard extends Component {
                   <WorkspaceItem
                     key={workspace.id}
                     workspace={workspace}
+                    onItemClick={w => onWorkspaceClick(w)}
                   />
                 ))}
               </tbody>
diff --git a/src/containers/settings/EditWorkspaceScreen.js b/src/containers/settings/EditWorkspaceScreen.js
new file mode 100644
index 000000000..665b405bd
--- /dev/null
+++ b/src/containers/settings/EditWorkspaceScreen.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import Form from '../../lib/Form';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
+import { gaPage } from '../../lib/analytics';
+import { state } from '../../features/workspaces/state';
+
+const messages = defineMessages({
+  name: {
+    id: 'settings.workspace.form.name',
+    defaultMessage: '!!!Name',
+  },
+});
+
+@inject('stores', 'actions') @observer
+class EditWorkspaceScreen extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  componentDidMount() {
+    gaPage('Settings/Workspace/Edit');
+  }
+
+  prepareForm(workspace) {
+    const { intl } = this.context;
+    const config = {
+      fields: {
+        name: {
+          label: intl.formatMessage(messages.name),
+          placeholder: intl.formatMessage(messages.name),
+          value: workspace.name,
+        },
+      },
+    };
+    return new Form(config);
+  }
+
+  render() {
+    const { workspaceBeingEdited } = state;
+    if (!workspaceBeingEdited) return null;
+
+    // const form = this.prepareForm(workspaceBeingEdited);
+
+    return (
+      <ErrorBoundary>
+        <div>{workspaceBeingEdited.name}</div>
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default EditWorkspaceScreen;
diff --git a/src/containers/settings/WorkspacesScreen.js b/src/containers/settings/WorkspacesScreen.js
index e767fdfbe..5e91f7673 100644
--- a/src/containers/settings/WorkspacesScreen.js
+++ b/src/containers/settings/WorkspacesScreen.js
@@ -1,25 +1,33 @@
 import React, { Component } from 'react';
-import { observer } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
+import PropTypes from 'prop-types';
 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
+@inject('actions') @observer
 class WorkspacesScreen extends Component {
-  static propTypes = {};
+  static propTypes = {
+    actions: PropTypes.shape({
+      workspace: PropTypes.shape({
+        edit: PropTypes.func.isRequired,
+      }),
+    }).isRequired,
+  };
 
   componentDidMount() {
     gaPage('Settings/Workspaces Dashboard');
   }
 
   render() {
+    const { workspace } = this.props.actions;
     return (
       <ErrorBoundary>
         <WorkspacesDashboard
           workspaces={state.workspaces}
           isLoading={state.isLoading}
+          onWorkspaceClick={w => workspace.edit({ workspace: w })}
         />
       </ErrorBoundary>
     );
diff --git a/src/features/workspaces/state.js b/src/features/workspaces/state.js
index ed3fe9f00..f938c1470 100644
--- a/src/features/workspaces/state.js
+++ b/src/features/workspaces/state.js
@@ -3,6 +3,7 @@ import { observable } from 'mobx';
 const defaultState = {
   isLoading: false,
   workspaces: [],
+  workspaceBeingEdited: null,
 };
 
 export const state = observable(defaultState);
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index 2b6d55cc7..aab66708b 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -2,6 +2,7 @@ import { observable, reaction } from 'mobx';
 import Store from '../../stores/lib/Store';
 import CachedRequest from '../../stores/lib/CachedRequest';
 import Workspace from '../../models/Workspace';
+import { matchRoute } from '../../helpers/routing-helpers';
 
 const debug = require('debug')('Franz:feature:workspaces');
 
@@ -14,17 +15,40 @@ export default class WorkspacesStore extends Store {
   }
 
   setup() {
-    debug('fetching user workspaces');
+    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._setIsLoading(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);
+        }
+      },
+    );
+
+    this.actions.workspace.edit.listen(this._edit);
   }
 
   _setWorkspaces = (workspaces) => {
@@ -35,4 +59,10 @@ export default class WorkspacesStore extends Store {
   _setIsLoading = (isLoading) => {
     this.state.isLoading = isLoading;
   };
+
+  _getWorkspaceById = id => this.state.workspaces.find(w => w.id === id);
+
+  _edit = ({ workspace }) => {
+    this.stores.router.push(`/settings/workspaces/edit/${workspace.id}`);
+  }
 }