optimistic project delete added

ajeetchaulagain · Jun 26, 2020 · b042b92 · b042b92
1 parent a1886b3
commit b042b92
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 7 deletions.
diff --git a/src/components/dashboard/DashboardPage.js b/src/components/dashboard/DashboardPage.js
@@ -18,6 +18,8 @@ class DashboardPage extends Component {
       name: "",
     },
 
+    activeProject: null,
+
     apiErrorMessage: "",
 
     projectInputErrors: "",
@@ -53,6 +55,10 @@ class DashboardPage extends Component {
     this.setState({ showProjectModal: false });
   };
 
+  handleDeleteProject = (project) => {
+    this.props.deleteProject(project);
+  };
+
   handleTaskInputChange = (event) => {
     const task = { ...this.state.task, title: event.target.value };
     this.setState({ task });
@@ -111,6 +117,7 @@ class DashboardPage extends Component {
         ) : (
           <div className="row">
             <ProjectSection
+              activeProject={this.props.projects.slice().reverse()[2]}
               onSubmit={this.handleProjectFormSubmit}
               projects={this.props.projects.slice().reverse()}
               onChange={this.handleProjectInputChange}
@@ -119,6 +126,7 @@ class DashboardPage extends Component {
               showModal={this.state.showProjectModal}
               onAddButtonClick={this.handleAddProject}
               onHide={this.handleHideModal}
+              onDelete={this.handleDeleteProject}
             />
             <TaskSection
               onSubmit={this.handleTaskFormSubmit}
@@ -143,6 +151,7 @@ DashboardPage.propTypes = {
   isFetching: PropTypes.bool.isRequired,
   saveProject: PropTypes.func.isRequired,
   projectInputErrors: PropTypes.string,
+  deleteProject: PropTypes.func.isRequired,
 };
 
 // Mapping State to Props
@@ -161,6 +170,7 @@ const mapDispatchToProps = {
   loadProjects: projectActions.loadProjects,
   createProject: projectActions.createProject,
   saveProject: projectActions.saveProject,
+  deleteProject: projectActions.deleteProject,
 };
 
 // const mapDispatchToProps = (dispatch) => {

diff --git a/src/components/dashboard/ProjectSection.js b/src/components/dashboard/ProjectSection.js
@@ -54,19 +54,26 @@ const ProjectSection = (props) => {
         </li>
 
         {props.projects &&
-          props.projects.map((project, i = 0) => (
+          props.projects.map((project) => (
             <a
-              className="list-group-item list-group-item-action d-flex justify-content-between shadow-none"
+              className={
+                project === props.activeProject
+                  ? "list-group-item list-group-item-action d-flex justify-content-between shadow-none active bg-info"
+                  : "list-group-item list-group-item-action d-flex justify-content-between shadow-none"
+              }
               style={{ fontSize: "15px" }}
-              key={i}
+              key={project._id}
             >
               {project.name}
 
               <div
                 className="d-flex ml-1"
                 style={{ fontSize: "16px", height: "auto" }}
               >
-                <button className="btn btn-sm shadow-none">
+                <button
+                  className="btn btn-sm shadow-none"
+                  onClick={() => props.onDelete(project)}
+                >
                   <FaTrashAlt />
                 </button>
                 <button
@@ -93,6 +100,8 @@ ProjectSection.propTypes = {
   errors: PropTypes.string,
   showModal: PropTypes.bool.isRequired,
   onHide: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  activeProject: PropTypes.obj,
 };
 
 export default ProjectSection;
diff --git a/src/store/actions/actionTypes.js b/src/store/actions/actionTypes.js
@@ -15,3 +15,7 @@ export const CLEAR_API_ERRORS = "CLEAR_API_ERRORS";
 export const SAVE_PROJECT = "SAVE_PROJECT";
 export const SAVE_PROJECT_SUCCESS = "SAVE_PROJECT_SUCCESS";
 export const SAVE_PROJECT_FAILURE = "SAVE_PROJECT_FAILURE";
+
+export const DELETE_PROJECT = "DELETE_PROJECT";
+export const DELETE_PROJECT_SUCCESS = "DELETE_PROJECT_SUCCESS";
+export const DELETE_PROJECT_FAILURE = "DELETE_PROJECT_FAILURE";
diff --git a/src/store/actions/apiActions.js b/src/store/actions/apiActions.js
@@ -7,6 +7,7 @@ export const apiAction = ({
   onSuccess = "",
   onError = "",
   onStart = "",
+  optimisticRevertValue = "",
 }) => ({
   type: types.API_CALL_START,
   payload: {
@@ -16,5 +17,6 @@ export const apiAction = ({
     onSuccess,
     onError,
     onStart,
+    optimisticRevertValue,
   },
 });
diff --git a/src/store/actions/projectActions.js b/src/store/actions/projectActions.js
@@ -31,6 +31,22 @@ export const saveProject = (project) => {
   };
 };
 
+export const deleteProject = (project) => {
+  return (dispatch) => {
+    dispatch({ type: types.DELETE_PROJECT, payload: project });
+    dispatch(
+      apiAction({
+        url: `/projects/${project._id}`,
+        method: "DELETE",
+        onSuccess: types.DELETE_PROJECT_SUCCESS,
+        onError: types.DELETE_PROJECT_FAILURE,
+        optimistic: true,
+        optimisticRevertValue: project,
+      })
+    );
+  };
+};
+
 export const createProject = (project) => {
   return { type: types.CREATE_PROJECT, project };
 };
diff --git a/src/store/middleware/apiMiddleware.js b/src/store/middleware/apiMiddleware.js
@@ -8,12 +8,22 @@ const api = ({ dispatch }) => (next) => async (action) => {
 
   next(action);
 
-  const { url, method, onSuccess, onError, onStart, data } = action.payload;
+  const {
+    url,
+    method,
+    onSuccess,
+    onError,
+    onStart,
+    data,
+    optimisticRevertValue,
+  } = action.payload;
 
   if (onStart) dispatch({ type: onStart });
 
   axios.defaults.headers.common["x-auth-token"] = localStorage.getItem("token");
 
+  console.log("url---", url);
+
   try {
     const response = await axios.request({
       baseURL: API_URL,
@@ -37,7 +47,10 @@ const api = ({ dispatch }) => (next) => async (action) => {
           message: "Oops Unexpected Error Occurred",
         },
       });
-      dispatch({ type: onError });
+      dispatch({
+        type: onError,
+        payload: optimisticRevertValue ? optimisticRevertValue : null,
+      });
     } else if (expectedError) {
       console.log("Expected Error");
       dispatch({
@@ -47,7 +60,10 @@ const api = ({ dispatch }) => (next) => async (action) => {
           message: error.response.data,
         },
       });
-      dispatch({ type: onError });
+      dispatch({
+        type: onError,
+        payload: optimisticRevertValue ? optimisticRevertValue : null,
+      });
     }
   }
 };

diff --git a/src/store/reducers/projectReducer.js b/src/store/reducers/projectReducer.js
@@ -46,6 +46,21 @@ const projectReducer = (
         ...state,
       };
 
+    case types.DELETE_PROJECT:
+      return {
+        ...state,
+        list: state.list.filter(
+          (project) => project._id !== action.payload._id
+        ),
+      };
+
+    // I have done optimistic delete, so need to rever state on failure
+    case types.DELETE_PROJECT_FAILURE:
+      return {
+        ...state,
+        list: [...state.list, { ...action.payload }],
+      };
+
     default:
       return state;
   }