show infobox when updating workspaces

3 files changed, 62 insertions, 45 deletions

diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 2ccea1d55..3db38aff4 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -3,12 +3,13 @@ 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 Infobox from '../../../components/ui/Infobox';
+import Appear from '../../../components/ui/effects/Appear';
 
 const messages = defineMessages({
   headline: {
@@ -27,6 +28,10 @@ const messages = defineMessages({
     id: 'settings.workspaces.tryReloadWorkspaces',
     defaultMessage: '!!!Try again',
   },
+  updatedInfo: {
+    id: 'settings.workspaces.updatedInfo',
+    defaultMessage: '!!!Your changes have been saved',
+  },
 });
 
 const styles = () => ({
@@ -34,6 +39,9 @@ const styles = () => ({
     height: 'auto',
     marginBottom: '20px',
   },
+  appear: {
+    height: 'auto',
+  },
 });
 
 @injectSheet(styles) @observer
@@ -41,6 +49,7 @@ 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,
@@ -54,6 +63,7 @@ class WorkspacesDashboard extends Component {
     const {
       classes,
       getUserWorkspacesRequest,
+      updateWorkspaceRequest,
       onCreateWorkspaceSubmit,
       onWorkspaceClick,
       workspaces,
@@ -65,40 +75,51 @@ class WorkspacesDashboard extends Component {
           <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
         <div className="settings__body">
-          <div className={classes.body}>
-            <div className={classes.createForm}>
-              <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} />
-            </div>
-            {getUserWorkspacesRequest.isExecuting ? (
-              <Loader />
-            ) : (
-              <Fragment>
-                {getUserWorkspacesRequest.error ? (
-                  <Infobox
-                    icon="alert"
-                    type="danger"
-                    ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
-                    ctaLoading={getUserWorkspacesRequest.isExecuting}
-                    ctaOnClick={getUserWorkspacesRequest.retry}
-                  >
-                    {intl.formatMessage(messages.workspacesRequestFailed)}
-                  </Infobox>
-                ) : (
-                  <table className="workspace-table">
-                    <tbody>
-                      {workspaces.map(workspace => (
-                        <WorkspaceItem
-                          key={workspace.id}
-                          workspace={workspace}
-                          onItemClick={w => onWorkspaceClick(w)}
-                        />
-                      ))}
-                    </tbody>
-                  </table>
-                )}
-              </Fragment>
-            )}
+          {updateWorkspaceRequest.wasExecuted && updateWorkspaceRequest.result && (
+            <Appear className={classes.appear}>
+              <Infobox
+                type="success"
+                icon="checkbox-marked-circle-outline"
+                dismissable
+                onDismiss={updateWorkspaceRequest.reset}
+                onUnmount={updateWorkspaceRequest.reset}
+              >
+                {intl.formatMessage(messages.updatedInfo)}
+              </Infobox>
+            </Appear>
+          )}
+          <div className={classes.createForm}>
+            <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} />
           </div>
+          {getUserWorkspacesRequest.isExecuting ? (
+            <Loader />
+          ) : (
+            <Fragment>
+              {getUserWorkspacesRequest.error ? (
+                <Infobox
+                  icon="alert"
+                  type="danger"
+                  ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
+                  ctaLoading={getUserWorkspacesRequest.isExecuting}
+                  ctaOnClick={getUserWorkspacesRequest.retry}
+                >
+                  {intl.formatMessage(messages.workspacesRequestFailed)}
+                </Infobox>
+              ) : (
+                <table className="workspace-table">
+                  <tbody>
+                    {workspaces.map(workspace => (
+                      <WorkspaceItem
+                        key={workspace.id}
+                        workspace={workspace}
+                        onItemClick={w => onWorkspaceClick(w)}
+                      />
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </Fragment>
+          )}
         </div>
       </div>
     );
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
index 89bd2a2ef..3f41de0c2 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import WorkspacesDashboard from '../components/WorkspacesDashboard';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import { workspaceStore } from '../index';
-import { getUserWorkspacesRequest } from '../api';
+import { getUserWorkspacesRequest, updateWorkspaceRequest } from '../api';
 
 @inject('actions') @observer
 class WorkspacesScreen extends Component {
@@ -23,6 +23,7 @@ class WorkspacesScreen extends Component {
         <WorkspacesDashboard
           workspaces={workspaceStore.workspaces}
           getUserWorkspacesRequest={getUserWorkspacesRequest}
+          updateWorkspaceRequest={updateWorkspaceRequest}
           onCreateWorkspaceSubmit={data => actions.workspaces.create(data)}
           onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })}
         />
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index 3cec5f360..f7df7b29c 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -102,9 +102,7 @@ export default class WorkspacesStore {
   @action _create = async ({ name }) => {
     try {
       const workspace = await createWorkspaceRequest.execute(name);
-      await getUserWorkspacesRequest.patch((result) => {
-        result.push(workspace);
-      });
+      await getUserWorkspacesRequest.result.push(workspace);
       this._edit({ workspace });
     } catch (error) {
       throw error;
@@ -114,9 +112,7 @@ export default class WorkspacesStore {
   @action _delete = async ({ workspace }) => {
     try {
       await deleteWorkspaceRequest.execute(workspace);
-      await getUserWorkspacesRequest.patch((result) => {
-        result.remove(workspace);
-      });
+      await getUserWorkspacesRequest.result.remove(workspace);
       this.stores.router.push('/settings/workspaces');
     } catch (error) {
       throw error;
@@ -126,10 +122,9 @@ export default class WorkspacesStore {
   @action _update = async ({ workspace }) => {
     try {
       await updateWorkspaceRequest.execute(workspace);
-      await getUserWorkspacesRequest.patch((result) => {
-        const localWorkspace = result.find(ws => ws.id === workspace.id);
-        Object.assign(localWorkspace, workspace);
-      });
+      // Path local result optimistically
+      const localWorkspace = this._getWorkspaceById(workspace.id);
+      Object.assign(localWorkspace, workspace);
       this.stores.router.push('/settings/workspaces');
     } catch (error) {
       throw error;