refactor(frontend): JS to TS conversion: update useDispatch to useApp…

…Dispatch (#2076)

* feat(homeService): add dispatch type

* feat(project): add dispatch type

* fix(project): update ts type, use useAppDispatch

* fix(taskEvent): add dispatch type

* feat(task): add dispatch type

* fix(project): replace coremodules dispatch with useAppDispatch

* fix(api): dispatch type add, update ts type

* refactor(dispatch): replace coremodules useDispatch

* refactor(dispatch): replace dispatch with useAppDispatch

* fix(project): event optional for postProjectComments service

src/frontend/src/App.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect } from 'react';
 import { RouterProvider } from 'react-router-dom';
-import { Provider, useDispatch } from 'react-redux';
+import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { LoginActions } from '@/store/slices/LoginSlice';
 import { refreshCookies, getUserDetailsFromApi } from '@/utilfunctions/login';
+import { useAppDispatch } from '@/types/reduxTypes';
 
 // import '@hotosm/ui/components/Tracking';
 import '@hotosm/ui/dist/style.css';
@@ -15,7 +16,7 @@ import { store, persistor } from '@/store/Store';
 import OfflineReadyPrompt from '@/components/OfflineReadyPrompt';
 
 const RefreshUserCookies = () => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   useEffect(() => {
     const refreshUserDetails = async () => {

src/frontend/src/api/CreateProjectService.ts

@@ -9,6 +9,7 @@ import {
 } from '@/models/createproject/createProjectModel';
 import { CommonActions } from '@/store/slices/CommonSlice';
 import { isStatusSuccess } from '@/utilfunctions/commonUtils';
+import { AppDispatch } from '@/store/Store';
 
 const CreateProjectService = (
   url: string,
@@ -19,7 +20,7 @@ const CreateProjectService = (
   isOsmExtract: boolean,
   additionalFeature: any,
 ) => {
-  return async (dispatch) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(CreateProjectActions.CreateProjectLoading(true));
     dispatch(CommonActions.SetLoading(true));
 
@@ -129,7 +130,7 @@ const CreateProjectService = (
 };
 
 const FormCategoryService = (url: string) => {
-  return async (dispatch) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(CreateProjectActions.GetFormCategoryLoading(true));
 
     const getFormCategoryList = async (url: string) => {
@@ -148,7 +149,7 @@ const FormCategoryService = (url: string) => {
 };
 
 const UploadTaskAreasService = (url: string, filePayload: any) => {
-  return async (dispatch) => {
+  return async (dispatch: AppDispatch) => {
     const postUploadArea = async (url: string, filePayload: any) => {
       let isAPISuccess = true;
       try {
@@ -184,7 +185,7 @@ const UploadTaskAreasService = (url: string, filePayload: any) => {
 };
 
 const GenerateProjectFilesService = (url: string, projectData: any, formUpload: any) => {
-  return async (dispatch) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(CreateProjectActions.GenerateProjectLoading(true));
     dispatch(CommonActions.SetLoading(true));
 
@@ -261,7 +262,7 @@ const GenerateProjectFilesService = (url: string, projectData: any, formUpload:
 };
 
 const PostAdditionalFeatureService = (url: string, file: File) => {
-  return async (dispatch) => {
+  return async (dispatch: AppDispatch) => {
     const PostAdditionalFeature = async (url, file) => {
       let isAPISuccess = true;
 
@@ -294,7 +295,7 @@ const PostAdditionalFeatureService = (url: string, file: File) => {
 };
 
 const OrganisationService = (url: string) => {
-  return async (dispatch) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(CreateProjectActions.GetOrganisationListLoading(true));
 
     const getOrganisationList = async (url: string) => {
@@ -312,7 +313,7 @@ const OrganisationService = (url: string) => {
 };
 
 const GetDividedTaskFromGeojson = (url: string, projectData: Record<string, any>) => {
-  return async (dispatch) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(CreateProjectActions.SetDividedTaskFromGeojsonLoading(true));
 
     const getDividedTaskFromGeojson = async (url: string, projectData: Record<string, any>) => {
@@ -338,7 +339,7 @@ const GetDividedTaskFromGeojson = (url: string, projectData: Record<string, any>
 };
 
 const GetIndividualProjectDetails = (url: string) => {
-  return async (dispatch) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(CreateProjectActions.SetIndividualProjectDetailsLoading(true));
 
     const getIndividualProjectDetails = async (url: string) => {
@@ -377,7 +378,7 @@ const TaskSplittingPreviewService = (
   no_of_buildings: string,
   dataExtractFile: any,
 ) => {
-  return async (dispatch) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(CreateProjectActions.GetTaskSplittingPreviewLoading(true));
 
     const getTaskSplittingGeojson = async (url: string, projectAoiFile: any, dataExtractFile: any) => {
@@ -419,7 +420,7 @@ const TaskSplittingPreviewService = (
   };
 };
 const PatchProjectDetails = (url: string, projectData: Record<string, any>) => {
-  return async (dispatch) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(CreateProjectActions.SetPatchProjectDetailsLoading(true));
 
     const patchProjectDetails = async (url: string, projectData: Record<string, any>) => {
@@ -449,7 +450,7 @@ const PatchProjectDetails = (url: string, projectData: Record<string, any>) => {
 };
 
 const PostFormUpdate = (url: string, projectData: Record<string, any>) => {
-  return async (dispatch) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(CreateProjectActions.SetPostFormUpdateLoading(true));
 
     const postFormUpdate = async (url: string, projectData: Record<string, any>) => {
@@ -490,8 +491,9 @@ const PostFormUpdate = (url: string, projectData: Record<string, any>) => {
     await postFormUpdate(url, projectData);
   };
 };
+
 const EditProjectBoundaryService = (url: string, geojsonUpload: any, dimension: any) => {
-  return async (dispatch) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(CreateProjectActions.SetEditProjectBoundaryServiceLoading(true));
 
     const postFormUpdate = async (url: string, geojsonUpload: any, dimension: any) => {
@@ -526,7 +528,7 @@ const EditProjectBoundaryService = (url: string, geojsonUpload: any, dimension:
 };
 
 const ValidateCustomForm = (url: string, formUpload: any) => {
-  return async (dispatch) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(CreateProjectActions.ValidateCustomFormLoading(true));
 
     const validateCustomForm = async (url: any, formUpload: any) => {
@@ -567,7 +569,7 @@ const ValidateCustomForm = (url: string, formUpload: any) => {
 };
 
 const DeleteProjectService = (url: string, hasRedirect: boolean = true) => {
-  return async (dispatch) => {
+  return async (dispatch: AppDispatch) => {
     const deleteProject = async (url: string) => {
       try {
         await API.delete(url);

src/frontend/src/api/DataConflation.ts

@@ -1,9 +1,10 @@
 import axios from 'axios';
 import { DataConflationActions } from '@/store/slices/DataConflationSlice';
+import { AppDispatch } from '@/store/Store';
 
-export const SubmissionConflationGeojsonService: Function = (url: string) => {
-  return async (dispatch) => {
-    const getSubmissionGeojsonConflation = async (url) => {
+export const SubmissionConflationGeojsonService = (url: string) => {
+  return async (dispatch: AppDispatch) => {
+    const getSubmissionGeojsonConflation = async (url: string) => {
       try {
         dispatch(DataConflationActions.SetSubmissionConflationGeojsonLoading(true));
         const getSubmissionConflationGeojsonResponse = await axios.get(url);

src/frontend/src/api/HomeService.ts

@@ -1,9 +1,10 @@
 import axios from 'axios';
+import { AppDispatch } from '@/store/Store';
 import { HomeActions } from '@/store/slices/HomeSlice';
 import { homeProjectPaginationTypes, projectType } from '@/models/home/homeModel';
 
-export const HomeSummaryService: Function = (url: string) => {
-  return async (dispatch) => {
+export const HomeSummaryService = (url: string) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(HomeActions.HomeProjectLoading(true));
 
     const fetchHomeSummaries = async (url: string) => {

src/frontend/src/api/OrganisationService.ts

@@ -1,10 +1,10 @@
 import axios from 'axios';
-import { HomeProjectCardModel } from '@/models/home/homeModel';
 import { GetOrganisationDataModel, OrganisationModal } from '@/models/organisation/organisationModel';
 import { CommonActions } from '@/store/slices/CommonSlice';
 import { OrganisationAction } from '@/store/slices/organisationSlice';
 import { API } from '.';
 import { LoginActions } from '@/store/slices/LoginSlice';
+import { AppDispatch } from '@/store/Store';
 
 function appendObjectToFormData(formData: FormData, object: Record<string, any>) {
   for (const [key, value] of Object.entries(object)) {
@@ -15,8 +15,8 @@ function appendObjectToFormData(formData: FormData, object: Record<string, any>)
   }
 }
 
-export const OrganisationService: Function = (url: string, payload: OrganisationModal) => {
-  return async (dispatch) => {
+export const OrganisationService = (url: string, payload: OrganisationModal) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(CommonActions.PostOrganisationLoading(true));
 
     const postOrganisation = async (url: string, payload: OrganisationModal) => {
@@ -40,8 +40,8 @@ export const OrganisationService: Function = (url: string, payload: Organisation
   };
 };
 
-export const OrganisationDataService: Function = (url: string) => {
-  return async (dispatch) => {
+export const OrganisationDataService = (url: string) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(OrganisationAction.GetOrganisationDataLoading(true));
     const getOrganisationData = async (url: string) => {
       try {
@@ -60,8 +60,8 @@ export const OrganisationDataService: Function = (url: string) => {
   };
 };
 
-export const MyOrganisationDataService: Function = (url: string) => {
-  return async (dispatch) => {
+export const MyOrganisationDataService = (url: string) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(OrganisationAction.GetMyOrganisationDataLoading(true));
     const getMyOrganisationData = async (url: string) => {
       try {
@@ -77,8 +77,8 @@ export const MyOrganisationDataService: Function = (url: string) => {
   };
 };
 
-export const PostOrganisationDataService: Function = (url: string, payload: any) => {
-  return async (dispatch) => {
+export const PostOrganisationDataService = (url: string, payload: any) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(OrganisationAction.SetOrganisationFormData({}));
     dispatch(OrganisationAction.PostOrganisationDataLoading(true));
 
@@ -124,8 +124,8 @@ export const PostOrganisationDataService: Function = (url: string, payload: any)
   };
 };
 
-export const GetIndividualOrganizationService: Function = (url: string) => {
-  return async (dispatch) => {
+export const GetIndividualOrganizationService = (url: string) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(OrganisationAction.SetOrganisationFormData({}));
     const getOrganisationData = async (url: string) => {
       try {
@@ -138,8 +138,8 @@ export const GetIndividualOrganizationService: Function = (url: string) => {
   };
 };
 
-export const PatchOrganizationDataService: Function = (url: string, payload: any) => {
-  return async (dispatch) => {
+export const PatchOrganizationDataService = (url: string, payload: any) => {
+  return async (dispatch: AppDispatch) => {
     dispatch(OrganisationAction.SetOrganisationFormData({}));
     dispatch(OrganisationAction.PostOrganisationDataLoading(true));
 
@@ -156,7 +156,7 @@ export const PatchOrganizationDataService: Function = (url: string, payload: any
           },
         });
 
-        const resp: HomeProjectCardModel = patchOrganisationData.data;
+        const resp: GetOrganisationDataModel = patchOrganisationData.data;
         dispatch(OrganisationAction.PostOrganisationDataLoading(false));
         dispatch(OrganisationAction.postOrganisationData(resp));
         dispatch(
@@ -184,8 +184,8 @@ export const PatchOrganizationDataService: Function = (url: string, payload: any
   };
 };
 
-export const ApproveOrganizationService: Function = (url: string) => {
-  return async (dispatch) => {
+export const ApproveOrganizationService = (url: string) => {
+  return async (dispatch: AppDispatch) => {
     const approveOrganization = async (url: string) => {
       try {
         dispatch(OrganisationAction.SetOrganizationApproving(true));
@@ -217,8 +217,8 @@ export const ApproveOrganizationService: Function = (url: string) => {
   };
 };
 
-export const RejectOrganizationService: Function = (url: string) => {
-  return async (dispatch) => {
+export const RejectOrganizationService = (url: string) => {
+  return async (dispatch: AppDispatch) => {
     const rejectOrganization = async (url: string) => {
       try {
         dispatch(OrganisationAction.SetOrganizationRejecting(true));