From e6da59b728bf44342428531a2c7e4024829234ed Mon Sep 17 00:00:00 2001 From: Dominik Guzei Date: Mon, 14 Jan 2019 19:01:46 +0100 Subject: setup logic to display workspace edit page --- src/actions/index.js | 2 + src/actions/workspace.js | 8 ++++ src/app.js | 2 + .../settings/workspaces/WorkspaceItem.js | 5 +- .../settings/workspaces/WorkspacesDashboard.js | 4 +- src/containers/settings/EditWorkspaceScreen.js | 54 ++++++++++++++++++++++ src/containers/settings/WorkspacesScreen.js | 16 +++++-- src/features/workspaces/state.js | 1 + src/features/workspaces/store.js | 32 ++++++++++++- 9 files changed, 116 insertions(+), 8 deletions(-) create mode 100644 src/actions/workspace.js create mode 100644 src/containers/settings/EditWorkspaceScreen.js 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', () => { + 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 { > console.log('go to workspace', workspace.name)} + onClick={() => onItemClick(workspace)} > {workspace.name} 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 { onWorkspaceClick(w)} /> ))} 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 ( + +
{workspaceBeingEdited.name}
+ + ); + } +} + +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 ( workspace.edit({ workspace: w })} /> ); 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}`); + } } -- cgit v1.2.3-54-g00ecf