From a2e4316879908c5bc2c38cef81eef9152476b6f6 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 26 Mar 2019 15:26:20 +0100
Subject: show infobox when updating workspaces

---
 packages/ui/src/infobox/index.tsx                  |  7 ++
 src/components/ui/Infobox.js                       | 17 ++++-
 .../workspaces/components/WorkspacesDashboard.js   | 89 +++++++++++++---------
 .../workspaces/containers/WorkspacesScreen.js      |  3 +-
 src/features/workspaces/store.js                   | 15 ++--
 src/i18n/locales/defaultMessages.json              | 29 +++++--
 src/i18n/locales/en-US.json                        |  3 +-
 .../workspaces/components/WorkspacesDashboard.json | 29 +++++--
 src/stores/lib/Request.js                          |  4 +-
 9 files changed, 129 insertions(+), 67 deletions(-)

diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index 1a442a733..9066a623e 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -11,6 +11,7 @@ interface IProps extends IWithStyle {
   type?: string;
   dismissable?: boolean;
   onDismiss?: () => void;
+  onUnmount?: () => void;
   ctaOnClick?: () => void;
   ctaLabel?: string;
   ctaLoading?: boolean;
@@ -46,6 +47,7 @@ const styles = (theme: Theme) => ({
   wrapper: {
     position: 'relative',
     overflow: 'hidden',
+    height: 'auto',
   },
   infobox: {
     alignItems: 'center',
@@ -129,6 +131,11 @@ class InfoboxComponent extends Component<IProps, IState> {
     },         3000);
   }
 
+  componentWillUnmount(): void {
+    const { onUnmount } = this.props;
+    if (onUnmount) onUnmount();
+  }
+
   render() {
     const {
       classes,
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
index a33c6474a..0917ee9f0 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.js
@@ -13,6 +13,8 @@ export default @observer class Infobox extends Component {
     ctaLabel: PropTypes.string,
     ctaLoading: PropTypes.bool,
     dismissable: PropTypes.bool,
+    onDismiss: PropTypes.func,
+    onSeen: PropTypes.func,
   };
 
   static defaultProps = {
@@ -22,12 +24,19 @@ export default @observer class Infobox extends Component {
     ctaOnClick: () => null,
     ctaLabel: '',
     ctaLoading: false,
+    onDismiss: () => null,
+    onSeen: () => null,
   };
 
   state = {
     dismissed: false,
   };
 
+  componentDidMount() {
+    const { onSeen } = this.props;
+    if (onSeen) onSeen();
+  }
+
   render() {
     const {
       children,
@@ -37,6 +46,7 @@ export default @observer class Infobox extends Component {
       ctaLoading,
       ctaOnClick,
       dismissable,
+      onDismiss,
     } = this.props;
 
     if (this.state.dismissed) {
@@ -76,9 +86,10 @@ export default @observer class Infobox extends Component {
         {dismissable && (
           <button
             type="button"
-            onClick={() => this.setState({
-              dismissed: true,
-            })}
+            onClick={() => {
+              this.setState({ dismissed: true });
+              if (onDismiss) onDismiss();
+            }}
             className="infobox__delete mdi mdi-close"
           />
         )}
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;
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index afbacf28a..891ad38d4 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -3388,52 +3388,65 @@
         "defaultMessage": "!!!Your workspaces",
         "end": {
           "column": 3,
-          "line": 17
+          "line": 18
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.headline",
         "start": {
           "column": 12,
-          "line": 14
+          "line": 15
         }
       },
       {
         "defaultMessage": "!!!You haven't added any workspaces yet.",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 22
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.noWorkspacesAdded",
         "start": {
           "column": 19,
-          "line": 18
+          "line": 19
         }
       },
       {
         "defaultMessage": "!!!Could not load your workspaces",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 26
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspacesRequestFailed",
         "start": {
           "column": 27,
-          "line": 22
+          "line": 23
         }
       },
       {
         "defaultMessage": "!!!Try again",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 30
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.tryReloadWorkspaces",
         "start": {
           "column": 23,
-          "line": 26
+          "line": 27
+        }
+      },
+      {
+        "defaultMessage": "!!!Your changes have been saved",
+        "end": {
+          "column": 3,
+          "line": 34
+        },
+        "file": "src/features/workspaces/components/WorkspacesDashboard.js",
+        "id": "settings.workspaces.updatedInfo",
+        "start": {
+          "column": 15,
+          "line": 31
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 2b4e79621..ad179bc1d 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -252,6 +252,7 @@
   "settings.workspaces.headline": "Your workspaces",
   "settings.workspaces.noWorkspacesAdded": "You haven't added any workspaces yet.",
   "settings.workspaces.tryReloadWorkspaces": "Try again",
+  "settings.workspaces.updatedInfo": "!!!Your changes have been saved",
   "settings.workspaces.workspacesRequestFailed": "Could not load your workspaces",
   "sidebar.addNewService": "Add new service",
   "sidebar.closeWorkspaceDrawer": "Close workspace drawer",
@@ -307,4 +308,4 @@
   "workspaceDrawer.headline": "Workspaces",
   "workspaceDrawer.item.noServicesAddedYet": "No services added yet",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
+}
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json b/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
index f875ace8a..d68899d9b 100644
--- a/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 14,
+      "line": 15,
       "column": 12
     },
     "end": {
-      "line": 17,
+      "line": 18,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!You haven't added any workspaces yet.",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 18,
+      "line": 19,
       "column": 19
     },
     "end": {
-      "line": 21,
+      "line": 22,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Could not load your workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 22,
+      "line": 23,
       "column": 27
     },
     "end": {
-      "line": 25,
+      "line": 26,
       "column": 3
     }
   },
@@ -43,11 +43,24 @@
     "defaultMessage": "!!!Try again",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 26,
+      "line": 27,
       "column": 23
     },
     "end": {
-      "line": 29,
+      "line": 30,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.workspaces.updatedInfo",
+    "defaultMessage": "!!!Your changes have been saved",
+    "file": "src/features/workspaces/components/WorkspacesDashboard.js",
+    "start": {
+      "line": 31,
+      "column": 15
+    },
+    "end": {
+      "line": 34,
       "column": 3
     }
   }
diff --git a/src/stores/lib/Request.js b/src/stores/lib/Request.js
index 1fb67cc15..486de8a49 100644
--- a/src/stores/lib/Request.js
+++ b/src/stores/lib/Request.js
@@ -109,7 +109,7 @@ export default class Request {
     Request._hooks.forEach(hook => hook(this));
   }
 
-  reset() {
+  reset = () => {
     this.result = null;
     this.isExecuting = false;
     this.isError = false;
@@ -118,5 +118,5 @@ export default class Request {
     this._promise = Promise;
 
     return this;
-  }
+  };
 }
-- 
cgit v1.2.3-70-g09d2