From a52fd3172d862bb911db28997b5e319f3eb38784 Mon Sep 17 00:00:00 2001
From: spwoodcock <sam.woodcock@protonmail.com>
Date: Thu, 1 Feb 2024 09:11:43 +0000
Subject: [PATCH] refactor(frontend): rename form during project creation -->
 category

---
 .../OpenLayersComponent/LayerSwitcher/index.js   |  2 +-
 .../components/createnewproject/DataExtract.tsx  |  4 ++--
 .../components/createnewproject/SelectForm.tsx   |  6 +++---
 .../components/createnewproject/UploadArea.tsx   | 10 +---------
 .../organisation/OrganisationAddForm.tsx         |  1 -
 src/frontend/src/constants/StepFormConstants.ts  |  4 ++--
 src/frontend/src/constants/blockerUrl.ts         |  2 +-
 src/frontend/src/routes.jsx                      | 16 ++++++++++++++--
 src/frontend/src/views/CreateNewProject.tsx      |  4 ++--
 src/frontend/src/views/CreateProject.tsx         | 12 ++++++------
 10 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
index 1e5ca13fac..8ee72bf2fe 100644
--- a/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
+++ b/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
@@ -164,7 +164,7 @@ const LayerSwitcherControl = ({ map, visible = 'osm' }) => {
     if (
       location.pathname.includes('project_details') ||
       location.pathname.includes('upload-area') ||
-      location.pathname.includes('select-form') ||
+      location.pathname.includes('select-category') ||
       location.pathname.includes('data-extract') ||
       location.pathname.includes('split-tasks')
     ) {
diff --git a/src/frontend/src/components/createnewproject/DataExtract.tsx b/src/frontend/src/components/createnewproject/DataExtract.tsx
index 99d0d96f8e..561c11eb07 100644
--- a/src/frontend/src/components/createnewproject/DataExtract.tsx
+++ b/src/frontend/src/components/createnewproject/DataExtract.tsx
@@ -141,7 +141,7 @@ const DataExtract = ({ flag, customLineUpload, setCustomLineUpload, customPolygo
   }, [formValues?.dataExtractWays, formValues?.dataExtractFeatureType]);
 
   const toggleStep = (step, url) => {
-    if (url === '/select-form') {
+    if (url === '/select-category') {
       dispatch(
         CreateProjectActions.SetIndividualProjectDetailsData({
           ...formValues,
@@ -326,7 +326,7 @@ const DataExtract = ({ flag, customLineUpload, setCustomLineUpload, customPolygo
                 btnText="PREVIOUS"
                 btnType="secondary"
                 type="button"
-                onClick={() => toggleStep(3, '/select-form')}
+                onClick={() => toggleStep(3, '/select-category')}
                 className="fmtm-font-bold"
               />
               <Button
diff --git a/src/frontend/src/components/createnewproject/SelectForm.tsx b/src/frontend/src/components/createnewproject/SelectForm.tsx
index 9991243f53..9dabbd553d 100644
--- a/src/frontend/src/components/createnewproject/SelectForm.tsx
+++ b/src/frontend/src/components/createnewproject/SelectForm.tsx
@@ -73,7 +73,7 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
   return (
     <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row">
       <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6">
-        <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Select Form</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 an existing category or upload a custom XLS form.</span>
           <span>
@@ -96,8 +96,8 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
             <div className="fmtm-flex fmtm-flex-col  fmtm-gap-6">
               <div className="">
                 <CustomSelect
-                  title="Select form category"
-                  placeholder="Select form category"
+                  title="Select category"
+                  placeholder="Select category"
                   data={sortedFormCategoryList}
                   dataKey="id"
                   valueKey="title"
diff --git a/src/frontend/src/components/createnewproject/UploadArea.tsx b/src/frontend/src/components/createnewproject/UploadArea.tsx
index 903ef768ab..65fa4c1f9e 100644
--- a/src/frontend/src/components/createnewproject/UploadArea.tsx
+++ b/src/frontend/src/components/createnewproject/UploadArea.tsx
@@ -61,7 +61,7 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomLineUpload, se
     }
     dispatch(CreateProjectActions.SetIndividualProjectDetailsData(formValues));
     dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: 3 }));
-    navigate('/select-form');
+    navigate('/select-category');
   };
   const {
     handleSubmit,
@@ -74,14 +74,6 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomLineUpload, se
     navigate(url);
   };
 
-  // const onCreateProjectSubmission = () => {
-  //   if (!drawnGeojson && !geojsonFile) {
-  //     return;
-  //   } else {
-  //     toggleStep(3, '/new-select-form');
-  //   }
-  // };
-
   const convertFileToGeojson = async (file) => {
     if (!file) return;
     const fileReader = new FileReader();
diff --git a/src/frontend/src/components/organisation/OrganisationAddForm.tsx b/src/frontend/src/components/organisation/OrganisationAddForm.tsx
index 398f5cb5ed..868a4f748c 100644
--- a/src/frontend/src/components/organisation/OrganisationAddForm.tsx
+++ b/src/frontend/src/components/organisation/OrganisationAddForm.tsx
@@ -16,7 +16,6 @@ const OrganisationAddForm = () => {
     // eslint-disable-next-line no-use-before-define
     // submitForm();
     dispatch(OrganisationService(`${import.meta.env.VITE_API_URL}/organisation/`, values));
-    // navigate("/select-form", { replace: true, state: { values: values } });
   };
   const { handleSubmit, handleCustomChange, values, errors }: any = useForm(
     formData,
diff --git a/src/frontend/src/constants/StepFormConstants.ts b/src/frontend/src/constants/StepFormConstants.ts
index 29baa62ba7..bc741d688a 100644
--- a/src/frontend/src/constants/StepFormConstants.ts
+++ b/src/frontend/src/constants/StepFormConstants.ts
@@ -19,10 +19,10 @@ export const createProjectSteps: ICreateProjectSteps[] = [
     name: 'Upload Area',
   },
   {
-    url: '/select-form',
+    url: '/select-category',
     step: 3,
     label: '03',
-    name: 'Select Form',
+    name: 'Select Category',
   },
   {
     url: '/data-extract',
diff --git a/src/frontend/src/constants/blockerUrl.ts b/src/frontend/src/constants/blockerUrl.ts
index 3e31d03279..711389c716 100644
--- a/src/frontend/src/constants/blockerUrl.ts
+++ b/src/frontend/src/constants/blockerUrl.ts
@@ -1,2 +1,2 @@
-const pathNotToBlock = ['/select-form', '/data-extract', '/split-tasks', '/upload-area', '/create-project'];
+const pathNotToBlock = ['/select-category', '/data-extract', '/split-tasks', '/upload-area', '/create-project'];
 export default pathNotToBlock;
diff --git a/src/frontend/src/routes.jsx b/src/frontend/src/routes.jsx
index 47ffe0e11d..ba69b46d68 100755
--- a/src/frontend/src/routes.jsx
+++ b/src/frontend/src/routes.jsx
@@ -171,6 +171,18 @@ const routes = createBrowserRouter([
           </ProtectedRoute>
         ),
       },
+      {
+        path: '/basemap-selection',
+        element: (
+          <ProtectedRoute>
+            <Suspense fallback={<div>Loading...</div>}>
+              <ErrorBoundary>
+                <CreateProject />
+              </ErrorBoundary>
+            </Suspense>
+          </ProtectedRoute>
+        ),
+      },
       {
         path: '/create-project',
         element: (
@@ -220,7 +232,7 @@ const routes = createBrowserRouter([
         ),
       },
       {
-        path: '/select-form',
+        path: '/select-category',
         element: (
           <ProtectedRoute>
             <Suspense fallback={<div>Loading...</div>}>
@@ -292,7 +304,7 @@ const routes = createBrowserRouter([
         ),
       },
       {
-        path: 'edit-project/select-form/:projectId',
+        path: 'edit-project/select-category/:projectId',
         element: (
           <ProtectedRoute>
             <Suspense fallback={<div>Loading...</div>}>
diff --git a/src/frontend/src/views/CreateNewProject.tsx b/src/frontend/src/views/CreateNewProject.tsx
index a16858219b..3bdf163ee7 100644
--- a/src/frontend/src/views/CreateNewProject.tsx
+++ b/src/frontend/src/views/CreateNewProject.tsx
@@ -41,7 +41,7 @@ const CreateNewProject = () => {
       case '/upload-area':
         dispatch(CommonActions.SetCurrentStepFormStep({ flag: 'create_project', step: 2 }));
         break;
-      case '/select-form':
+      case '/select-category':
         dispatch(CommonActions.SetCurrentStepFormStep({ flag: 'create_project', step: 3 }));
         break;
       case '/data-extract':
@@ -70,7 +70,7 @@ const CreateNewProject = () => {
             setCustomPolygonUpload={setCustomPolygonUpload}
           />
         );
-      case '/select-form':
+      case '/select-category':
         return (
           <SelectForm
             flag="create_project"
diff --git a/src/frontend/src/views/CreateProject.tsx b/src/frontend/src/views/CreateProject.tsx
index 692f97a6a1..a5ac2d0214 100755
--- a/src/frontend/src/views/CreateProject.tsx
+++ b/src/frontend/src/views/CreateProject.tsx
@@ -96,9 +96,9 @@ const CreateProject: React.FC = () => {
           ></CoreModules.Box>
           <CoreModules.Box
             sx={{
-              height: location.pathname !== '/select-form' ? '8px' : '12px',
+              height: location.pathname !== '/select-category' ? '8px' : '12px',
               width: '64px',
-              background: location.pathname !== '/select-form' ? '#68707F' : '#D73F3F',
+              background: location.pathname !== '/select-category' ? '#68707F' : '#D73F3F',
               mx: '16px',
               borderRadius: '10px',
             }}
@@ -175,14 +175,14 @@ const CreateProject: React.FC = () => {
           </Link>
           {/* END */}
           {/* Upload Area SideBar Button for uploading Area page  */}
-          <Link to="/select-form">
+          <Link to="/select-category">
             <CoreModules.Button
               sx={boxSX}
               variant="contained"
               color="error"
-              disabled={location.pathname !== '/select-form'}
+              disabled={location.pathname !== '/select-category'}
             >
-              Select Form
+              Select Category
             </CoreModules.Button>
           </Link>
           {/* END */}
@@ -228,7 +228,7 @@ const CreateProject: React.FC = () => {
             setLineExtractFileValue={setLineExtractFileValue}
           />
         ) : null}
-        {location.pathname === '/select-form' ? (
+        {location.pathname === '/select-category' ? (
           <FormSelection
             geojsonFile={geojsonFile}
             customFormFile={customFormFile}