diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/actions/index.js | 2 | ||||
-rw-r--r-- | src/actions/workspace.js | 8 | ||||
-rw-r--r-- | src/app.js | 2 | ||||
-rw-r--r-- | src/components/settings/workspaces/WorkspaceItem.js | 5 | ||||
-rw-r--r-- | src/components/settings/workspaces/WorkspacesDashboard.js | 4 | ||||
-rw-r--r-- | src/containers/settings/EditWorkspaceScreen.js | 54 | ||||
-rw-r--r-- | src/containers/settings/WorkspacesScreen.js | 16 | ||||
-rw-r--r-- | src/features/workspaces/state.js | 1 | ||||
-rw-r--r-- | src/features/workspaces/store.js | 32 |
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'; | |||
11 | import news from './news'; | 11 | import news from './news'; |
12 | import settings from './settings'; | 12 | import settings from './settings'; |
13 | import requests from './requests'; | 13 | import requests from './requests'; |
14 | import workspace from './workspace'; | ||
14 | 15 | ||
15 | const actions = Object.assign({}, { | 16 | const actions = Object.assign({}, { |
16 | service, | 17 | service, |
@@ -23,6 +24,7 @@ const actions = Object.assign({}, { | |||
23 | news, | 24 | news, |
24 | settings, | 25 | settings, |
25 | requests, | 26 | requests, |
27 | workspace, | ||
26 | }); | 28 | }); |
27 | 29 | ||
28 | export default defineActions(actions, PropTypes.checkPropTypes); | 30 | 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 @@ | |||
1 | import PropTypes from 'prop-types'; | ||
2 | import Workspace from '../models/Workspace'; | ||
3 | |||
4 | export default { | ||
5 | edit: { | ||
6 | workspace: PropTypes.instanceOf(Workspace).isRequired, | ||
7 | }, | ||
8 | }; | ||
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'; | |||
40 | import AuthLayoutContainer from './containers/auth/AuthLayoutContainer'; | 40 | import AuthLayoutContainer from './containers/auth/AuthLayoutContainer'; |
41 | import SubscriptionPopupScreen from './containers/subscription/SubscriptionPopupScreen'; | 41 | import SubscriptionPopupScreen from './containers/subscription/SubscriptionPopupScreen'; |
42 | import WorkspacesScreen from './containers/settings/WorkspacesScreen'; | 42 | import WorkspacesScreen from './containers/settings/WorkspacesScreen'; |
43 | import EditWorkspaceScreen from './containers/settings/EditWorkspaceScreen'; | ||
43 | 44 | ||
44 | // Add Polyfills | 45 | // Add Polyfills |
45 | smoothScroll.polyfill(); | 46 | smoothScroll.polyfill(); |
@@ -77,6 +78,7 @@ window.addEventListener('load', () => { | |||
77 | <Route path="/settings/services" component={ServicesScreen} /> | 78 | <Route path="/settings/services" component={ServicesScreen} /> |
78 | <Route path="/settings/services/:action/:id" component={EditServiceScreen} /> | 79 | <Route path="/settings/services/:action/:id" component={EditServiceScreen} /> |
79 | <Route path="/settings/workspaces" component={WorkspacesScreen} /> | 80 | <Route path="/settings/workspaces" component={WorkspacesScreen} /> |
81 | <Route path="/settings/workspaces/:action/:id" component={EditWorkspaceScreen} /> | ||
80 | <Route path="/settings/user" component={AccountScreen} /> | 82 | <Route path="/settings/user" component={AccountScreen} /> |
81 | <Route path="/settings/user/edit" component={EditUserScreen} /> | 83 | <Route path="/settings/user/edit" component={EditUserScreen} /> |
82 | <Route path="/settings/app" component={EditSettingsScreen} /> | 84 | <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'; | |||
11 | class WorkspaceItem extends Component { | 11 | class WorkspaceItem extends Component { |
12 | static propTypes = { | 12 | static propTypes = { |
13 | workspace: PropTypes.instanceOf(Workspace).isRequired, | 13 | workspace: PropTypes.instanceOf(Workspace).isRequired, |
14 | onItemClick: PropTypes.func.isRequired, | ||
14 | }; | 15 | }; |
15 | 16 | ||
16 | static contextTypes = { | 17 | static contextTypes = { |
@@ -18,7 +19,7 @@ class WorkspaceItem extends Component { | |||
18 | }; | 19 | }; |
19 | 20 | ||
20 | render() { | 21 | render() { |
21 | const { workspace } = this.props; | 22 | const { workspace, onItemClick } = this.props; |
22 | // const { intl } = this.context; | 23 | // const { intl } = this.context; |
23 | 24 | ||
24 | return ( | 25 | return ( |
@@ -29,7 +30,7 @@ class WorkspaceItem extends Component { | |||
29 | > | 30 | > |
30 | <td | 31 | <td |
31 | className="workspace-table__column-name" | 32 | className="workspace-table__column-name" |
32 | onClick={() => console.log('go to workspace', workspace.name)} | 33 | onClick={() => onItemClick(workspace)} |
33 | > | 34 | > |
34 | {workspace.name} | 35 | {workspace.name} |
35 | </td> | 36 | </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 { | |||
22 | static propTypes = { | 22 | static propTypes = { |
23 | workspaces: MobxPropTypes.arrayOrObservableArray.isRequired, | 23 | workspaces: MobxPropTypes.arrayOrObservableArray.isRequired, |
24 | isLoading: PropTypes.bool.isRequired, | 24 | isLoading: PropTypes.bool.isRequired, |
25 | onWorkspaceClick: PropTypes.func.isRequired, | ||
25 | }; | 26 | }; |
26 | 27 | ||
27 | static contextTypes = { | 28 | static contextTypes = { |
@@ -29,7 +30,7 @@ class WorkspacesDashboard extends Component { | |||
29 | }; | 30 | }; |
30 | 31 | ||
31 | render() { | 32 | render() { |
32 | const { workspaces, isLoading } = this.props; | 33 | const { workspaces, isLoading, onWorkspaceClick } = this.props; |
33 | const { intl } = this.context; | 34 | const { intl } = this.context; |
34 | 35 | ||
35 | return ( | 36 | return ( |
@@ -47,6 +48,7 @@ class WorkspacesDashboard extends Component { | |||
47 | <WorkspaceItem | 48 | <WorkspaceItem |
48 | key={workspace.id} | 49 | key={workspace.id} |
49 | workspace={workspace} | 50 | workspace={workspace} |
51 | onItemClick={w => onWorkspaceClick(w)} | ||
50 | /> | 52 | /> |
51 | ))} | 53 | ))} |
52 | </tbody> | 54 | </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 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import { inject, observer } from 'mobx-react'; | ||
3 | import { defineMessages, intlShape } from 'react-intl'; | ||
4 | import Form from '../../lib/Form'; | ||
5 | import ErrorBoundary from '../../components/util/ErrorBoundary'; | ||
6 | import { gaPage } from '../../lib/analytics'; | ||
7 | import { state } from '../../features/workspaces/state'; | ||
8 | |||
9 | const messages = defineMessages({ | ||
10 | name: { | ||
11 | id: 'settings.workspace.form.name', | ||
12 | defaultMessage: '!!!Name', | ||
13 | }, | ||
14 | }); | ||
15 | |||
16 | @inject('stores', 'actions') @observer | ||
17 | class EditWorkspaceScreen extends Component { | ||
18 | static contextTypes = { | ||
19 | intl: intlShape, | ||
20 | }; | ||
21 | |||
22 | componentDidMount() { | ||
23 | gaPage('Settings/Workspace/Edit'); | ||
24 | } | ||
25 | |||
26 | prepareForm(workspace) { | ||
27 | const { intl } = this.context; | ||
28 | const config = { | ||
29 | fields: { | ||
30 | name: { | ||
31 | label: intl.formatMessage(messages.name), | ||
32 | placeholder: intl.formatMessage(messages.name), | ||
33 | value: workspace.name, | ||
34 | }, | ||
35 | }, | ||
36 | }; | ||
37 | return new Form(config); | ||
38 | } | ||
39 | |||
40 | render() { | ||
41 | const { workspaceBeingEdited } = state; | ||
42 | if (!workspaceBeingEdited) return null; | ||
43 | |||
44 | // const form = this.prepareForm(workspaceBeingEdited); | ||
45 | |||
46 | return ( | ||
47 | <ErrorBoundary> | ||
48 | <div>{workspaceBeingEdited.name}</div> | ||
49 | </ErrorBoundary> | ||
50 | ); | ||
51 | } | ||
52 | } | ||
53 | |||
54 | 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 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import { observer } from 'mobx-react'; | 2 | import { inject, observer } from 'mobx-react'; |
3 | import PropTypes from 'prop-types'; | ||
3 | import { gaPage } from '../../lib/analytics'; | 4 | import { gaPage } from '../../lib/analytics'; |
4 | import { state } from '../../features/workspaces/state'; | 5 | import { state } from '../../features/workspaces/state'; |
5 | |||
6 | import WorkspacesDashboard from '../../components/settings/workspaces/WorkspacesDashboard'; | 6 | import WorkspacesDashboard from '../../components/settings/workspaces/WorkspacesDashboard'; |
7 | import ErrorBoundary from '../../components/util/ErrorBoundary'; | 7 | import ErrorBoundary from '../../components/util/ErrorBoundary'; |
8 | 8 | ||
9 | @observer | 9 | @inject('actions') @observer |
10 | class WorkspacesScreen extends Component { | 10 | class WorkspacesScreen extends Component { |
11 | static propTypes = {}; | 11 | static propTypes = { |
12 | actions: PropTypes.shape({ | ||
13 | workspace: PropTypes.shape({ | ||
14 | edit: PropTypes.func.isRequired, | ||
15 | }), | ||
16 | }).isRequired, | ||
17 | }; | ||
12 | 18 | ||
13 | componentDidMount() { | 19 | componentDidMount() { |
14 | gaPage('Settings/Workspaces Dashboard'); | 20 | gaPage('Settings/Workspaces Dashboard'); |
15 | } | 21 | } |
16 | 22 | ||
17 | render() { | 23 | render() { |
24 | const { workspace } = this.props.actions; | ||
18 | return ( | 25 | return ( |
19 | <ErrorBoundary> | 26 | <ErrorBoundary> |
20 | <WorkspacesDashboard | 27 | <WorkspacesDashboard |
21 | workspaces={state.workspaces} | 28 | workspaces={state.workspaces} |
22 | isLoading={state.isLoading} | 29 | isLoading={state.isLoading} |
30 | onWorkspaceClick={w => workspace.edit({ workspace: w })} | ||
23 | /> | 31 | /> |
24 | </ErrorBoundary> | 32 | </ErrorBoundary> |
25 | ); | 33 | ); |
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'; | |||
3 | const defaultState = { | 3 | const defaultState = { |
4 | isLoading: false, | 4 | isLoading: false, |
5 | workspaces: [], | 5 | workspaces: [], |
6 | workspaceBeingEdited: null, | ||
6 | }; | 7 | }; |
7 | 8 | ||
8 | export const state = observable(defaultState); | 9 | 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'; | |||
2 | import Store from '../../stores/lib/Store'; | 2 | import Store from '../../stores/lib/Store'; |
3 | import CachedRequest from '../../stores/lib/CachedRequest'; | 3 | import CachedRequest from '../../stores/lib/CachedRequest'; |
4 | import Workspace from '../../models/Workspace'; | 4 | import Workspace from '../../models/Workspace'; |
5 | import { matchRoute } from '../../helpers/routing-helpers'; | ||
5 | 6 | ||
6 | const debug = require('debug')('Franz:feature:workspaces'); | 7 | const debug = require('debug')('Franz:feature:workspaces'); |
7 | 8 | ||
@@ -14,17 +15,40 @@ export default class WorkspacesStore extends Store { | |||
14 | } | 15 | } |
15 | 16 | ||
16 | setup() { | 17 | setup() { |
17 | debug('fetching user workspaces'); | 18 | debug('fetching workspaces'); |
18 | this.allWorkspacesRequest.execute(); | 19 | this.allWorkspacesRequest.execute(); |
19 | 20 | ||
21 | /** | ||
22 | * Update the state workspaces array when workspaces request has results. | ||
23 | */ | ||
20 | reaction( | 24 | reaction( |
21 | () => this.allWorkspacesRequest.result, | 25 | () => this.allWorkspacesRequest.result, |
22 | workspaces => this._setWorkspaces(workspaces), | 26 | workspaces => this._setWorkspaces(workspaces), |
23 | ); | 27 | ); |
28 | /** | ||
29 | * Update the loading state when workspace request is executing. | ||
30 | */ | ||
24 | reaction( | 31 | reaction( |
25 | () => this.allWorkspacesRequest.isExecuting, | 32 | () => this.allWorkspacesRequest.isExecuting, |
26 | isExecuting => this._setIsLoading(isExecuting), | 33 | isExecuting => this._setIsLoading(isExecuting), |
27 | ); | 34 | ); |
35 | /** | ||
36 | * Update the state with the workspace to be edited when route matches. | ||
37 | */ | ||
38 | reaction( | ||
39 | () => ({ | ||
40 | pathname: this.stores.router.location.pathname, | ||
41 | workspaces: this.state.workspaces, | ||
42 | }), | ||
43 | ({ pathname }) => { | ||
44 | const match = matchRoute('/settings/workspaces/edit/:id', pathname); | ||
45 | if (match) { | ||
46 | this.state.workspaceBeingEdited = this._getWorkspaceById(match.id); | ||
47 | } | ||
48 | }, | ||
49 | ); | ||
50 | |||
51 | this.actions.workspace.edit.listen(this._edit); | ||
28 | } | 52 | } |
29 | 53 | ||
30 | _setWorkspaces = (workspaces) => { | 54 | _setWorkspaces = (workspaces) => { |
@@ -35,4 +59,10 @@ export default class WorkspacesStore extends Store { | |||
35 | _setIsLoading = (isLoading) => { | 59 | _setIsLoading = (isLoading) => { |
36 | this.state.isLoading = isLoading; | 60 | this.state.isLoading = isLoading; |
37 | }; | 61 | }; |
62 | |||
63 | _getWorkspaceById = id => this.state.workspaces.find(w => w.id === id); | ||
64 | |||
65 | _edit = ({ workspace }) => { | ||
66 | this.stores.router.push(`/settings/workspaces/edit/${workspace.id}`); | ||
67 | } | ||
38 | } | 68 | } |