Merge pull request #241 from daita-technologies/feat/create_project_with_existed_dataset

ttattl · web-flow · commit fe68d056867f · 2022-09-05T19:00:47.000+07:00
feat: create project with existed dataset
diff --git a/.env.example b/.env.example
@@ -15,4 +15,7 @@ REACT_APP_API_AMAZON_COGNITO=https://abc123.auth.your-region.amazoncognito.com/o
 REACT_APP_COGNITO_REDIRECT_URI=https://abc123.api.your-region.amazonaws.com/dev/auth/login_social
 REACT_APP_COGNITO_CLIENTID=your-cognito-client-id
 REACT_APP_API_LOGOUT_SOCIAL=https://auth.com/logout?client_id=123
-REACT_APP_GITHUB_IDENTITY_PROVIDER=ProviderName
+REACT_APP_GITHUB_IDENTITY_PROVIDER=ProviderName
+REACT_APP_FEEDBACK_SLACK=https://abc123.api.your-region.amazonaws.com/dev/webhook/client-feedback
+REACT_APP_PRESIGN_URL_UPLOAD_FEEDBACK_IMAGE=https://abc123.api.your-region.amazonaws.com/devdaitabeapp/feedback/presign_url_image
+REACT_APP_CREATE_PROJECT_SAMPLE=https://abc123.api.your-region.amazonaws.com
diff --git a/src/components/CreateProjectModal/index.tsx b/src/components/CreateProjectModal/index.tsx
@@ -1,23 +1,48 @@
-import { useDispatch, useSelector } from "react-redux";
+import CancelIcon from "@mui/icons-material/Cancel";
 import {
-  Modal,
-  Typography,
+  Autocomplete,
   Box,
-  TextField,
-  Input,
+  FormControlLabel,
+  FormLabel,
   IconButton,
+  Input,
+  Modal,
+  Radio,
+  RadioGroup,
+  Slider,
+  SxProps,
+  TextField,
+  Theme,
+  Typography,
 } from "@mui/material";
-import CancelIcon from "@mui/icons-material/Cancel";
+import { useForm } from "react-hook-form";
+import { useDispatch, useSelector } from "react-redux";
 import { CREATE_PROJECT } from "reduxes/project/constants";
-import { CreateProjectFields, CreateProjectModalProps } from "./type";
 import { modalCloseStyle, modalStyle } from "styles/generalStyle";
-import { useForm } from "react-hook-form";
 import { getLocalStorage } from "utils/general";
+import {
+  CreateProjectFields,
+  CreateProjectModalProps,
+  PrebuildDataset,
+} from "./type";
 
-import { ID_TOKEN_NAME, TOKEN_NAME } from "constants/defaultValues";
-import { RootState } from "reduxes";
 import { MyButton } from "components";
+import {
+  ID_TOKEN_NAME,
+  MAX_ALLOW_UPLOAD_IMAGES,
+  TOKEN_NAME,
+} from "constants/defaultValues";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { RootState } from "reduxes";
+import { projectApi } from "services";
 
+const radioCss: SxProps<Theme> = {
+  flex: 1,
+  justifyContent: "center",
+  border: "1px dashed",
+  margin: "2px",
+};
 const CreateProjectModal = function (props: CreateProjectModalProps) {
   const { isOpen, handleClose } = props;
   const dispatch = useDispatch();
@@ -32,22 +57,83 @@ const CreateProjectModal = function (props: CreateProjectModalProps) {
       idToken: getLocalStorage(ID_TOKEN_NAME) || "",
     },
   });
+  const [listPrebuildDataset, setListPrebuildDataset] = useState<
+    PrebuildDataset[]
+  >([]);
+  const [fromDatasets, setFromDatasets] = useState<"Empty" | "Existed">(
+    "Empty"
+  );
+  const [prebuildDataset, setPrebuildDataset] =
+    useState<PrebuildDataset | null>(null);
+  const [isLoadingPrebuildDataset, setIsLoadingPrebuildDataset] =
+    useState<boolean>(true);
+  const [numberOfImages, setNumberOfImages] = useState<number>(0);
+
+  useEffect(() => {
+    projectApi
+      .getListPrebuildDataset({ idToken: getLocalStorage(ID_TOKEN_NAME) || "" })
+      .then((resp: any) => {
+        if (!resp.error) {
+          console.log("resp", resp);
+          const prebuildDatasets: PrebuildDataset[] = [];
+          for (const prebuildDataset of resp.data) {
+            prebuildDatasets.push({
+              isActive: prebuildDataset.is_active,
+              s3Key: prebuildDataset.s3_key,
+              name: prebuildDataset.name,
+              totalImage: prebuildDataset.total_images,
+              visualName: prebuildDataset.visual_name,
+            });
+          }
+          console.log("prebuildDatasets", prebuildDatasets);
+          setListPrebuildDataset([...prebuildDatasets]);
+        } else {
+          toast.error(resp.message);
+        }
+        setIsLoadingPrebuildDataset(false);
+      });
+  }, []);
 
   const isLoading = useSelector(
     (state: RootState) => state.projectReducer.isCreatingProject
   );
 
   const onSubmitCreateProject = (fields: CreateProjectFields) => {
+    if (fromDatasets === "Existed") {
+      if (prebuildDataset) {
+        fields.createProjectPreBuild = {
+          nameIdPrebuild: prebuildDataset.name,
+          numberRadom: numberOfImages,
+        };
+      } else {
+        toast.error("Please select one prebuild dataset");
+        return;
+      }
+    }
+
     dispatch({ type: CREATE_PROJECT.REQUESTED, payload: fields });
   };
 
+  const handleChangeFromDatasets = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setFromDatasets(
+      (event.target as HTMLInputElement).value as "Empty" | "Existed"
+    );
+  };
+  const handleChangeNumberOfImages = (
+    _event: Event,
+    newValue: number | number[]
+  ) => {
+    setNumberOfImages(newValue as number);
+  };
   return (
     <Modal
       open={isOpen}
       onClose={!isLoading ? handleClose : undefined}
       disableEscapeKeyDown
     >
-      <Box sx={{ ...modalStyle, width: 600 }}>
+      <Box sx={{ ...modalStyle, width: 700 }}>
         <IconButton
           sx={modalCloseStyle}
           onClick={!isLoading ? handleClose : undefined}
@@ -98,6 +184,84 @@ const CreateProjectModal = function (props: CreateProjectModalProps) {
             fullWidth
             disabled={isLoading}
           />
+          <Box mt={1}>
+            <FormLabel id="demo-radio-buttons-group-label">
+              From Datasets
+            </FormLabel>
+            <RadioGroup
+              aria-labelledby="demo-radio-buttons-group-label"
+              defaultValue="female"
+              name="radio-buttons-group"
+              row
+              sx={{ justifyContent: "space-around", height: 200 }}
+              value={fromDatasets}
+              onChange={handleChangeFromDatasets}
+            >
+              <Box display="flex" sx={{ ...radioCss }}>
+                <FormControlLabel
+                  value="Empty"
+                  control={<Radio />}
+                  label="Empty"
+                  labelPlacement="start"
+                  sx={{ justifyContent: "center", margin: 0 }}
+                />
+              </Box>
+              <Box
+                display="flex"
+                sx={{ ...radioCss, alignItems: "center" }}
+                flexDirection="column"
+              >
+                <FormControlLabel
+                  value="Existed"
+                  control={<Radio />}
+                  label="Existed"
+                  labelPlacement="start"
+                  sx={{ justifyContent: "center", margin: 0 }}
+                />
+                {fromDatasets === "Existed" && (
+                  <>
+                    <Autocomplete
+                      id="prebuild-dataset"
+                      value={prebuildDataset}
+                      disablePortal
+                      loading={isLoadingPrebuildDataset}
+                      options={listPrebuildDataset}
+                      getOptionLabel={(option) => option.name}
+                      onChange={(_, value) => {
+                        if (value) {
+                          setPrebuildDataset(value);
+                          setNumberOfImages(value.totalImage);
+                        }
+                      }}
+                      renderOption={(props, option) => (
+                        <li {...props} key={option.name}>
+                          {option.name}
+                        </li>
+                      )}
+                      sx={{ width: 300 }}
+                      renderInput={(params) => (
+                        <TextField {...params} label="List prebuild dataset" />
+                      )}
+                    />
+                    <Box mt={2} width="95%">
+                      <Typography id="input-slider" gutterBottom>
+                        Number of images
+                      </Typography>
+                      <Slider
+                        size="small"
+                        value={numberOfImages}
+                        min={0}
+                        max={MAX_ALLOW_UPLOAD_IMAGES}
+                        aria-label="Small"
+                        valueLabelDisplay="auto"
+                        onChange={handleChangeNumberOfImages}
+                      />
+                    </Box>
+                  </>
+                )}
+              </Box>
+            </RadioGroup>
+          </Box>
           <Box display="flex" justifyContent="flex-end" marginTop={6}>
             <MyButton
               type="submit"
diff --git a/src/components/CreateProjectModal/type.ts b/src/components/CreateProjectModal/type.ts
@@ -8,4 +8,17 @@ export interface CreateProjectFields {
   accessToken: string;
   projectName: string;
   description: string;
+  createProjectPreBuild?: CreateProjectPreBuildFields;
+}
+
+export interface CreateProjectPreBuildFields {
+  nameIdPrebuild: string;
+  numberRadom: number;
+}
+export interface PrebuildDataset {
+  name: string;
+  s3Key: string;
+  totalImage: number;
+  visualName: string;
+  isActive: boolean;
 }
diff --git a/src/constants/defaultValues.tsx b/src/constants/defaultValues.tsx
@@ -4,6 +4,8 @@ import { TaskProcessType, TaskStatusMergedType } from "./taskType";
 
 export const authApiURL = process.env.REACT_APP_AUTH_API_URL;
 export const projectApiUrl = process.env.REACT_APP_PROJECT_API_URL;
+export const createProjectSampleApiUrl =
+  process.env.REACT_APP_CREATE_PROJECT_SAMPLE;
 export const generateApiUrl = process.env.REACT_APP_GENERATE_API_URL;
 export const downloadZipApiUrl = process.env.REACT_APP_DOWNLOAD_ZIP_API;
 export const uploadZipApiUrl = process.env.REACT_APP_UPLOAD_ZIP_API;
diff --git a/src/services/projectApi.tsx b/src/services/projectApi.tsx
@@ -7,6 +7,7 @@ import {
   uploadZipApiUrl,
   generateApiUrl,
   ID_TOKEN_NAME,
+  createProjectSampleApiUrl,
 } from "constants/defaultValues";
 import { ApiResponse } from "constants/type";
 import { FetchImagesParams, ImageSourceType } from "reduxes/album/type";
@@ -40,6 +41,11 @@ export interface CreateSampleRequestBody {
   accessToken: string;
 }
 
+export interface CreateSampleProjectFromPrebuildRequestBody {
+  idToken: string;
+  name_id_prebuild: string;
+  number_random: string;
+}
 export interface DeleteProjectRequestBody {
   idToken: string;
   projectId: string;
@@ -84,17 +90,33 @@ const projectApi = {
     accessToken,
     projectName,
     description,
-  }: CreateProjectFields) =>
-    axios.post(
-      `${projectApiUrl}/projects/create`,
-      {
-        id_token: idToken,
-        access_token: accessToken,
-        project_name: projectName,
-        project_info: description,
-      },
-      { headers: getAuthHeader() }
-    ),
+    createProjectPreBuild,
+  }: CreateProjectFields) => {
+    if (createProjectPreBuild) {
+      return axios.post(
+        `${createProjectSampleApiUrl}/projects/create_project_from_prebuild`,
+        {
+          id_token: idToken,
+          project_name: projectName,
+          project_info: description,
+          name_id_prebuild: createProjectPreBuild.nameIdPrebuild,
+          number_random: createProjectPreBuild.numberRadom,
+        },
+        { headers: getAuthHeader() }
+      );
+    } else {
+      return axios.post(
+        `${projectApiUrl}/projects/create`,
+        {
+          id_token: idToken,
+          access_token: accessToken,
+          project_name: projectName,
+          project_info: description,
+        },
+        { headers: getAuthHeader() }
+      );
+    }
+  },
   listProjects: ({ idToken }: { idToken: string }) =>
     axios.post(
       `${projectApiUrl}/projects/list_info`,
@@ -235,6 +257,10 @@ const projectApi = {
         task_id: taskId,
       },
     }),
+  getListPrebuildDataset: ({ idToken }: { idToken: string }) =>
+    axios.post(`${createProjectSampleApiUrl}/projects/list_prebuild_dataset`, {
+      id_token: idToken,
+    }),
   deleteProject: ({
     idToken,
     projectId,
diff --git a/yarn.lock b/yarn.lock
@@ -2905,9 +2905,9 @@
   integrity sha512-Q15Clj3lZSLnhVA6yKw1G7SQz46DeL9gO1TEgfK1OQGvMdQ6TUWmCeWf1QBUNkw2BDfV52i2YuYd9OF3ZwGhjw==
 
 "@types/node@^12.20.14":
-  version "12.20.46"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.46.tgz#7e49dee4c54fd19584e6a9e0da5f3dc2e9136bc7"
-  integrity sha512-cPjLXj8d6anFPzFvOPxS3fvly3Shm5nTfl6g8X5smexixbuGUf7hfr21J5tX9JW+UPStp/5P5R8qrKL5IyVJ+A==
+  version "12.20.55"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
+  integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
