fix: file validity check on fileUpload only once (#1262)

hotosm · Feb 23, 2024 · a370631 · a370631
1 parent cfdc030
commit a370631
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 12 deletions.
diff --git a/src/frontend/src/api/CreateProjectService.ts b/src/frontend/src/api/CreateProjectService.ts
@@ -130,7 +130,6 @@ const UploadTaskAreasService: Function = (url: string, filePayload: any, project
         await dispatch(CreateProjectActions.UploadAreaLoading(false));
         await dispatch(CreateProjectActions.PostUploadAreaSuccess(postNewProjectDetails.data));
       } catch (error: any) {
-        console.log(error, 'error');
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
@@ -173,7 +172,6 @@ const GenerateProjectQRService: Function = (url: string, projectData: any, formU
         dispatch(CommonActions.SetLoading(false));
         await dispatch(CreateProjectActions.GenerateProjectQRSuccess(resp));
       } catch (error: any) {
-        console.log(error);
         dispatch(CommonActions.SetLoading(false));
         dispatch(
           CommonActions.SetSnackBar({
@@ -459,6 +457,7 @@ const ValidateCustomForm: Function = (url: string, formUpload: any) => {
             duration: 2000,
           }),
         );
+        dispatch(CreateProjectActions.SetCustomFileValidity(true));
       } catch (error) {
         dispatch(
           CommonActions.SetSnackBar({
@@ -471,6 +470,7 @@ const ValidateCustomForm: Function = (url: string, formUpload: any) => {
           }),
         );
         dispatch(CreateProjectActions.ValidateCustomFormLoading(false));
+        dispatch(CreateProjectActions.SetCustomFileValidity(false));
       } finally {
         dispatch(CreateProjectActions.ValidateCustomFormLoading(false));
       }
@@ -508,8 +508,6 @@ const DeleteProjectService: Function = (url: string) => {
             }),
           );
         } else {
-          console.log(error);
-          console.log('Project deletion failed.');
         }
       }
     };

diff --git a/src/frontend/src/components/createnewproject/SelectForm.tsx b/src/frontend/src/components/createnewproject/SelectForm.tsx
@@ -25,9 +25,21 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
   const projectDetails: any = useAppSelector((state) => state.createproject.projectDetails);
   const drawnGeojson = useAppSelector((state) => state.createproject.drawnGeojson);
   const dataExtractGeojson = useAppSelector((state) => state.createproject.dataExtractGeojson);
+  const customFileValidity = useAppSelector((state) => state.createproject.customFileValidity);
 
   const submission = () => {
     dispatch(CreateProjectActions.SetIndividualProjectDetailsData(formValues));
+    if (!customFileValidity && formValues.formWays === 'custom_form') {
+      dispatch(
+        CommonActions.SetSnackBar({
+          open: true,
+          message: 'Your file is invalid',
+          variant: 'error',
+          duration: 2000,
+        }),
+      );
+      return;
+    }
     dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: 4 }));
     navigate('/data-extract');
   };
@@ -46,13 +58,16 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
    * @param {Event} event - The change event object.
    */
   const changeFileHandler = (event): void => {
+    dispatch(CreateProjectActions.SetCustomFileValidity(false));
     // Get the selected files from the event target
     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);
   };
 
@@ -65,7 +80,7 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
     navigate(url);
   };
   useEffect(() => {
-    if (customFormFile) {
+    if (customFormFile && !customFileValidity) {
       dispatch(ValidateCustomForm(`${import.meta.env.VITE_API_URL}/projects/validate_form`, customFormFile));
     }
   }, [customFormFile]);
@@ -127,6 +142,7 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
                 direction="column"
                 value={formValues.formWays}
                 onChangeData={(value) => {
+                  resetFile();
                   handleCustomChange('formWays', value);
                 }}
                 errorMsg={errors.formWays}
@@ -151,13 +167,7 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
                 onClick={() => toggleStep(2, '/upload-area')}
                 className="fmtm-font-bold"
               />
-              <Button
-                btnText="NEXT"
-                btnType="primary"
-                type="submit"
-                onClick={() => console.log('submit')}
-                className="fmtm-font-bold"
-              />
+              <Button btnText="NEXT" btnType="primary" type="submit" className="fmtm-font-bold" />
             </div>
           </form>
           <div className="fmtm-w-full lg:fmtm-w-[60%] fmtm-flex fmtm-flex-col fmtm-gap-6 fmtm-bg-gray-300 fmtm-h-[60vh] lg:fmtm-h-full">

diff --git a/src/frontend/src/store/slices/CreateProjectSlice.ts b/src/frontend/src/store/slices/CreateProjectSlice.ts
@@ -50,6 +50,7 @@ export const initialState: CreateProjectStateTypes = {
   isTasksGenerated: { divide_on_square: false, task_splitting_algorithm: false },
   isFgbFetching: false,
   toggleSplittedGeojsonEdit: false,
+  customFileValidity: false,
 };
 
 const CreateProject = createSlice({
@@ -229,6 +230,9 @@ const CreateProject = createSlice({
     SetToggleSplittedGeojsonEdit(state, action) {
       state.toggleSplittedGeojsonEdit = action.payload;
     },
+    SetCustomFileValidity(state, action) {
+      state.customFileValidity = action.payload;
+    },
   },
 });
 

diff --git a/src/frontend/src/store/types/ICreateProject.ts b/src/frontend/src/store/types/ICreateProject.ts
@@ -36,6 +36,7 @@ export type CreateProjectStateTypes = {
   isTasksGenerated: {};
   isFgbFetching: boolean;
   toggleSplittedGeojsonEdit: boolean;
+  customFileValidity: boolean;
 };
 export type ValidateCustomFormResponse = {
   detail: { message: string; possible_reason: string };