fix(createProject): xlsform key update, fix customForm upload issue

hotosm · Sep 26, 2024 · 17eb1d5 · 17eb1d5
1 parent 9a89965
commit 17eb1d5
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 24 deletions.
diff --git a/src/frontend/src/api/CreateProjectService.ts b/src/frontend/src/api/CreateProjectService.ts
@@ -199,7 +199,7 @@ const GenerateProjectFilesService = (url: string, projectData: any, formUpload:
         if (projectData.form_ways === 'custom_form') {
           // TODO move form upload to a separate service / endpoint?
           const generateApiFormData = new FormData();
-          generateApiFormData.append('xls_form_upload', formUpload);
+          generateApiFormData.append('xlsform', formUpload);
           response = await axios.post(url, generateApiFormData, {
             headers: {
               'Content-Type': 'multipart/form-data',
@@ -512,17 +512,13 @@ const ValidateCustomForm = (url: string, formUpload: any) => {
         const formUploadFormData = new FormData();
         formUploadFormData.append('xlsform', formUpload);
 
-        // response is in file format so we need to convert it to blob
-        const getTaskSplittingResponse = await axios.post(url, formUploadFormData, {
-          responseType: 'blob',
-        });
+        const getTaskSplittingResponse = await axios.post(url, formUploadFormData);
         const resp = getTaskSplittingResponse.data;
-        dispatch(CreateProjectActions.SetValidatedCustomFile(new File([resp], 'form.xlsx', { type: resp.type })));
         dispatch(CreateProjectActions.ValidateCustomFormLoading(false));
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
-            message: 'Your Form is Valid',
+            message: JSON.stringify(resp.message),
             variant: 'success',
             duration: 2000,
           }),
@@ -532,7 +528,7 @@ const ValidateCustomForm = (url: string, formUpload: any) => {
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
-            message: JSON.parse(await error?.response?.data.text())?.detail || 'Something Went Wrong',
+            message: error?.response?.data?.detail || 'Something Went Wrong',
             variant: 'error',
             duration: 5000,
           }),

diff --git a/src/frontend/src/components/createnewproject/SelectForm.tsx b/src/frontend/src/components/createnewproject/SelectForm.tsx
@@ -23,7 +23,6 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
   const projectDetails = useAppSelector((state) => state.createproject.projectDetails);
   const drawnGeojson = useAppSelector((state) => state.createproject.drawnGeojson);
   const customFileValidity = useAppSelector((state) => state.createproject.customFileValidity);
-  const validatedCustomForm = useAppSelector((state) => state.createproject.validatedCustomForm);
   const validateCustomFormLoading = useAppSelector((state) => state.createproject.validateCustomFormLoading);
 
   const submission = () => {
@@ -62,12 +61,12 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
     const { files } = event.target;
     // Set the selected file as the customFormFile state
     setCustomFormFile(files[0]);
+    handleCustomChange('customFormUpload', files[0]);
   };
   const resetFile = (): void => {
     handleCustomChange('customFormUpload', null);
     dispatch(CreateProjectActions.SetCustomFileValidity(false));
     setCustomFormFile(null);
-    dispatch(CreateProjectActions.SetValidatedCustomFile(null));
   };
 
   useEffect(() => {
@@ -84,16 +83,10 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
     }
   }, [customFormFile]);
 
-  //add validated form to state
-  useEffect(() => {
-    if (!validatedCustomForm) return;
-    handleCustomChange('customFormUpload', validatedCustomForm);
-  }, [validatedCustomForm]);
-
   return (
     <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row fmtm-h-full">
       <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6 lg:fmtm-h-full lg:fmtm-overflow-y-scroll lg:scrollbar">
-        <h6 className="fmtm-text-xl fm  tm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Select Category</h6>
+        <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Select Category</h6>
         <p className="fmtm-text-gray-500 lg:fmtm-flex lg:fmtm-flex-col lg:fmtm-gap-3">
           <span>
             You may choose a pre-configured form, or upload a custom XLS form. Click{' '}

diff --git a/src/frontend/src/components/createnewproject/SplitTasks.tsx b/src/frontend/src/components/createnewproject/SplitTasks.tsx
@@ -19,7 +19,7 @@ import { task_split_type } from '@/types/enums';
 import useDocumentTitle from '@/utilfunctions/useDocumentTitle';
 import { taskSplitOptionsType } from '@/store/types/ICreateProject';
 
-const SplitTasks = ({ flag, setGeojsonFile, customDataExtractUpload, additionalFeature }) => {
+const SplitTasks = ({ flag, setGeojsonFile, customDataExtractUpload, additionalFeature, customFormFile }) => {
   useDocumentTitle('Create Project: Split Tasks');
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -131,7 +131,7 @@ const SplitTasks = ({ flag, setGeojsonFile, customDataExtractUpload, additionalF
         `${import.meta.env.VITE_API_URL}/projects/create-project?org_id=${projectDetails.organisation_id}`,
         projectData,
         taskAreaGeojsonFile,
-        projectDetails.customFormUpload,
+        customFormFile,
         customDataExtractUpload,
         projectDetails.dataExtractWays === 'osm_data_extract',
         additionalFeature,

diff --git a/src/frontend/src/store/slices/CreateProjectSlice.ts b/src/frontend/src/store/slices/CreateProjectSlice.ts
@@ -53,7 +53,6 @@ export const initialState: CreateProjectStateTypes = {
   isFgbFetching: false,
   toggleSplittedGeojsonEdit: false,
   customFileValidity: false,
-  validatedCustomForm: null,
   additionalFeatureGeojson: null,
 };
 
@@ -223,9 +222,6 @@ const CreateProject = createSlice({
     SetCustomFileValidity(state, action) {
       state.customFileValidity = action.payload;
     },
-    SetValidatedCustomFile(state, action) {
-      state.validatedCustomForm = action.payload;
-    },
     SetAdditionalFeatureGeojson(state, action) {
       state.additionalFeatureGeojson = action.payload;
     },

diff --git a/src/frontend/src/store/types/ICreateProject.ts b/src/frontend/src/store/types/ICreateProject.ts
@@ -37,7 +37,6 @@ export type CreateProjectStateTypes = {
   isFgbFetching: boolean;
   toggleSplittedGeojsonEdit: boolean;
   customFileValidity: boolean;
-  validatedCustomForm: any;
   additionalFeatureGeojson: GeoJSONFeatureTypes | null;
 };
 export type ValidateCustomFormResponse = {

diff --git a/src/frontend/src/views/CreateNewProject.tsx b/src/frontend/src/views/CreateNewProject.tsx
@@ -95,6 +95,7 @@ const CreateNewProject = () => {
             setGeojsonFile={setGeojsonFile}
             customDataExtractUpload={customDataExtractUpload}
             additionalFeature={additionalFeature}
+            customFormFile={customFormFile}
           />
         );
       default: