diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 8138f0a963..402d6eb707 100755 --- a/src/frontend/src/App.tsx +++ b/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 () => { diff --git a/src/frontend/src/api/CreateProjectService.ts b/src/frontend/src/api/CreateProjectService.ts index 351e5053d5..70f7009ebd 100755 --- a/src/frontend/src/api/CreateProjectService.ts +++ b/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) => { - return async (dispatch) => { + return async (dispatch: AppDispatch) => { dispatch(CreateProjectActions.SetDividedTaskFromGeojsonLoading(true)); const getDividedTaskFromGeojson = async (url: string, projectData: Record) => { @@ -338,7 +339,7 @@ const GetDividedTaskFromGeojson = (url: string, projectData: Record }; 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) => { - return async (dispatch) => { + return async (dispatch: AppDispatch) => { dispatch(CreateProjectActions.SetPatchProjectDetailsLoading(true)); const patchProjectDetails = async (url: string, projectData: Record) => { @@ -449,7 +450,7 @@ const PatchProjectDetails = (url: string, projectData: Record) => { }; const PostFormUpdate = (url: string, projectData: Record) => { - return async (dispatch) => { + return async (dispatch: AppDispatch) => { dispatch(CreateProjectActions.SetPostFormUpdateLoading(true)); const postFormUpdate = async (url: string, projectData: Record) => { @@ -490,8 +491,9 @@ const PostFormUpdate = (url: string, projectData: Record) => { 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); diff --git a/src/frontend/src/api/DataConflation.ts b/src/frontend/src/api/DataConflation.ts index 37fca90805..63e5e9769b 100644 --- a/src/frontend/src/api/DataConflation.ts +++ b/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); diff --git a/src/frontend/src/api/HomeService.ts b/src/frontend/src/api/HomeService.ts index 2a3acef524..78645fbc7e 100755 --- a/src/frontend/src/api/HomeService.ts +++ b/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) => { diff --git a/src/frontend/src/api/OrganisationService.ts b/src/frontend/src/api/OrganisationService.ts index 87b7ee83a3..0a59ff53fb 100644 --- a/src/frontend/src/api/OrganisationService.ts +++ b/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) { for (const [key, value] of Object.entries(object)) { @@ -15,8 +15,8 @@ function appendObjectToFormData(formData: FormData, object: Record) } } -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)); diff --git a/src/frontend/src/api/Project.ts b/src/frontend/src/api/Project.ts index bce6e60950..df825e4f17 100755 --- a/src/frontend/src/api/Project.ts +++ b/src/frontend/src/api/Project.ts @@ -11,9 +11,10 @@ import { tileType, } from '@/models/project/projectModel'; import { TaskActions } from '@/store/slices/TaskSlice'; +import { AppDispatch } from '@/store/Store'; export const ProjectById = (projectId: string) => { - return async (dispatch) => { + return async (dispatch: AppDispatch) => { const fetchProjectById = async (projectId: string) => { try { dispatch(ProjectActions.SetProjectDetialsLoading(true)); @@ -82,7 +83,7 @@ export const ProjectById = (projectId: string) => { }; export const DownloadProjectForm = (url: string, downloadType: 'form' | 'geojson', projectId: string) => { - return async (dispatch) => { + return async (dispatch: AppDispatch) => { dispatch(ProjectActions.SetDownloadProjectFormLoading({ type: downloadType, loading: true })); const fetchProjectForm = async (url: string, downloadType: 'form' | 'geojson', projectId: string) => { @@ -113,7 +114,7 @@ export const DownloadProjectForm = (url: string, downloadType: 'form' | 'geojson }; export const DownloadDataExtract = (url: string, projectId: string) => { - return async (dispatch) => { + return async (dispatch: AppDispatch) => { dispatch(ProjectActions.SetDownloadDataExtractLoading(true)); const getDownloadExtract = async (url: string, projectId: string) => { @@ -138,7 +139,7 @@ export const DownloadDataExtract = (url: string, projectId: string) => { }; export const GetTilesList = (url: string) => { - return async (dispatch) => { + return async (dispatch: AppDispatch) => { dispatch(ProjectActions.SetTilesListLoading(true)); const fetchTilesList = async (url: string) => { @@ -155,7 +156,7 @@ export const GetTilesList = (url: string) => { }; export const GenerateProjectTiles = (url: string, projectId: string, data: object) => { - return async (dispatch) => { + return async (dispatch: AppDispatch) => { dispatch(ProjectActions.SetGenerateProjectTilesLoading(true)); const generateProjectTiles = async (url: string, projectId: string) => { @@ -173,20 +174,31 @@ export const GenerateProjectTiles = (url: string, projectId: string, data: objec }; }; -export const DownloadBasemapFile = (url: string) => { - return async () => { +export const DownloadBasemapFile = (url: string | null) => { + return async (dispatch: AppDispatch) => { const downloadBasemapFromAPI = async (url: string) => { try { // Open S3 url directly window.open(url); } catch (error) {} }; - await downloadBasemapFromAPI(url); + if (!url) { + dispatch( + CommonActions.SetSnackBar({ + open: true, + message: 'No url associated to download basemap.', + variant: 'error', + duration: 2000, + }), + ); + } else { + await downloadBasemapFromAPI(url); + } }; }; export const GetSubmissionDashboard = (url: string) => { - return async (dispatch) => { + return async (dispatch: AppDispatch) => { const GetSubmissionDashboard = async (url: string) => { try { dispatch(ProjectActions.SetProjectDashboardLoading(true)); @@ -207,7 +219,7 @@ export const GetSubmissionDashboard = (url: string) => { }; export const GetEntityStatusList = (url: string) => { - return async (dispatch) => { + return async (dispatch: AppDispatch) => { const getEntityOsmMap = async (url: string) => { try { dispatch(ProjectActions.SetEntityToOsmIdMappingLoading(true)); @@ -228,7 +240,7 @@ export const GetEntityStatusList = (url: string) => { }; export const GetProjectComments = (url: string) => { - return async (dispatch) => { + return async (dispatch: AppDispatch) => { const getProjectComments = async (url: string) => { try { dispatch(ProjectActions.SetProjectGetCommentsLoading(true)); @@ -247,9 +259,9 @@ export const GetProjectComments = (url: string) => { export const PostProjectComments = ( url: string, - payload: { event: task_event.COMMENT; task_id: number; comment: string }, + payload: { event?: task_event.COMMENT; task_id: number; comment: string }, ) => { - return async (dispatch) => { + return async (dispatch: AppDispatch) => { const postProjectComments = async (url: string) => { try { dispatch(ProjectActions.SetPostProjectCommentsLoading(true)); @@ -270,7 +282,7 @@ export const PostProjectComments = ( }; export const GetProjectTaskActivity = (url: string) => { - return async (dispatch) => { + return async (dispatch: AppDispatch) => { const getProjectActivity = async (url: string) => { try { dispatch(ProjectActions.SetProjectTaskActivityLoading(true)); @@ -288,7 +300,7 @@ export const GetProjectTaskActivity = (url: string) => { }; export const UpdateEntityState = (url: string, payload: { entity_id: string; status: number; label: string }) => { - return async (dispatch) => { + return async (dispatch: AppDispatch) => { const updateEntityState = async (url: string, payload: { entity_id: string; status: number; label: string }) => { try { dispatch(ProjectActions.UpdateEntityStateLoading(true)); @@ -312,7 +324,7 @@ export const UpdateEntityState = (url: string, payload: { entity_id: string; sta }; export const DownloadSubmissionGeojson = (url: string, projectName: string) => { - return async (dispatch) => { + return async (dispatch: AppDispatch) => { dispatch(ProjectActions.SetDownloadSubmissionGeojsonLoading(true)); const downloadSubmissionGeojson = async (url: string) => { diff --git a/src/frontend/src/api/Submission.ts b/src/frontend/src/api/Submission.ts index bec01cd4cd..b1dd4e3513 100644 --- a/src/frontend/src/api/Submission.ts +++ b/src/frontend/src/api/Submission.ts @@ -1,8 +1,9 @@ import axios, { AxiosResponse } from 'axios'; import { SubmissionActions } from '@/store/slices/SubmissionSlice'; +import { AppDispatch } from '@/store/Store'; -export const SubmissionService: Function = (url: string) => { - return async (dispatch) => { +export const SubmissionService = (url: string) => { + return async (dispatch: AppDispatch) => { dispatch(SubmissionActions.SetSubmissionDetails(null)); dispatch(SubmissionActions.SetSubmissionDetailsLoading(true)); const getSubmissionDetails = async (url: string) => { @@ -20,8 +21,8 @@ export const SubmissionService: Function = (url: string) => { }; }; -export const GetSubmissionPhotosService: Function = (url: string) => { - return async (dispatch) => { +export const GetSubmissionPhotosService = (url: string) => { + return async (dispatch: AppDispatch) => { dispatch(SubmissionActions.SetSubmissionPhotosLoading(true)); const getSubmissionPhotos = async (url: string) => { try { diff --git a/src/frontend/src/api/SubmissionService.ts b/src/frontend/src/api/SubmissionService.ts index db0e45fce8..7c4c56604c 100644 --- a/src/frontend/src/api/SubmissionService.ts +++ b/src/frontend/src/api/SubmissionService.ts @@ -10,9 +10,10 @@ import CoreModules from '@/shared/CoreModules'; import { CommonActions } from '@/store/slices/CommonSlice'; import { SubmissionActions } from '@/store/slices/SubmissionSlice'; import { filterType } from '@/store/types/ISubmissions'; +import { AppDispatch } from '@/store/Store'; -export const ProjectContributorsService: Function = (url: string) => { - return async (dispatch) => { +export const ProjectContributorsService = (url: string) => { + return async (dispatch: AppDispatch) => { const fetchProjectContributor = async (url: string) => { try { dispatch(SubmissionActions.SetSubmissionContributorsLoading(true)); @@ -28,8 +29,8 @@ export const ProjectContributorsService: Function = (url: string) => { }; }; -export const SubmissionFormFieldsService: Function = (url: string) => { - return async (dispatch) => { +export const SubmissionFormFieldsService = (url: string) => { + return async (dispatch: AppDispatch) => { const fetchFormFields = async (url: string) => { try { dispatch(SubmissionActions.SetSubmissionFormFieldsLoading(true)); @@ -47,8 +48,8 @@ export const SubmissionFormFieldsService: Function = (url: string) => { }; }; -export const SubmissionTableService: Function = (url: string, payload: filterType) => { - return async (dispatch) => { +export const SubmissionTableService = (url: string, payload: filterType) => { + return async (dispatch: AppDispatch) => { const fetchSubmissionTable = async (url: string, payload: filterType) => { try { dispatch(SubmissionActions.SetSubmissionTableLoading(true)); @@ -66,8 +67,8 @@ export const SubmissionTableService: Function = (url: string, payload: filterTyp }; }; -export const UpdateReviewStateService: Function = (url: string, payload: object) => { - return async (dispatch) => { +export const UpdateReviewStateService = (url: string, payload: object) => { + return async (dispatch: AppDispatch) => { const UpdateReviewState = async (url: string) => { try { dispatch(SubmissionActions.UpdateReviewStateLoading(true)); @@ -90,8 +91,8 @@ export const UpdateReviewStateService: Function = (url: string, payload: object) }; }; -export const MappedVsValidatedTaskService: Function = (url: string) => { - return async (dispatch) => { +export const MappedVsValidatedTaskService = (url: string) => { + return async (dispatch: AppDispatch) => { const MappedVsValidatedTask = async (url: string) => { try { dispatch(SubmissionActions.SetMappedVsValidatedTaskLoading(true)); diff --git a/src/frontend/src/api/TaskEvent.ts b/src/frontend/src/api/TaskEvent.ts index e225f442d8..1c6d0e6de5 100755 --- a/src/frontend/src/api/TaskEvent.ts +++ b/src/frontend/src/api/TaskEvent.ts @@ -1,3 +1,4 @@ +import { AppDispatch } from '@/store/Store'; import { ProjectActions } from '@/store/slices/ProjectSlice'; import { HomeActions } from '@/store/slices/HomeSlice'; import CoreModules from '@/shared/CoreModules'; @@ -33,7 +34,7 @@ export const CreateTaskEvent = ( style?: any, feature?: Record, ) => { - return async (dispatch) => { + return async (dispatch: AppDispatch) => { const updateTask = async ( url: string, body: any, diff --git a/src/frontend/src/api/task.ts b/src/frontend/src/api/task.ts index 8487ce6793..5f2a7dabed 100644 --- a/src/frontend/src/api/task.ts +++ b/src/frontend/src/api/task.ts @@ -1,8 +1,9 @@ +import { AppDispatch } from '@/store/Store'; import CoreModules from '@/shared/CoreModules'; import { TaskActions } from '@/store/slices/TaskSlice'; -export const getDownloadProjectSubmission: Function = (url: string, projectName: string) => { - return async (dispatch) => { +export const getDownloadProjectSubmission = (url: string, projectName: string) => { + return async (dispatch: AppDispatch) => { const params = new URLSearchParams(url.split('?')[1]); const isExportJson = params.get('export_json'); const isJsonOrCsv = isExportJson === 'true' ? 'json' : 'csv'; @@ -36,8 +37,8 @@ export const getDownloadProjectSubmission: Function = (url: string, projectName: }; }; -export const ConvertXMLToJOSM: Function = (url: string, projectBbox: number[]) => { - return async (dispatch) => { +export const ConvertXMLToJOSM = (url: string, projectBbox: number[]) => { + return async (dispatch: AppDispatch) => { dispatch(TaskActions.SetConvertXMLToJOSMLoading(true)); const getConvertXMLToJOSM = async (url) => { try { diff --git a/src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx b/src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx index 371f6af937..6752ce4861 100644 --- a/src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx +++ b/src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx @@ -1,5 +1,4 @@ import React, { useEffect } from 'react'; -import { useDispatch } from 'react-redux'; import { useNavigate, useParams } from 'react-router-dom'; import InputTextField from '@/components/common/InputTextField'; import TextArea from '@/components/common/TextArea'; @@ -10,10 +9,10 @@ import { RejectOrganizationService, } from '@/api/OrganisationService'; import { OrganisationAction } from '@/store/slices/organisationSlice'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; const OrganizationForm = () => { - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const params = useParams(); const navigate = useNavigate(); const organizationId = params.id; diff --git a/src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx b/src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx index a83b200db2..3c89728b54 100644 --- a/src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx +++ b/src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx @@ -6,16 +6,15 @@ import Button from '@/components/common/Button'; import useForm from '@/hooks/useForm'; import ConsentDetailsValidation from '@/components/CreateEditOrganization/validation/ConsentDetailsValidation'; import { useNavigate } from 'react-router-dom'; -import { useDispatch } from 'react-redux'; import { OrganisationAction } from '@/store/slices/organisationSlice'; import InstructionsSidebar from '@/components/CreateEditOrganization/InstructionsSidebar'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import useDocumentTitle from '@/utilfunctions/useDocumentTitle'; const ConsentDetailsForm = () => { useDocumentTitle('Consent Details Form'); const navigate = useNavigate(); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const consentDetailsFormData = useAppSelector((state) => state.organisation.consentDetailsFormData); diff --git a/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationForm.tsx b/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationForm.tsx index fc5d11bc88..d4d5b21f47 100644 --- a/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationForm.tsx +++ b/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationForm.tsx @@ -5,11 +5,9 @@ import TextArea from '@/components/common/TextArea'; import { useNavigate, useSearchParams } from 'react-router-dom'; import { OrganisationAction } from '@/store/slices/organisationSlice'; import useForm from '@/hooks/useForm'; -import CoreModules from '@/shared/CoreModules'; import AssetModules from '@/shared/AssetModules'; import OrganizationDetailsValidation from '@/components/CreateEditOrganization/validation/OrganizationDetailsValidation'; import RadioButton from '@/components/common/RadioButton'; -import { useDispatch } from 'react-redux'; import { GetIndividualOrganizationService, PatchOrganizationDataService, @@ -19,7 +17,7 @@ import { diffObject } from '@/utilfunctions/compareUtils'; import InstructionsSidebar from '@/components/CreateEditOrganization/InstructionsSidebar'; import { CustomCheckbox } from '@/components/common/Checkbox'; import { organizationTypeOptionsType } from '@/models/organisation/organisationModel'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; const organizationTypeOptions: organizationTypeOptionsType[] = [ { name: 'osm_community', value: 'OSM_COMMUNITY', label: 'OSM Community' }, @@ -31,7 +29,7 @@ const organizationTypeOptions: organizationTypeOptionsType[] = [ const CreateEditOrganizationForm = ({ organizationId }: { organizationId: string }) => { const navigate = useNavigate(); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const [searchParams, setSearchParams] = useSearchParams(); const inputFileRef = useRef(null); const organisationFormData = useAppSelector((state) => state.organisation.organisationFormData); diff --git a/src/frontend/src/components/DataConflation/ConflationMap/index.tsx b/src/frontend/src/components/DataConflation/ConflationMap/index.tsx index 06ee9b24ad..accdd0fc15 100644 --- a/src/frontend/src/components/DataConflation/ConflationMap/index.tsx +++ b/src/frontend/src/components/DataConflation/ConflationMap/index.tsx @@ -3,14 +3,13 @@ import { MapContainer as MapComponent, useOLMap } from '@/components/MapComponen import LayerSwitcherControl from '@/components/MapComponent/OpenLayersComponent/LayerSwitcher/index'; import MapLegend from '@/components/DataConflation/ConflationMap/MapLegend'; import Button from '@/components/common/Button'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import { VectorLayer } from '@/components/MapComponent/OpenLayersComponent/Layers'; -import { useDispatch } from 'react-redux'; import { DataConflationActions } from '@/store/slices/DataConflationSlice'; import LayerSwitchMenu from '@/components/MapComponent/OpenLayersComponent/LayerSwitcher/LayerSwitchMenu'; const ConflationMap = () => { - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const submissionConflationGeojson = useAppSelector((state) => state.dataconflation.submissionConflationGeojson); const submissionConflationGeojsonLoading = useAppSelector( diff --git a/src/frontend/src/components/DialogTaskActions.tsx b/src/frontend/src/components/DialogTaskActions.tsx index a81d211feb..e3fe1a46f8 100755 --- a/src/frontend/src/components/DialogTaskActions.tsx +++ b/src/frontend/src/components/DialogTaskActions.tsx @@ -9,7 +9,7 @@ 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 { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import { taskSubmissionInfoType } from '@/models/task/taskModel'; type dialogPropType = { @@ -25,7 +25,7 @@ type taskListStateType = { export default function Dialog({ taskId, feature }: dialogPropType) { const navigate = useNavigate(); - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const params = CoreModules.useParams(); const geojsonStyles = MapStyles(); diff --git a/src/frontend/src/components/GenerateBasemap.tsx b/src/frontend/src/components/GenerateBasemap.tsx index e7080ede3c..39451266f9 100644 --- a/src/frontend/src/components/GenerateBasemap.tsx +++ b/src/frontend/src/components/GenerateBasemap.tsx @@ -1,17 +1,18 @@ import React, { useEffect, useState } from 'react'; +import { useParams } from 'react-router-dom'; import CoreModules from '@/shared/CoreModules'; import AssetModules from '@/shared/AssetModules'; import { CommonActions } from '@/store/slices/CommonSlice'; import environment from '@/environment'; -import { DownloadBasemapFile, GenerateProjectTiles, GetTilesList, ProjectById } from '@/api/Project'; +import { DownloadBasemapFile, GenerateProjectTiles, GetTilesList } from '@/api/Project'; import { ProjectActions } from '@/store/slices/ProjectSlice'; import { projectInfoType } from '@/models/project/projectModel'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; const GenerateBasemap = ({ projectInfo }: { projectInfo: Partial }) => { - const dispatch = CoreModules.useAppDispatch(); - const params = CoreModules.useParams(); - const id: string = params.id; + const dispatch = useAppDispatch(); + const params = useParams(); + const id: string | undefined = params.id; const [selectedTileSource, setSelectedTileSource] = useState(''); const [selectedOutputFormat, setSelectedOutputFormat] = useState(''); @@ -78,6 +79,7 @@ const GenerateBasemap = ({ projectInfo }: { projectInfo: Partial { + if (!id) return; const currentErrors = generateProjectTilesValidation(); if (currentErrors.length === 0) { dispatch( diff --git a/src/frontend/src/components/LoginPopup.tsx b/src/frontend/src/components/LoginPopup.tsx index bcc9ef4247..3ab0259926 100644 --- a/src/frontend/src/components/LoginPopup.tsx +++ b/src/frontend/src/components/LoginPopup.tsx @@ -1,11 +1,11 @@ import React from 'react'; import CoreModules from '@/shared/CoreModules'; import { Modal } from '@/components/common/Modal'; -import { useDispatch } from 'react-redux'; import { useLocation } from 'react-router-dom'; import { LoginActions } from '@/store/slices/LoginSlice'; import { osmLoginRedirect } from '@/utilfunctions/login'; import OSMImg from '@/assets/images/osm-logo.png'; +import { useAppDispatch } from '@/types/reduxTypes'; type loginOptionsType = { id: string; @@ -25,7 +25,7 @@ const loginOptions: loginOptionsType[] = [ ]; const LoginPopup = () => { - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const location = useLocation(); const from = location.state?.from || '/'; diff --git a/src/frontend/src/components/ManageProject/DeleteTab/ProjectDeleteTab.tsx b/src/frontend/src/components/ManageProject/DeleteTab/ProjectDeleteTab.tsx index a7e53d97a7..a7b9230180 100644 --- a/src/frontend/src/components/ManageProject/DeleteTab/ProjectDeleteTab.tsx +++ b/src/frontend/src/components/ManageProject/DeleteTab/ProjectDeleteTab.tsx @@ -1,11 +1,11 @@ import React, { useState } from 'react'; import Button from '@/components/common/Button'; import { Modal } from '@/components/common/Modal'; -import CoreModules from '@/shared/CoreModules'; import { DeleteProjectService } from '@/api/CreateProjectService'; +import { useAppDispatch } from '@/types/reduxTypes'; const FormUpdateTab = ({ projectId, projectName }) => { - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const [showModal, setShowModal] = useState(false); const [confirmProjectName, setConfirmProjectName] = useState(''); const [confirmEnabled, setConfirmEnabled] = useState(false); diff --git a/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx b/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx index cf1bb79a67..3d3fd11e0c 100644 --- a/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx +++ b/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import UploadArea from '../../common/UploadArea'; import Button from '../../common/Button'; import { CustomSelect } from '@/components/common/Select'; @@ -18,7 +18,7 @@ type FileType = { const FormUpdateTab = ({ projectId }) => { useDocumentTitle('Manage Project: Form Update'); - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const [uploadForm, setUploadForm] = useState(null); const [error, setError] = useState({ formError: '', categoryError: '' }); diff --git a/src/frontend/src/components/ManageProject/EditTab/ProjectDescriptionTab.tsx b/src/frontend/src/components/ManageProject/EditTab/ProjectDescriptionTab.tsx index 7dc4f730d5..4fed115f85 100644 --- a/src/frontend/src/components/ManageProject/EditTab/ProjectDescriptionTab.tsx +++ b/src/frontend/src/components/ManageProject/EditTab/ProjectDescriptionTab.tsx @@ -7,15 +7,14 @@ import { CreateProjectActions } from '@/store/slices/CreateProjectSlice'; import { PatchProjectDetails } from '@/api/CreateProjectService'; import { diffObject } from '@/utilfunctions/compareUtils'; import useForm from '@/hooks/useForm'; -import CoreModules from '@/shared/CoreModules'; import { CommonActions } from '@/store/slices/CommonSlice'; import RichTextEditor from '@/components/common/Editor/Editor'; import useDocumentTitle from '@/utilfunctions/useDocumentTitle'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; const ProjectDescriptionTab = ({ projectId }) => { useDocumentTitle('Manage Project: Project Description'); - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const editProjectDetails = useAppSelector((state) => state.createproject.editProjectDetails); const editProjectDetailsLoading = useAppSelector((state) => state.createproject.editProjectDetailsLoading); diff --git a/src/frontend/src/components/ProjectDetailsV2/Comments.tsx b/src/frontend/src/components/ProjectDetailsV2/Comments.tsx index a736ef6742..45784eafaa 100644 --- a/src/frontend/src/components/ProjectDetailsV2/Comments.tsx +++ b/src/frontend/src/components/ProjectDetailsV2/Comments.tsx @@ -2,16 +2,15 @@ import React, { useEffect, useState } from 'react'; import RichTextEditor from '@/components/common/Editor/Editor'; import Button from '@/components/common/Button'; import { PostProjectComments, GetProjectComments } from '@/api/Project'; -import { useDispatch } from 'react-redux'; import { useParams } from 'react-router-dom'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import AssetModules from '@/shared/AssetModules'; import { ProjectCommentsSekeletonLoader } from '@/components/ProjectDetailsV2/SkeletonLoader'; import { ProjectActions } from '@/store/slices/ProjectSlice'; import { CommonActions } from '@/store/slices/CommonSlice'; const Comments = () => { - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const params = useParams(); const projectId: any = params.id; diff --git a/src/frontend/src/components/ProjectDetailsV2/FeatureSelectionPopup.tsx b/src/frontend/src/components/ProjectDetailsV2/FeatureSelectionPopup.tsx index dfed73cbdc..3cd2ce1a37 100644 --- a/src/frontend/src/components/ProjectDetailsV2/FeatureSelectionPopup.tsx +++ b/src/frontend/src/components/ProjectDetailsV2/FeatureSelectionPopup.tsx @@ -2,8 +2,7 @@ import React from 'react'; import { Link, useParams } from 'react-router-dom'; -import { useAppSelector } from '@/types/reduxTypes'; -import CoreModules from '@/shared/CoreModules'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import AssetModules from '@/shared/AssetModules'; import Button from '@/components/common/Button'; import { ProjectActions } from '@/store/slices/ProjectSlice'; @@ -15,7 +14,7 @@ type FeatureSelectionPopupPropType = { }; const FeatureSelectionPopup = ({ featureProperties, taskId }: FeatureSelectionPopupPropType) => { - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const params = useParams(); const taskModalStatus = useAppSelector((state) => state.project.taskModalStatus); const entityOsmMap = useAppSelector((state) => state.project.entityOsmMap); diff --git a/src/frontend/src/components/ProjectDetailsV2/MapControlComponent.tsx b/src/frontend/src/components/ProjectDetailsV2/MapControlComponent.tsx index 4c60c0de47..7b94ff20b9 100644 --- a/src/frontend/src/components/ProjectDetailsV2/MapControlComponent.tsx +++ b/src/frontend/src/components/ProjectDetailsV2/MapControlComponent.tsx @@ -2,9 +2,8 @@ import React, { useState } from 'react'; import AssetModules from '@/shared/AssetModules'; // @ts-ignore import VectorLayer from 'ol/layer/Vector'; -import CoreModules from '@/shared/CoreModules.js'; import { ProjectActions } from '@/store/slices/ProjectSlice'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import { useLocation } from 'react-router-dom'; import ProjectOptions from '@/components/ProjectDetailsV2/ProjectOptions'; import useOutsideClick from '@/hooks/useOutsideClick'; @@ -43,7 +42,7 @@ const btnList = [ const MapControlComponent = ({ map, projectName, pmTileLayerUrl }: mapControlComponentType) => { const { pathname } = useLocation(); - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const [toggleCurrentLoc, setToggleCurrentLoc] = useState(false); const geolocationStatus = useAppSelector((state) => state.project.geolocationStatus); const defaultTheme = useAppSelector((state) => state.theme.hotTheme); diff --git a/src/frontend/src/components/ProjectDetailsV2/MobileFooter.tsx b/src/frontend/src/components/ProjectDetailsV2/MobileFooter.tsx index ad4cf7ef5c..d6dcaaa7d6 100644 --- a/src/frontend/src/components/ProjectDetailsV2/MobileFooter.tsx +++ b/src/frontend/src/components/ProjectDetailsV2/MobileFooter.tsx @@ -1,8 +1,7 @@ import React from 'react'; import AssetModules from '@/shared/AssetModules.js'; -import CoreModules from '@/shared/CoreModules'; import { ProjectActions } from '@/store/slices/ProjectSlice'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import { Link, useParams } from 'react-router-dom'; type footerItemType = { @@ -12,7 +11,7 @@ type footerItemType = { }; const MobileFooter = () => { - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const params = useParams(); const mobileFooterSelection = useAppSelector((state) => state.project.mobileFooterSelection); const taskModalStatus = useAppSelector((state) => state.project.taskModalStatus); diff --git a/src/frontend/src/components/ProjectDetailsV2/ProjectOptions.tsx b/src/frontend/src/components/ProjectDetailsV2/ProjectOptions.tsx index d6709b3654..29c9ad7485 100644 --- a/src/frontend/src/components/ProjectDetailsV2/ProjectOptions.tsx +++ b/src/frontend/src/components/ProjectDetailsV2/ProjectOptions.tsx @@ -3,7 +3,7 @@ import CoreModules from '@/shared/CoreModules'; import AssetModules from '@/shared/AssetModules'; import { DownloadDataExtract, DownloadProjectForm, DownloadSubmissionGeojson } from '@/api/Project'; import Button from '@/components/common/Button'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import { GetProjectQrCode } from '@/api/Files'; type projectOptionPropTypes = { @@ -11,7 +11,7 @@ type projectOptionPropTypes = { }; const ProjectOptions = ({ projectName }: projectOptionPropTypes) => { - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const params = CoreModules.useParams(); const downloadProjectFormLoading = useAppSelector((state) => state.project.downloadProjectFormLoading); diff --git a/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx b/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx index acb14404ed..ea7cebed9d 100644 --- a/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx +++ b/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx @@ -6,7 +6,7 @@ import AssetModules from '@/shared/AssetModules'; import { ProjectActions } from '@/store/slices/ProjectSlice'; import environment from '@/environment'; import QrcodeComponent from '@/components/QrcodeComponent'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; type TaskSelectionPopupPropType = { taskId: number | null; @@ -16,7 +16,7 @@ type TaskSelectionPopupPropType = { const TaskSelectionPopup = ({ taskId, body, feature }: TaskSelectionPopupPropType) => { const params = CoreModules.useParams(); - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const currentProjectId: string = params.id; const [task_state, set_task_state] = useState('UNLOCKED_TO_MAP'); diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx index 7686f85dd4..21b6d09675 100644 --- a/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx +++ b/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx @@ -18,7 +18,7 @@ import { SubmissionsTableSkeletonLoader } from '@/components/ProjectSubmissions/ import UpdateReviewStatusModal from '@/components/ProjectSubmissions/UpdateReviewStatusModal'; import { reviewStateData } from '@/constants/projectSubmissionsConstants'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import { task_state, task_event, entity_state } from '@/types/enums'; import { filterType } from '@/store/types/ISubmissions'; import { SubmissionActions } from '@/store/slices/SubmissionSlice'; @@ -44,7 +44,7 @@ const SubmissionsTable = ({ toggleView }) => { const [filter, setFilter] = useState(initialFilterState); const { windowSize } = windowDimention(); - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const params = CoreModules.useParams(); const navigate = useNavigate(); @@ -202,19 +202,19 @@ const SubmissionsTable = ({ toggleView }) => { ); }; - const handleDownload = (downloadType) => { + const handleDownload = (downloadType: 'csv' | 'json') => { if (downloadType === 'csv') { dispatch( getDownloadProjectSubmission( `${import.meta.env.VITE_API_URL}/submission/download?project_id=${projectId}&export_json=false`, - projectInfo.name, + projectInfo.name!, ), ); } else if (downloadType === 'json') { dispatch( getDownloadProjectSubmission( `${import.meta.env.VITE_API_URL}/submission/download?project_id=${projectId}&export_json=true`, - projectInfo.name, + projectInfo.name!, ), ); } diff --git a/src/frontend/src/components/ProjectSubmissions/TaskSubmissions.tsx b/src/frontend/src/components/ProjectSubmissions/TaskSubmissions.tsx index 5705546ae3..941c9a74c1 100644 --- a/src/frontend/src/components/ProjectSubmissions/TaskSubmissions.tsx +++ b/src/frontend/src/components/ProjectSubmissions/TaskSubmissions.tsx @@ -7,11 +7,11 @@ import CoreModules from '@/shared/CoreModules.js'; import { TaskCardSkeletonLoader } from '@/components/ProjectSubmissions/ProjectSubmissionsSkeletonLoader'; import { taskSubmissionInfoType } from '@/models/task/taskModel'; import { useParams, useSearchParams } from 'react-router-dom'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; const TaskSubmissions = () => { const params = useParams(); - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const [searchParams, setSearchParams] = useSearchParams(); const taskInfo = useAppSelector((state) => state.task.taskInfo); const taskLoading = useAppSelector((state) => state.task.taskLoading); diff --git a/src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx b/src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx index e65240be7b..54e5863239 100644 --- a/src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx +++ b/src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx @@ -21,7 +21,7 @@ import { } from '@/models/task/taskModel'; import { isValidUrl } from '@/utilfunctions/urlChecker'; import { projectInfoType, projectTaskBoundriesType } from '@/models/project/projectModel'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import LayerSwitchMenu from '../MapComponent/OpenLayersComponent/LayerSwitcher/LayerSwitchMenu'; import { defaultStyles } from '@/components/MapComponent/OpenLayersComponent/helpers/styleUtils'; @@ -74,7 +74,7 @@ const getChoroplethColor = (value, colorCodesOutput) => { }; const TaskSubmissionsMap = () => { - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const [taskBoundaries, setTaskBoundaries] = useState(null); const [dataExtractUrl, setDataExtractUrl] = useState(null); diff --git a/src/frontend/src/components/ProjectSubmissions/UpdateReviewStatusModal.tsx b/src/frontend/src/components/ProjectSubmissions/UpdateReviewStatusModal.tsx index 5a3c73ceff..5a17f4877c 100644 --- a/src/frontend/src/components/ProjectSubmissions/UpdateReviewStatusModal.tsx +++ b/src/frontend/src/components/ProjectSubmissions/UpdateReviewStatusModal.tsx @@ -1,13 +1,13 @@ import React, { useEffect, useState } from 'react'; import { Modal } from '@/components/common/Modal'; -import { useDispatch } from 'react-redux'; import { SubmissionActions } from '@/store/slices/SubmissionSlice'; import { reviewListType } from '@/models/submission/submissionModel'; import { UpdateReviewStateService } from '@/api/SubmissionService'; import TextArea from '../common/TextArea'; import Button from '../common/Button'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import { PostProjectComments } from '@/api/Project'; +import { task_event } from '@/types/enums'; // Note these id values must be camelCase to match what ODK Central requires const reviewList: reviewListType[] = [ @@ -32,7 +32,7 @@ const reviewList: reviewListType[] = [ ]; const UpdateReviewStatusModal = () => { - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const [noteComments, setNoteComments] = useState(''); const [reviewStatus, setReviewStatus] = useState(''); const updateReviewStatusModal = useAppSelector((state) => state.submission.updateReviewStatusModal); @@ -43,7 +43,12 @@ const UpdateReviewStatusModal = () => { }, [updateReviewStatusModal.reviewState]); const handleStatusUpdate = async () => { - if (!updateReviewStatusModal.instanceId || !updateReviewStatusModal.projectId || !updateReviewStatusModal.taskId) { + if ( + !updateReviewStatusModal.instanceId || + !updateReviewStatusModal.projectId || + !updateReviewStatusModal.taskId || + !updateReviewStatusModal?.taskUid + ) { return; } @@ -63,9 +68,9 @@ const UpdateReviewStatusModal = () => { PostProjectComments( `${import.meta.env.VITE_API_URL}/tasks/${updateReviewStatusModal?.taskUid}/event?project_id=${updateReviewStatusModal?.projectId}`, { - task_id: updateReviewStatusModal?.taskUid, + task_id: +updateReviewStatusModal?.taskUid, comment: `${updateReviewStatusModal?.instanceId}-SUBMISSION_INST-${noteComments}`, - event: 'COMMENT', + event: task_event.COMMENT, }, ), ); diff --git a/src/frontend/src/components/common/Editor/Editor.tsx b/src/frontend/src/components/common/Editor/Editor.tsx index 896f28610f..2b482a3e9a 100644 --- a/src/frontend/src/components/common/Editor/Editor.tsx +++ b/src/frontend/src/components/common/Editor/Editor.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { useEditor, EditorContent, FloatingMenu, BubbleMenu } from '@tiptap/react'; +import { useEditor, EditorContent } from '@tiptap/react'; import { Toolbar } from '@/components/common/Editor/Toolbar'; import StarterKit from '@tiptap/starter-kit'; import ListItem from '@tiptap/extension-list-item'; @@ -13,8 +13,7 @@ import Link from '@tiptap/extension-link'; import Image from '@tiptap/extension-image'; import './editorStyles.scss'; import { ProjectActions } from '@/store/slices/ProjectSlice'; -import { useDispatch } from 'react-redux'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; type RichTextEditorProps = { editorHtmlContent: string; @@ -48,7 +47,7 @@ const RichTextEditor = ({ isEditorEmpty, className, }: RichTextEditorProps) => { - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const editor = useEditor({ extensions, content: editorHtmlContent, diff --git a/src/frontend/src/components/common/StepSwitcher.tsx b/src/frontend/src/components/common/StepSwitcher.tsx index 47bcf627ba..31270c64cf 100644 --- a/src/frontend/src/components/common/StepSwitcher.tsx +++ b/src/frontend/src/components/common/StepSwitcher.tsx @@ -1,9 +1,9 @@ import React from 'react'; 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'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; type stepSwitcherPropType = { data: ICreateProjectSteps[]; @@ -19,9 +19,9 @@ interface IIndividualStep { } const StepSwitcher = ({ data, flag, switchSteps }: stepSwitcherPropType) => { - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const navigate = useNavigate(); - const currentStep = CoreModules.useAppSelector((state) => state.common.currentStepFormStep[flag]); + const currentStep = useAppSelector((state) => state.common.currentStepFormStep[flag]); const toggleStep = (step: IIndividualStep) => { dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: step.step })); diff --git a/src/frontend/src/components/common/UploadArea.tsx b/src/frontend/src/components/common/UploadArea.tsx index 2c6649966f..433aca2120 100644 --- a/src/frontend/src/components/common/UploadArea.tsx +++ b/src/frontend/src/components/common/UploadArea.tsx @@ -1,8 +1,8 @@ import React, { useEffect, useRef, useState } from 'react'; -import { useDispatch } from 'react-redux'; +import { v4 as uuidv4 } from 'uuid'; import { CommonActions } from '@/store/slices/CommonSlice'; import AssetModules from '@/shared/AssetModules'; -import { v4 as uuidv4 } from 'uuid'; +import { useAppDispatch } from '@/types/reduxTypes'; type FileType = { id: string; @@ -23,7 +23,7 @@ type uploadAreaPropType = { const UploadArea = ({ title, label, acceptedInput, data, onUploadFile, multiple, filterKey }: uploadAreaPropType) => { const fileInputRef = useRef(null); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const [selectedFiles, setSelectedFiles] = useState([]); function isEmpty(obj) { diff --git a/src/frontend/src/components/createnewproject/DataExtract.tsx b/src/frontend/src/components/createnewproject/DataExtract.tsx index a7f6f45869..c15fa4a158 100644 --- a/src/frontend/src/components/createnewproject/DataExtract.tsx +++ b/src/frontend/src/components/createnewproject/DataExtract.tsx @@ -2,13 +2,12 @@ import React, { useEffect, useState } from 'react'; import axios from 'axios'; import { geojson as fgbGeojson } from 'flatgeobuf'; import Button from '@/components/common/Button'; -import { useDispatch } from 'react-redux'; import { CommonActions } from '@/store/slices/CommonSlice'; import RadioButton from '@/components/common/RadioButton'; import { useNavigate } from 'react-router-dom'; import { CreateProjectActions } from '@/store/slices/CreateProjectSlice'; import useForm from '@/hooks/useForm'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import { FormCategoryService } from '@/api/CreateProjectService'; import FileInputComponent from '@/components/common/FileInputComponent'; import DataExtractValidation from '@/components/createnewproject/validation/DataExtractValidation'; @@ -32,7 +31,7 @@ const DataExtract = ({ setAdditionalFeature, }) => { useDocumentTitle('Create Project: Map Data'); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const navigate = useNavigate(); const [extractWays, setExtractWays] = useState(''); const projectDetails: any = useAppSelector((state) => state.createproject.projectDetails); diff --git a/src/frontend/src/components/createnewproject/MapControlComponent.tsx b/src/frontend/src/components/createnewproject/MapControlComponent.tsx index f62b9e6da4..464238d8cd 100644 --- a/src/frontend/src/components/createnewproject/MapControlComponent.tsx +++ b/src/frontend/src/components/createnewproject/MapControlComponent.tsx @@ -1,14 +1,11 @@ -import React, { useState } from 'react'; -import VectorLayer from 'ol/layer/Vector'; +import React from 'react'; import AssetModules from '@/shared/AssetModules'; -import CoreModules from '@/shared/CoreModules.js'; import { CreateProjectActions } from '@/store/slices/CreateProjectSlice'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; const MapControlComponent = ({ map, hasEditUndo }) => { - const dispatch = CoreModules.useAppDispatch(); - const toggleSplittedGeojsonEdit = CoreModules.useAppSelector( - (state) => state.createproject.toggleSplittedGeojsonEdit, - ); + const dispatch = useAppDispatch(); + const toggleSplittedGeojsonEdit = useAppSelector((state) => state.createproject.toggleSplittedGeojsonEdit); const btnList = [ { id: 'Add', diff --git a/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx b/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx index 7a255f774d..a0c1f96549 100644 --- a/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx +++ b/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx @@ -2,9 +2,8 @@ import TextArea from '@/components/common/TextArea'; import InputTextField from '@/components/common/InputTextField'; import React, { useEffect, useState } from 'react'; import { CreateProjectActions } from '@/store/slices/CreateProjectSlice'; -import { useDispatch } from 'react-redux'; import { useNavigate } from 'react-router-dom'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import useForm from '@/hooks/useForm'; import CreateProjectValidation from '@/components/createnewproject/validation/CreateProjectValidation'; import Button from '@/components/common/Button'; @@ -19,7 +18,7 @@ import DescriptionSection from '@/components/createnewproject/Description'; const ProjectDetailsForm = ({ flag }) => { useDocumentTitle('Create Project: Project Details'); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const navigate = useNavigate(); const projectDetails = useAppSelector((state) => state.createproject.projectDetails); diff --git a/src/frontend/src/components/createnewproject/SelectForm.tsx b/src/frontend/src/components/createnewproject/SelectForm.tsx index 73d98849c6..8d26ad3d3c 100644 --- a/src/frontend/src/components/createnewproject/SelectForm.tsx +++ b/src/frontend/src/components/createnewproject/SelectForm.tsx @@ -1,12 +1,11 @@ import React, { useEffect } from 'react'; -import { useDispatch } from 'react-redux'; import { CommonActions } from '@/store/slices/CommonSlice'; import Button from '@/components/common/Button'; import { CustomSelect } from '@/components/common/Select'; import { useNavigate } from 'react-router-dom'; import { CreateProjectActions } from '@/store/slices/CreateProjectSlice'; import useForm from '@/hooks/useForm'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import FileInputComponent from '@/components/common/FileInputComponent'; import SelectFormValidation from '@/components/createnewproject/validation/SelectFormValidation'; import { FormCategoryService, ValidateCustomForm } from '@/api/CreateProjectService'; @@ -18,7 +17,7 @@ import DescriptionSection from '@/components/createnewproject/Description'; const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) => { useDocumentTitle('Create Project: Upload Survey'); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const navigate = useNavigate(); const projectDetails = useAppSelector((state) => state.createproject.projectDetails); diff --git a/src/frontend/src/components/createnewproject/SplitTasks.tsx b/src/frontend/src/components/createnewproject/SplitTasks.tsx index 5c7b9be1f5..7109947cb6 100644 --- a/src/frontend/src/components/createnewproject/SplitTasks.tsx +++ b/src/frontend/src/components/createnewproject/SplitTasks.tsx @@ -2,14 +2,13 @@ import React, { useEffect, useState } from 'react'; import Button from '@/components/common/Button'; import RadioButton from '@/components/common/RadioButton'; import AssetModules from '@/shared/AssetModules.js'; -import { useDispatch } from 'react-redux'; import { CommonActions } from '@/store/slices/CommonSlice'; import { useNavigate } from 'react-router-dom'; import { CreateProjectActions } from '@/store/slices/CreateProjectSlice'; import useForm from '@/hooks/useForm'; import DefineTaskValidation from '@/components/createnewproject/validation/DefineTaskValidation'; import NewDefineAreaMap from '@/views/NewDefineAreaMap'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import { CreateProjectService, GetDividedTaskFromGeojson, @@ -22,7 +21,7 @@ import DescriptionSection from '@/components/createnewproject/Description'; const SplitTasks = ({ flag, setGeojsonFile, customDataExtractUpload, additionalFeature, customFormFile }) => { useDocumentTitle('Create Project: Split Tasks'); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const navigate = useNavigate(); const [taskGenerationStatus, setTaskGenerationStatus] = useState(false); diff --git a/src/frontend/src/components/createnewproject/UploadArea.tsx b/src/frontend/src/components/createnewproject/UploadArea.tsx index 6b590e775c..52563cff45 100644 --- a/src/frontend/src/components/createnewproject/UploadArea.tsx +++ b/src/frontend/src/components/createnewproject/UploadArea.tsx @@ -1,14 +1,13 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { CommonActions } from '@/store/slices/CommonSlice'; import Button from '@/components/common/Button'; -import { useDispatch } from 'react-redux'; import RadioButton from '@/components/common/RadioButton'; import AssetModules from '@/shared/AssetModules.js'; import DrawSvg from '@/components/createnewproject/DrawSvg'; import { useNavigate } from 'react-router-dom'; import { CreateProjectActions } from '@/store/slices/CreateProjectSlice'; import useForm from '@/hooks/useForm'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import UploadAreaValidation from '@/components/createnewproject/validation/UploadAreaValidation'; import FileInputComponent from '@/components/common/FileInputComponent'; import NewDefineAreaMap from '@/views/NewDefineAreaMap'; @@ -44,7 +43,7 @@ const uploadAreaOptions: uploadAreaOptionsType[] = [ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomDataExtractUpload, setAdditionalFeature }) => { useDocumentTitle('Create Project: Project Area'); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const navigate = useNavigate(); const [isGeojsonWGS84, setIsGeojsonWG84] = useState(true); diff --git a/src/frontend/src/components/home/ExploreProjectCard.tsx b/src/frontend/src/components/home/ExploreProjectCard.tsx index 79f61f2acf..862f95238e 100755 --- a/src/frontend/src/components/home/ExploreProjectCard.tsx +++ b/src/frontend/src/components/home/ExploreProjectCard.tsx @@ -5,12 +5,13 @@ import { HomeActions } from '@/store/slices/HomeSlice'; import { projectType } from '@/models/home/homeModel'; import CoreModules from '@/shared/CoreModules'; import AssetModules from '@/shared/AssetModules'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; +import { useNavigate } from 'react-router-dom'; //Explore Project Card Model to be rendered in home view export default function ExploreProjectCard({ data }: { data: projectType }) { - const navigate = CoreModules.useNavigate(); - const dispatch = CoreModules.useAppDispatch(); + const navigate = useNavigate(); + const dispatch = useAppDispatch(); const defaultTheme = useAppSelector((state) => state.theme.hotTheme); diff --git a/src/frontend/src/components/home/HomePageFilters.tsx b/src/frontend/src/components/home/HomePageFilters.tsx index eea5b1064b..25b155cc4a 100755 --- a/src/frontend/src/components/home/HomePageFilters.tsx +++ b/src/frontend/src/components/home/HomePageFilters.tsx @@ -3,7 +3,7 @@ import CoreModules from '@/shared/CoreModules'; import AssetModules from '@/shared/AssetModules'; import Switch from '@/components/common/Switch'; import { HomeActions } from '@/store/slices/HomeSlice'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; type homePageFiltersPropType = { onSearch: (data: string) => void; @@ -12,7 +12,7 @@ type homePageFiltersPropType = { //Home Filter const HomePageFilters = ({ onSearch, filteredProjectCount }: homePageFiltersPropType) => { - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const showMapStatus = useAppSelector((state) => state.home.showMapStatus); const homeProjectPagination = useAppSelector((state) => state.home.homeProjectPagination); diff --git a/src/frontend/src/utilities/CustomDrawer.tsx b/src/frontend/src/utilities/CustomDrawer.tsx index 6000c47a81..82baffaf45 100644 --- a/src/frontend/src/utilities/CustomDrawer.tsx +++ b/src/frontend/src/utilities/CustomDrawer.tsx @@ -1,6 +1,5 @@ -import React, { useState } from 'react'; +import React from 'react'; import SwipeableDrawer from '@mui/material/SwipeableDrawer'; -import Button from '@/components/common/Button'; import CoreModules from '@/shared/CoreModules'; import AssetModules from '@/shared/AssetModules'; import { NavLink } from 'react-router-dom'; @@ -8,7 +7,7 @@ import { revokeCookies } from '@/utilfunctions/login'; import { CommonActions } from '@/store/slices/CommonSlice'; import { LoginActions } from '@/store/slices/LoginSlice'; import { ProjectActions } from '@/store/slices/ProjectSlice'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; type customDrawerType = { open: boolean; @@ -70,7 +69,7 @@ const MenuItems = [ ]; export default function CustomDrawer({ open, size, type, onClose, setOpen }: customDrawerType) { - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const defaultTheme = useAppSelector((state) => state.theme.hotTheme); const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails); diff --git a/src/frontend/src/utilities/PrimaryAppBar.tsx b/src/frontend/src/utilities/PrimaryAppBar.tsx index 60ad39516b..7e87d5eb27 100755 --- a/src/frontend/src/utilities/PrimaryAppBar.tsx +++ b/src/frontend/src/utilities/PrimaryAppBar.tsx @@ -11,12 +11,13 @@ import { useState } from 'react'; import { Link, useLocation, useNavigate } from 'react-router-dom'; import logo from '@/assets/images/hotLog.png'; import LoginPopup from '@/components/LoginPopup'; +import { useAppDispatch } from '@/types/reduxTypes'; export default function PrimaryAppBar() { const location = useLocation(); const navigate = useNavigate(); const [open, setOpen] = React.useState(false); - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const defaultTheme: any = CoreModules.useAppSelector((state) => state.theme.hotTheme); const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails); const handleOpenDrawer = () => { diff --git a/src/frontend/src/views/CreateEditOrganization.tsx b/src/frontend/src/views/CreateEditOrganization.tsx index 1a60aba24d..7aebd04969 100644 --- a/src/frontend/src/views/CreateEditOrganization.tsx +++ b/src/frontend/src/views/CreateEditOrganization.tsx @@ -3,13 +3,12 @@ import CoreModules from '@/shared/CoreModules'; import CreateEditOrganizationHeader from '@/components/CreateEditOrganization/CreateEditOrganizationHeader'; import ConsentDetailsForm from '@/components/CreateEditOrganization/ConsentDetailsForm'; import CreateEditOrganizationForm from '@/components/CreateEditOrganization/CreateEditOrganizationForm'; -import { useDispatch } from 'react-redux'; import { OrganisationAction } from '@/store/slices/organisationSlice'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; const CreateEditOrganization = () => { const params = CoreModules.useParams(); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const organizationId: string = params.id; const consentApproval = useAppSelector((state) => state.organisation.consentApproval); diff --git a/src/frontend/src/views/CreateNewProject.tsx b/src/frontend/src/views/CreateNewProject.tsx index a7381d00ff..ba3eae4402 100644 --- a/src/frontend/src/views/CreateNewProject.tsx +++ b/src/frontend/src/views/CreateNewProject.tsx @@ -8,14 +8,13 @@ import DataExtract from '@/components/createnewproject/DataExtract'; import SplitTasks from '@/components/createnewproject/SplitTasks'; import SelectForm from '@/components/createnewproject/SelectForm'; import { useLocation, useNavigate } from 'react-router-dom'; -import { useDispatch } from 'react-redux'; import { CommonActions } from '@/store/slices/CommonSlice'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import Prompt from '@/hooks/Prompt'; const CreateNewProject = () => { const location = useLocation(); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const navigate = useNavigate(); const isUnsavedChanges = useAppSelector((state) => state.createproject.isUnsavedChanges); diff --git a/src/frontend/src/views/DataConflation.tsx b/src/frontend/src/views/DataConflation.tsx index fa69121dd2..f39eab949f 100644 --- a/src/frontend/src/views/DataConflation.tsx +++ b/src/frontend/src/views/DataConflation.tsx @@ -2,13 +2,12 @@ import React, { useEffect } from 'react'; import ConflationMap from '@/components/DataConflation/ConflationMap'; import TaskInfo from '@/components/DataConflation/TaskInfo'; import SubmissionConflation from '@/components/DataConflation/SubmissionConflation'; -import { useDispatch } from 'react-redux'; import { SubmissionConflationGeojsonService } from '@/api/DataConflation'; import { useParams } from 'react-router-dom'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; const DataConflation = () => { - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const { projectId, taskId } = useParams(); const selectedFeatureOSMId = useAppSelector((state) => state.dataconflation.selectedFeatureOSMId); diff --git a/src/frontend/src/views/Home.tsx b/src/frontend/src/views/Home.tsx index 21a9f185d1..c38fd65f8a 100755 --- a/src/frontend/src/views/Home.tsx +++ b/src/frontend/src/views/Home.tsx @@ -8,12 +8,12 @@ import HomePageFilters from '@/components/home/HomePageFilters'; import CoreModules from '@/shared/CoreModules'; import ProjectListMap from '@/components/home/ProjectListMap'; import { projectType } from '@/models/home/homeModel'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import useDocumentTitle from '@/utilfunctions/useDocumentTitle'; const Home = () => { useDocumentTitle('Explore Projects'); - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const { type } = windowDimention(); const [searchQuery, setSearchQuery] = useState(''); diff --git a/src/frontend/src/views/MainView.tsx b/src/frontend/src/views/MainView.tsx index 3c1b92154a..243b7ebb51 100755 --- a/src/frontend/src/views/MainView.tsx +++ b/src/frontend/src/views/MainView.tsx @@ -7,11 +7,11 @@ import { CommonActions } from '@/store/slices/CommonSlice'; import Loader from '@/utilities/AppLoader'; import MappingHeader from '@/utilities/MappingHeader'; import { useLocation, useSearchParams } from 'react-router-dom'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import ProjectNotFound from './ProjectNotFound'; const MainView = () => { - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const { pathname } = useLocation(); const [searchParams, setSearchParams] = useSearchParams(); const { windowSize } = windowDimention(); diff --git a/src/frontend/src/views/ManageProject.tsx b/src/frontend/src/views/ManageProject.tsx index e3804e2231..1474358f85 100644 --- a/src/frontend/src/views/ManageProject.tsx +++ b/src/frontend/src/views/ManageProject.tsx @@ -1,12 +1,12 @@ -import EditTab from '../components/ManageProject/EditTab'; -import UserTab from '../components/ManageProject/UserTab'; -import DeleteTab from '../components/ManageProject/DeleteTab'; import React, { useEffect, useState } from 'react'; -import AssetModules from '../shared/AssetModules.js'; +import { useNavigate } from 'react-router-dom'; +import EditTab from '@/components/ManageProject/EditTab'; +import UserTab from '@/components/ManageProject/UserTab'; +import DeleteTab from '@/components/ManageProject/DeleteTab'; +import AssetModules from '@/shared/AssetModules.js'; import CoreModules from '@/shared/CoreModules'; import { GetIndividualProjectDetails } from '@/api/CreateProjectService'; -import { useNavigate } from 'react-router-dom'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; const tabList = [ // { id: 'users', name: 'USERS', icon: }, @@ -14,7 +14,7 @@ const tabList = [ { id: 'delete', name: 'DELETE', icon: }, ]; const ManageProject = () => { - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const params = CoreModules.useParams(); const navigate = useNavigate(); const projectId = params.id; diff --git a/src/frontend/src/views/Organisation.tsx b/src/frontend/src/views/Organisation.tsx index 15c5df4238..903c8980dd 100644 --- a/src/frontend/src/views/Organisation.tsx +++ b/src/frontend/src/views/Organisation.tsx @@ -7,12 +7,12 @@ import { GetOrganisationDataModel } from '@/models/organisation/organisationMode import OrganisationGridCard from '@/components/organisation/OrganisationGridCard'; import OrganisationCardSkeleton from '@/components/organisation/OrganizationCardSkeleton'; import windowDimention from '@/hooks/WindowDimension'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import useDocumentTitle from '@/utilfunctions/useDocumentTitle'; const Organisation = () => { useDocumentTitle('Organizations'); - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const { type } = windowDimention(); const [searchKeyword, setSearchKeyword] = useState(''); diff --git a/src/frontend/src/views/OsmAuth.tsx b/src/frontend/src/views/OsmAuth.tsx index ea43a4c8b0..0cc4f19b4d 100644 --- a/src/frontend/src/views/OsmAuth.tsx +++ b/src/frontend/src/views/OsmAuth.tsx @@ -1,13 +1,13 @@ import React, { useEffect, useState } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; -import CoreModules from '@/shared/CoreModules.js'; import { LoginActions } from '@/store/slices/LoginSlice'; import { getUserDetailsFromApi } from '@/utilfunctions/login'; +import { useAppDispatch } from '@/types/reduxTypes'; function OsmAuth() { const navigate = useNavigate(); const location = useLocation(); - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const [isReadyToRedirect, setIsReadyToRedirect] = useState(false); const [error, setError] = useState(null); const requestedPath = sessionStorage.getItem('requestedPath'); diff --git a/src/frontend/src/views/ProjectDetailsV2.tsx b/src/frontend/src/views/ProjectDetailsV2.tsx index a8f79fe0cf..291df1b692 100644 --- a/src/frontend/src/views/ProjectDetailsV2.tsx +++ b/src/frontend/src/views/ProjectDetailsV2.tsx @@ -17,7 +17,7 @@ import MobileFooter from '@/components/ProjectDetailsV2/MobileFooter'; import MobileActivitiesContents from '@/components/ProjectDetailsV2/MobileActivitiesContents'; import BottomSheet from '@/components/common/BottomSheet'; import MobileProjectInfoContent from '@/components/ProjectDetailsV2/MobileProjectInfoContent'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; import ProjectOptions from '@/components/ProjectDetailsV2/ProjectOptions'; import { MapContainer as MapComponent, useOLMap } from '@/components/MapComponent/OpenLayersComponent'; import LayerSwitcherControl from '@/components/MapComponent/OpenLayersComponent/LayerSwitcher/index'; @@ -30,7 +30,7 @@ import Button from '@/components/common/Button'; import ProjectInfo from '@/components/ProjectDetailsV2/ProjectInfo'; import useOutsideClick from '@/hooks/useOutsideClick'; import { isValidUrl } from '@/utilfunctions/urlChecker'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import Comments from '@/components/ProjectDetailsV2/Comments'; import { Geolocation } from '@/utilfunctions/Geolocation'; import Instructions from '@/components/ProjectDetailsV2/Instructions'; @@ -38,8 +38,8 @@ import useDocumentTitle from '@/utilfunctions/useDocumentTitle'; const ProjectDetailsV2 = () => { useDocumentTitle('Project Details'); - const dispatch = CoreModules.useAppDispatch(); - const params = CoreModules.useParams(); + const dispatch = useAppDispatch(); + const params = useParams(); const navigate = useNavigate(); const { windowSize } = WindowDimension(); const [divRef, toggle, handleToggle] = useOutsideClick(); @@ -51,7 +51,7 @@ const ProjectDetailsV2 = () => { const [taskBoundariesLayer, setTaskBoundariesLayer] = useState>(null); const customBasemapUrl = useAppSelector((state) => state.project.customBasemapUrl); const [viewState, setViewState] = useState('project_info'); - const projectId: string = params.id; + const projectId: string | undefined = params.id; const defaultTheme = useAppSelector((state) => state.theme.hotTheme); const state = useAppSelector((state) => state.project); const projectInfo = useAppSelector((state) => state.home.selectedProject); @@ -92,6 +92,8 @@ const ProjectDetailsV2 = () => { //Fetch project for the first time useEffect(() => { + if (!projectId) return; + dispatch(ProjectActions.SetNewProjectTrigger()); if (state.projectTaskBoundries.findIndex((project) => project.id.toString() === projectId) == -1) { dispatch(ProjectActions.SetProjectTaskBoundries([])); diff --git a/src/frontend/src/views/ProjectSubmissions.tsx b/src/frontend/src/views/ProjectSubmissions.tsx index 1ae89db99e..3224c642d7 100644 --- a/src/frontend/src/views/ProjectSubmissions.tsx +++ b/src/frontend/src/views/ProjectSubmissions.tsx @@ -3,16 +3,15 @@ import AssetModules from '@/shared/AssetModules'; import ProjectInfo from '@/components/ProjectSubmissions/ProjectInfo.js'; import SubmissionsInfographics from '@/components/ProjectSubmissions/SubmissionsInfographics.js'; import SubmissionsTable from '@/components/ProjectSubmissions/SubmissionsTable.js'; -import CoreModules from '@/shared/CoreModules'; import { ProjectActions } from '@/store/slices/ProjectSlice'; import { ProjectById, GetEntityStatusList } from '@/api/Project'; -import { useSearchParams } from 'react-router-dom'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useParams, useSearchParams } from 'react-router-dom'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import { ProjectContributorsService, MappedVsValidatedTaskService } from '@/api/SubmissionService'; const ProjectSubmissions = () => { - const dispatch = CoreModules.useAppDispatch(); - const params = CoreModules.useParams(); + const dispatch = useAppDispatch(); + const params = useParams(); const [searchParams, setSearchParams] = useSearchParams(); const projectId = params.projectId; @@ -24,8 +23,9 @@ const ProjectSubmissions = () => { //Fetch project for the first time useEffect(() => { + if (!projectId) return; dispatch(ProjectActions.SetNewProjectTrigger()); - if (state.projectTaskBoundries.findIndex((project) => project.id == projectId) == -1) { + if (state.projectTaskBoundries.findIndex((project) => project.id == +projectId) == -1) { dispatch(ProjectActions.SetProjectTaskBoundries([])); dispatch(ProjectById(projectId)); } else { @@ -35,7 +35,7 @@ const ProjectSubmissions = () => { if (Object.keys(state.projectInfo).length == 0) { dispatch(ProjectActions.SetProjectInfo(projectInfo)); } else { - if (state.projectInfo.id != projectId) { + if (state.projectInfo.id != +projectId) { dispatch(ProjectActions.SetProjectInfo(projectInfo)); } } diff --git a/src/frontend/src/views/SubmissionDetails.tsx b/src/frontend/src/views/SubmissionDetails.tsx index d4ebb214af..7289271a9c 100644 --- a/src/frontend/src/views/SubmissionDetails.tsx +++ b/src/frontend/src/views/SubmissionDetails.tsx @@ -6,7 +6,7 @@ import { GetSubmissionDashboard } from '@/api/Project'; import Button from '@/components/common/Button'; import { SubmissionActions } from '@/store/slices/SubmissionSlice'; import UpdateReviewStatusModal from '@/components/ProjectSubmissions/UpdateReviewStatusModal'; -import { useAppSelector } from '@/types/reduxTypes'; +import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import { useNavigate } from 'react-router-dom'; import useDocumentTitle from '@/utilfunctions/useDocumentTitle'; import Accordion from '@/components/common/Accordion'; @@ -85,7 +85,7 @@ function removeNullValues(obj: Record) { const SubmissionDetails = () => { useDocumentTitle('Submission Instance'); - const dispatch = CoreModules.useAppDispatch(); + const dispatch = useAppDispatch(); const params = CoreModules.useParams(); const navigate = useNavigate();