feat: add toasts, handle save loading state

app/components/SaveForm.tsx

@@ -7,6 +7,7 @@ import { ApiAction } from '../store/api'
 interface SaveFormProps {
   title: string
   message: string
+  isLoading: boolean
   saveWorkingDataset: () => Promise<ApiAction>
   setSaveValue: (name: string, value: string) => Action
 }
@@ -29,7 +30,7 @@ export default class SaveForm extends React.Component<SaveFormProps> {
   }
 
   render () {
-    const { title, message } = this.props
+    const { title, message, isLoading } = this.props
     const valid = title.length > 3
     return (
       <form id='save-form' onSubmit={this.handleSubmit}>
@@ -51,7 +52,11 @@ export default class SaveForm extends React.Component<SaveFormProps> {
           />
         </div>
         <div className='submit'>
-          <input className={classNames('submit', { 'disabled': !valid })} type="submit" value="Submit" />
+          {
+            isLoading
+              ? <div className='spinner'><span className='icon-inline'>crosshair</span> Saving...</div>
+              : <input className={classNames('submit', { 'disabled': !valid })} type="submit" value="Submit" />
+          }
         </div>
       </form>
     )

app/components/Toast.tsx

@@ -20,7 +20,9 @@ const Toast: React.FunctionComponent<ToastProps> = (props: ToastProps) => {
     : <span className='icon-inline'>warning</span>
 
   React.useEffect(() => {
-    // set timeout
+    // set timeout for the toast
+    // TODO(chriswhong): handle cancelling the timeout so it will behave if
+    // you fire multiple toasts in succession
     if (isVisible === true) {
       setTimeout(onClose, timeout)
     }

app/containers/SaveFormContainer.tsx

@@ -5,10 +5,13 @@ import { setSaveValue } from '../actions/mutations'
 import Store from '../models/store'
 
 const mapStateToProps = (state: Store) => {
-  const { title, message } = state.mutations.save.value
+  const { save } = state.mutations
+  const { isLoading } = save
+  const { title, message } = save.value
   return {
     title,
-    message
+    message,
+    isLoading
   }
 }
 

app/reducers/mutations.ts

@@ -15,7 +15,7 @@ const initialState: Mutations = {
 
 export const MUTATIONS_SET_SAVE_VALUE = 'MUTATIONS_SET_SAVE_VALUE'
 
-const [SAVE_REQ, SAVE_SUCC, SAVE_FAIL] = apiActionTypes('save')
+export const [SAVE_REQ, SAVE_SUCC, SAVE_FAIL] = apiActionTypes('save')
 
 const mutationsReducer: Reducer = (state = initialState, action: AnyAction): Mutations => {
   switch (action.type) {

app/reducers/ui.ts

@@ -1,5 +1,6 @@
 import { AnyAction } from 'redux'
 import store from '../utils/localStore'
+import { SAVE_SUCC, SAVE_FAIL } from '../reducers/mutations'
 
 export const UI_TOGGLE_DATASET_LIST = 'UI_TOGGLE_DATASET_LIST'
 export const UI_SET_SIDEBAR_WIDTH = 'UI_SET_SIDEBAR_WIDTH'
@@ -80,12 +81,31 @@ export default (state = initialState, action: AnyAction) => {
       return {
         ...state,
         toast: {
-          type: 'success',
-          message: '',
+          ...state.toast,
           visible: false
         }
       }
 
+    // listen for SAVE_SUCC and SAVE_FAIL to set the toast
+    case SAVE_SUCC:
+      return {
+        ...state,
+        toast: {
+          type: 'success',
+          message: 'Commit Successful!',
+          visible: true
+        }
+      }
+
+    case SAVE_FAIL:
+      return {
+        ...state,
+        toast: {
+          type: 'error',
+          message: 'Oops, something went wrong with this commit',
+          visible: true
+        }
+      }
     default:
       return state
   }

app/scss/_saveform.scss

@@ -27,6 +27,35 @@ $sidebar-item-padding:  6px 10px;
     padding: $sidebar-item-padding;
   }
 
+  .spinner {
+    border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
+    border-style: solid;
+    border-width: 1px;
+    text-align: center;
+    height: 33px;
+    padding: $sidebar-item-padding;
+
+    span {
+      height: 18px;
+      position: relative;
+      top: 3px;
+      animation-name: spin;
+      animation-duration: 1000ms;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+    }
+  }
+
+  @keyframes spin {
+      from {
+          transform:rotate(0deg);
+      }
+      to {
+          transform:rotate(360deg);
+      }
+  }
+
+
   .submit {
     padding: $sidebar-item-padding;