fix: frontend update

backend/models/postgis/project.py

@@ -389,7 +389,7 @@ async def get(project_id: int, session) -> Optional["Project"]:
         project = result.scalars().first()
         return project
 
-    def update(self, project_dto: ProjectDTO):
+    async def update(self, project_dto: ProjectDTO, session):
         """Updates project from DTO"""
         self.status = ProjectStatus[project_dto.project_status].value
         self.priority = ProjectPriority[project_dto.project_priority].value
@@ -1038,16 +1038,16 @@ async def _get_project_and_base_dto(self, session):
         base_dto.percent_validated = self.calculate_tasks_percent("validated")
         base_dto.percent_bad_imagery = self.calculate_tasks_percent("bad_imagery")
 
-        base_dto.project_teams = [
-            ProjectTeamDTO(
-                dict(
-                    team_id=t.team.id,
-                    team_name=t.team.name,
-                    role=TeamRoles(t.role).name,
-                )
-            )
-            for t in self.teams
-        ]
+        # base_dto.project_teams = [
+        #     ProjectTeamDTO(
+        #         dict(
+        #             team_id=t.team.id,
+        #             team_name=t.team.name,
+        #             role=TeamRoles(t.role).name,
+        #         )
+        #     )
+        #     for t in self.teams
+        # ]
 
         if self.custom_editor:
             base_dto.custom_editor = self.custom_editor.as_dto()

backend/services/project_service.py

@@ -205,6 +205,7 @@ async def get_project_dto_for_mapper(
         :raises ProjectServiceError, NotFound
         """
         project = await ProjectService.get_project_by_id(project_id, session)
+        print(project, "=========================")
         # if project is public and is not draft, we don't need to check permissions
         if not project.private and not project.status == ProjectStatus.DRAFT.value:
             return await project.as_dto_for_mapping(current_user_id, locale, abbrev, session)

frontend/craco.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+  webpack: {
+    configure: (webpackConfig, { env, paths }) => {
+      // Fix CRA #11770
+      const rules = webpackConfig.module.rules;
+      for (const rule of rules) {
+        if (Object.hasOwn(rule, 'oneOf')) {
+          rule.oneOf.filter((currentValue, index, arr) => {
+            const toRemove =
+              currentValue.test instanceof RegExp && currentValue.test.test('something.svg');
+            if (toRemove) {
+              arr.splice(index, 1);
+            }
+            return toRemove;
+          });
+          rule.oneOf.push({
+            test: /\.svg$/i,
+            issuer: {
+              and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+            },
+            type: 'asset',
+          });
+        }
+      }
+      return webpackConfig;
+    },
+  },
+};

frontend/package.json

@@ -4,70 +4,68 @@
   "license": "BSD-2-Clause",
   "private": false,
   "dependencies": {
-    "@formatjs/intl-locale": "^3.3.2",
-    "@formatjs/intl-pluralrules": "^5.2.4",
-    "@formatjs/intl-relativetimeformat": "^11.2.4",
-    "@formatjs/macro": "^0.2.8",
     "@hotosm/id": "^2.21.1",
+    "@hotosm/underpass-ui": "^0.0.4",
     "@hotosm/iso-countries-languages": "^1.1.2",
-    "@mapbox/mapbox-gl-draw": "^1.4.1",
-    "@mapbox/mapbox-gl-geocoder": "^5.0.1",
+    "@mapbox/mapbox-gl-draw": "^1.4.3",
+    "@mapbox/mapbox-gl-geocoder": "^5.0.2",
     "@mapbox/mapbox-gl-language": "^0.10.1",
-    "@placemarkio/geo-viewport": "^1.0.1",
+    "@placemarkio/geo-viewport": "^1.0.2",
     "@rapideditor/rapid": "^2.1.1",
-    "@sentry/react": "^7.60.1",
-    "@tmcw/togeojson": "^4.7.0",
+    "@sentry/react": "^7.102.0",
     "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-query-devtools": "^4.29.7",
+    "@tmcw/togeojson": "^5.8.1",
     "@turf/area": "^6.5.0",
     "@turf/bbox": "^6.5.0",
     "@turf/bbox-polygon": "^6.5.0",
+    "@turf/centroid": "^6.5.0",
     "@turf/helpers": "^6.5.0",
     "@turf/intersect": "^6.5.0",
     "@turf/line-to-polygon": "^6.5.0",
     "@turf/transform-scale": "^6.5.0",
     "@turf/truncate": "^6.5.0",
     "@uiw/react-md-editor": "^3.22.0",
     "axios": "^1.6.7",
-    "chart.js": "^3.7.1",
+    "chart.js": "^4.4.1",
     "chartjs-adapter-date-fns": "^3.0.0",
     "date-fns": "^2.30.0",
-    "dompurify": "^2.4.5",
+    "dompurify": "^3.0.9",
     "downshift-hooks": "^0.8.1",
-    "final-form": "^4.20.9",
+    "final-form": "^4.20.10",
     "fromentries": "^1.3.2",
-    "humanize-duration": "^3.28.0",
+    "humanize-duration": "^3.31.0",
     "mapbox-gl": "^1.13.3",
     "mapbox-gl-draw-rectangle-mode": "^1.0.4",
     "marked": "^4.3.0",
     "osmtogeojson": "^3.0.0-beta.5",
-    "query-string": "^7.1.3",
-    "react": "^17.0.2",
-    "react-accessible-accordion": "^4.0.0",
+    "prop-types": "^15.8.1",
+    "query-string": "^8.2.0",
+    "react": "^18.2.0",
+    "react-accessible-accordion": "^5.0.0",
     "react-calendar-heatmap": "^1.9.0",
-    "react-chartjs-2": "^4.1.0",
+    "react-chartjs-2": "^5.2.0",
     "react-datepicker": "^4.14.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-error-boundary": "^4.0.4",
+    "react-error-boundary": "^4.0.12",
     "react-final-form": "^6.5.9",
     "react-hot-toast": "^2.4.1",
     "react-intl": "^6.4.4",
     "react-meta-elements": "^1.0.0",
     "react-placeholder": "^4.1.0",
     "react-redux": "^8.1.1",
     "react-router-dom": "^6.13.0",
-    "react-scripts": "^4.0.3",
     "react-select": "^5.7.3",
-    "react-tooltip": "^4.2.21",
-    "reactjs-popup": "^2.0.5",
+    "react-tooltip": "^5.26.3",
+    "reactjs-popup": "^2.0.6",
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.4.2",
-    "sass": "^1.63.5",
+    "sass": "^1.71.0",
     "short-number": "^1.0.7",
     "shpjs": "^4.0.4",
-    "slug": "^8.2.2",
+    "slug": "^8.2.3",
     "tachyons": "^4.12.0",
     "tributejs": "^5.1.3",
     "use-query-params": "^2.2.1",
@@ -86,11 +84,11 @@
     "patch-id": "bash -c \"cp patch/imagery.min.json public/static/id/data\"",
     "patch-rapid": "bash -c \"cp patch/rapid-imagery.min.json public/static/rapid/data/imagery.min.json\"",
     "preparation": "bash -c \"if (test -a ../tasking-manager.env); then grep -hs ^ ../tasking-manager.env .env.expand > .env; else cp .env.expand .env; fi\"",
-    "start": "npm run preparation && npm run copy-static && npm run patch-id && npm run patch-rapid && react-scripts start",
-    "build": "npm run preparation && npm run update-static && npm run patch-id && npm run patch-rapid && react-scripts build && npm run sentry:sourcemaps",
+    "start": "npm run preparation && npm run copy-static && npm run patch-id && npm run patch-rapid && craco start",
+    "build": "npm run preparation && npm run update-static && npm run patch-id && npm run patch-rapid && craco build && npm run sentry:sourcemaps",
     "prettier": "prettier --write 'src/**/*.js'",
     "lint": "eslint src",
-    "test": "npm run lint && react-scripts test --env=jsdom",
+    "test": "npm run lint && craco test --env=jsdom",
     "coverage": "npm run test -- --coverage --watchAll=false",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "sentry:sourcemaps": "if sentry-cli info; then sentry-cli sourcemaps inject --org humanitarian-openstreetmap-tea --project taskingmanager-frontend ./build && sentry-cli sourcemaps upload --org humanitarian-openstreetmap-tea --project taskingmanager-frontend ./build; fi"
@@ -112,20 +110,27 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@sentry/cli": "^2.20.5",
+    "@craco/craco": "^7.1.0",
+    "@sentry/cli": "^2.28.6",
     "@tanstack/eslint-plugin-query": "^4.29.8",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.4.3",
     "combine-react-intl-messages": "^4.0.0",
-    "jest-canvas-mock": "^2.5.1",
-    "msw": "0.49.2",
+    "jest-canvas-mock": "^2.5.2",
+    "msw": "^1.3.2",
     "prettier": "^2.8.8",
+    "react-scripts": "^5.0.1",
     "react-select-event": "^5.5.1",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.2.0",
     "source-map-explorer": "^2.5.3"
   },
+  "resolutions": {
+    "dom-accessibility-api": "0.5.14"
+  },
+  "overrides": {
+    "dom-accessibility-api": "0.5.14"
+  },
   "jest": {
     "coverageReporters": [
       "html"
@@ -135,6 +140,6 @@
     ]
   },
   "volta": {
-    "node": "16.20.0"
+    "node": "18.19.1"
   }
 }

frontend/src/App.js

@@ -1,10 +1,10 @@
-import React, { Suspense, useEffect } from 'react';
+import { Suspense, useEffect } from 'react';
 import { RouterProvider } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
 import ReactPlaceholder from 'react-placeholder';
 import { useMeta } from 'react-meta-elements';
 import { useSelector } from 'react-redux';
-import * as Sentry from '@sentry/react';
+import { ErrorBoundary } from '@sentry/react';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
@@ -49,7 +49,7 @@ const App = () => {
   }, []);
 
   return (
-    <Sentry.ErrorBoundary fallback={<FallbackComponent />}>
+    <ErrorBoundary fallback={<FallbackComponent />}>
       {isLoading ? (
         <Preloader />
       ) : (
@@ -77,7 +77,7 @@ const App = () => {
           />
         </div>
       )}
-    </Sentry.ErrorBoundary>
+    </ErrorBoundary>
   );
 };
 

frontend/src/api/projects.js

@@ -1,11 +1,13 @@
+import axios from 'axios';
 import { subMonths, format } from 'date-fns';
 import { useQuery } from '@tanstack/react-query';
 import { useSelector } from 'react-redux';
 
 import { remapParamsToAPI } from '../utils/remapParamsToAPI';
 import api from './apiClient';
+import { UNDERPASS_URL } from '../config';
 
-export const useProjectsQuery = (fullProjectsQuery, action) => {
+export const useProjectsQuery = (fullProjectsQuery, action, queryOptions) => {
   const token = useSelector((state) => state.auth.token);
   const locale = useSelector((state) => state.preferences['locale']);
 
@@ -33,6 +35,7 @@ export const useProjectsQuery = (fullProjectsQuery, action) => {
     queryKey: ['projects', fullProjectsQuery, action],
     queryFn: ({ signal, queryKey }) => fetchProjects(signal, queryKey),
     keepPreviousData: true,
+    ...queryOptions,
   });
 };
 
@@ -51,8 +54,11 @@ export const useProjectQuery = (projectId) => {
   });
 };
 export const useProjectSummaryQuery = (projectId, otherOptions = {}) => {
+  const token = useSelector((state) => state.auth.token);
+  const locale = useSelector((state) => state.preferences['locale']);
+
   const fetchProjectSummary = ({ signal }) => {
-    return api().get(`projects/${projectId}/queries/summary/`, {
+    return api(token, locale).get(`projects/${projectId}/queries/summary/`, {
       signal,
     });
   };
@@ -187,6 +193,18 @@ export const submitValidationTask = (projectId, payload, token, locale) => {
   );
 };
 
+export const useAvailableCountriesQuery = () => {
+  const fetchGeojsonData = () => {
+    return axios.get(`${UNDERPASS_URL}/availability`);
+  };
+
+  return useQuery({
+    queryKey: ['priority-geojson'],
+    queryFn: fetchGeojsonData,
+    select: (res) => res.data,
+  });
+};
+
 const backendToQueryConversion = {
   difficulty: 'difficulty',
   campaign: 'campaign',

frontend/src/api/stats.js

@@ -1,7 +1,13 @@
 import { useQuery } from '@tanstack/react-query';
 
+import { fetchExternalJSONAPI } from '../network/genericJSONRequest';
 import api from './apiClient';
-import { OHSOME_STATS_BASE_URL } from '../config';
+import { OHSOME_STATS_BASE_URL, defaultChangesetComment } from '../config';
+
+const ohsomeProxyAPI = (url) => {
+  const token = localStorage.getItem('token');
+  return api(token).get(`users/statistics/ohsome/?url=${url}`);
+};
 
 export const useSystemStatisticsQuery = () => {
   const fetchSystemStats = ({ signal }) => {
@@ -33,7 +39,7 @@ export const useProjectStatisticsQuery = (projectId) => {
 
 export const useOsmStatsQuery = () => {
   const fetchOsmStats = ({ signal }) => {
-    return api().get(`${OHSOME_STATS_BASE_URL}/stats/hotosm-project-%2A`, {
+    return api().get(`${OHSOME_STATS_BASE_URL}/stats/${defaultChangesetComment}-%2A`, {
       signal,
     });
   };
@@ -42,7 +48,7 @@ export const useOsmStatsQuery = () => {
     queryKey: ['osm-stats'],
     queryFn: fetchOsmStats,
     useErrorBoundary: true,
-    select: (data) => data.data.result
+    select: (data) => data.data.result,
   });
 };
 
@@ -61,3 +67,33 @@ export const useOsmHashtagStatsQuery = (defaultComment) => {
     select: (data) => data.data.result,
   });
 };
+
+export const useUserOsmStatsQuery = (id) => {
+  const fetchUserOsmStats = () => {
+    return ohsomeProxyAPI(
+      `${OHSOME_STATS_BASE_URL}/topic/poi,highway,building,waterway/user?userId=${id}`,
+    );
+  };
+
+  return useQuery({
+    queryKey: ['user-osm-stats'],
+    queryFn: fetchUserOsmStats,
+    // userDetail.test.js fails on CI when useErrorBoundary=true
+    useErrorBoundary: process.env.NODE_ENV !== 'test',
+    select: (data) => data.data.result,
+    enabled: !!id,
+  });
+};
+
+export const useOsmStatsMetadataQuery = () => {
+  const fetchOsmStatsMetadata = () => {
+    return fetchExternalJSONAPI(`${OHSOME_STATS_BASE_URL}/metadata`);
+  };
+
+  return useQuery({
+    queryKey: ['osm-stats-metadata'],
+    queryFn: fetchOsmStatsMetadata,
+    useErrorBoundary: true,
+    select: (data) => data.result,
+  });
+};