refactor(frontend): further upgrades from JavaScript to TypeScript (#…

…1746)

* fix(project): convert js to ts

* fix(projectById): remove first argument from projectById action

* fix(projectOptions): types add

* fix(project): ts types add to project services

* fix(submissions): store filterType seperately

* feat(api): add ts types to remaining services

* fix(dropdown): props fix

* fix(submissionsTable): customSelect value props ts error fix

* fix(tasks): unused component remove

* fix(stepFormConstants): export interface

* fix(stepSwitcher): add stepSwitcher props type

* fix(uploadArea): uploadArea prop type add

* fix(kebabMenu): direction type add to getPosition function

* fix(fileInputComponent): prop type add

* fix(bottomSheet): prop type add

* fix(checkbox): ts error solve

* fix(chips): prop type add

* fix(barChart): prop type add

* fix(lineChart): prop type add

* fix(pieChart): prop type add

* fix(toolbar): ts type add to function

* fix(checkWGS84Projection): convert js to ts

* fix(compareUtils): convert js to ts

* fix(getTaskStatusStyle): convert js to ts

* fix(commonUtils): add ts types

* fix(filterParam): convert js to ts

* refactor(submissions): remove unused component

* refactor(tabbed): remove unused tabbed component

* fix(customizedModal): prop type add

* fix(appLoader): remove unused imports

* refactor(geojsonObjectModal): remove redundant file, add ts type

* fix(projectListMap): update imports & types

* fix(customizedImage): update ts types

* fix(organisationGridCard): add ts type

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx

@@ -110,7 +110,7 @@ const FormUpdateTab = ({ projectId }) => {
           multiple={false}
           data={uploadForm || []}
           filterKey="url"
-          onUploadFile={(updatedFiles) => {
+          onUploadFile={(updatedFiles: FileType[]) => {
             dispatch(CreateProjectActions.SetCustomFileValidity(false));
             setUploadForm(updatedFiles);
           }}

src/frontend/src/components/common/BarChart.tsx

@@ -1,7 +1,15 @@
 import React, { useState } from 'react';
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
 
-const CustomBarChart = ({ data, xLabel, yLabel, dataKey, nameKey }) => {
+type customBarChartType = {
+  data: Record<string, string | number>[];
+  xLabel: string;
+  yLabel: string;
+  dataKey: string;
+  nameKey: string;
+};
+
+const CustomBarChart = ({ data, xLabel, yLabel, dataKey, nameKey }: customBarChartType) => {
   const [size, setSize] = useState({ width: 0, height: 0 });
 
   return (

src/frontend/src/components/common/BottomSheet.tsx

@@ -1,7 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import FmtmLogo from '@/assets/images/hotLog.png';
 
-const BottomSheet = ({ body, onClose }) => {
+type bottomSheetType = {
+  body: React.ReactElement;
+  onClose: () => void;
+};
+
+const BottomSheet = ({ body, onClose }: bottomSheetType) => {
   const sheetContentRef: any = useRef(null);
   const bottomSheetRef: any = useRef(null);
   const logoRef: any = useRef(null);
@@ -19,7 +24,7 @@ const BottomSheet = ({ body, onClose }) => {
     updateSheetHeight(50);
   }, []);
 
-  const updateSheetHeight = (height) => {
+  const updateSheetHeight = (height: number) => {
     if (sheetContentRef.current) {
       sheetContentRef.current.style.height = `${height}vh`;
       const top = sheetContentRef.current.getBoundingClientRect().top;

src/frontend/src/components/common/Checkbox.tsx

@@ -52,7 +52,13 @@ export const CustomCheckbox = ({
 
   return (
     <div className="fmtm-flex fmtm-gap-2 sm:fmtm-gap-4">
-      <Checkbox checked={checked} onCheckedChange={onCheckedChange} className="fmtm-mt-[2px]" disabled={disabled} />
+      <Checkbox
+        ref={null}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        className="fmtm-mt-[2px]"
+        disabled={disabled}
+      />
       <p
         style={labelStyle}
         className={`fmtm-text-[#7A7676] fmtm-font-archivo fmtm-text-base fmtm-break-words ${className}`}

src/frontend/src/components/common/Chips.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import AssetModule from '../../shared/AssetModules.js';
 
-const Chips = ({ data, clearChip }) => {
+type chipsType = {
+  data: string[];
+  clearChip: (i: number) => void;
+};
+
+const Chips = ({ data, clearChip }: chipsType) => {
   return (
     <div className="fmtm-flex fmtm-gap-2 fmtm-items-center fmtm-flex-wrap fmtm-my-2">
-      {data.map((item, i) => (
+      {data.map((item: string, i: number) => (
         <div
           key={i}
           className="fmtm-px-2 fmtm-py-1 fmtm-border-[1px] fmtm-border-[#D7D7D7] fmtm-rounded-[40px] fmtm-flex fmtm-w-fit fmtm-items-center fmtm-gap-1"

src/frontend/src/components/common/Editor/Toolbar.tsx

@@ -19,7 +19,7 @@ export const Toolbar = ({ editor }: ToolbarProps) => {
   const [imageURL, setImageURL] = useState('');
   const [imageDropdownOpen, setImageDropdownOpen] = useState(false);
 
-  const isEditorActive = (editorItem) => {
+  const isEditorActive = (editorItem: string) => {
     if (editor?.isActive(editorItem)) {
       return 'fmtm-text-primaryRed fmtm-bg-red-100';
     }

src/frontend/src/components/common/FileInputComponent.tsx

@@ -1,6 +1,16 @@
 import React, { useRef } from 'react';
 import AssetModules from '@/shared/AssetModules.js';
 
+type fileInputComponentType = {
+  accept: string;
+  customFile: any;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onResetFile: () => void;
+  btnText: string;
+  fileDescription: string;
+  errorMsg: string;
+};
+
 const FileInputComponent = ({
   accept = '.geojson, .json',
   customFile,
@@ -9,7 +19,7 @@ const FileInputComponent = ({
   btnText = 'Select File',
   fileDescription = '*The supported file formats are zipped shapefile, geojson or kml files.',
   errorMsg,
-}) => {
+}: fileInputComponentType) => {
   const customFileRef = useRef<any>(null);
   return (
     <div className="fmtm-mt-3 fmtm-pb-3">

src/frontend/src/components/common/KebabMenu.tsx

@@ -3,17 +3,19 @@ import AssetModules from '../../shared/AssetModules.js';
 
 type optionType = { id: number | string; icon: React.ReactNode; label: string; onClick: any };
 
+type directionType = 'left-top' | 'left-bottom' | 'right-bottom' | 'right-top' | 'top-left' | 'top-right';
+
 type kebabMenuType = {
   options: optionType[];
   stopPropagation: boolean;
-  direction?: 'left-top' | 'left-bottom' | 'right-bottom' | 'right-top' | 'top-left' | 'top-right';
+  direction?: directionType;
   data: {};
   pid: string | number;
   openedModalId: string | number;
   onDropdownOpen: () => void;
 };
 
-function getPosition(direction) {
+function getPosition(direction: directionType) {
   switch (direction) {
     case 'left-top':
       return 'fmtm-top-[2px] fmtm-right-[40px]';

src/frontend/src/components/common/LineChart.tsx

@@ -1,7 +1,16 @@
 import React, { useState } from 'react';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
-const CustomLineChart = ({ data, xAxisDataKey, lineOneKey, lineTwoKey, xLabel, yLabel }) => {
+type customLineChartType = {
+  data: Record<string, string | number>[];
+  xAxisDataKey: string;
+  lineOneKey: string;
+  lineTwoKey: string;
+  xLabel?: string;
+  yLabel?: string;
+};
+
+const CustomLineChart = ({ data, xAxisDataKey, lineOneKey, lineTwoKey, xLabel, yLabel }: customLineChartType) => {
   const [size, setSize] = useState({ width: 0, height: 0 });
 
   return (

src/frontend/src/components/common/PieChart.tsx

@@ -1,6 +1,12 @@
 import React, { useState } from 'react';
 import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts';
 
+type customPieChartType = {
+  data: Record<string, string | number>[];
+  dataKey: string;
+  nameKey: string;
+};
+
 const COLORS = ['#F19C3C', '#D73F3F', '#FFB74D', '#EC407A'];
 
 const RADIAN = Math.PI / 180;
@@ -17,7 +23,7 @@ const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, per
   );
 };
 
-const renderColorfulLegendText = (value, entry) => (
+const renderColorfulLegendText = (value: string, entry: any) => (
   <span style={{ color: '#596579', fontWeight: 500, padding: '10px' }}>{value}</span>
 );
 
@@ -45,7 +51,7 @@ const CustomLegend = ({ payload }) => (
   </div>
 );
 
-const CustomPieChart = ({ data, dataKey, nameKey }) => {
+const CustomPieChart = ({ data, dataKey, nameKey }: customPieChartType) => {
   const [size, setSize] = useState({ width: 0, height: 0 });
 
   return (
@@ -79,7 +85,7 @@ const CustomPieChart = ({ data, dataKey, nameKey }) => {
           verticalAlign="bottom"
           iconSize={10}
           formatter={renderColorfulLegendText}
-          content={<CustomLegend payload={data?.map((index) => COLORS[index % COLORS.length])} />}
+          content={<CustomLegend payload={data?.map((_, index) => COLORS[index % COLORS.length])} />}
         />
       </PieChart>
     </ResponsiveContainer>

src/frontend/src/components/common/StepSwitcher.tsx

@@ -3,15 +3,22 @@ import AssetModules from '@/shared/AssetModules.js';
 import { CommonActions } from '@/store/slices/CommonSlice';
 import CoreModules from '@/shared/CoreModules.js';
 import { useNavigate } from 'react-router-dom';
+import { ICreateProjectSteps } from '@/constants/StepFormConstants';
 
-const StepSwitcher = ({ data, flag, switchSteps }) => {
-  interface IIndividualStep {
-    url: string;
-    step: number;
-    label: string;
-    name: string;
-  }
+type stepSwitcherPropType = {
+  data: ICreateProjectSteps[];
+  flag: string;
+  switchSteps: boolean;
+};
+
+interface IIndividualStep {
+  url: string;
+  step: number;
+  label: string;
+  name: string;
+}
 
+const StepSwitcher = ({ data, flag, switchSteps }: stepSwitcherPropType) => {
   const dispatch = CoreModules.useAppDispatch();
   const navigate = useNavigate();
   const currentStep = CoreModules.useAppSelector((state) => state.common.currentStepFormStep[flag]);

src/frontend/src/components/common/UploadArea.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { CommonActions } from '../../store/slices/CommonSlice';
-import AssetModules from '../../shared/AssetModules.js';
+import { CommonActions } from '@/store/slices/CommonSlice';
+import AssetModules from '@/shared/AssetModules';
 import { v4 as uuidv4 } from 'uuid';
 
 type FileType = {
@@ -11,7 +11,17 @@ type FileType = {
   isDeleted: boolean;
 };
 
-const UploadArea = ({ title, label, acceptedInput, data, onUploadFile, multiple, filterKey }) => {
+type uploadAreaPropType = {
+  title: string;
+  label: string;
+  multiple: boolean;
+  data: FileType[];
+  filterKey: string;
+  onUploadFile: (updatedFiles: FileType[]) => void;
+  acceptedInput: string;
+};
+
+const UploadArea = ({ title, label, acceptedInput, data, onUploadFile, multiple, filterKey }: uploadAreaPropType) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const dispatch = useDispatch();
   const [selectedFiles, setSelectedFiles] = useState<FileType[]>([]);
@@ -83,7 +93,7 @@ const UploadArea = ({ title, label, acceptedInput, data, onUploadFile, multiple,
                 const id = uuidv4();
                 return fileList.push({ id, name, [filterKey]: file, isDeleted });
               }
-              if (acceptedInput.includes(fileType)) {
+              if (fileType && acceptedInput.includes(fileType)) {
                 const id = uuidv4();
                 const isDeleted = false;
                 return fileList.push({ id, name, [filterKey]: file, isDeleted });
@@ -102,7 +112,7 @@ const UploadArea = ({ title, label, acceptedInput, data, onUploadFile, multiple,
               if (multiple) {
                 onUploadFile([...fileList, ...data]);
               } else {
-                onUploadFile([fileList.at(fileList.length - 1)]);
+                onUploadFile([fileList.at(fileList.length - 1) as FileType]);
               }
             } else {
               onUploadFile(data);

src/frontend/src/components/createnewproject/DataExtract.tsx

@@ -226,13 +226,11 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
       <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">Map Features</h6>
         <p className="fmtm-text-gray-500 lg:fmtm-flex lg:fmtm-flex-col lg:fmtm-gap-3">
-          <span>
-            You may either choose to use OSM data, or upload your own data for the mapping project.
-          </span>
+          <span>You may either choose to use OSM data, or upload your own data for the mapping project.</span>
           <span> The relevant map features that exist on OSM are imported based on the select map area.</span>{' '}
           <span>
-            You can use these map features to use the 'select from map' functionality from ODK that allows you
-            to select the feature to collect data for.
+            You can use these map features to use the 'select from map' functionality from ODK that allows you to select
+            the feature to collect data for.
           </span>{' '}
         </p>
       </div>

src/frontend/src/components/home/ProjectListMap.tsx

@@ -4,24 +4,13 @@ import { MapContainer as MapComponent } from '@/components/MapComponent/OpenLaye
 import LayerSwitcherControl from '@/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js';
 import { ClusterLayer } from '@/components/MapComponent/OpenLayersComponent/Layers';
 import CoreModules from '@/shared/CoreModules';
-import { geojsonObjectModel } from '@/constants/geojsonObjectModal';
-import { defaultStyles, getStyles } from '@/components/MapComponent/OpenLayersComponent/helpers/styleUtils';
+import { geojsonObjectModel, geojsonObjectModelType } from '@/constants/geojsonObjectModal';
+import { defaultStyles } from '@/components/MapComponent/OpenLayersComponent/helpers/styleUtils';
 import MarkerIcon from '@/assets/images/red_marker.png';
 import { useNavigate } from 'react-router-dom';
 import { Style, Text, Icon, Fill } from 'ol/style';
 import { projectType } from '@/models/home/homeModel';
 
-type HomeProjectSummaryType = {
-  features: { geometry: any; properties: any; type: any }[];
-  type: string;
-  SRID: {
-    type: string;
-    properties: {
-      name: string;
-    };
-  };
-};
-
 const getIndividualStyle = (featureProperty) => {
   const style = new Style({
     image: new Icon({
@@ -43,7 +32,7 @@ const getIndividualStyle = (featureProperty) => {
 const ProjectListMap = () => {
   const navigate = useNavigate();
 
-  const [projectGeojson, setProjectGeojson] = useState<HomeProjectSummaryType | null>(null);
+  const [projectGeojson, setProjectGeojson] = useState<geojsonObjectModelType | null>(null);
   const { mapRef, map } = useOLMap({
     // center: fromLonLat([85.3, 27.7]),
     center: [0, 0],
@@ -54,7 +43,7 @@ const ProjectListMap = () => {
   const homeProjectSummary: projectType[] = CoreModules.useAppSelector((state) => state.home.homeProjectSummary);
   useEffect(() => {
     if (homeProjectSummary?.length === 0) return;
-    const convertedHomeProjectSummaryGeojson: HomeProjectSummaryType = {
+    const convertedHomeProjectSummaryGeojson: geojsonObjectModelType = {
       ...geojsonObjectModel,
       features: homeProjectSummary.map((project) => ({
         type: 'Feature',

src/frontend/src/components/organisation/OrganisationGridCard.tsx

@@ -3,8 +3,14 @@ import CoreModules from '@/shared/CoreModules';
 import CustomizedImage from '@/utilities/CustomizedImage';
 import { useNavigate } from 'react-router-dom';
 import { user_roles } from '@/types/enums';
+import { GetOrganisationDataModel } from '@/models/organisation/organisationModel';
 
-const OrganisationGridCard = ({ filteredData, allDataLength }) => {
+type organizationGridCardType = {
+  filteredData: GetOrganisationDataModel[];
+  allDataLength: number;
+};
+
+const OrganisationGridCard = ({ filteredData, allDataLength }: organizationGridCardType) => {
   const navigate = useNavigate();
   const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails);
   const cardStyle = {

src/frontend/src/constants/StepFormConstants.ts

@@ -1,4 +1,4 @@
-interface ICreateProjectSteps {
+export interface ICreateProjectSteps {
   url: string;
   step: number;
   label: string;

src/frontend/src/constants/geojsonObjectModal.ts

@@ -1,4 +1,15 @@
-export const geojsonObjectModel = {
+export type geojsonObjectModelType = {
+  features: { geometry: any; properties: any; type: any }[];
+  type: string;
+  SRID: {
+    type: string;
+    properties: {
+      name: string;
+    };
+  };
+};
+
+export const geojsonObjectModel: geojsonObjectModelType = {
   type: 'FeatureCollection',
   SRID: {
     type: 'name',