refactor(frontend): update remaining JavaScript files to TypeScript (#…

…1602)

* remove(projectTaskStatus): remove unused map, view arguments

* fix(themeSlice): add type & remove unused updateBrightness reducer

* fix(projectTaskStatus): convert js to ts

* fix(dialogTaskActions): convert jsx to tsx

* fix(projectDetailsV2): remove map, view props from TaskSelectionPopup

* fix(projectDetailsV2): rename prop name

* fix(files): convert js to ts

* fix(qrcodeComponent): convert jsx to tsx

* fix(file): getProjectQrCode parameters type add

* fix(taskSelectionPopup): add ts types

* fix(modulesDecleration): delare pako/lib/deflate module

* fix(mapLegends): convert jsx to tsx

* fix(projectDetials): update ts types

* fix(projectModel): custom_tms_url type add to projectINfo

* fix(generateBaseMap): convert jsx to tsx

* fix(notFound404): convert jsx to tsx

* fix(activities): remove unused activities & activitiesPanel component

* fix(activitiesPanel): remove unused props from activities panel

* fix(IProject): remove project_id type from projectTaskactivity

* fix(activitiesPanel): update ts type

* fix(mapDescriptionComponents): remove unused component

* fix(openLayersMap): remove unused component

* fix(submissionDetails): add ts types

* fix(submissionInstanceMap): update jsx to tsx

* fix(exploreProjectCard): file cleanup

* fix(mainView): add ts types

* fix(utilities): remove unused utility components

* fix(primaryAppBar): remove unused props

* fix(customDrawer): convert jsx to tsx

* fix(customizedImage): convert jsx to tsx

* fix(customizedSnackbar): convert jsx to tsx

src/frontend/src/api/Files.js → src/frontend/src/api/Files.ts

@@ -6,14 +6,22 @@ import { deflate } from 'pako/lib/deflate';
 //   return new TextDecoder().decode(inflate(Uint8Array.from(window.atob(string), (c) => c.codePointAt(0))))
 // }
 
-function base64zlibencode(string) {
+function base64zlibencode(string: string) {
   return window.btoa(String.fromCodePoint(...deflate(new TextEncoder().encode(string))));
 }
 
-export const GetProjectQrCode = (odkToken, projectName, osmUser) => {
+export const GetProjectQrCode = (
+  odkToken: string | undefined,
+  projectName: string | undefined,
+  osmUser: string,
+): { qrcode: string } => {
   const [qrcode, setQrcode] = useState('');
   useEffect(() => {
-    const fetchProjectFileById = async (odkToken, projectName, osmUser) => {
+    const fetchProjectFileById = async (
+      odkToken: string | undefined,
+      projectName: string | undefined,
+      osmUser: string,
+    ) => {
       if (odkToken === '') {
         setQrcode('');
         return;
@@ -54,7 +62,7 @@ export const GetProjectQrCode = (odkToken, projectName, osmUser) => {
   return { qrcode };
 };
 
-export async function readFileFromOPFS(filePath) {
+export async function readFileFromOPFS(filePath: string) {
   const opfsRoot = await navigator.storage.getDirectory();
   const directories = filePath.split('/');
 
@@ -72,7 +80,7 @@ export async function readFileFromOPFS(filePath) {
 
   // Get file within final directory handle
   try {
-    const filename = directories.pop();
+    const filename: any = directories.pop();
     console.log(`Getting OPFS file: ${filename}`);
     const fileHandle = await currentDirectoryHandle.getFileHandle(filename);
     const fileData = await fileHandle.getFile(); // Read the file
@@ -82,14 +90,14 @@ export async function readFileFromOPFS(filePath) {
   }
 }
 
-export async function writeBinaryToOPFS(filePath, data) {
+export async function writeBinaryToOPFS(filePath: string, data: any) {
   console.log(`Starting write to OPFS file: ${filePath}`);
 
   const opfsRoot = await navigator.storage.getDirectory();
 
   // Split the filePath into directories and filename
   const directories = filePath.split('/');
-  const filename = directories.pop();
+  const filename: any = directories.pop();
 
   // Start with the root directory handle
   let currentDirectoryHandle = opfsRoot;

src/frontend/src/api/ProjectTaskStatus.js → src/frontend/src/api/ProjectTaskStatus.ts

@@ -2,11 +2,20 @@ import { ProjectActions } from '@/store/slices/ProjectSlice';
 import { HomeActions } from '@/store/slices/HomeSlice';
 import CoreModules from '@/shared/CoreModules';
 import { CommonActions } from '@/store/slices/CommonSlice';
-import { task_status } from '@/types/enums';
+import { projectTaskBoundriesType } from '@/models/project/projectModel';
 
-const UpdateTaskStatus = (url, style, existingData, currentProjectId, feature, map, view, taskId, body, params) => {
+const UpdateTaskStatus = (
+  url: string,
+  style: any,
+  existingData: projectTaskBoundriesType[],
+  currentProjectId: string,
+  feature: Record<string, any>,
+  taskId: number,
+  body: any,
+  params: { project_id: string },
+) => {
   return async (dispatch) => {
-    const updateTask = async (url, existingData, body, feature, params) => {
+    const updateTask = async (url: string, body: any, feature: Record<string, any>, params: string) => {
       try {
         dispatch(CommonActions.SetLoading(true));
 
@@ -50,7 +59,7 @@ const UpdateTaskStatus = (url, style, existingData, currentProjectId, feature, m
         );
       }
     };
-    await updateTask(url, existingData, body, feature, params);
+    await updateTask(url, body, feature, params);
   };
 };
 

src/frontend/src/components/DialogTaskActions.jsx → src/frontend/src/components/DialogTaskActions.tsx

@@ -9,25 +9,38 @@ import Button from '@/components/common/Button';
 import { useNavigate } from 'react-router-dom';
 import { GetProjectTaskActivity } from '@/api/Project';
 import { Modal } from '@/components/common/Modal';
+import { useAppSelector } from '@/types/reduxTypes';
+import { taskSubmissionInfoType } from '@/models/task/taskModel';
 
-export default function Dialog({ taskId, feature, map, view }) {
+type dialogPropType = {
+  taskId: number;
+  feature: Record<string, any>;
+};
+
+type taskListstatusType = {
+  value: string;
+  key: string;
+  btnBG: string;
+};
+
+export default function Dialog({ taskId, feature }: dialogPropType) {
   const navigate = useNavigate();
-  const projectInfo = CoreModules.useAppSelector((state) => state.project.projectInfo);
-  const taskBoundaryData = CoreModules.useAppSelector((state) => state.project.projectTaskBoundries);
+  const projectInfo = useAppSelector((state) => state.project.projectInfo);
+  const taskBoundaryData = useAppSelector((state) => state.project.projectTaskBoundries);
   const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails);
-  const loading = CoreModules.useAppSelector((state) => state.common.loading);
-  const taskInfo = CoreModules.useAppSelector((state) => state.task.taskInfo);
-  const [list_of_task_status, set_list_of_task_status] = useState([]);
+  const loading = useAppSelector((state) => state.common.loading);
+  const taskInfo = useAppSelector((state) => state.task.taskInfo);
+  const [list_of_task_status, set_list_of_task_status] = useState<taskListstatusType[]>([]);
   const [task_status, set_task_status] = useState('READY');
-  const [currentTaskInfo, setCurrentTaskInfo] = useState();
+  const [currentTaskInfo, setCurrentTaskInfo] = useState<taskSubmissionInfoType>();
   const [toggleMappedConfirmationModal, setToggleMappedConfirmationModal] = useState(false);
 
   const geojsonStyles = MapStyles();
   const dispatch = CoreModules.useAppDispatch();
   const params = CoreModules.useParams();
-  const currentProjectId = params.id;
-  const projectData = CoreModules.useAppSelector((state) => state.project.projectTaskBoundries);
-  const projectIndex = projectData.findIndex((project) => project.id == currentProjectId);
+  const currentProjectId: string = params.id;
+  const projectData = useAppSelector((state) => state.project.projectTaskBoundries);
+  const projectIndex = projectData.findIndex((project) => project.id == parseInt(currentProjectId));
   const currentStatus = {
     ...taskBoundaryData?.[projectIndex]?.taskBoundries?.filter((task) => {
       return task?.index == taskId;
@@ -45,7 +58,7 @@ export default function Dialog({ taskId, feature, map, view }) {
 
   useEffect(() => {
     if (taskInfo?.length === 0) return;
-    const currentTaskInfo = taskInfo?.filter((task) => taskId == task?.index);
+    const currentTaskInfo = taskInfo?.filter((task) => taskId.toString() === task?.index);
     if (currentTaskInfo?.[0]) {
       setCurrentTaskInfo(currentTaskInfo?.[0]);
     }
@@ -77,8 +90,6 @@ export default function Dialog({ taskId, feature, map, view }) {
             taskBoundaryData,
             currentProjectId,
             feature,
-            map,
-            view,
             taskId,
             authDetailsCopy,
             { project_id: currentProjectId },
@@ -165,6 +176,7 @@ export default function Dialog({ taskId, feature, map, view }) {
                   onClick={(e) => {
                     if (
                       data.key === 'Mark as fully mapped' &&
+                      currentTaskInfo &&
                       currentTaskInfo?.submission_count < currentTaskInfo?.feature_count
                     ) {
                       setToggleMappedConfirmationModal(true);