fix (createNewProject): uploadArea - validation added to upload file,… (

#987) * fix (createNewProject): uploadArea - validation added to upload file, where error shown if projection is not WGS84 * feat (utilityFunction): checkWGS84Projection - function that checks if uploaded file is in WGS84 projection * fix (createNewProject): uploadArea - checking WGS84 projection function seperated to utilsFunction, code refactor
hotosm · Nov 21, 2023 · 3d0589b · 3d0589b
1 parent 7856df2
commit 3d0589b
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 7 deletions.
diff --git a/src/frontend/src/components/createnewproject/UploadArea.tsx b/src/frontend/src/components/createnewproject/UploadArea.tsx
@@ -12,6 +12,7 @@ import { useAppSelector } from '../../types/reduxTypes';
 import UploadAreaValidation from './validation/UploadAreaValidation';
 import FileInputComponent from '../common/FileInputComponent';
 import NewDefineAreaMap from '../../views/NewDefineAreaMap';
+import { checkWGS84Projection } from '../../utilfunctions/checkWGS84Projection.js';
 // @ts-ignore
 const DefineAreaMap = React.lazy(() => import('../../views/DefineAreaMap'));
 
@@ -34,6 +35,7 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   // const [uploadAreaFile, setUploadAreaFile] = useState(null);
+  const [isGeojsonWGS84, setIsGeojsonWG84] = useState(true);
 
   const projectDetails: any = useAppSelector((state) => state.createproject.projectDetails);
   const drawnGeojson = useAppSelector((state) => state.createproject.drawnGeojson);
@@ -65,11 +67,6 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile }) => {
   //   }
   // };
 
-  // useEffect(() => {
-  //   setGeojsonFile(null);
-  //   dispatch(CreateProjectActions.SetDrawnGeojson(null));
-  //   dispatch(CreateProjectActions.SetTotalAreaSelection(null));
-  // }, [uploadAreaSelection]);
   const convertFileToGeojson = async (file) => {
     if (!file) return;
     const fileReader = new FileReader();
@@ -101,6 +98,33 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile }) => {
     dispatch(CreateProjectActions.SetTotalAreaSelection(null));
   };
 
+  useEffect(() => {
+    const isWGS84 = () => {
+      if (uploadAreaSelection === 'upload_file') {
+        const isWGS84Projection = checkWGS84Projection(drawnGeojson);
+        setIsGeojsonWG84(isWGS84Projection);
+        return isWGS84Projection;
+      }
+      setIsGeojsonWG84(true);
+      return true;
+    };
+    if (!isWGS84() && drawnGeojson) {
+      showSpatialError();
+    }
+    return () => {};
+  }, [drawnGeojson]);
+
+  const showSpatialError = () => {
+    dispatch(
+      CommonActions.SetSnackBar({
+        open: true,
+        message: 'Invalid spatial reference system. Please only import WGS84 (EPSG: 4326).',
+        variant: 'error',
+        duration: 6000,
+      }),
+    );
+  };
+
   const resetFile = () => {
     setGeojsonFile(null);
     handleCustomChange('uploadedAreaFile', null);
@@ -122,11 +146,17 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile }) => {
           <span>The total area of the AOI is also calculated and displayed on the screen.</span>
         </p>
       </div>
-
       <div className="lg:fmtm-w-[80%] xl:fmtm-w-[83%] lg:fmtm-h-[60vh] xl:fmtm-h-[58vh] fmtm-bg-white fmtm-px-5 lg:fmtm-px-11 fmtm-py-6 lg:fmtm-overflow-y-scroll lg:scrollbar">
         <div className="fmtm-w-full fmtm-flex fmtm-gap-6 md:fmtm-gap-14 fmtm-flex-col md:fmtm-flex-row fmtm-h-full">
           <form
-            onSubmit={handleSubmit}
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (!isGeojsonWGS84 && drawnGeojson) {
+                showSpatialError();
+              } else {
+                handleSubmit(e);
+              }
+            }}
             className="fmtm-flex fmtm-flex-col fmtm-gap-6 lg:fmtm-w-[40%] fmtm-justify-between"
           >
             <div>

diff --git a/src/frontend/src/utilfunctions/checkWGS84Projection.js b/src/frontend/src/utilfunctions/checkWGS84Projection.js
@@ -0,0 +1,28 @@
+function checkWGS84Projection(geojson) {
+  try {
+    for (const feature of geojson.features) {
+      const coordinates = feature.geometry.coordinates;
+      for (const coord of coordinates[0]) {
+        const [longitude, latitude] = coord;
+        if (
+          isNaN(latitude) ||
+          isNaN(longitude) ||
+          latitude < -90 ||
+          latitude > 90 ||
+          longitude < -180 ||
+          longitude > 180
+        ) {
+          //   setIsGeojsonWG84(false);
+          return false; // Coordinates are out of WGS 84 range
+        }
+      }
+    }
+    // setIsGeojsonWG84(true);
+    return true; // All coordinates are within WGS 84 range
+  } catch (error) {
+    // setIsGeojsonWG84(false);
+    return false;
+  }
+}
+
+export { checkWGS84Projection };