Merge pull request #245 from daita-technologies/update/thumbnail-for-images

update: load thumbnail instead of full image on image list at project detail

Author: Lộc Phạm

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/album/reducer.tsx

@@ -100,7 +100,10 @@ const albumReducer = (state = inititalState, action: any): AlbumReducer => {
           [payload.filename]: {
             ...state.images[payload.filename],
             blob: payload.blob,
-            url: payload.url,
+            thumbnailUrl: payload.thumbnailUrl
+              ? payload.thumbnailUrl
+              : state.images[payload.filename].thumbnailUrl,
+            url: payload.url ? payload.url : state.images[payload.filename].url,
             size: payload.size,
           },
         },

src/reduxes/album/type.ts

@@ -29,12 +29,14 @@ export type ImageSourceType =
 export interface ImageApiFields {
   filename: string;
   s3_key: string;
+  thumbnail: string;
   photoKey: string;
   typeOfImage: ImageSourceType;
   gen_id?: string[] | string;
   classtype?: string;
   blob?: Blob;
   url?: string;
+  thumbnailUrl?: string;
   size?: number;
 }
 
@@ -104,12 +106,13 @@ export interface LoadImageContentPayload {
   isFetchToDownload?: boolean;
   isSelectedDownload?: boolean;
   blob?: Blob;
+  isThumbnailImage?: boolean;
 }
 
 export interface LoadImageContentSucceedPayload {
   projectId: string;
   filename: string;
   blob: Blob;
-  url: string;
+  thumbnailUrl: string;
   size: number;
 }

src/reduxes/project/reducer.tsx

@@ -371,7 +371,6 @@ const projectReducer = (
             ...(payload as CreateSampleSucceedPayload),
             groups: null,
             ls_task: [],
-            is_sample: true,
             description: "",
           },
         ],
@@ -437,10 +436,10 @@ const projectReducer = (
     }
     case LOAD_PROJECT_THUMBNAIL_IMAGE.SUCCEEDED:
     case LOAD_PROJECT_THUMBNAIL_IMAGE.FAILED: {
-      const { projectId, thumbnailUrl } =
+      const { projectId, projectThumbnailUrl } =
         payload as LoadProjectThumbnailImageSucceedPayload;
       const newThumbnails = { ...state.thumbnails };
-      newThumbnails[projectId] = thumbnailUrl;
+      newThumbnails[projectId] = projectThumbnailUrl;
       return { ...state, thumbnails: newThumbnails };
     }
     case SET_IS_OPEN_UPDATE_PROJECT_INFO: {

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;
 }
@@ -224,7 +221,7 @@ export interface LoadProjectThumbnailImagePayload {
 }
 
 export interface LoadProjectThumbnailImageSucceedPayload {
-  thumbnailUrl: string;
+  projectThumbnailUrl: string;
   projectId: string;
 }
 export interface UpdateProjectInfo {
@@ -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