fix(deps): upgrade app platform to v12 for Vite and React 18 (#53)

* fix(deps): upgrade to app platform v12

* chore: rename extensions to jsx as needed

* chore: fix eslint config

* chore: linting

* refactor: use i18n.t for full phrases

* chore: remove accidental import

* chore: improve file extension resolver

* fix: complete useEffect params

---------

Co-authored-by: Bjørn Sandvik <[email protected]>

.eslintrc.js

@@ -1,14 +1,16 @@
 const { config } = require('@dhis2/cli-style')
 
 module.exports = {
-    extends: [config.eslint],
-    // Needed to add this to support ?? and ?. operators, for some reason
-    parserOptions: { ecmaVersion: 'latest' },
+    extends: [config.eslintReact],
     // These are common lint errors
     // TODO: address lines flagged with these rules (either turn off or back on)
     rules: {
         'import/extensions': 'warn',
         'max-params': 'warn',
         'no-unused-vars': 'warn',
+        'react/react-in-jsx-scope': 'off',
+    },
+    settings: {
+        'import/resolver': { node: { extensions: ['.js', '.jsx'] } },
     },
 }

d2.config.js

@@ -5,7 +5,7 @@ const config = {
     minDHIS2Version: '2.37',
 
     entryPoints: {
-        app: './src/App.js',
+        app: './src/App.jsx',
     },
 }
 

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-11-20T14:17:35.520Z\n"
-"PO-Revision-Date: 2024-11-20T14:17:35.520Z\n"
+"POT-Creation-Date: 2025-01-23T16:19:51.054Z\n"
+"PO-Revision-Date: 2025-01-23T16:19:51.055Z\n"
 
 msgid "About this app"
 msgstr "About this app"
@@ -711,6 +711,9 @@ msgstr "Default start page for users"
 msgid "Time zone where your org units are located"
 msgstr "Time zone where your org units are located"
 
+msgid "Data element: \"{{name}}\""
+msgstr "Data element: \"{{name}}\""
+
 msgid "Name"
 msgstr "Name"
 
@@ -738,8 +741,8 @@ msgstr "Aggregation levels"
 msgid "Assign all org unit levels"
 msgstr "Assign all org unit levels"
 
-msgid "Legend"
-msgstr "Legend"
+msgid "Legend: \"{{name}}\""
+msgstr "Legend: \"{{name}}\""
 
 msgid "Start value"
 msgstr "Start value"
@@ -786,8 +789,8 @@ msgstr ""
 "it from data imported from local weather stations. If you use the same code "
 "specified below, we will preselect the data element in the import interface."
 
-msgid "Data set"
-msgstr "Data set"
+msgid "Data set: \"Climate/Weather\""
+msgstr "Data set: \"Climate/Weather\""
 
 msgid "Climate/Weather"
 msgstr "Climate/Weather"
@@ -807,8 +810,8 @@ msgstr "Organisation units"
 msgid "Select all organisation units in your system"
 msgstr "Select all organisation units in your system"
 
-msgid "Data element group"
-msgstr "Data element group"
+msgid "Data element group: \"Climate/Weather\""
+msgstr "Data element group: \"Climate/Weather\""
 
 msgid ""
 "You should now be able to import climate data with this app. Please reach "

package.json

@@ -13,12 +13,13 @@
         "format": "d2-style apply"
     },
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "^11.7.0",
+        "@dhis2/cli-app-scripts": "^12.0.0",
         "@dhis2/cli-style": "^10.7.5"
     },
     "dependencies": {
-        "@dhis2/app-runtime": "^3.10.6",
+        "@dhis2/app-runtime": "^3.12.1",
         "@dhis2/multi-calendar-dates": "1.0.0-alpha.27",
+        "@dhis2/ui": "^10.1.10",
         "@turf/area": "^6.5.0",
         "highcharts": "^10.3.3",
         "react-router-dom": "^6.26.1",

src/App.js → src/App.jsx

@@ -1,4 +1,4 @@
-import Routes from './components/Routes'
+import Routes from './components/Routes.jsx'
 
 const App = () => <Routes />
 

src/components/AboutPage.js → src/components/AboutPage.jsx

@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import GEETokenCheck from './shared/GEETokenCheck'
+import GEETokenCheck from './shared/GEETokenCheck.jsx'
 import styles from './styles/AboutPage.module.css'
 
 // TODO: How to combine links and i18n.t?
@@ -27,6 +27,7 @@ const AboutPage = () => (
             <a
                 href="https://cds.climate.copernicus.eu/datasets/reanalysis-era5-land"
                 target="_blank"
+                rel="noreferrer"
             >
                 {i18n.t(
                     'Read about ERA5-Land on Copernicus Climate Data Store'
@@ -39,14 +40,19 @@ const AboutPage = () => (
             )}
         </p>
         <p>
-            <a href="https://www.chc.ucsb.edu/data/chirps" target="_blank">
+            <a
+                href="https://www.chc.ucsb.edu/data/chirps"
+                target="_blank"
+                rel="noreferrer"
+            >
                 {i18n.t('Read about CHIRPS on Climate Hazards Center')}
             </a>
         </p>
         <p>
             <a
                 href="https://cds.climate.copernicus.eu/datasets/derived-utci-historical"
                 target="_blank"
+                rel="noreferrer"
             >
                 {i18n.t(
                     'Read about ERA5-HEAT on Copernicus Climate Data Store'

src/components/Root.js → src/components/Root.jsx

@@ -2,9 +2,9 @@ import i18n from '@dhis2/d2-i18n'
 import { CssVariables, CssReset, Menu, MenuItem } from '@dhis2/ui'
 import { Fragment, useEffect } from 'react'
 import { Outlet, useResolvedPath, useNavigate } from 'react-router-dom'
-import useAppSettings from '../hooks/useAppSettings'
-import CheckOrgUnitTree from './check/OrgUnitTree'
-import OrgUnitTree from './explore/OrgUnitTree'
+import useAppSettings from '../hooks/useAppSettings.js'
+import CheckOrgUnitTree from './check/OrgUnitTree.jsx'
+import OrgUnitTree from './explore/OrgUnitTree.jsx'
 import styles from './styles/Root.module.css'
 
 export const appPages = [
@@ -24,7 +24,7 @@ const Root = () => {
         if (pathname === '/' && settings?.startPage) {
             navigate(settings.startPage)
         }
-    }, [settings])
+    }, [settings, pathname, navigate])
 
     return (
         <>

src/components/Routes.js → src/components/Routes.jsx

@@ -1,27 +1,27 @@
 import { useDataEngine } from '@dhis2/app-runtime'
 import { RouterProvider, createHashRouter } from 'react-router-dom'
-import checkPlaceLoader from '../utils/checkPlaceLoader'
-import orgUnitLoader from '../utils/orgUnitLoader'
-import AboutPage from './AboutPage'
-import CheckPage from './check/CheckPage'
-import ErrorPage from './ErrorPage'
-import ClimateChange from './explore/climateChange/ClimateChange'
-import ExplorePage from './explore/ExplorePage'
-import Forecast from './explore/forecast/Forecast'
-import HeatDaily from './explore/heat/HeatDaily'
-import HeatMonthly from './explore/heat/HeatMonthly'
-import HumidityDaily from './explore/humidity/HumidityDaily'
-import HumidityMonthly from './explore/humidity/HumidityMonthly'
-import OrgUnit from './explore/OrgUnit'
-import PrecipitationDaily from './explore/precipitation/PrecipitationDaily'
-import PrecipitationMonthly from './explore/precipitation/PrecipitationMonthly'
-import Tabs from './explore/Tabs'
-import TemperatureDaily from './explore/temperature/TemperatureDaily'
-import TemperatureMonthly from './explore/temperature/TemperatureMonthly'
-import ImportPage from './import/ImportPage'
-import Root from './Root'
-import SettingsPage from './settings/SettingsPage'
-import SetupPage from './setup/SetupPage'
+import checkPlaceLoader from '../utils/checkPlaceLoader.js'
+import orgUnitLoader from '../utils/orgUnitLoader.js'
+import AboutPage from './AboutPage.jsx'
+import CheckPage from './check/CheckPage.jsx'
+import ErrorPage from './ErrorPage.jsx'
+import ClimateChange from './explore/climateChange/ClimateChange.jsx'
+import ExplorePage from './explore/ExplorePage.jsx'
+import Forecast from './explore/forecast/Forecast.jsx'
+import HeatDaily from './explore/heat/HeatDaily.jsx'
+import HeatMonthly from './explore/heat/HeatMonthly.jsx'
+import HumidityDaily from './explore/humidity/HumidityDaily.jsx'
+import HumidityMonthly from './explore/humidity/HumidityMonthly.jsx'
+import OrgUnit from './explore/OrgUnit.jsx'
+import PrecipitationDaily from './explore/precipitation/PrecipitationDaily.jsx'
+import PrecipitationMonthly from './explore/precipitation/PrecipitationMonthly.jsx'
+import Tabs from './explore/Tabs.jsx'
+import TemperatureDaily from './explore/temperature/TemperatureDaily.jsx'
+import TemperatureMonthly from './explore/temperature/TemperatureMonthly.jsx'
+import ImportPage from './import/ImportPage.jsx'
+import Root from './Root.jsx'
+import SettingsPage from './settings/SettingsPage.jsx'
+import SetupPage from './setup/SetupPage.jsx'
 
 const monthlyPath = 'monthly/:startTime/:endTime/:referencePeriodId'
 const dailyPath = 'daily/:startTime/:endTime'

src/components/check/OrgUnitTree.js → src/components/check/OrgUnitTree.jsx

@@ -1,8 +1,8 @@
 import { CustomDataProvider } from '@dhis2/app-runtime'
 import { OrganisationUnitTree } from '@dhis2/ui'
 import { useNavigate } from 'react-router-dom'
-import { locations, findLocation } from '../../data/locations'
-import exploreStore from '../../store/exploreStore'
+import { locations, findLocation } from '../../data/locations.js'
+import exploreStore from '../../store/exploreStore.js'
 import styles from '../explore/styles/OrgUnitTree.module.css'
 
 // Inspired by https://github.com/dhis2/ui/blob/master/components/organisation-unit-tree/src/__stories__/shared.js

src/components/explore/DailyPeriodSelect.js → src/components/explore/DailyPeriodSelect.jsx

@@ -1,9 +1,9 @@
 import i18n from '@dhis2/d2-i18n'
 import { Button } from '@dhis2/ui'
 import { useState } from 'react'
-import exploreStore from '../../store/exploreStore'
-import { getNumberOfDays } from '../../utils/time'
-import DatePicker from '../shared/DatePicker'
+import exploreStore from '../../store/exploreStore.js'
+import { getNumberOfDays } from '../../utils/time.js'
+import DatePicker from '../shared/DatePicker.jsx'
 import styles from './styles/Period.module.css'
 
 const maxDays = 1000

src/components/explore/ExplorePage.js → src/components/explore/ExplorePage.jsx

@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import GEETokenCheck from '../shared/GEETokenCheck'
+import GEETokenCheck from '../shared/GEETokenCheck.jsx'
 import styles from './styles/ExplorePage.module.css'
 
 const ExplorePage = () => (

src/components/explore/MonthSelect.js → src/components/explore/MonthSelect.jsx

@@ -1,6 +1,6 @@
 import i18n from '@dhis2/d2-i18n'
 import { SingleSelectField, SingleSelectOption } from '@dhis2/ui'
-import exploreStore from '../../store/exploreStore'
+import exploreStore from '../../store/exploreStore.js'
 
 export const months = [
     {

src/components/explore/MonthlyPeriodSelect.js → src/components/explore/MonthlyPeriodSelect.jsx

@@ -1,9 +1,9 @@
 import i18n from '@dhis2/d2-i18n'
 import { Button } from '@dhis2/ui'
 import { useState } from 'react'
-import exploreStore from '../../store/exploreStore'
-import { getNumberOfMonths } from '../../utils/time'
-import MonthPicker from '../shared/MonthPicker'
+import exploreStore from '../../store/exploreStore.js'
+import { getNumberOfMonths } from '../../utils/time.js'
+import MonthPicker from '../shared/MonthPicker.jsx'
 import styles from './styles/Period.module.css'
 
 const maxMonths = 60

src/components/explore/OrgUnit.js → src/components/explore/OrgUnit.jsx

@@ -6,8 +6,8 @@ import {
     useLocation,
     useNavigate,
 } from 'react-router-dom'
-import exploreStore from '../../store/exploreStore'
-import OrgUnitType from './OrgUnitType'
+import exploreStore from '../../store/exploreStore.js'
+import OrgUnitType from './OrgUnitType.jsx'
 import styles from './styles/OrgUnit.module.css'
 
 const tabIsValid = (tab, orgUnit) =>

src/components/explore/OrgUnitTree.js → src/components/explore/OrgUnitTree.jsx

@@ -1,7 +1,7 @@
 import { OrganisationUnitTree } from '@dhis2/ui'
 import { useNavigate } from 'react-router-dom'
-import useOrgUnitRoots from '../../hooks/useOrgUnitRoots'
-import exploreStore from '../../store/exploreStore'
+import useOrgUnitRoots from '../../hooks/useOrgUnitRoots.js'
+import exploreStore from '../../store/exploreStore.js'
 import styles from './styles/OrgUnitTree.module.css'
 
 const OrgUnitTree = () => {

src/components/explore/PeriodTypeSelect.js → src/components/explore/PeriodTypeSelect.jsx

@@ -1,7 +1,7 @@
 import i18n from '@dhis2/d2-i18n'
 import { SegmentedControl } from '@dhis2/ui'
-import exploreStore from '../../store/exploreStore'
-import { DAILY, MONTHLY } from '../../utils/time'
+import exploreStore from '../../store/exploreStore.js'
+import { DAILY, MONTHLY } from '../../utils/time.js'
 import styles from './styles/PeriodTypeSelect.module.css'
 
 const PeriodTypeSelect = () => {

src/components/explore/ReferencePeriodSelect.js → src/components/explore/ReferencePeriodSelect.jsx

@@ -1,6 +1,6 @@
 import i18n from '@dhis2/d2-i18n'
 import { SingleSelectField, SingleSelectOption } from '@dhis2/ui'
-import exploreStore from '../../store/exploreStore'
+import exploreStore from '../../store/exploreStore.js'
 import styles from './styles/ReferencePeriod.module.css'
 
 export const referencePeriods = [

src/components/explore/Tabs.js → src/components/explore/Tabs.jsx

@@ -2,8 +2,8 @@ import i18n from '@dhis2/d2-i18n'
 import { TabBar, Tab } from '@dhis2/ui'
 import { useEffect } from 'react'
 import { Outlet, useLocation, useNavigate } from 'react-router-dom'
-import useExploreUri from '../../hooks/useExploreUri'
-import exploreStore from '../../store/exploreStore'
+import useExploreUri from '../../hooks/useExploreUri.js'
+import exploreStore from '../../store/exploreStore.js'
 import styles from './styles/Tabs.module.css'
 
 const tabs = [

src/components/explore/climateChange/ClimateChange.js → src/components/explore/climateChange/ClimateChange.jsx

@@ -3,18 +3,18 @@ import { useMemo } from 'react'
 import {
     era5MonthlyTemperatures,
     era5MonthlyNormals,
-} from '../../../data/datasets'
-import useAppSettings from '../../../hooks/useAppSettings'
-import useEarthEngineClimateNormals from '../../../hooks/useEarthEngineClimateNormals'
-import useEarthEngineTimeSeries from '../../../hooks/useEarthEngineTimeSeries'
-import exploreStore from '../../../store/exploreStore'
-import { getCurrentYear } from '../../../utils/time'
-import DataLoader from '../../shared/DataLoader'
-import Resolution from '../../shared/Resolution'
-import Chart from '../Chart'
-import MonthSelect from '../MonthSelect'
-import ReferencePeriod from '../ReferencePeriodSelect'
-import getChartConfig from './charts/temperatureAnomaly'
+} from '../../../data/datasets.js'
+import useAppSettings from '../../../hooks/useAppSettings.js'
+import useEarthEngineClimateNormals from '../../../hooks/useEarthEngineClimateNormals.js'
+import useEarthEngineTimeSeries from '../../../hooks/useEarthEngineTimeSeries.js'
+import exploreStore from '../../../store/exploreStore.js'
+import { getCurrentYear } from '../../../utils/time.js'
+import DataLoader from '../../shared/DataLoader.jsx'
+import Resolution from '../../shared/Resolution.jsx'
+import Chart from '../Chart.jsx'
+import MonthSelect from '../MonthSelect.jsx'
+import ReferencePeriod from '../ReferencePeriodSelect.jsx'
+import getChartConfig from './charts/temperatureAnomaly.js'
 import styles from './styles/ClimateChangeTab.module.css'
 
 // Fetch all years from 1970 to the current year
@@ -26,7 +26,7 @@ const ClimateChange = () => {
     const referencePeriod = exploreStore((state) => state.referencePeriod)
     const { settings } = useAppSettings()
 
-    const filters = useMemo(
+    const filter = useMemo(
         () => [
             {
                 type: 'calendarRange',
@@ -36,12 +36,12 @@ const ClimateChange = () => {
         [month]
     )
 
-    const data = useEarthEngineTimeSeries(
-        era5MonthlyTemperatures,
+    const data = useEarthEngineTimeSeries({
+        dataset: era5MonthlyTemperatures,
         period,
-        orgUnit,
-        filters
-    )
+        feature: orgUnit,
+        filter,
+    })
 
     const normals = useEarthEngineClimateNormals(
         era5MonthlyNormals,
@@ -53,17 +53,19 @@ const ClimateChange = () => {
         return <DataLoader />
     }
 
+    const { name } = orgUnit.properties
+
     return (
         <>
             <Chart
-                config={getChartConfig(
-                    orgUnit.properties.name,
+                config={getChartConfig({
+                    name,
                     data,
                     normals,
                     month,
                     referencePeriod,
-                    settings
-                )}
+                    settings,
+                })}
             />
             <div className={styles.monthSelect}>
                 <MonthSelect />