chore: empty data after create prebuild project

Author: locpnh0409

src/components/CreateProjectModal/index.tsx

@@ -65,6 +65,7 @@ const CreateProjectDatasetTypeControl = function (
     setPrebuildDataset,
     listPrebuildDataset,
     isLoadingPrebuildDataset,
+    isCreatingProject,
   } = props;
 
   const onChangeNumberOfDatasetImagesSlider = (
@@ -98,7 +99,7 @@ const CreateProjectDatasetTypeControl = function (
     <Box>
       <FormControlLabel
         value={value}
-        control={<Radio />}
+        control={<Radio disabled={isCreatingProject} />}
         label={label}
         onClick={() => setDatasetProjectType(value)}
       />
@@ -114,6 +115,7 @@ const CreateProjectDatasetTypeControl = function (
                 value={prebuildDataset}
                 disablePortal
                 loading={isLoadingPrebuildDataset}
+                disabled={isCreatingProject}
                 options={listPrebuildDataset}
                 getOptionLabel={(option) => option.name}
                 onChange={(_, selectedPrebuildDataset) => {
@@ -150,6 +152,7 @@ const CreateProjectDatasetTypeControl = function (
                   prebuildDataset?.totalImage ||
                   MIN_DATASET_IMAGES_CREATE_PROJECT
                 }
+                disabled={isCreatingProject}
               />
               <Input
                 value={numberOfDatasetImages}
@@ -164,6 +167,7 @@ const CreateProjectDatasetTypeControl = function (
                   type: "number",
                   "aria-labelledby": "input-number-of-dataset-images-slider",
                 }}
+                disabled={isCreatingProject}
               />
             </Box>
           </Box>
@@ -179,6 +183,7 @@ const CreateProjectModal = function (props: CreateProjectModalProps) {
     register,
     handleSubmit,
     formState: { errors },
+    reset,
   } = useForm<CreateProjectFields>({
     mode: "onChange",
     defaultValues: {
@@ -229,6 +234,13 @@ const CreateProjectModal = function (props: CreateProjectModalProps) {
     (state: RootState) => state.projectReducer.isCreatingProject
   );
 
+  const resetFormData = () => {
+    reset();
+    setPrebuildDataset(null);
+    setDatasetProjectType(EMPTY_DATASET_CREATE_PROJECT_DATASET_TYPE_VALUE);
+    setNumberOfDatasetImages(1);
+  };
+
   const onSubmitCreateProject = (fields: CreateProjectFields) => {
     if (
       datasetProjectType === EXISTING_DATASET_CREATE_PROJECT_DATASET_TYPE_VALUE
@@ -239,24 +251,34 @@ const CreateProjectModal = function (props: CreateProjectModalProps) {
           numberRadom: numberOfDatasetImages,
         };
       } else {
-        toast.error("Please select one prebuild dataset");
+        toast.error("Please select one prebuild dataset.");
         return;
       }
     }
 
     dispatch({ type: CREATE_PROJECT.REQUESTED, payload: fields });
+    resetFormData();
+  };
+
+  const onCloseModal = () => {
+    if (!isLoading) {
+      if (handleClose) {
+        handleClose();
+      }
+      resetFormData();
+    }
   };
 
   return (
     <Modal
       open={isOpen}
-      onClose={!isLoading ? handleClose : undefined}
+      onClose={!isLoading ? onCloseModal : undefined}
       disableEscapeKeyDown
     >
       <Box sx={{ ...modalStyle, width: 700 }}>
         <IconButton
           sx={modalCloseStyle}
-          onClick={!isLoading ? handleClose : undefined}
+          onClick={!isLoading ? onCloseModal : undefined}
         >
           <CancelIcon fontSize="large" />
         </IconButton>
@@ -343,6 +365,7 @@ const CreateProjectModal = function (props: CreateProjectModalProps) {
                             setPrebuildDataset={setPrebuildDataset}
                             listPrebuildDataset={listPrebuildDataset}
                             isLoadingPrebuildDataset={isLoadingPrebuildDataset}
+                            isCreatingProject={isLoading}
                           />
                         </Box>
                       );

src/components/CreateProjectModal/type.ts

@@ -39,6 +39,7 @@ export interface CreateProjectDatasetTypeControlProps
   setPrebuildDataset: (value: PrebuildDataset) => void;
   listPrebuildDataset: PrebuildDataset[];
   isLoadingPrebuildDataset: boolean;
+  isCreatingProject: boolean;
 }
 
 export interface CreateProjectPreBuildFields {

src/reduxes/project/reducer.tsx

@@ -371,7 +371,6 @@ const projectReducer = (
             ...(payload as CreateSampleSucceedPayload),
             groups: null,
             ls_task: [],
-            is_sample: true,
             description: "",
           },
         ],

src/reduxes/project/type.ts

@@ -58,7 +58,6 @@ export interface ProjectInfo {
   times_generated: number;
   groups: GroupProjectInfo;
   ls_task: Array<TaskInfo>;
-  is_sample: boolean;
   gen_status: GENERATE_PROJECT_STATUS_TYPE;
   aug_parameters: AugmentParameterApiField;
 }
@@ -69,7 +68,6 @@ export interface ApiListProjectsItem {
   s3_prefix: string;
   ls_task: Array<TaskInfo>;
   groups: GroupProjectInfo;
-  is_sample: boolean;
   gen_status: GENERATE_PROJECT_STATUS_TYPE;
   thum_key: string;
   description: string;
@@ -169,7 +167,6 @@ export interface CreateSampleSucceedPayload {
   project_id: string;
   project_name: string;
   s3_prefix: string;
-  is_sample: boolean;
   gen_status: GENERATE_PROJECT_STATUS_TYPE;
   thum_key: string;
 }
@@ -248,7 +245,6 @@ export interface SetIsOpenUpdateProjectInfoPayload {
 export interface ApiUpdateProjectsInfo {
   project_id: string;
   s3_prefix: string;
-  is_sample: boolean;
   gen_status: GENERATE_PROJECT_STATUS_TYPE;
   project_name: string;
   description: string;

src/routes/DashboardPage/index.tsx

@@ -42,14 +42,17 @@ const EmptyDashboardMessage = function ({
   return (
     <Box mt={projectCount <= 0 ? 12 : 4} textAlign="center">
       {projectCount <= 0 && (
-        <Typography variant="h4" component="h1">
-          👋 Welcome to DAITA, let's get started.
-        </Typography>
+        <>
+          <Typography variant="h4" component="h1">
+            👋 Welcome to DAITA, let's get started.
+          </Typography>
+
+          <Typography sx={{ mt: 2 }}>
+            👉 If you just want to play, you can create project with existing
+            dataset. You don't have to upload any data!
+          </Typography>
+        </>
       )}
-      <Typography sx={{ mt: 2 }}>
-        👉 If you just want to play, you can create project with existing
-        dataset. You don't have to upload any data!
-      </Typography>
       {/* <Typography sx={{ mt: 2 }}>
         👉 If you just want to play, you can create a sandbox project{" "}
         <Box

src/routes/ProjectDetail/index.tsx

@@ -103,7 +103,6 @@ const ProjectDetail = function () {
   useEffect(() => {
     if (
       currentProjectInfo &&
-      // currentProjectInfo.is_sample &&
       currentProjectInfo.gen_status === GENERATING_SAMPLE_PROJECT_STATUS
     ) {
       const timer = setTimeout(() => {
@@ -296,7 +295,6 @@ const ProjectDetail = function () {
   const renderProject = () => {
     if (
       currentProjectInfo &&
-      // currentProjectInfo.is_sample &&
       currentProjectInfo.gen_status === GENERATING_SAMPLE_PROJECT_STATUS
     ) {
       return (

src/sagas/projectSaga.tsx

@@ -63,7 +63,6 @@ function* handleCreateProject(action: any): any {
         s3_prefix: createProjectResponse.data.s3_prefix,
         ls_task: [],
         groups: null,
-        is_sample: createProjectResponse.data.is_sample,
         gen_status: createProjectResponse.data.gen_status,
         thum_key: "",
         description: "",
@@ -76,9 +75,7 @@ function* handleCreateProject(action: any): any {
         type: SET_IS_OPEN_CREATE_PROJECT_MODAL,
         payload: { isOpen: false },
       });
-      toast.success(
-        createProjectResponse.message || "Project successfully created."
-      );
+      toast.success("Project successfully created.");
       history.push(`/project/${encodeURIComponent(projectName)}`);
     } else {
       yield put({