Merge pull request #87 from hotosm/fix/create-project-issues

Fix Create Project Issues

src/frontend/package.json

@@ -2,6 +2,7 @@
   "dependencies": {
     "@mapbox/mapbox-gl-draw": "^1.4.2",
     "@mapbox/mapbox-gl-draw-static-mode": "^1.0.1",
+    "mapbox-gl-draw-cut-line-mode": "^1.2.0",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",

src/frontend/src/App.tsx

@@ -47,7 +47,12 @@ export default function App() {
   };
 
   // add routes where you dont want navigation bar
-  const routesWithoutNavbar = ['/', '/login', '/forgot-password'];
+  const routesWithoutNavbar = [
+    '/',
+    '/login',
+    '/forgot-password',
+    '/user-profile',
+  ];
 
   return (
     <>

src/frontend/src/components/CreateProject/CreateProjectHeader/index.tsx

@@ -1,12 +1,16 @@
-import { useNavigate } from 'react-router-dom';
+import { useTypedDispatch } from '@Store/hooks';
 import { FlexRow } from '@Components/common/Layouts';
 import Icon from '@Components/common/Icon';
+import { toggleModal } from '@Store/actions/common';
 
 export default function CreateProjectHeader() {
-  const navigate = useNavigate();
+  const dispatch = useTypedDispatch();
   return (
     <FlexRow className="naxatw-items-center">
-      <Icon name="west" onClick={() => navigate('/projects')} />
+      <Icon
+        name="west"
+        onClick={() => dispatch(toggleModal('quit-create-project'))}
+      />
       <h5 className="naxatw-ml-4 naxatw-font-bold">Project /</h5>
       <span className="naxatw-text-body-lg">&nbsp;Add Project</span>
     </FlexRow>

src/frontend/src/components/CreateProject/CreateprojectLayout/index.tsx

@@ -164,7 +164,7 @@ export default function CreateprojectLayout() {
   };
 
   return (
-    <section className="project-form-layout">
+    <section className="project-form-layout naxatw-bg-[#FAFAFA]">
       <div className="naxatw-grid naxatw-grid-cols-4 naxatw-gap-5">
         {/* description */}
         <div className="description naxatw-col-span-1 naxatw-h-[32.625rem] naxatw-animate-fade-up naxatw-bg-white">

src/frontend/src/components/CreateProject/ExitCreateProjectModal/index.tsx

@@ -0,0 +1,37 @@
+import { useTypedDispatch } from '@Store/hooks';
+import { useNavigate } from 'react-router-dom';
+import { FlexRow } from '@Components/common/Layouts';
+import { Button } from '@Components/RadixComponents/Button';
+import { toggleModal } from '@Store/actions/common';
+
+export default function ExitCreateProjectModal() {
+  const dispatch = useTypedDispatch();
+  const navigate = useNavigate();
+
+  return (
+    <section>
+      <p className="naxatw-mb-3">
+        This page has some unsaved changes, are you sure you want to leave this
+        page?
+      </p>
+      <FlexRow className="naxatw-w-full" gap={2}>
+        <Button
+          variant="ghost"
+          className="naxatw-text-red"
+          onClick={() => {
+            navigate('/projects');
+            dispatch(toggleModal(null));
+          }}
+        >
+          Leave
+        </Button>
+        <Button
+          className="naxatw-bg-red naxatw-px-5"
+          onClick={() => dispatch(toggleModal(null))}
+        >
+          Stay
+        </Button>
+      </FlexRow>
+    </section>
+  );
+}

src/frontend/src/components/CreateProject/FormContents/Contributions/index.tsx

@@ -1,29 +1,29 @@
-import { useTypedDispatch, useTypedSelector } from '@Store/hooks';
+// import { useTypedDispatch, useTypedSelector } from '@Store/hooks';
 import { FlexColumn } from '@Components/common/Layouts';
 import { FormControl, Label, Input } from '@Components/common/FormUI';
-import RadioButton from '@Components/common/RadioButton';
+// import RadioButton from '@Components/common/RadioButton';
 import ErrorMessage from '@Components/common/ErrorMessage';
 import { UseFormPropsType } from '@Components/common/FormUI/types';
-import { setCreateProjectState } from '@Store/actions/createproject';
-import { contributionsOptions } from '@Constants/createProject';
+// import { setCreateProjectState } from '@Store/actions/createproject';
+// import { contributionsOptions } from '@Constants/createProject';
 
 export default function Conditions({
   formProps,
 }: {
   formProps: UseFormPropsType;
 }) {
-  const dispatch = useTypedDispatch();
+  // const dispatch = useTypedDispatch();
 
   const { register, errors } = formProps;
 
-  const contributionsOption = useTypedSelector(
-    state => state.createproject.contributionsOption,
-  );
+  // const contributionsOption = useTypedSelector(
+  //   state => state.createproject.contributionsOption,
+  // );
 
   return (
     <FlexColumn gap={5} className="naxatw-px-10 naxatw-py-5">
       <FormControl>
-        <Label>Instructions for Drone Operators</Label>
+        <Label required>Instructions for Drone Operators</Label>
         <Input
           placeholder="Enter Instructions for Drone Operators"
           {...register('per_task_instructions', {
@@ -34,18 +34,19 @@ export default function Conditions({
           message={errors?.per_task_instructions?.message as string}
         />
       </FormControl>
-      <RadioButton
+      {/* <RadioButton
+        required
         topic="Publish"
         options={contributionsOptions}
         direction="column"
         onChangeData={val => {
           dispatch(setCreateProjectState({ contributionsOption: val }));
         }}
         value={contributionsOption}
-      />
+      /> */}
       <FormControl className="naxatw-gap-1">
         <div className="naxatw-w-full">
-          <Label>Deadline for Submission</Label>
+          <Label required>Deadline for Submission</Label>
           <Input
             placeholder="Deadline for Submission"
             type="date"

src/frontend/src/components/CreateProject/FormContents/DefineAOI/MapSection/index.tsx

@@ -1,5 +1,6 @@
+/* eslint-disable no-unused-vars */
 import { useEffect } from 'react';
-import { useTypedSelector } from '@Store/hooks';
+import { useTypedSelector, useTypedDispatch } from '@Store/hooks';
 import { useMapLibreGLMap } from '@Components/common/MapLibreComponents';
 import BaseLayerSwitcher from '@Components/common/MapLibreComponents/BaseLayerSwitcher';
 import MapContainer from '@Components/common/MapLibreComponents/MapContainer';
@@ -8,8 +9,17 @@ import { GeojsonType } from '@Components/common/MapLibreComponents/types';
 import { LngLatBoundsLike, Map } from 'maplibre-gl';
 import { FeatureCollection } from 'geojson';
 import getBbox from '@turf/bbox';
+import useDrawTool from '@Components/common/MapLibreComponents/useDrawTool';
+import { drawStyles } from '@Constants/map';
+import { setCreateProjectState } from '@Store/actions/createproject';
+
+export default function MapSection({
+  onResetButtonClick,
+}: {
+  onResetButtonClick: (reset: any) => void;
+}) {
+  const dispatch = useTypedDispatch();
 
-export default function MapSection() {
   const { map, isMapLoaded } = useMapLibreGLMap({
     mapOptions: {
       zoom: 5,
@@ -19,18 +29,42 @@ export default function MapSection() {
     disableRotation: true,
   });
 
-  const uploadedProjectArea = useTypedSelector(
-    state => state.createproject.uploadedProjectArea,
+  const drawProjectAreaEnable = useTypedSelector(
+    state => state.createproject.drawProjectAreaEnable,
+  );
+  const drawNoFlyZoneEnable = useTypedSelector(
+    state => state.createproject.drawNoFlyZoneEnable,
   );
-  const uploadedNoFlyZone = useTypedSelector(
-    state => state.createproject.uploadedNoFlyZone,
+
+  const handleDrawEnd = (geojson: GeojsonType | null) => {
+    if (drawProjectAreaEnable) {
+      dispatch(setCreateProjectState({ drawnProjectArea: geojson }));
+    }
+    dispatch(setCreateProjectState({ drawnNoFlyZone: geojson }));
+  };
+
+  const { resetDraw } = useDrawTool({
+    map,
+    enable: drawProjectAreaEnable || drawNoFlyZoneEnable,
+    drawMode: 'draw_polygon',
+    styles: drawStyles,
+    onDrawEnd: handleDrawEnd,
+  });
+
+  useEffect(() => {
+    onResetButtonClick(resetDraw);
+  }, [onResetButtonClick, resetDraw]);
+
+  const projectArea = useTypedSelector(
+    state => state.createproject.projectArea,
   );
+  const noFlyZone = useTypedSelector(state => state.createproject.noFlyZone);
 
   useEffect(() => {
-    if (!uploadedProjectArea) return;
-    const bbox = getBbox(uploadedProjectArea as FeatureCollection);
+    if (!projectArea) return;
+    const bbox = getBbox(projectArea as FeatureCollection);
     map?.fitBounds(bbox as LngLatBoundsLike, { padding: 25 });
-  }, [map, uploadedProjectArea]);
+  }, [map, projectArea]);
 
   return (
     <MapContainer
@@ -45,8 +79,8 @@ export default function MapSection() {
         map={map as Map}
         isMapLoaded={isMapLoaded}
         id="uploaded-project-area"
-        geojson={uploadedProjectArea as GeojsonType}
-        visibleOnMap={!!uploadedProjectArea}
+        geojson={projectArea as GeojsonType}
+        visibleOnMap={!!projectArea}
         layerOptions={{
           type: 'fill',
           paint: {
@@ -60,8 +94,8 @@ export default function MapSection() {
         map={map as Map}
         isMapLoaded={isMapLoaded}
         id="uploaded-no-fly-zone"
-        geojson={uploadedNoFlyZone as GeojsonType}
-        visibleOnMap={!!uploadedNoFlyZone}
+        geojson={noFlyZone as GeojsonType}
+        visibleOnMap={!!noFlyZone}
         layerOptions={{
           type: 'fill',
           paint: {