import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; import injectSheet from 'react-jss'; import { Infobox } from '@meetfranz/ui'; import Loader from '../../../components/ui/Loader'; import WorkspaceItem from './WorkspaceItem'; import CreateWorkspaceForm from './CreateWorkspaceForm'; import Request from '../../../stores/lib/Request'; import Appear from '../../../components/ui/effects/Appear'; const messages = defineMessages({ headline: { id: 'settings.workspaces.headline', defaultMessage: '!!!Your workspaces', }, noServicesAdded: { id: 'settings.workspaces.noWorkspacesAdded', defaultMessage: '!!!You haven\'t added any workspaces yet.', }, workspacesRequestFailed: { id: 'settings.workspaces.workspacesRequestFailed', defaultMessage: '!!!Could not load your workspaces', }, tryReloadWorkspaces: { id: 'settings.workspaces.tryReloadWorkspaces', defaultMessage: '!!!Try again', }, updatedInfo: { id: 'settings.workspaces.updatedInfo', defaultMessage: '!!!Your changes have been saved', }, }); const styles = () => ({ createForm: { height: 'auto', marginBottom: '20px', }, appear: { height: 'auto', }, }); @injectSheet(styles) @observer class WorkspacesDashboard extends Component { static propTypes = { classes: PropTypes.object.isRequired, getUserWorkspacesRequest: PropTypes.instanceOf(Request).isRequired, updateWorkspaceRequest: PropTypes.instanceOf(Request).isRequired, onCreateWorkspaceSubmit: PropTypes.func.isRequired, onWorkspaceClick: PropTypes.func.isRequired, workspaces: MobxPropTypes.arrayOrObservableArray.isRequired, }; static contextTypes = { intl: intlShape, }; render() { const { classes, getUserWorkspacesRequest, updateWorkspaceRequest, onCreateWorkspaceSubmit, onWorkspaceClick, workspaces, } = this.props; const { intl } = this.context; return (