From 84755ddf8b8fb015ee2bfd70e9c4aa50d256f9d0 Mon Sep 17 00:00:00 2001 From: Dominik Guzei Date: Mon, 14 Jan 2019 17:11:27 +0100 Subject: basic setup of workspaces settings screen --- src/api/utils/auth.js | 24 ++++++++++ src/app.js | 2 + .../settings/workspaces/WorkspaceItem.js | 41 ++++++++++++++++ .../settings/workspaces/WorkspacesDashboard.js | 56 ++++++++++++++++++++++ src/containers/settings/WorkspacesScreen.js | 29 +++++++++++ src/environment.js | 1 + src/features/workspaces/api.js | 16 ++++--- src/features/workspaces/index.js | 10 ++-- src/features/workspaces/state.js | 12 +++++ src/features/workspaces/store.js | 15 ++++-- src/i18n/locales/en-US.json | 1 + src/models/Workspace.js | 25 ++++++++++ 12 files changed, 216 insertions(+), 16 deletions(-) create mode 100644 src/api/utils/auth.js create mode 100644 src/components/settings/workspaces/WorkspaceItem.js create mode 100644 src/components/settings/workspaces/WorkspacesDashboard.js create mode 100644 src/containers/settings/WorkspacesScreen.js create mode 100644 src/features/workspaces/state.js create mode 100644 src/models/Workspace.js (limited to 'src') 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', () => { + 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 ( + + console.log('go to workspace', workspace.name)} + > + {workspace.name} + + + ); + } +} + +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 ( +
+
+

{intl.formatMessage(messages.headline)}

+
+
+ {isLoading ? ( + + ) : ( + + + {workspaces.map(workspace => )} + +
+ )} +
+
+ ); + } +} + +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 ( + + + + ); + } +} + +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; + } +} -- cgit v1.2.3-54-g00ecf