update: will not reset form data when create project failed

Author: locpnh0409

src/components/CreateProjectModal/index.tsx

@@ -42,6 +42,7 @@ import { projectApi } from "services";
 
 import { CreateProjectDatasetValueType } from "constants/type";
 
+import { selectorIsCreateProjectFailed } from "reduxes/project/selector";
 import {
   CreateProjectFields,
   CreateProjectModalProps,
@@ -253,6 +254,14 @@ const CreateProjectModal = function (props: CreateProjectModalProps) {
     setNumberOfDatasetImages(1);
   };
 
+  const isCreateProjectFailed = useSelector(selectorIsCreateProjectFailed);
+
+  useEffect(() => {
+    if (isCreateProjectFailed === false) {
+      resetFormData();
+    }
+  }, [isCreateProjectFailed]);
+
   const onSubmitCreateProject = (fields: CreateProjectFields) => {
     if (
       datasetProjectType === EXISTING_DATASET_CREATE_PROJECT_DATASET_TYPE_VALUE
@@ -269,7 +278,6 @@ const CreateProjectModal = function (props: CreateProjectModalProps) {
     }
 
     dispatch({ type: CREATE_PROJECT.REQUESTED, payload: fields });
-    resetFormData();
   };
 
   const onCloseModal = () => {

src/reduxes/project/reducer.tsx

@@ -48,6 +48,7 @@ const inititalState: ProjectReducerState = {
   isCreatingSampleProject: false,
   isOpenCreateProjectModal: false,
   isCreatingProject: false,
+  isCreateProjectFailed: null,
   isFetchingProjects: null,
   isFetchingProjectTaskList: null,
   listProjects: [],
@@ -76,18 +77,23 @@ const projectReducer = (
     case SET_IS_OPEN_CREATE_PROJECT_MODAL:
       return { ...state, isOpenCreateProjectModal: payload.isOpen };
     case CREATE_PROJECT.REQUESTED:
-      return { ...state, isCreatingProject: true };
+      return { ...state, isCreatingProject: true, isCreateProjectFailed: null };
     case CREATE_PROJECT.SUCCEEDED: {
       const newListProject: Array<any> = [...state.listProjects];
       newListProject.unshift(payload.createdProject);
       return {
         ...state,
         isCreatingProject: false,
+        isCreateProjectFailed: false,
         listProjects: newListProject,
       };
     }
     case CREATE_PROJECT.FAILED:
-      return { ...state, isCreatingProject: false };
+      return {
+        ...state,
+        isCreatingProject: false,
+        isCreateProjectFailed: true,
+      };
     case FETCH_LIST_PROJECTS.REQUESTED: {
       const { notShowLoading } = payload;
       return { ...state, isFetchingProjects: !notShowLoading };

src/reduxes/project/selector.ts

@@ -196,6 +196,9 @@ export const selectorCurrentTaskListInfo = (state: RootState) =>
 export const selectorIsCreatingSampleProject = (state: RootState) =>
   state.projectReducer.isCreatingSampleProject;
 
+export const selectorIsCreateProjectFailed = (state: RootState) =>
+  state.projectReducer.isCreateProjectFailed;
+
 export const selectorDeleteConfirmDialogInfo = (state: RootState) =>
   state.projectReducer.deleteConfirmDialogInfo;
 

src/reduxes/project/type.ts

@@ -192,6 +192,7 @@ export interface ProjectReducerState {
   isCreatingSampleProject: boolean;
   isOpenCreateProjectModal: boolean;
   isCreatingProject: boolean;
+  isCreateProjectFailed: boolean | null;
   isFetchingProjects: boolean | null;
   isFetchingDetailProject: boolean | null;
   isFetchingProjectTaskList: boolean | null;