added loading state to story when updated

Codeminer42 · Feb 11, 2019 · a429f82 · a429f82
1 parent 08e4234
commit a429f82
Show file tree

Hide file tree

Showing 15 changed files with 218 additions and 22 deletions.
diff --git a/app/assets/javascripts/actions/actionTypes.js b/app/assets/javascripts/actions/actionTypes.js
@@ -12,6 +12,7 @@ export default keyMirror({
   EDIT_STORY: null,
   UPDATE_STORY: null,
   UPDATE_STORY_SUCCESS: null,
+  SET_LOADING_STORY: null,
   ADD_TASK: null,
   REMOVE_TASK: null,
   TOGGLE_TASK: null,

diff --git a/app/assets/javascripts/actions/note.js b/app/assets/javascripts/actions/note.js
@@ -1,4 +1,5 @@
 import actionTypes from './actionTypes';
+import { setLoadingStory } from './story';
 
 export const deleteNoteSuccess = (storyId, noteId) => ({
   type: actionTypes.DELETE_NOTE,
@@ -13,11 +14,17 @@ export const createNoteSuccess = (storyId, note) => ({
 });
 
 export const deleteNote = (projectId, storyId, noteId) =>
-  (dispatch, getState, { Note }) =>
-    Note.destroy(projectId, storyId, noteId)
-      .then(() => dispatch(deleteNoteSuccess(storyId, noteId)));
+  (dispatch, getState, { Note }) => {
+    dispatch(setLoadingStory(storyId));
+    return Note.destroy(projectId, storyId, noteId)
+      .then(() => dispatch(deleteNoteSuccess(storyId, noteId)))
+      .catch(() => dispatch(setLoadingStory(storyId)))
+    }
 
 export const createNote = (projectId, storyId, note) =>
-  (dispatch, getState, { Note }) =>
-    Note.post(projectId, storyId, note)
-      .then((note) => dispatch(createNoteSuccess(storyId, note)));
+  (dispatch, getState, { Note }) => {
+  dispatch(setLoadingStory(storyId));
+  return Note.post(projectId, storyId, note)
+      .then((note) => dispatch(createNoteSuccess(storyId, note)))
+      .catch(() => dispatch(setLoadingStory(storyId)))
+  }
diff --git a/app/assets/javascripts/actions/story.js b/app/assets/javascripts/actions/story.js
@@ -26,24 +26,32 @@ export const editStory = (id, newAttributes) => ({
   newAttributes
 });
 
+export const setLoadingStory = (id) => ({
+  type: actionTypes.SET_LOADING_STORY,
+  id
+});
+
 export const updateStory = (story, projectId) =>
   (dispatch, getState, { Story }) => {
     if (story._editing._isDirty) {
+      dispatch(setLoadingStory(story.id))
       return Story.update(story._editing, projectId)
         .then((story) => {
-          dispatch(updateStorySuccess(story));
-        });
+          dispatch(updateStorySuccess(story))
+        })
+        .catch(() => dispatch(setLoadingStory(story.id)))
     }
     return dispatch(toggleStory(story.id));
   };
 
 export const deleteStory = (storyId, projectId) =>
-  (dispatch, getState, { Story }) =>
-    Story.deleteStory(storyId, projectId)
+  (dispatch, getState, { Story }) => {
+    dispatch(setLoadingStory(storyId))
+    return Story.deleteStory(storyId, projectId)
       .then(() => dispatch(deleteStorySuccess(storyId)))
-      .catch(
-        error => {
-          // TODO: dispatch an action to notify user on error
-          alert(error.message);
-        }
-      );
+      .catch( (error) => {
+        dispatch(setLoadingStory(storyId))
+        // TODO: dispatch an action to notify user on error
+        alert(error.message);
+      });
+    }
diff --git a/app/assets/javascripts/actions/task.js b/app/assets/javascripts/actions/task.js
@@ -1,4 +1,5 @@
 import actionTypes from './actionTypes';
+import { setLoadingStory } from './story';
 
 export const createTaskSuccess = (task, storyId) => ({
   type: actionTypes.ADD_TASK,
@@ -20,19 +21,23 @@ export const toggleTaskSuccess = (task, story) => ({
 
 export const createTask = (projectId, storyId, task) => {
   return (dispatch, getState, { Task }) => {
+    dispatch((setLoadingStory(storyId)))
     return Task.post(projectId, storyId, task)
       .then(task => {
         dispatch(createTaskSuccess(task, storyId))
-      });
+      })
+      .catch(() => dispatch(setLoadingStory(storyId)))
   };
 };
 
 export const deleteTask = (projectId, storyId, taskId) => {
   return (dispatch, getState, { Task }) => {
+    dispatch(setLoadingStory(storyId))
     return Task.destroy(projectId, storyId, taskId)
       .then(() => {
         dispatch(deleteTaskSuccess(taskId, storyId))
-      });
+      })
+      .catch(() => dispatch(setLoadingStory(storyId)))
   };
 };
 

diff --git a/app/assets/javascripts/components/story/ExpandedStory/index.js b/app/assets/javascripts/components/story/ExpandedStory/index.js
@@ -35,8 +35,10 @@ export const ExpandedStory = ({
   addLabel,
   removeLabel
 }) => {
+  const loading = story._editing.loading ? "Story__enable-loading" : "";
   return (
-    <div className="Story Story--expanded">
+    <div className={`Story Story--expanded ${loading}`} >
+      <div className="Story__loading"></div>
       <ExpandedStoryControls
         onCancel={onToggle}
         onSave={() => updateStory(story, project.id)}
@@ -99,7 +101,7 @@ export const ExpandedStory = ({
 
       <ExpandedStoryTask
         story={story}
-        onToggle={ (task, status) => toggleTask(project.id, story, task, status)}
+        onToggle={(task, status) => toggleTask(project.id, story, task, status)}
         onDelete={(taskId) => deleteTask(project.id, story.id, taskId)}
         onSave={(task) => createTask(project.id, story.id, task)}
       />

diff --git a/app/assets/javascripts/models/beta/note.js b/app/assets/javascripts/models/beta/note.js
@@ -15,6 +15,10 @@ export const post = (projectId, storyId, note) =>
 export const addNote = (story, note) => (
   {
     ...story,
+    _editing: {
+      ...story._editing,
+      loading: false
+    },
     notes: [
       ...story.notes,
       note
@@ -25,6 +29,10 @@ export const addNote = (story, note) => (
 export const deleteNote = (story, noteId) => (
   {
     ...story,
+    _editing: {
+      ...story._editing,
+      loading: false
+    },
     notes: story.notes.filter(note => note.id !== noteId)
   }
 );
diff --git a/app/assets/javascripts/models/beta/story.js b/app/assets/javascripts/models/beta/story.js
@@ -92,7 +92,7 @@ export const updateStory = (story, newAttributes) => {
 };
 
 export const toggleStory = (story) => {
-  const editing = story.collapsed ? { ...story, _isDirty: false } : null;
+  const editing = story.collapsed ? { ...story, _isDirty: false, loading: false } : null;
 
   return {
     ...story,
@@ -119,6 +119,14 @@ export const editStory = (story, newAttributes) => {
   };
 };
 
+export const setLoadingStory = (story) => ({
+  ...story,
+  _editing: {
+    ...story._editing,
+    loading: !story._editing.loading
+  }
+});
+
 export const deserialize = (story) => ({
   ...story,
   labels: Label.splitLabels(story.labels),

diff --git a/app/assets/javascripts/models/beta/task.js b/app/assets/javascripts/models/beta/task.js
@@ -36,6 +36,10 @@ export const destroy = (projectId, storyId, taskId) => {
 export const addTask = (story, task) => (
   {
     ...story,
+    _editing: {
+      ...story._editing,
+      loading: false
+    },
     tasks: [
       ...story.tasks,
       task
@@ -59,5 +63,9 @@ export const toggleTask = (story, changedTask) => {
 
 export const deleteTask = (taskId, story) => ({
   ...story,
+  _editing: {
+    ...story._editing,
+    loading: false
+  },
   tasks: story.tasks.filter((task) => task.id !== taskId)
 });
diff --git a/app/assets/javascripts/reducers/stories.js b/app/assets/javascripts/reducers/stories.js
@@ -1,5 +1,5 @@
 import actionTypes from 'actions/actionTypes';
-import { toggleStory, editStory, updateStory } from 'models/beta/story'
+import { toggleStory, editStory, updateStory, setLoadingStory } from 'models/beta/story'
 import * as Note from 'models/beta/note';
 import { updateIfSameId } from '../services/updateIfSameId';
 import * as Task from 'models/beta/task';
@@ -24,6 +24,9 @@ const storiesReducer = (state = initialState, action) => {
         updateIfSameId(action.story.id, (story) => {
           return updateStory(story, action.story);
         }));
+    case actionTypes.SET_LOADING_STORY:
+      return state.map(
+        updateIfSameId(action.id, setLoadingStory));
     case actionTypes.ADD_TASK:
       return state.map(
         updateIfSameId(action.storyId, (story) => {

diff --git a/app/assets/stylesheets/new_board/_story.scss b/app/assets/stylesheets/new_board/_story.scss
@@ -196,6 +196,7 @@
       padding: 8px 10px;
       background-color: $butter-2;
       color: $aluminium-6;
+      position: relative;
 
       .Story {
         &__flex {
@@ -265,6 +266,27 @@
             @extend .btn-xs;
           }
         }
+
+        &__loading {
+          background: black;
+          height: 100%;
+          width: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 3;
+          opacity: 0.3;
+          display: none;
+        }
+      }
+    }
+    &__enable-loading {
+      cursor: wait;
+      border-top: 0;
+      border-bottom: 0;
+
+      .Story__loading {
+        display: block;
       }
     }
   }

diff --git a/spec/javascripts/actions/note_spec.js b/spec/javascripts/actions/note_spec.js
@@ -35,6 +35,21 @@ describe('Note Actions', () => {
           done();
         });
     });
+
+    it('dispatches setLoadingStory when promise fails', () => {
+      const FakeNote = {
+        post: sinon.stub().rejects()
+      };
+
+      const fakeDispatch = sinon.stub().resolves({});
+
+      Note.createNote(projectId, storyId, note)(fakeDispatch, null, { Note: FakeNote })
+        .then(() => {
+          expect(fakeDispatch).toHaveBeenCalledWith(Story.setLoadingStory(storyId));
+
+          done();
+        });
+    });
   });
 
   describe('deleteNote', () => {
@@ -71,5 +86,20 @@ describe('Note Actions', () => {
           done();
         });
     });
+
+    it('dispatches setLoadingStory when promise fails', () => {
+      const FakeNote = {
+        destroy: sinon.stub().rejects()
+      };
+
+      const fakeDispatch = sinon.stub().resolves({});
+
+      Note.deleteNote(projectId, storyId, noteId)(fakeDispatch, null, { Note: FakeNote })
+        .then(() => {
+          expect(fakeDispatch).toHaveBeenCalledWith(Story.setLoadingStory(storyId));
+
+          done();
+        });
+    });
   });
 })
diff --git a/spec/javascripts/actions/story_spec.js b/spec/javascripts/actions/story_spec.js
@@ -71,6 +71,29 @@ describe('updateStory', () => {
       done();
     });
   });
+
+  it('dispatch setLoadingStory when promise fails', (done) => {
+    const editedStory = {
+      ...story,
+      _editing: {
+        ...story,
+        loading: true,
+        _isDirty: true
+      }
+    };
+
+    const FakeStory = {
+      update: sinon.stub().rejects()
+    };
+
+    const fakeDispatch = sinon.stub().resolves({});
+
+    Story.updateStory(editedStory, projectId)(fakeDispatch, null, { Story: FakeStory }).then(() => {
+      expect(fakeDispatch).toHaveBeenCalledWith(Story.setLoadingStory(story.id));
+
+      done();
+    });
+  });
 });
 
 describe('deleteStory', () => {
@@ -104,4 +127,18 @@ describe('deleteStory', () => {
       done();
     });
   });
+
+  it('dispatches setLoadingStory when promise fails', () => {
+    const FakeStory = {
+      deleteStory: sinon.stub().rejects()
+    };
+
+    const fakeDispatch = sinon.stub().resolves({});
+
+    Story.deleteStory(storyId, projectId)(fakeDispatch, null, { Story: FakeStory }).then(() => {
+      expect(fakeDispatch).toHaveBeenCalledWith(Story.setLoadingStory(storyId));
+
+      done();
+    });
+  });
 });
diff --git a/spec/javascripts/actions/task_spec.js b/spec/javascripts/actions/task_spec.js
@@ -35,6 +35,21 @@ describe('Task Actions', () => {
           done();
         });
     });
+
+    it('dispatch setLoadingStory when promise fails', () => {
+      const FakeTask = {
+        post: sinon.stub().rejects()
+      };
+
+      const fakeDispatch = sinon.stub().resolves({});
+
+      Task.createTask(projectId, story.id, task)(fakeDispatch, null, { Task: FakeTask })
+        .then(() => {
+          expect(fakeDispatch).toHaveBeenCalledWith(Story.setLoadingStory(story.id));
+
+          done();
+        });
+    });
   });
 
   describe('deleteTask', () => {
@@ -71,6 +86,21 @@ describe('Task Actions', () => {
           done();
         });
     });
+
+    it('dispatch setLoadingStory when promise fails', () => {
+      const FakeTask = {
+        destroy: sinon.stub().rejects()
+      };
+
+      const fakeDispatch = sinon.stub().resolves({});
+
+      Task.deleteTask(projectId, story.id, task)(fakeDispatch, null, { Task: FakeTask })
+        .then(() => {
+          expect(fakeDispatch).toHaveBeenCalledWith(Story.setLoadingStory(story.id));
+
+          done();
+        });
+    });
   });
 
   describe('toggleTask', () => {