chore(frontend): more TS Migrations!

hotosm · Aug 21, 2024 · 463f7b5 · 463f7b5
1 parent 67a4f7b
commit 463f7b5
Show file tree

Hide file tree

Showing 46 changed files with 211 additions and 144 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,7 +14,7 @@
     "@rapideditor/rapid": "^2.3.1",
     "@redux-devtools/extension": "^3.3.0",
     "@sentry/react": "^7.102.0",
-    "@tanstack/react-query": "^4.29.7",
+    "@tanstack/react-query": "^5.52.0",
     "@tanstack/react-query-devtools": "^4.29.7",
     "@tmcw/togeojson": "^5.8.1",
     "@turf/area": "^6.5.0",
@@ -38,7 +38,7 @@
     "humanize-duration": "^3.31.0",
     "mapbox-gl": "^1.13.3",
     "mapbox-gl-draw-rectangle-mode": "^1.0.4",
-    "marked": "^4.3.0",
+    "marked": "^14.0.0",
     "osmtogeojson": "^3.0.0-beta.5",
     "prop-types": "^15.8.1",
     "query-string": "^8.2.0",
@@ -120,6 +120,7 @@
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/chart.js": "^2.9.41",
+    "@types/dompurify": "^3.0.5",
     "@types/react-test-renderer": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "combine-react-intl-messages": "^4.0.0",

diff --git a/frontend/src/api/organisations.js → frontend/src/api/organisations.ts b/frontend/src/api/organisations.js → frontend/src/api/organisations.ts
@@ -2,11 +2,14 @@ import { useQuery } from '@tanstack/react-query';
 import { useSelector } from 'react-redux';
 
 import api from './apiClient';
+import { RootStore } from '../store';
 
-export const useUserOrganisationsQuery = (userId) => {
-  const token = useSelector((state) => state.auth.token);
+export const useUserOrganisationsQuery = (userId: string | number) => {
+  const token = useSelector((state: RootStore) => state.auth.token);
 
-  const fetchOrganisations = ({ signal }) => {
+  const fetchOrganisations = ({ signal }: {
+    signal: AbortSignal;
+  }) => {
     return api(token).get(`organisations/`, {
       signal,
       params: {

diff --git a/frontend/src/api/projects.js → frontend/src/api/projects.ts b/frontend/src/api/projects.js → frontend/src/api/projects.ts
@@ -1,17 +1,18 @@
 import axios from 'axios';
 import { subMonths, format } from 'date-fns';
-import { useQuery } from '@tanstack/react-query';
+import { QueryKey, QueryOptions, useQuery } from '@tanstack/react-query';
 import { useSelector } from 'react-redux';
 
 import { remapParamsToAPI } from '../utils/remapParamsToAPI';
 import api from './apiClient';
 import { UNDERPASS_URL } from '../config';
+import { RootStore } from '../store';
 
-export const useProjectsQuery = (fullProjectsQuery, action, queryOptions) => {
-  const token = useSelector((state) => state.auth.token);
-  const locale = useSelector((state) => state.preferences['locale']);
+export const useProjectsQuery = (fullProjectsQuery: string, action: string, queryOptions: QueryOptions) => {
+  const token = useSelector((state: RootStore) => state.auth.token);
+  const locale = useSelector((state: RootStore) => state.preferences['locale']);
 
-  const fetchProjects = (signal, queryKey) => {
+  const fetchProjects = async (signal: AbortSignal | undefined, queryKey: QueryKey) => {
     const [, fullProjectsQuery, action] = queryKey;
     const paramsRemapped = remapParamsToAPI(fullProjectsQuery, backendToQueryConversion);
     // it's needed in order to query by action when the user goes to /explore page
@@ -23,7 +24,7 @@ export const useProjectsQuery = (fullProjectsQuery, action, queryOptions) => {
       paramsRemapped.lastUpdatedTo = format(subMonths(Date.now(), 6), 'yyyy-MM-dd');
     }
 
-    return api(token, locale)
+    return await api(token, locale)
       .get('projects/', {
         signal,
         params: paramsRemapped,
@@ -39,10 +40,12 @@ export const useProjectsQuery = (fullProjectsQuery, action, queryOptions) => {
   });
 };
 
-export const useProjectQuery = (projectId) => {
-  const token = useSelector((state) => state.auth.token);
-  const locale = useSelector((state) => state.preferences['locale']);
-  const fetchProject = ({ signal }) => {
+export const useProjectQuery = (projectId: string) => {
+  const token = useSelector((state: RootStore) => state.auth.token);
+  const locale = useSelector((state: RootStore) => state.preferences['locale']);
+  const fetchProject = ({ signal }: {
+    signal: AbortSignal;
+  }) => {
     return api(token, locale).get(`projects/${projectId}/`, {
       signal,
     });
@@ -53,11 +56,13 @@ export const useProjectQuery = (projectId) => {
     queryFn: fetchProject,
   });
 };
-export const useProjectSummaryQuery = (projectId, otherOptions = {}) => {
-  const token = useSelector((state) => state.auth.token);
-  const locale = useSelector((state) => state.preferences['locale']);
+export const useProjectSummaryQuery = (projectId: string, otherOptions = {}) => {
+  const token = useSelector((state: RootStore) => state.auth.token);
+  const locale = useSelector((state: RootStore) => state.preferences['locale']);
 
-  const fetchProjectSummary = ({ signal }) => {
+  const fetchProjectSummary = ({ signal }: {
+    signal: AbortSignal;
+  }) => {
     return api(token, locale).get(`projects/${projectId}/queries/summary/`, {
       signal,
     });
@@ -71,8 +76,10 @@ export const useProjectSummaryQuery = (projectId, otherOptions = {}) => {
   });
 };
 
-export const useProjectContributionsQuery = (projectId, otherOptions = {}) => {
-  const fetchProjectContributions = ({ signal }) => {
+export const useProjectContributionsQuery = (projectId: string, otherOptions = {}) => {
+  const fetchProjectContributions = ({ signal }: {
+    signal: AbortSignal;
+  }) => {
     return api().get(`projects/${projectId}/contributions/`, {
       signal,
     });
@@ -86,9 +93,11 @@ export const useProjectContributionsQuery = (projectId, otherOptions = {}) => {
   });
 };
 
-export const useActivitiesQuery = (projectId) => {
+export const useActivitiesQuery = (projectId: string) => {
   const ACTIVITIES_REFETCH_INTERVAL = 1000 * 60;
-  const fetchProjectActivities = ({ signal }) => {
+  const fetchProjectActivities = ({ signal }: {
+    signal: AbortSignal;
+  }) => {
     return api().get(`projects/${projectId}/activities/latest/`, {
       signal,
     });
@@ -101,12 +110,14 @@ export const useActivitiesQuery = (projectId) => {
     refetchIntervalInBackground: false,
     refetchInterval: ACTIVITIES_REFETCH_INTERVAL,
     refetchOnWindowFocus: true,
-    useErrorBoundary: true,
+    throwOnError: true,
   });
 };
 
-export const useTasksQuery = (projectId, otherOptions = {}) => {
-  const fetchProjectTasks = ({ signal }) => {
+export const useTasksQuery = (projectId: string, otherOptions = {}) => {
+  const fetchProjectTasks = ({ signal }: {
+    signal: AbortSignal;
+  }) => {
     return api().get(`projects/${projectId}/tasks/`, {
       signal,
     });
@@ -120,8 +131,10 @@ export const useTasksQuery = (projectId, otherOptions = {}) => {
   });
 };
 
-export const usePriorityAreasQuery = (projectId) => {
-  const fetchProjectPriorityArea = (signal) => {
+export const usePriorityAreasQuery = (projectId: string) => {
+  const fetchProjectPriorityArea = (signal: {
+    signal: AbortSignal;
+  }) => {
     return api().get(`projects/${projectId}/queries/priority-areas/`, {
       signal,
     });
@@ -134,8 +147,10 @@ export const usePriorityAreasQuery = (projectId) => {
   });
 };
 
-export const useProjectTimelineQuery = (projectId) => {
-  const fetchTimelineData = (signal) => {
+export const useProjectTimelineQuery = (projectId: string) => {
+  const fetchTimelineData = (signal: {
+    signal: AbortSignal;
+  }) => {
     return api().get(`projects/${projectId}/contributions/queries/day/`, {
       signal,
     });
@@ -148,10 +163,12 @@ export const useProjectTimelineQuery = (projectId) => {
   });
 };
 
-export const useTaskDetail = (projectId, taskId, shouldRefetch) => {
-  const token = useSelector((state) => state.auth.token);
+export const useTaskDetail = (projectId: string, taskId: number, shouldRefetch: boolean) => {
+  const token = useSelector((state: RootStore) => state.auth.token);
 
-  const fetchTaskDetail = ({ signal }) => {
+  const fetchTaskDetail = ({ signal }: {
+    signal: AbortSignal;
+  }) => {
     return api(token).get(`projects/${projectId}/tasks/${taskId}/`, {
       signal,
     });
@@ -167,26 +184,26 @@ export const useTaskDetail = (projectId, taskId, shouldRefetch) => {
 };
 
 // MAPPING
-export const stopMapping = (projectId, taskId, comment, token, locale = 'en') => {
+export const stopMapping = (projectId: string, taskId: number, comment: string, token: string, locale: string = 'en') => {
   return api(token, locale).post(`projects/${projectId}/tasks/actions/stop-mapping/${taskId}/`, {
     comment,
   });
 };
 
-export const splitTask = (projectId, taskId, token, locale) => {
+export const splitTask = (projectId: string, taskId: number, token: string, locale: string = 'en') => {
   return api(token, locale).post(`projects/${projectId}/tasks/actions/split/${taskId}/`);
 };
 
-export const submitMappingTask = (url, payload, token, locale) => {
+export const submitMappingTask = (url: string, payload: any, token: string, locale: string = 'en') => {
   return api(token, locale).post(url, payload);
 };
 
 // VALIDATION
-export const stopValidation = (projectId, payload, token, locale = 'en') => {
+export const stopValidation = (projectId: string, payload: any, token: string, locale: string = 'en') => {
   return api(token, locale).post(`projects/${projectId}/tasks/actions/stop-validation/`, payload);
 };
 
-export const submitValidationTask = (projectId, payload, token, locale) => {
+export const submitValidationTask = (projectId: string, payload: any, token: string, locale: string = 'en') => {
   return api(token, locale).post(
     `projects/${projectId}/tasks/actions/unlock-after-validation/`,
     payload,
@@ -205,7 +222,7 @@ export const useAvailableCountriesQuery = () => {
   });
 };
 
-export const useAllPartnersQuery = (token, userId) => {
+export const useAllPartnersQuery = (token: string, userId: string) => {
   const fetchAllPartners = () => {
     return api(token).get('partners/');
   };

diff --git a/frontend/src/api/questionsAndComments.js → frontend/src/api/questionsAndComments.ts b/frontend/src/api/questionsAndComments.js → frontend/src/api/questionsAndComments.ts
@@ -2,12 +2,15 @@ import { useQuery } from '@tanstack/react-query';
 import { useSelector } from 'react-redux';
 
 import api from './apiClient';
+import { RootStore } from '../store';
 
-export const useCommentsQuery = (projectId, page) => {
-  const token = useSelector((state) => state.auth.token);
-  const locale = useSelector((state) => state.preferences['locale']);
+export const useCommentsQuery = (projectId: string, page: number) => {
+  const token = useSelector((state: RootStore) => state.auth.token);
+  const locale = useSelector((state: RootStore) => state.preferences['locale']);
 
-  const getComments = ({ signal }) => {
+  const getComments = ({ signal }: {
+    signal: AbortSignal;
+  }) => {
     return api(token, locale).get(`projects/${projectId}/comments/`, {
       signal,
       params: {
@@ -24,11 +27,11 @@ export const useCommentsQuery = (projectId, page) => {
   });
 };
 
-export const postProjectComment = (projectId, comment, token, locale = 'en') => {
+export const postProjectComment = (projectId: string, comment: string, token: string, locale: string = 'en') => {
   return api(token, locale).post(`projects/${projectId}/comments/`, { message: comment });
 };
 
-export const postTaskComment = (projectId, taskId, comment, token, locale = 'en') => {
+export const postTaskComment = (projectId: string, taskId: number, comment: string, token: string, locale: string = 'en') => {
   return api(token, locale).post(`projects/${projectId}/comments/tasks/${taskId}/`, {
     comment,
   });

diff --git a/frontend/src/api/stats.ts b/frontend/src/api/stats.ts
@@ -22,12 +22,14 @@ export const useSystemStatisticsQuery = () => {
   return useQuery({
     queryKey: ['tm-stats'],
     queryFn: fetchSystemStats,
-    useErrorBoundary: true,
+    throwOnError: true,
   });
 };
 
 export const useProjectStatisticsQuery = (projectId: string) => {
-  const fetchProjectStats = ({ signal }) => {
+  const fetchProjectStats = ({ signal }: {
+    signal: AbortSignal;
+  }) => {
     return api().get(`projects/${projectId}/statistics/`, {
       signal,
     });
@@ -52,7 +54,7 @@ export const useOsmStatsQuery = () => {
   return useQuery({
     queryKey: ['osm-stats'],
     queryFn: fetchOsmStats,
-    useErrorBoundary: true,
+    throwOnError: true,
     select: (data) => data.data.result,
   });
 };
@@ -69,7 +71,7 @@ export const useOsmHashtagStatsQuery = (defaultComment: string) => {
   return useQuery({
     queryKey: ['osm-hashtag-stats'],
     queryFn: fetchOsmStats,
-    useErrorBoundary: true,
+    throwOnError: true,
     enabled: Boolean(defaultComment?.[0]),
     select: (data) => data.data.result,
   });
@@ -85,8 +87,8 @@ export const useUserOsmStatsQuery = (id: string) => {
   return useQuery({
     queryKey: ['user-osm-stats'],
     queryFn: fetchUserOsmStats,
-    // userDetail.test.js fails on CI when useErrorBoundary=true
-    useErrorBoundary: process.env.NODE_ENV !== 'test',
+    // userDetail.test.js fails on CI when throwOnError=true
+    throwOnError: process.env.NODE_ENV !== 'test',
     select: (data) => data?.data.result,
     enabled: !!id,
   });
@@ -100,7 +102,7 @@ export const useOsmStatsMetadataQuery = () => {
   return useQuery({
     queryKey: ['osm-stats-metadata'],
     queryFn: fetchOsmStatsMetadata,
-    useErrorBoundary: true,
+    throwOnError: true,
     select: (data) => data.result,
   });
 };
diff --git a/frontend/src/api/teams.js → frontend/src/api/teams.ts b/frontend/src/api/teams.js → frontend/src/api/teams.ts
@@ -2,11 +2,14 @@ import { useSelector } from 'react-redux';
 import { useQuery } from '@tanstack/react-query';
 
 import api from './apiClient';
+import { RootStore } from '../store';
 
-export const useTeamsQuery = (params, otherOptions) => {
-  const token = useSelector((state) => state.auth.token);
+export const useTeamsQuery = (params: any, otherOptions: any) => {
+  const token = useSelector((state: RootStore) => state.auth.token);
 
-  const fetchUserTeams = ({ signal }) => {
+  const fetchUserTeams = ({ signal }: {
+    signal: AbortSignal;
+  }) => {
     return api(token).get(`teams/`, {
       signal,
       params: params,

diff --git a/frontend/src/api/user.ts b/frontend/src/api/user.ts
@@ -19,8 +19,7 @@ export const useLockedTasksQuery = () => {
   return useQuery({
     queryKey: ['locked-tasks'],
     queryFn: fetchLockedTasks,
-    select: (data: any) => data.data?.tasks,
-    cacheTime: 0,
-    useErrorBoundary: true,
+    select: (data) => data.data?.tasks,
+    throwOnError: true,
   });
 };
diff --git a/frontend/src/components/alert/index.js → frontend/src/components/alert/index.tsx b/frontend/src/components/alert/index.js → frontend/src/components/alert/index.tsx
@@ -9,6 +9,12 @@ export const Alert = ({
   inline = false,
   iconClassName,
   children,
+}: {
+  type: 'info' | 'success' | 'warning' | 'error';
+  compact?: boolean;
+  inline?: boolean;
+  iconClassName?: string;
+  children: React.ReactNode;
 }) => {
   const icons = {
     info: InfoIcon,
@@ -33,17 +39,19 @@ export const Alert = ({
 
   return (
     <div
-      className={`${inline ? 'di' : 'db'} blue-dark bl bw2 br2 ${compact ? 'pa2' : 'pa3'} ${
-        color[type]
-      }`}
+      className={`${inline ? 'di' : 'db'} blue-dark bl bw2 br2 ${compact ? 'pa2' : 'pa3'} ${color[type]
+        }`}
     >
       <Icon className={`h1 w1 v-top mr2 ${iconColor[type]} ${iconClassName || ''}`} />
       {children}
     </div>
   );
 };
 
-export function EntityError({ entity, action = 'creation' }) {
+export function EntityError({ entity, action = 'creation' }: {
+  entity: string;
+  action?: 'creation' | 'updation';
+}) {
   const messageType = action === 'updation' ? 'entityInfoUpdationFailure' : 'entityCreationFailure';
 
   return (