refactor(frontend) small edits & cleanup old unused code (#1793)

* fix(editProjectArea): remove unused component * fix(taskSubmissionsMap): import default style * fix(projectInfo): remove commented code * fix(projectInfo): remove commented code * fix(mapControlComponent): move static variable outside component * fix(projectInfo): remove commented code * fix(projectOptions): add extract & submission to handleDownload func * fix(taskSelectionPopup): better readability * fix(dialobTaskActions): better readability * fix(mapLegends): remove unused import * fix(organisationGridCard): place static variable outside component * fix(home): remove totaProjectCount prop * fix(homePageFilters): remove commented code, unused variables * fix(views): remove commented code * fix(customDrawer): place static data outside component * fix(utilities): remove unused component * remove(images): remove unused images
hotosm · Sep 20, 2024 · 9c0fb1f · 9c0fb1f
1 parent 0cd71fa
commit 9c0fb1f
Show file tree

Hide file tree

Showing 25 changed files with 133 additions and 598 deletions.
diff --git a/src/frontend/src/assets/images/acc-down.png b/src/frontend/src/assets/images/acc-down.png
diff --git a/src/frontend/src/assets/images/acc-up.png b/src/frontend/src/assets/images/acc-up.png
diff --git a/src/frontend/src/assets/images/avatar.png b/src/frontend/src/assets/images/avatar.png
diff --git a/src/frontend/src/assets/images/grid.png b/src/frontend/src/assets/images/grid.png
diff --git a/src/frontend/src/assets/images/location.png b/src/frontend/src/assets/images/location.png
diff --git a/src/frontend/src/assets/images/locationArc.png b/src/frontend/src/assets/images/locationArc.png
diff --git a/src/frontend/src/assets/images/navigation.png b/src/frontend/src/assets/images/navigation.png
diff --git a/src/frontend/src/components/DialogTaskActions.tsx b/src/frontend/src/components/DialogTaskActions.tsx
@@ -25,28 +25,32 @@ type taskListstatusType = {
 
 export default function Dialog({ taskId, feature }: dialogPropType) {
   const navigate = useNavigate();
-  const projectInfo = useAppSelector((state) => state.project.projectInfo);
-  const taskBoundaryData = useAppSelector((state) => state.project.projectTaskBoundries);
-  const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails);
-  const loading = useAppSelector((state) => state.common.loading);
-  const taskInfo = useAppSelector((state) => state.task.taskInfo);
+  const dispatch = CoreModules.useAppDispatch();
+  const params = CoreModules.useParams();
+  const geojsonStyles = MapStyles();
+
   const [list_of_task_status, set_list_of_task_status] = useState<taskListstatusType[]>([]);
   const [task_status, set_task_status] = useState('READY');
   const [currentTaskInfo, setCurrentTaskInfo] = useState<taskSubmissionInfoType>();
   const [toggleMappedConfirmationModal, setToggleMappedConfirmationModal] = useState(false);
 
-  const geojsonStyles = MapStyles();
-  const dispatch = CoreModules.useAppDispatch();
-  const params = CoreModules.useParams();
-  const currentProjectId: string = params.id;
+  const projectInfo = useAppSelector((state) => state.project.projectInfo);
+  const taskBoundaryData = useAppSelector((state) => state.project.projectTaskBoundries);
+  const loading = useAppSelector((state) => state.common.loading);
+  const taskInfo = useAppSelector((state) => state.task.taskInfo);
   const projectData = useAppSelector((state) => state.project.projectTaskBoundries);
+  const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails);
+  const projectTaskActivityList = useAppSelector((state) => state?.project?.projectTaskActivity);
+
+  const currentProjectId: string = params.id;
   const projectIndex = projectData.findIndex((project) => project.id == parseInt(currentProjectId));
   const currentStatus = {
     ...taskBoundaryData?.[projectIndex]?.taskBoundries?.filter((task) => {
       return task?.index == taskId;
     })?.[0],
   };
-  const projectTaskActivityList = CoreModules.useAppSelector((state) => state?.project?.projectTaskActivity);
+  const checkIfTaskAssignedOrNot =
+    currentStatus?.locked_by_username === authDetails?.username || currentStatus?.locked_by_username === null;
 
   useEffect(() => {
     if (taskId) {
@@ -124,8 +128,6 @@ export default function Dialog({ taskId, feature }: dialogPropType) {
       );
     }
   };
-  const checkIfTaskAssignedOrNot =
-    currentStatus?.locked_by_username === authDetails?.username || currentStatus?.locked_by_username === null;
 
   return (
     <div className="fmtm-flex fmtm-flex-col">

diff --git a/src/frontend/src/components/MapLegends.tsx b/src/frontend/src/components/MapLegends.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import CoreModules from '@/shared/CoreModules';
 import AssetModules from '@/shared/AssetModules';
 
 type mapDetialsType = {

diff --git a/src/frontend/src/components/ProjectDetailsV2/MapControlComponent.tsx b/src/frontend/src/components/ProjectDetailsV2/MapControlComponent.tsx
@@ -17,42 +17,41 @@ type mapControlComponentType = {
   pmTileLayerData: any;
 };
 
-const MapControlComponent = ({ map, projectName, pmTileLayerData }: mapControlComponentType) => {
-  const btnList = [
-    {
-      id: 'add',
-      icon: <AssetModules.AddIcon />,
-      title: 'Zoom In',
-    },
-    {
-      id: 'minus',
-      icon: <AssetModules.RemoveIcon />,
-      title: 'Zoom Out',
-    },
-    {
-      id: 'currentLocation',
-      icon: <AssetModules.MyLocationIcon />,
-      title: 'My Location',
-    },
-    {
-      id: 'taskBoundries',
-      icon: <AssetModules.CropFreeIcon />,
-      title: 'Zoom to Project',
-    },
-  ];
+const btnList = [
+  {
+    id: 'add',
+    icon: <AssetModules.AddIcon />,
+    title: 'Zoom In',
+  },
+  {
+    id: 'minus',
+    icon: <AssetModules.RemoveIcon />,
+    title: 'Zoom Out',
+  },
+  {
+    id: 'currentLocation',
+    icon: <AssetModules.MyLocationIcon />,
+    title: 'My Location',
+  },
+  {
+    id: 'taskBoundries',
+    icon: <AssetModules.CropFreeIcon />,
+    title: 'Zoom to Project',
+  },
+];
 
+const MapControlComponent = ({ map, projectName, pmTileLayerData }: mapControlComponentType) => {
   const { pathname } = useLocation();
   const dispatch = CoreModules.useAppDispatch();
   const [toggleCurrentLoc, setToggleCurrentLoc] = useState(false);
   const geolocationStatus = useAppSelector((state) => state.project.geolocationStatus);
   const [divRef, toggle, handleToggle] = useOutsideClick();
 
   const handleOnClick = (btnId) => {
+    const actualZoom = map.getView().getZoom();
     if (btnId === 'add') {
-      const actualZoom = map.getView().getZoom();
       map.getView().setZoom(actualZoom + 1);
     } else if (btnId === 'minus') {
-      const actualZoom = map.getView().getZoom();
       map.getView().setZoom(actualZoom - 1);
     } else if (btnId === 'currentLocation') {
       setToggleCurrentLoc(!toggleCurrentLoc);

diff --git a/src/frontend/src/components/ProjectDetailsV2/ProjectInfo.tsx b/src/frontend/src/components/ProjectDetailsV2/ProjectInfo.tsx
@@ -101,12 +101,10 @@ const ProjectInfo: React.FC = () => {
         ) : (
           <div className="fmtm-flex fmtm-items-center fmtm-gap-4">
             <div className="fmtm-w-10 fmtm-h-10 fmtm-overflow-hidden fmtm-rounded-full fmtm-bg-white fmtm-flex fmtm-justify-center fmtm-items-center">
-              {/* <a href={`/organizations/${projectInfo.organisation_id}`}> */}
               <img
                 src={projectInfo?.organisation_logo ? projectInfo?.organisation_logo : ProjectIcon}
                 alt="Organization Photo"
               />
-              {/* </a> */}
             </div>
           </div>
         )}

diff --git a/src/frontend/src/components/ProjectDetailsV2/ProjectOptions.tsx b/src/frontend/src/components/ProjectDetailsV2/ProjectOptions.tsx
@@ -19,7 +19,7 @@ const ProjectOptions = ({ projectName }: projectOptionPropTypes) => {
 
   const projectId: string = params.id;
 
-  const handleDownload = (downloadType: 'form' | 'geojson') => {
+  const handleDownload = (downloadType: 'form' | 'geojson' | 'extract' | 'submission') => {
     if (downloadType === 'form') {
       dispatch(
         DownloadProjectForm(
@@ -36,27 +36,23 @@ const ProjectOptions = ({ projectName }: projectOptionPropTypes) => {
           projectId,
         ),
       );
+    } else if (downloadType === 'extract') {
+      dispatch(
+        DownloadDataExtract(
+          `${import.meta.env.VITE_API_URL}/projects/features/download/?project_id=${projectId}`,
+          projectId,
+        ),
+      );
+    } else if (downloadType === 'submission') {
+      dispatch(
+        DownloadSubmissionGeojson(
+          `${import.meta.env.VITE_API_URL}/submission/download-submission-geojson?project_id=${projectId}`,
+          projectName,
+        ),
+      );
     }
   };
 
-  const onDataExtractDownload = () => {
-    dispatch(
-      DownloadDataExtract(
-        `${import.meta.env.VITE_API_URL}/projects/features/download/?project_id=${projectId}`,
-        projectId,
-      ),
-    );
-  };
-
-  const onSubmissionDownload = () => {
-    dispatch(
-      DownloadSubmissionGeojson(
-        `${import.meta.env.VITE_API_URL}/submission/download-submission-geojson?project_id=${projectId}`,
-        projectName,
-      ),
-    );
-  };
-
   return (
     <>
       <div className="fmtm-flex fmtm-gap-4 fmtm-flex-col lg:fmtm-flex-row">
@@ -103,7 +99,7 @@ const ProjectOptions = ({ projectName }: projectOptionPropTypes) => {
           icon={<AssetModules.FileDownloadIcon style={{ fontSize: '22px' }} />}
           onClick={(e) => {
             e.stopPropagation();
-            onDataExtractDownload();
+            handleDownload('extract');
           }}
         />
         <Button
@@ -117,7 +113,7 @@ const ProjectOptions = ({ projectName }: projectOptionPropTypes) => {
           icon={<AssetModules.FileDownloadIcon style={{ fontSize: '22px' }} />}
           onClick={(e) => {
             e.stopPropagation();
-            onSubmissionDownload();
+            handleDownload('submission');
           }}
         />
       </div>

diff --git a/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx b/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx
@@ -15,11 +15,13 @@ type TaskSelectionPopupPropType = {
 };
 
 const TaskSelectionPopup = ({ taskId, body, feature }: TaskSelectionPopupPropType) => {
+  const params = CoreModules.useParams();
   const dispatch = CoreModules.useAppDispatch();
+
+  const currentProjectId: string = params.id;
   const [task_status, set_task_status] = useState('READY');
+
   const taskModalStatus = useAppSelector((state) => state.project.taskModalStatus);
-  const params = CoreModules.useParams();
-  const currentProjectId: string = params.id;
   const projectData = useAppSelector((state) => state.project.projectTaskBoundries);
   const projectIndex = projectData.findIndex((project) => project.id.toString() === currentProjectId);
   const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails);

diff --git a/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx b/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx
@@ -9,8 +9,6 @@ const ProjectInfo = ({ entities }) => {
   const params = CoreModules.useParams();
   const projectId = params.projectId;
   const projectInfo = useAppSelector((state) => state.project.projectInfo);
-  // const projectDashboardDetail = useAppSelector((state) => state.project.projectDashboardDetail);
-  // const projectDashboardLoading = useAppSelector((state) => state.project.projectDashboardLoading);
   const submissionContributorsData = useAppSelector((state) => state.submission.submissionContributors);
 
   const projectTaskList = useAppSelector((state) => state.project.projectTaskBoundries);

diff --git a/src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx b/src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback, useState, useEffect } from 'react';
-
 import CoreModules from '@/shared/CoreModules';
 import { MapContainer as MapComponent } from '@/components/MapComponent/OpenLayersComponent';
 import { useOLMap } from '@/components/MapComponent/OpenLayersComponent';
@@ -8,7 +7,6 @@ import { VectorLayer } from '@/components/MapComponent/OpenLayersComponent/Layer
 import { Vector as VectorSource } from 'ol/source';
 import GeoJSON from 'ol/format/GeoJSON';
 import { get } from 'ol/proj';
-import environment from '@/environment';
 import { getStyles } from '@/components/MapComponent/OpenLayersComponent/helpers/styleUtils';
 import { basicGeojsonTemplate } from '@/utilities/mapUtils';
 import TaskSubmissionsMapLegend from '@/components/ProjectSubmissions/TaskSubmissionsMapLegend';
@@ -25,42 +23,7 @@ import { isValidUrl } from '@/utilfunctions/urlChecker';
 import { projectInfoType, projectTaskBoundriesType } from '@/models/project/projectModel';
 import { useAppSelector } from '@/types/reduxTypes';
 import LayerSwitchMenu from '../MapComponent/OpenLayersComponent/LayerSwitcher/LayerSwitchMenu';
-
-export const defaultStyles = {
-  lineColor: '#000000',
-  lineOpacity: 70,
-  fillColor: '#1a2fa2',
-  fillOpacity: 50,
-  lineThickness: 1,
-  circleRadius: 5,
-  dashline: 0,
-  showLabel: false,
-  customLabelText: null,
-  labelField: '',
-  labelFont: 'Calibri',
-  labelFontSize: 14,
-  labelColor: '#000000',
-  labelOpacity: 100,
-  labelOutlineWidth: 3,
-  labelOutlineColor: '#ffffff',
-  labelOffsetX: 0,
-  labelOffsetY: 0,
-  labelText: 'normal',
-  labelMaxResolution: 400,
-  labelAlign: 'center',
-  labelBaseline: 'middle',
-  labelRotationDegree: 0,
-  labelFontWeight: 'normal',
-  labelPlacement: 'point',
-  labelMaxAngleDegree: 45.0,
-  labelOverflow: false,
-  labelLineHeight: 1,
-  visibleOnMap: true,
-  icon: {},
-  showSublayer: false,
-  sublayerColumnName: '',
-  sublayer: {},
-};
+import { defaultStyles } from '@/components/MapComponent/OpenLayersComponent/helpers/styleUtils';
 
 export const municipalStyles = {
   ...defaultStyles,
@@ -76,14 +39,13 @@ const colorCodes: colorCodesType = {
   '#4A90D9': { min: 100, max: 130 },
   '#0062AC': { min: 130, max: 160 },
 };
+
 function colorRange(data, noOfRange) {
   if (data?.length === 0) return [];
   const actualCodes = [{ min: 0, max: 0, color: '#FF4538' }];
   const maxVal = Math.max(...data?.map((d) => d.count));
   const maxValue = maxVal <= noOfRange ? 10 : maxVal;
-  // const minValue = Math.min(...data?.map((d) => d.count)) 0;
   const minValue = 1;
-  // const firstValue = minValue;
   const colorCodesKeys = Object.keys(colorCodes);
   const interval = (maxValue - minValue) / noOfRange;
   let currentValue = minValue;
@@ -98,6 +60,7 @@ function colorRange(data, noOfRange) {
   });
   return actualCodes;
 }
+
 const getChoroplethColor = (value, colorCodesOutput) => {
   let toReturn = '#FF4538';
   colorCodesOutput?.map((obj) => {
@@ -112,22 +75,24 @@ const getChoroplethColor = (value, colorCodesOutput) => {
 
 const TaskSubmissionsMap = () => {
   const dispatch = CoreModules.useAppDispatch();
+
   const [taskBoundaries, setTaskBoundaries] = useState<taskBoundariesType | null>(null);
   const [dataExtractUrl, setDataExtractUrl] = useState<string | null>(null);
   const [dataExtractExtent, setDataExtractExtent] = useState(null);
+
   const projectInfo: projectInfoType = CoreModules.useAppSelector((state) => state.project.projectInfo);
   const projectTaskBoundries: projectTaskBoundriesType[] = CoreModules.useAppSelector(
     (state) => state.project.projectTaskBoundries,
   );
-
   const taskInfo = useAppSelector((state) => state.task.taskInfo);
   const taskWiseSubmissionCount: taskWiseSubmissionCount[] = taskInfo?.map((task) => ({
     code: task.task_id,
     count: task.submission_count,
   }));
-
   const selectedTask: number = CoreModules.useAppSelector((state) => state.task.selectedTask);
+
   const legendColorArray: legendColorArrayType[] = colorRange(taskWiseSubmissionCount, '4');
+
   const { mapRef, map } = useOLMap({
     center: [0, 0],
     zoom: 4,
@@ -171,12 +136,9 @@ const TaskSubmissionsMap = () => {
     setDataExtractUrl(projectInfo.data_extract_url);
 
     map.getView().fit(extent, {
-      // easing: elastic,
       animate: true,
       size: map?.getSize(),
-      // maxZoom: 15,
       padding: [50, 50, 50, 50],
-      // duration: 900,
       constrainResolution: true,
       duration: 2000,
     });