refactor(frontend): update TS types on actions (#2054)

* fix(organisation): update organisation ts types

* feat(organisationSlice): use PayloadAction for ts support

* fix(organisationService): update response type

* feat(commonSlice): add PayloadAction for ts support

* fix(homeSlice): add PayloadAction for ts type support, remove unused actions and slice

* fix(home): update ts types for home

* fix(createProject): update ts type

* fix(projectDetailsForm): remove commented code

* refactor(createProjectSlice): add payloadAction for payload ts support, remove commented code, update ts types

* refactor(submissionService): remove unused projectSubmissionService

* fix(project): add ts types to response

* fix(project): add, update ts types

* feat(projectSlice): add PayloadAction for ts support

* feat(submission): add axiosResponse type

* feat(submissionService): add axiosResponse type

* fix(submissionModel): update ts types

* fix(projectSubmissions): SetUpdateReviewStatusModal type update

* feat(submissionSlice): add payloadAction for ts type support

* fix(project): replace usage of coremodules on action dispatch

* fix(task): remove usage of coremodules on action dispatch, remove unused function

* fix(task): update ts types

* refactor(taskSlice): add payloadAction on action for ts support, remove unused reducer function

src/frontend/src/api/CreateProjectService.ts

@@ -5,6 +5,7 @@ import {
   ProjectDetailsModel,
   FormCategoryListModel,
   OrganisationListModel,
+  splittedGeojsonType,
 } from '@/models/createproject/createProjectModel';
 import { CommonActions } from '@/store/slices/CommonSlice';
 import { isStatusSuccess } from '@/utilfunctions/commonUtils';
@@ -134,10 +135,11 @@ const FormCategoryService = (url: string) => {
     const getFormCategoryList = async (url: string) => {
       try {
         const getFormCategoryListResponse = await axios.get(url);
-        const resp: FormCategoryListModel = getFormCategoryListResponse.data;
+        const resp: FormCategoryListModel[] = getFormCategoryListResponse.data;
         dispatch(CreateProjectActions.GetFormCategoryList(resp));
       } catch (error) {
-        dispatch(CreateProjectActions.GetFormCategoryListLoading(false));
+      } finally {
+        dispatch(CreateProjectActions.GetFormCategoryLoading(false));
       }
     };
 
@@ -298,7 +300,7 @@ const OrganisationService = (url: string) => {
     const getOrganisationList = async (url: string) => {
       try {
         const getOrganisationListResponse = await axios.get(url);
-        const resp: OrganisationListModel = getOrganisationListResponse.data;
+        const resp: OrganisationListModel[] = getOrganisationListResponse.data;
         dispatch(CreateProjectActions.GetOrganisationList(resp));
       } catch (error) {
         dispatch(CreateProjectActions.GetOrganisationListLoading(false));
@@ -319,7 +321,7 @@ const GetDividedTaskFromGeojson = (url: string, projectData: Record<string, any>
         dividedTaskFormData.append('project_geojson', projectData.geojson);
         dividedTaskFormData.append('dimension_meters', projectData.dimension);
         const getGetDividedTaskFromGeojsonResponse = await axios.post(url, dividedTaskFormData);
-        const resp: OrganisationListModel = getGetDividedTaskFromGeojsonResponse.data;
+        const resp: splittedGeojsonType = getGetDividedTaskFromGeojsonResponse.data;
         dispatch(CreateProjectActions.SetIsTasksGenerated({ key: 'divide_on_square', value: true }));
         dispatch(CreateProjectActions.SetIsTasksGenerated({ key: 'task_splitting_algorithm', value: false }));
         dispatch(CreateProjectActions.SetDividedTaskGeojson(resp));
@@ -389,7 +391,7 @@ const TaskSplittingPreviewService = (
         }
 
         const getTaskSplittingResponse = await axios.post(url, taskSplittingFileFormData);
-        const resp: OrganisationListModel = getTaskSplittingResponse.data;
+        const resp: splittedGeojsonType = getTaskSplittingResponse.data;
         if (resp?.features && resp?.features.length < 1) {
           // Don't update geometry if splitting failed
           // TODO display error to user, perhaps there is not osm data here?

src/frontend/src/api/HomeService.ts

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { HomeActions } from '@/store/slices/HomeSlice';
+import { homeProjectPaginationTypes, projectType } from '@/models/home/homeModel';
 
 export const HomeSummaryService: Function = (url: string) => {
   return async (dispatch) => {
@@ -8,8 +9,8 @@ export const HomeSummaryService: Function = (url: string) => {
     const fetchHomeSummaries = async (url: string) => {
       try {
         const fetchHomeData = await axios.get(url);
-        const projectSummaries: any = fetchHomeData.data.results;
-        const paginationResp = fetchHomeData.data.pagination;
+        const projectSummaries: projectType[] = fetchHomeData.data.results;
+        const paginationResp: homeProjectPaginationTypes = fetchHomeData.data.pagination;
         dispatch(HomeActions.SetHomeProjectPagination(paginationResp));
         dispatch(HomeActions.SetHomeProjectSummary(projectSummaries));
         dispatch(HomeActions.HomeProjectLoading(false));

src/frontend/src/api/OrganisationService.ts

@@ -46,7 +46,7 @@ export const OrganisationDataService: Function = (url: string) => {
     const getOrganisationData = async (url: string) => {
       try {
         const getOrganisationDataResponse = await API.get(url);
-        const response: GetOrganisationDataModel = getOrganisationDataResponse.data;
+        const response: GetOrganisationDataModel[] = getOrganisationDataResponse.data;
         dispatch(OrganisationAction.GetOrganisationsData(response));
         dispatch(OrganisationAction.GetOrganisationDataLoading(false));
       } catch (error) {
@@ -95,7 +95,8 @@ export const PostOrganisationDataService: Function = (url: string, payload: any)
           },
         });
 
-        const resp: HomeProjectCardModel = postOrganisationData.data;
+        const resp: GetOrganisationDataModel = postOrganisationData.data;
+
         dispatch(OrganisationAction.PostOrganisationDataLoading(false));
         dispatch(OrganisationAction.postOrganisationData(resp));
         dispatch(

src/frontend/src/api/Project.ts

@@ -1,7 +1,16 @@
+import { AxiosResponse } from 'axios';
 import { ProjectActions } from '@/store/slices/ProjectSlice';
 import { CommonActions } from '@/store/slices/CommonSlice';
 import CoreModules from '@/shared/CoreModules';
 import { task_state, task_event } from '@/types/enums';
+import {
+  EntityOsmMap,
+  projectDashboardDetailTypes,
+  projectInfoType,
+  projectTaskBoundriesType,
+  tileType,
+} from '@/models/project/projectModel';
+import { TaskActions } from '@/store/slices/TaskSlice';
 
 export const ProjectById = (projectId: string) => {
   return async (dispatch) => {
@@ -11,20 +20,21 @@ export const ProjectById = (projectId: string) => {
         const project = await CoreModules.axios.get(
           `${import.meta.env.VITE_API_URL}/projects/${projectId}?project_id=${projectId}`,
         );
-        const projectResp: Record<string, any> = project.data;
-        const persistingValues: Record<string, any> = projectResp.tasks.map((data) => {
+        const projectResp: projectInfoType = project.data;
+        const persistingValues = projectResp.tasks.map((data) => {
           return {
             id: data.id,
             index: data.project_task_index,
             outline: data.outline,
             task_state: task_state[data.task_state],
             actioned_by_uid: data.actioned_by_uid,
             actioned_by_username: data.actioned_by_username,
-            task_history: data.task_history,
           };
         });
         // At top level id project id to object
-        const projectTaskBoundries = [{ id: projectResp.id, taskBoundries: persistingValues }];
+        const projectTaskBoundries: projectTaskBoundriesType[] = [
+          { id: projectResp.id, taskBoundries: persistingValues },
+        ];
         dispatch(ProjectActions.SetProjectTaskBoundries([{ ...projectTaskBoundries[0] }]));
         dispatch(
           ProjectActions.SetProjectInfo({
@@ -37,11 +47,8 @@ export const ProjectById = (projectId: string) => {
             short_description: projectResp.short_description,
             num_contributors: projectResp.num_contributors,
             total_tasks: projectResp.total_tasks,
-            tasks_mapped: projectResp.tasks_mapped,
-            tasks_validated: projectResp.tasks_validated,
             xform_category: projectResp.xform_category,
             odk_form_id: projectResp?.odk_form_id,
-            tasks_bad: projectResp.tasks_bad,
             data_extract_url: projectResp.data_extract_url,
             instructions: projectResp?.per_task_instructions,
             odk_token: projectResp?.odk_token,
@@ -136,11 +143,9 @@ export const GetTilesList = (url: string) => {
 
     const fetchTilesList = async (url: string) => {
       try {
-        const response = await CoreModules.axios.get(url);
+        const response: AxiosResponse<tileType[]> = await CoreModules.axios.get(url);
         dispatch(ProjectActions.SetTilesList(response.data));
-        dispatch(ProjectActions.SetTilesListLoading(false));
       } catch (error) {
-        dispatch(ProjectActions.SetTilesListLoading(false));
       } finally {
         dispatch(ProjectActions.SetTilesListLoading(false));
       }
@@ -169,20 +174,12 @@ export const GenerateProjectTiles = (url: string, projectId: string, data: objec
 };
 
 export const DownloadBasemapFile = (url: string) => {
-  return async (dispatch) => {
-    dispatch(ProjectActions.SetDownloadTileLoading({ loading: true }));
-
+  return async () => {
     const downloadBasemapFromAPI = async (url: string) => {
       try {
         // Open S3 url directly
         window.open(url);
-
-        dispatch(ProjectActions.SetDownloadTileLoading({ loading: false }));
-      } catch (error) {
-        dispatch(ProjectActions.SetDownloadTileLoading({ loading: false }));
-      } finally {
-        dispatch(ProjectActions.SetDownloadTileLoading({ loading: false }));
-      }
+      } catch (error) {}
     };
     await downloadBasemapFromAPI(url);
   };
@@ -193,7 +190,7 @@ export const GetSubmissionDashboard = (url: string) => {
     const GetSubmissionDashboard = async (url: string) => {
       try {
         dispatch(ProjectActions.SetProjectDashboardLoading(true));
-        const response = await CoreModules.axios.get(url);
+        const response: AxiosResponse<projectDashboardDetailTypes> = await CoreModules.axios.get(url);
         dispatch(ProjectActions.SetProjectDashboardDetail(response.data));
         dispatch(ProjectActions.SetProjectDashboardLoading(false));
       } catch (error) {
@@ -215,16 +212,15 @@ export const GetEntityStatusList = (url: string) => {
       try {
         dispatch(ProjectActions.SetEntityToOsmIdMappingLoading(true));
         dispatch(CoreModules.TaskActions.SetTaskSubmissionStatesLoading(true));
-        const response = await CoreModules.axios.get(url);
+        const response: AxiosResponse<EntityOsmMap[]> = await CoreModules.axios.get(url);
         dispatch(ProjectActions.SetEntityToOsmIdMapping(response.data));
-        dispatch(CoreModules.TaskActions.SetTaskSubmissionStates(response.data));
+        dispatch(TaskActions.SetTaskSubmissionStates(response.data));
         dispatch(ProjectActions.SetEntityToOsmIdMappingLoading(false));
       } catch (error) {
         dispatch(ProjectActions.SetEntityToOsmIdMappingLoading(false));
-        dispatch(CoreModules.TaskActions.SetTaskSubmissionStatesLoading(false));
       } finally {
         dispatch(ProjectActions.SetEntityToOsmIdMappingLoading(false));
-        dispatch(CoreModules.TaskActions.SetTaskSubmissionStatesLoading(false));
+        dispatch(TaskActions.SetTaskSubmissionStatesLoading(false));
       }
     };
     await getEntityOsmMap(url);

src/frontend/src/api/Submission.ts

@@ -1,4 +1,4 @@
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import { SubmissionActions } from '@/store/slices/SubmissionSlice';
 
 export const SubmissionService: Function = (url: string) => {
@@ -7,9 +7,8 @@ export const SubmissionService: Function = (url: string) => {
     dispatch(SubmissionActions.SetSubmissionDetailsLoading(true));
     const getSubmissionDetails = async (url: string) => {
       try {
-        const getSubmissionDetailsResponse = await axios.get(url);
-        const response: any = getSubmissionDetailsResponse.data;
-        dispatch(SubmissionActions.SetSubmissionDetails(response));
+        const response: AxiosResponse<Record<string, any>> = await axios.get(url);
+        dispatch(SubmissionActions.SetSubmissionDetails(response.data));
         dispatch(SubmissionActions.SetSubmissionDetailsLoading(false));
       } catch (error) {
         dispatch(SubmissionActions.SetSubmissionDetailsLoading(false));
@@ -26,7 +25,7 @@ export const GetSubmissionPhotosService: Function = (url: string) => {
     dispatch(SubmissionActions.SetSubmissionPhotosLoading(true));
     const getSubmissionPhotos = async (url: string) => {
       try {
-        const response = await axios.get(url);
+        const response: AxiosResponse<{ image_urls: string[] }> = await axios.get(url);
         dispatch(SubmissionActions.SetSubmissionPhotos(response?.data?.image_urls));
         dispatch(SubmissionActions.SetSubmissionPhotosLoading(false));
       } catch (error) {

src/frontend/src/api/SubmissionService.ts

@@ -1,36 +1,23 @@
+import { AxiosResponse } from 'axios';
+import {
+  submissionContributorsTypes,
+  submissionFormFieldsTypes,
+  submissionTableDataTypes,
+  updateReviewStateType,
+  validatedMappedType,
+} from '@/models/submission/submissionModel';
 import CoreModules from '@/shared/CoreModules';
 import { CommonActions } from '@/store/slices/CommonSlice';
-import { ProjectActions } from '@/store/slices/ProjectSlice';
 import { SubmissionActions } from '@/store/slices/SubmissionSlice';
 import { filterType } from '@/store/types/ISubmissions';
 
-export const ProjectSubmissionService: Function = (url: string) => {
-  return async (dispatch) => {
-    dispatch(ProjectActions.GetProjectSubmissionLoading(true));
-
-    const fetchProjectSubmission = async (url: string) => {
-      try {
-        const fetchSubmissionData = await CoreModules.axios.get(url);
-        const resp: any = fetchSubmissionData.data;
-        dispatch(ProjectActions.SetProjectSubmission(resp));
-        dispatch(ProjectActions.GetProjectSubmissionLoading(false));
-      } catch (error) {
-        dispatch(ProjectActions.GetProjectSubmissionLoading(false));
-      }
-    };
-
-    await fetchProjectSubmission(url);
-  };
-};
-
 export const ProjectContributorsService: Function = (url: string) => {
   return async (dispatch) => {
     const fetchProjectContributor = async (url: string) => {
       try {
         dispatch(SubmissionActions.SetSubmissionContributorsLoading(true));
-        const fetchContributorsData = await CoreModules.axios.get(url);
-        const resp: any = fetchContributorsData.data;
-        dispatch(SubmissionActions.SetSubmissionContributors(resp));
+        const response: AxiosResponse<submissionContributorsTypes[]> = await CoreModules.axios.get(url);
+        dispatch(SubmissionActions.SetSubmissionContributors(response.data));
         dispatch(SubmissionActions.SetSubmissionContributorsLoading(false));
       } catch (error) {
         dispatch(SubmissionActions.SetSubmissionContributorsLoading(false));
@@ -46,9 +33,8 @@ export const SubmissionFormFieldsService: Function = (url: string) => {
     const fetchFormFields = async (url: string) => {
       try {
         dispatch(SubmissionActions.SetSubmissionFormFieldsLoading(true));
-        const response = await CoreModules.axios.get(url);
-        const formFields: any = response.data;
-        dispatch(SubmissionActions.SetSubmissionFormFields(formFields));
+        const response: AxiosResponse<submissionFormFieldsTypes[]> = await CoreModules.axios.get(url);
+        dispatch(SubmissionActions.SetSubmissionFormFields(response.data));
         dispatch(SubmissionActions.SetSubmissionFormFieldsLoading(false));
         dispatch(SubmissionActions.SetSubmissionTableRefreshing(false));
       } catch (error) {
@@ -66,9 +52,8 @@ export const SubmissionTableService: Function = (url: string, payload: filterTyp
     const fetchSubmissionTable = async (url: string, payload: filterType) => {
       try {
         dispatch(SubmissionActions.SetSubmissionTableLoading(true));
-        const response = await CoreModules.axios.get(url, { params: payload });
-        const submissionTableData: any = response.data;
-        dispatch(SubmissionActions.SetSubmissionTable(submissionTableData));
+        const response: AxiosResponse<submissionTableDataTypes> = await CoreModules.axios.get(url, { params: payload });
+        dispatch(SubmissionActions.SetSubmissionTable(response.data));
         dispatch(SubmissionActions.SetSubmissionTableLoading(false));
         dispatch(SubmissionActions.SetSubmissionTableRefreshing(false));
       } catch (error) {
@@ -86,7 +71,7 @@ export const UpdateReviewStateService: Function = (url: string, payload: object)
     const UpdateReviewState = async (url: string) => {
       try {
         dispatch(SubmissionActions.UpdateReviewStateLoading(true));
-        const response = await CoreModules.axios.post(url, payload);
+        const response: AxiosResponse<updateReviewStateType> = await CoreModules.axios.post(url, payload);
         dispatch(SubmissionActions.UpdateSubmissionTableDataReview(response.data));
       } catch (error) {
         dispatch(
@@ -110,7 +95,7 @@ export const MappedVsValidatedTaskService: Function = (url: string) => {
     const MappedVsValidatedTask = async (url: string) => {
       try {
         dispatch(SubmissionActions.SetMappedVsValidatedTaskLoading(true));
-        const response = await CoreModules.axios.get(url);
+        const response: AxiosResponse<validatedMappedType[]> = await CoreModules.axios.get(url);
         dispatch(SubmissionActions.SetMappedVsValidatedTask(response.data));
         dispatch(SubmissionActions.SetMappedVsValidatedTaskLoading(false));
       } catch (error) {