Merge pull request #1293 from NSUWAL123/feat-ts-type-add-organization…

…-createProject

Feat ts type add organization create project

src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx

@@ -9,22 +9,22 @@ import {
   GetIndividualOrganizationService,
   RejectOrganizationService,
 } from '@/api/OrganisationService';
-import CoreModules from '@/shared/CoreModules';
 import { OrganisationAction } from '@/store/slices/organisationSlice';
+import { useAppSelector } from '@/types/reduxTypes';
 
 const OrganizationForm = () => {
   const dispatch = useDispatch();
   const params = useParams();
   const navigate = useNavigate();
   const organizationId = params.id;
-  const organisationFormData: any = CoreModules.useAppSelector((state) => state.organisation.organisationFormData);
-  const organizationApproving: any = CoreModules.useAppSelector(
+  const organisationFormData = useAppSelector((state) => state.organisation.organisationFormData);
+  const organizationApproving = useAppSelector(
     (state) => state.organisation.organizationApprovalStatus.organizationApproving,
   );
-  const organizationRejecting: any = CoreModules.useAppSelector(
+  const organizationRejecting = useAppSelector(
     (state) => state.organisation.organizationApprovalStatus.organizationRejecting,
   );
-  const organizationApprovalSuccess: any = CoreModules.useAppSelector(
+  const organizationApprovalSuccess = useAppSelector(
     (state) => state.organisation.organizationApprovalStatus.isSuccess,
   );
 

src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx

@@ -1,21 +1,21 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { consentQuestions } from '@/constants/ConsentQuestions';
 import { CustomCheckbox } from '@/components/common/Checkbox';
 import RadioButton from '@/components/common/RadioButton';
 import Button from '@/components/common/Button';
 import useForm from '@/hooks/useForm';
-import CoreModules from '@/shared/CoreModules';
 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';
 
 const ConsentDetailsForm = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
 
-  const consentDetailsFormData: any = CoreModules.useAppSelector((state) => state.organisation.consentDetailsFormData);
+  const consentDetailsFormData = useAppSelector((state) => state.organisation.consentDetailsFormData);
 
   const submission = () => {
     dispatch(OrganisationAction.SetConsentApproval(true));

src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationForm.tsx

@@ -18,31 +18,25 @@ import {
 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';
 
-type optionsType = {
-  name: string;
-  value: string;
-  label: string;
-};
-
-const organizationTypeOptions: optionsType[] = [
+const organizationTypeOptions: organizationTypeOptionsType[] = [
   { name: 'osm_community', value: 'osm_community', label: 'OSM Community' },
   { name: 'company', value: 'company', label: 'Company' },
   { name: 'non_profit', value: 'non_profit', label: 'Non-profit' },
   { name: 'university', value: 'university', label: 'University' },
   { name: 'other', value: 'other', label: 'Other' },
 ];
 
-const CreateEditOrganizationForm = ({ organizationId }) => {
+const CreateEditOrganizationForm = ({ organizationId }: { organizationId: string }) => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const [searchParams, setSearchParams] = useSearchParams();
   const inputFileRef = useRef<any>(null);
-  const organisationFormData: any = CoreModules.useAppSelector((state) => state.organisation.organisationFormData);
-  const postOrganisationDataLoading: boolean = CoreModules.useAppSelector(
-    (state) => state.organisation.postOrganisationDataLoading,
-  );
-  const postOrganisationData: any = CoreModules.useAppSelector((state) => state.organisation.postOrganisationData);
+  const organisationFormData = useAppSelector((state) => state.organisation.organisationFormData);
+  const postOrganisationDataLoading = useAppSelector((state) => state.organisation.postOrganisationDataLoading);
+  const postOrganisationData = useAppSelector((state) => state.organisation.postOrganisationData);
   const [previewSource, setPreviewSource] = useState<any>('');
 
   const submission = () => {

src/frontend/src/components/ProjectDetailsV2/ActivitiesPanel.tsx

@@ -1,14 +1,12 @@
 /* eslint-disable react/jsx-key */
 import React, { useEffect, useState } from 'react';
 import environment from '@/environment';
-import CoreModules from '@/shared/CoreModules';
 import AssetModules from '@/shared/AssetModules';
-import { CustomSelect } from '@/components/common/Select';
-import profilePic from '@/assets/images/project_icon.png';
 import { Feature } from 'ol';
 import { Polygon } from 'ol/geom';
 import { ActivitiesCardSkeletonLoader, ShowingCountSkeletonLoader } from '@/components/ProjectDetailsV2/SkeletonLoader';
 import { taskHistoryListType } from '@/models/project/projectModel';
+import { useAppSelector } from '@/types/reduxTypes';
 
 const sortByList = [
   { id: 'activities', name: 'Activities' },
@@ -25,7 +23,7 @@ const ActivitiesPanel = ({ defaultTheme, state, params, map, view, mapDivPostion
   const [allActivities, setAllActivities] = useState(0);
   const [sortBy, setSortBy] = useState<string | null>(null);
   const [showShortBy, setShowSortBy] = useState(false);
-  const projectDetailsLoading = CoreModules.useAppSelector((state) => state?.project?.projectDetailsLoading);
+  const projectDetailsLoading = useAppSelector((state) => state?.project?.projectDetailsLoading);
 
   const handleOnchange = (event) => {
     setSearchText(event.target.value);

src/frontend/src/components/ProjectDetailsV2/MapControlComponent.tsx

@@ -3,6 +3,7 @@ import AssetModules from '@/shared/AssetModules';
 import VectorLayer from 'ol/layer/Vector';
 import CoreModules from '@/shared/CoreModules.js';
 import { ProjectActions } from '@/store/slices/ProjectSlice';
+import { useAppSelector } from '@/types/reduxTypes';
 
 const MapControlComponent = ({ map }) => {
   const btnList = [
@@ -25,7 +26,7 @@ const MapControlComponent = ({ map }) => {
   ];
   const dispatch = CoreModules.useAppDispatch();
   const [toggleCurrentLoc, setToggleCurrentLoc] = useState(false);
-  const geolocationStatus = CoreModules.useAppSelector((state) => state.project.geolocationStatus);
+  const geolocationStatus = useAppSelector((state) => state.project.geolocationStatus);
   const handleOnClick = (btnId) => {
     if (btnId === 'add') {
       const actualZoom = map.getView().getZoom();

src/frontend/src/components/ProjectDetailsV2/MobileActivitiesContents.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import ActivitiesPanel from '@/components/ProjectDetailsV2/ActivitiesPanel';
 import CoreModules from '@/shared/CoreModules';
+import { useAppSelector } from '@/types/reduxTypes';
 
 const MobileActivitiesContents = ({ map, mainView, mapDivPostion }) => {
   const params = CoreModules.useParams();
-  const state = CoreModules.useAppSelector((state) => state.project);
-  const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
+  const state = useAppSelector((state) => state.project);
+  const defaultTheme = useAppSelector((state) => state.theme.hotTheme);
 
   return (
     <div className="fmtm-w-full fmtm-bg-white fmtm-mb-[12vh]">

src/frontend/src/components/ProjectDetailsV2/MobileFooter.tsx

@@ -2,10 +2,11 @@ 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';
 
 const MobileFooter = () => {
   const dispatch = CoreModules.useAppDispatch();
-  const mobileFooterSelection = CoreModules.useAppSelector((state) => state.project.mobileFooterSelection);
+  const mobileFooterSelection = useAppSelector((state) => state.project.mobileFooterSelection);
 
   const footerItem = [
     {

src/frontend/src/components/ProjectDetailsV2/ProjectInfo.tsx

@@ -2,15 +2,16 @@ import React, { useEffect, useRef, useState } from 'react';
 import AssetModules from '@/shared/AssetModules.js';
 import ProjectIcon from '@/assets/images/project_icon.png';
 import CoreModules from '@/shared/CoreModules';
+import { useAppSelector } from '@/types/reduxTypes';
 
 const ProjectInfo = () => {
   const paraRef = useRef<any>(null);
   const [seeMore, setSeeMore] = useState(false);
   const [descLines, setDescLines] = useState(1);
-  const projectInfo = CoreModules.useAppSelector((state) => state?.project?.projectInfo);
-  const projectDetailsLoading = CoreModules.useAppSelector((state) => state?.project?.projectDetailsLoading);
-  const projectDashboardDetail = CoreModules.useAppSelector((state) => state?.project?.projectDashboardDetail);
-  const projectDashboardLoading = CoreModules.useAppSelector((state) => state?.project?.projectDashboardLoading);
+  const projectInfo = useAppSelector((state) => state?.project?.projectInfo);
+  const projectDetailsLoading = useAppSelector((state) => state?.project?.projectDetailsLoading);
+  const projectDashboardDetail = useAppSelector((state) => state?.project?.projectDashboardDetail);
+  const projectDashboardLoading = useAppSelector((state) => state?.project?.projectDashboardLoading);
 
   useEffect(() => {
     if (paraRef.current) {

src/frontend/src/components/ProjectDetailsV2/TaskSectionPopup.tsx

@@ -7,7 +7,7 @@ import { ProjectFilesById } from '@/api/Files';
 import QrcodeComponent from '@/components/QrcodeComponent';
 
 type TaskSectionPopupPropType = {
-  taskId: string | undefined | number;
+  taskId: number | null;
   body: React.JSX.Element;
   feature: any;
 };

src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx

@@ -18,9 +18,8 @@ import { ConvertXMLToJOSM, getDownloadProjectSubmission, getDownloadProjectSubmi
 import { Modal } from '@/components/common/Modal';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import filterParams from '@/utilfunctions/filterParams';
-import { downloadProjectFormLoadingType, projectInfoType } from '@/models/project/projectModel';
-import { submissionFormFieldsTypes } from '@/models/submission/submissionModel';
-import { taskInfoType } from '@/models/task/taskModel';
+import { projectInfoType } from '@/models/project/projectModel';
+import { useAppSelector } from '@/types/reduxTypes';
 
 type filterType = {
   task_id: string | null;
@@ -47,25 +46,15 @@ const SubmissionsTable = ({ toggleView }) => {
 
   const encodedId = params.projectId;
   const decodedId = environment.decode(encodedId);
-  const submissionFormFields: submissionFormFieldsTypes[] = CoreModules.useAppSelector(
-    (state) => state.submission.submissionFormFields,
-  );
-  const submissionTableData: any = CoreModules.useAppSelector((state) => state.submission.submissionTableData);
-  const submissionFormFieldsLoading: boolean = CoreModules.useAppSelector(
-    (state) => state.submission.submissionFormFieldsLoading,
-  );
-  const submissionTableDataLoading: boolean = CoreModules.useAppSelector(
-    (state) => state.submission.submissionTableDataLoading,
-  );
-  const submissionTableRefreshing: boolean = CoreModules.useAppSelector(
-    (state) => state.submission.submissionTableRefreshing,
-  );
-  const taskInfo: taskInfoType[] = CoreModules.useAppSelector((state) => state.task.taskInfo);
+  const submissionFormFields = useAppSelector((state) => state.submission.submissionFormFields);
+  const submissionTableData = useAppSelector((state) => state.submission.submissionTableData);
+  const submissionFormFieldsLoading = useAppSelector((state) => state.submission.submissionFormFieldsLoading);
+  const submissionTableDataLoading = useAppSelector((state) => state.submission.submissionTableDataLoading);
+  const submissionTableRefreshing = useAppSelector((state) => state.submission.submissionTableRefreshing);
+  const taskInfo = useAppSelector((state) => state.task.taskInfo);
   const projectInfo: projectInfoType = CoreModules.useAppSelector((state) => state.project.projectInfo);
-  const josmEditorError: string = CoreModules.useAppSelector((state) => state.task.josmEditorError);
-  const downloadSubmissionLoading: downloadProjectFormLoadingType = CoreModules.useAppSelector(
-    (state) => state.task.downloadSubmissionLoading,
-  );
+  const josmEditorError = useAppSelector((state) => state.task.josmEditorError);
+  const downloadSubmissionLoading = useAppSelector((state) => state.task.downloadSubmissionLoading);
   const [numberOfFilters, setNumberOfFilters] = useState<number>(0);
   const [paginationPage, setPaginationPage] = useState<number>(1);
   const [submittedBy, setSubmittedBy] = useState<string | null>(null);
@@ -168,6 +157,7 @@ const SubmissionsTable = ({ toggleView }) => {
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | React.KeyboardEvent<HTMLInputElement>,
     newPage: number,
   ) => {
+    if (!submissionTableData?.pagination?.pages) return;
     if (newPage + 1 > submissionTableData?.pagination?.pages || newPage + 1 < 1) {
       setPaginationPage(paginationPage);
       return;
@@ -466,7 +456,7 @@ const SubmissionsTable = ({ toggleView }) => {
           <CoreModules.TablePagination
             component="div"
             count={submissionTableData?.pagination?.total}
-            page={submissionTableData?.pagination?.page - 1}
+            page={submissionTableData?.pagination?.page ? submissionTableData?.pagination?.page - 1 : 1}
             onPageChange={handleChangePage}
             rowsPerPage={submissionTableData?.pagination?.per_page}
             rowsPerPageOptions={[]}

src/frontend/src/components/ProjectSubmissions/TaskSubmissions.tsx

@@ -7,14 +7,15 @@ import CoreModules from '@/shared/CoreModules.js';
 import { TaskCardSkeletonLoader } from '@/components/ProjectSubmissions/ProjectSubmissionsSkeletonLoader';
 import { taskInfoType } from '@/models/task/taskModel';
 import { useSearchParams } from 'react-router-dom';
+import { useAppSelector } from '@/types/reduxTypes';
 
 const TaskSubmissions = () => {
   const dispatch = CoreModules.useAppDispatch();
   const [searchParams, setSearchParams] = useSearchParams();
-  const taskInfo: taskInfoType[] = CoreModules.useAppSelector((state) => state.task.taskInfo);
-  const taskLoading: boolean = CoreModules.useAppSelector((state) => state.task.taskLoading);
-  const [searchedTaskId, setSearchedTaskId] = useState<string>('');
-  const [debouncedSearchedTaskId, setDebouncedSearchedTaskId] = useState<string>('');
+  const taskInfo = useAppSelector((state) => state.task.taskInfo);
+  const taskLoading = useAppSelector((state) => state.task.taskLoading);
+  const [searchedTaskId, setSearchedTaskId] = useState('');
+  const [debouncedSearchedTaskId, setDebouncedSearchedTaskId] = useState('');
   const [filteredTaskInfo, setFilteredTaskInfo] = useState<taskInfoType[]>([]);
 
   const zoomToTask = (taskId) => {

src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx

@@ -25,6 +25,7 @@ import {
 } from '@/models/task/taskModel';
 import { isValidUrl } from '@/utilfunctions/urlChecker';
 import { projectInfoType, projectTaskBoundriesType } from '@/models/project/projectModel';
+import { useAppSelector } from '@/types/reduxTypes';
 
 export const defaultStyles = {
   lineColor: '#000000',
@@ -120,7 +121,7 @@ const TaskSubmissionsMap = () => {
     (state) => state.project.projectTaskBoundries,
   );
 
-  const taskInfo: taskInfoType[] = CoreModules.useAppSelector((state) => state.task.taskInfo);
+  const taskInfo = useAppSelector((state) => state.task.taskInfo);
   const federalWiseProjectCount: federalWiseProjectCount[] = taskInfo?.map((task) => ({
     code: task.task_id,
     count: task.submission_count,

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

@@ -166,8 +166,8 @@ const DataExtract = ({ flag, customLineUpload, setCustomLineUpload, customPolygo
     if (!file) return;
     // Parse file as JSON
     const fileReader = new FileReader();
-    const fileLoaded = await new Promise((resolve) => {
-      fileReader.onload = (e) => resolve(e.target.result);
+    const fileLoaded: any = await new Promise((resolve) => {
+      fileReader.onload = (e) => resolve(e.target?.result);
       fileReader.readAsText(file, 'UTF-8');
     });
     const parsedJSON = JSON.parse(fileLoaded);

src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx

@@ -20,8 +20,8 @@ const ProjectDetailsForm = ({ flag }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
-  const projectDetails: any = useAppSelector((state) => state.createproject.projectDetails);
-  const organisationListData: any = useAppSelector((state) => state.createproject.organisationList);
+  const projectDetails = useAppSelector((state) => state.createproject.projectDetails);
+  const organisationListData = useAppSelector((state) => state.createproject.organisationList);
   const organisationList: organizationDropdownType[] = organisationListData.map((item) => ({
     label: item.name,
     value: item.id,

src/frontend/src/components/createnewproject/SelectForm.tsx

@@ -22,7 +22,7 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
-  const projectDetails: any = useAppSelector((state) => state.createproject.projectDetails);
+  const projectDetails = useAppSelector((state) => state.createproject.projectDetails);
   const drawnGeojson = useAppSelector((state) => state.createproject.drawnGeojson);
   const dataExtractGeojson = useAppSelector((state) => state.createproject.dataExtractGeojson);
   const customFileValidity = useAppSelector((state) => state.createproject.customFileValidity);

src/frontend/src/components/createnewproject/UploadArea.tsx

@@ -37,7 +37,7 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomLineUpload, se
   // const [uploadAreaFile, setUploadAreaFile] = useState(null);
   const [isGeojsonWGS84, setIsGeojsonWG84] = useState(true);
 
-  const projectDetails: any = useAppSelector((state) => state.createproject.projectDetails);
+  const projectDetails = useAppSelector((state) => state.createproject.projectDetails);
   const drawnGeojson = useAppSelector((state) => state.createproject.drawnGeojson);
   const uploadAreaSelection = useAppSelector((state) => state.createproject.uploadAreaSelection);
   const drawToggle = useAppSelector((state) => state.createproject.drawToggle);
@@ -76,8 +76,8 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomLineUpload, se
   const convertFileToGeojson = async (file) => {
     if (!file) return;
     const fileReader = new FileReader();
-    const fileLoaded = await new Promise((resolve) => {
-      fileReader.onload = (e) => resolve(e.target.result);
+    const fileLoaded: any = await new Promise((resolve) => {
+      fileReader.onload = (e) => resolve(e.target?.result);
       fileReader.readAsText(file, 'UTF-8');
     });
     const parsedJSON = JSON.parse(fileLoaded);

src/frontend/src/components/home/HomePageFilters.tsx

@@ -5,6 +5,7 @@ import AssetModules from '@/shared/AssetModules';
 import Switch from '@/components/common/Switch';
 import { HomeActions } from '@/store/slices/HomeSlice';
 import { homeProjectPaginationTypes } from '@/models/home/homeModel';
+import { useAppSelector } from '@/types/reduxTypes';
 
 type homePageFiltersPropType = {
   onSearch: (data: string) => void;
@@ -17,11 +18,9 @@ const HomePageFilters = ({ onSearch, filteredProjectCount, totalProjectCount }:
   const [searchQuery, setSearchQuery] = useState('');
   const dispatch = CoreModules.useAppDispatch();
 
-  const defaultTheme: any = CoreModules.useAppSelector((state) => state.theme.hotTheme);
-  const showMapStatus: boolean = CoreModules.useAppSelector((state) => state.home.showMapStatus);
-  const homeProjectPagination: homeProjectPaginationTypes = CoreModules.useAppSelector(
-    (state) => state.home.homeProjectPagination,
-  );
+  const defaultTheme: any = useAppSelector((state) => state.theme.hotTheme);
+  const showMapStatus = useAppSelector((state) => state.home.showMapStatus);
+  const homeProjectPagination = useAppSelector((state) => state.home.homeProjectPagination);
 
   const { windowSize } = windowDimention();
   const searchableInnerStyle: any = {

src/frontend/src/models/organisation/organisationModel.ts

@@ -29,3 +29,9 @@ export interface GetOrganisationDataModel {
   url: string;
   approved: boolean;
 }
+
+export type organizationTypeOptionsType = {
+  name: string;
+  value: string;
+  label: string;
+};

src/frontend/src/models/project/projectModel.ts

@@ -79,6 +79,7 @@ export type projectDashboardDetailTypes = {
   total_submission: number | null;
   total_contributors: number | null;
   last_active: string;
+  organisation: string;
 };
 
 export type projectTaskBoundriesType = {