From 13e2bd06a6afbde417185a76df34fe5796db7b3f Mon Sep 17 00:00:00 2001 From: Ludovic Delhomme Date: Fri, 6 Dec 2024 12:15:21 +0100 Subject: [PATCH 1/3] fix: build obs --- .../app/observatoire/territoire/Dashboard.tsx | 16 ++++++++-------- .../app/observatoire/territoire/KeyFigures.tsx | 5 ++--- .../territoire/graphs/DistanceGraph.tsx | 9 ++++----- .../observatoire/territoire/graphs/FluxGraph.tsx | 9 ++++----- .../territoire/graphs/IncentiveGraph.tsx | 7 +++---- .../territoire/graphs/OccupationGraph.tsx | 9 ++++----- .../graphs/RepartitionDistanceGraph.tsx | 7 +++---- .../graphs/RepartitionHoraireGraph.tsx | 7 +++---- .../observatoire/territoire/maps/AiresMap.tsx | 6 +++--- .../observatoire/territoire/maps/DensiteMap.tsx | 6 +++--- .../app/observatoire/territoire/maps/FluxMap.tsx | 8 ++++---- .../territoire/maps/OccupationMap.tsx | 8 ++++---- .../territoire/tables/BestFluxTable.tsx | 7 +++---- .../territoire/tables/BestTerritoriesTable.tsx | 7 +++---- .../observatoire/SelectIncentiveTerritory.tsx | 8 ++++---- .../src/components/observatoire/SelectMonth.tsx | 6 +++--- .../components/observatoire/SelectObserve.tsx | 5 ++--- .../src/components/observatoire/SelectPeriod.tsx | 7 +++---- .../components/observatoire/SelectSemester.tsx | 6 +++--- .../components/observatoire/SelectTerritory.tsx | 6 +++--- .../components/observatoire/SelectTrimester.tsx | 6 +++--- .../src/components/observatoire/SelectYear.tsx | 5 ++--- public/src/helpers/api.ts | 9 +++------ public/src/helpers/dashboard.ts | 5 ++--- 24 files changed, 79 insertions(+), 95 deletions(-) diff --git a/public/src/app/observatoire/territoire/Dashboard.tsx b/public/src/app/observatoire/territoire/Dashboard.tsx index 43ac4616cc..21a2717160 100644 --- a/public/src/app/observatoire/territoire/Dashboard.tsx +++ b/public/src/app/observatoire/territoire/Dashboard.tsx @@ -1,21 +1,21 @@ 'use client' import SectionTitle from '@/components/common/SectionTitle'; import SelectInList from '@/components/common/SelectInList'; +import SelectMonth from '@/components/observatoire/SelectMonth'; import SelectObserve from '@/components/observatoire/SelectObserve'; import SelectPeriod from '@/components/observatoire/SelectPeriod'; +import SelectSemester from '@/components/observatoire/SelectSemester'; import SelectTerritory from '@/components/observatoire/SelectTerritory'; -import { DashboardContext } from '@/context/DashboardProvider'; +import SelectTrimester from '@/components/observatoire/SelectTrimester'; +import SelectYear from '@/components/observatoire/SelectYear'; +import { GetPeriod } from '@/helpers/dashboard'; import { graphList, mapList } from '@/helpers/lists'; +import { useDashboard } from '@/hooks/useDashboard'; import { PerimeterType } from '@/interfaces/observatoire/Perimeter'; import { fr } from '@codegouvfr/react-dsfr'; import CircularProgress from '@mui/material/CircularProgress'; import { useSearchParams } from 'next/navigation'; -import { useContext, useEffect } from 'react'; -import SelectMonth from '../../../components/observatoire/SelectMonth'; -import SelectSemester from '../../../components/observatoire/SelectSemester'; -import SelectTrimester from '../../../components/observatoire/SelectTrimester'; -import SelectYear from '../../../components/observatoire/SelectYear'; -import { GetPeriod } from '../../../helpers/dashboard'; +import { useEffect } from 'react'; import DistanceGraph from './graphs/DistanceGraph'; import FluxGraph from './graphs/FluxGraph'; import IncentiveGraph from './graphs/IncentiveGraph'; @@ -32,7 +32,7 @@ import BestTerritoriesTable from './tables/BestTerritoriesTable'; export default function Dashboard() { const searchParams = useSearchParams(); - const { dashboard } =useContext(DashboardContext); + const dashboard =useDashboard(); const period = GetPeriod(); const observeLabel = dashboard.params.map == 1 ? 'Flux entre:' : 'Territoires observés'; useEffect(() => { diff --git a/public/src/app/observatoire/territoire/KeyFigures.tsx b/public/src/app/observatoire/territoire/KeyFigures.tsx index a234fa159a..da6cbe9288 100644 --- a/public/src/app/observatoire/territoire/KeyFigures.tsx +++ b/public/src/app/observatoire/territoire/KeyFigures.tsx @@ -1,14 +1,13 @@ import Rows from '@/components/observatoire/indicators/Rows'; import { Config } from '@/config'; -import { DashboardContext } from '@/context/DashboardProvider'; import { useApi } from '@/hooks/useApi'; +import { useDashboard } from '@/hooks/useDashboard'; import { IndicatorProps } from '@/interfaces/observatoire/componentsInterfaces'; import { KeyFiguresDataInterface } from '@/interfaces/observatoire/dataInterfaces'; import { fr } from '@codegouvfr/react-dsfr'; -import { useContext } from 'react'; export default function KeyFigures() { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const apiUrl = Config.get('next.public_api_url', ''); const url = () => { const params = [ diff --git a/public/src/app/observatoire/territoire/graphs/DistanceGraph.tsx b/public/src/app/observatoire/territoire/graphs/DistanceGraph.tsx index f80f10f6b9..a0316c9fd1 100644 --- a/public/src/app/observatoire/territoire/graphs/DistanceGraph.tsx +++ b/public/src/app/observatoire/territoire/graphs/DistanceGraph.tsx @@ -1,6 +1,8 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; -import { DashboardContext } from '@/context/DashboardProvider'; +import { GetApiUrl } from '@/helpers/api'; +import { chartLabels } from '@/helpers/graph'; import { useApi } from '@/hooks/useApi'; +import { useDashboard } from '@/hooks/useDashboard'; import { fr } from '@codegouvfr/react-dsfr'; import { CategoryScale, @@ -13,15 +15,12 @@ import { Title, Tooltip, } from 'chart.js'; -import { useContext } from 'react'; import { Line } from 'react-chartjs-2'; -import { GetApiUrl } from '../../../../helpers/api'; -import { chartLabels } from '../../../../helpers/graph'; ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler); export default function DistanceGraph({ title }: { title: string }) { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const options = { responsive: true, plugins: { diff --git a/public/src/app/observatoire/territoire/graphs/FluxGraph.tsx b/public/src/app/observatoire/territoire/graphs/FluxGraph.tsx index 96171b15fd..ece51b9ab7 100644 --- a/public/src/app/observatoire/territoire/graphs/FluxGraph.tsx +++ b/public/src/app/observatoire/territoire/graphs/FluxGraph.tsx @@ -1,6 +1,8 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; -import { DashboardContext } from '@/context/DashboardProvider'; +import { GetApiUrl } from '@/helpers/api'; +import { chartLabels } from '@/helpers/graph'; import { useApi } from '@/hooks/useApi'; +import { useDashboard } from '@/hooks/useDashboard'; import { FluxIndicators } from '@/interfaces/observatoire/componentsInterfaces'; import { fr } from '@codegouvfr/react-dsfr'; import { @@ -14,15 +16,12 @@ import { Title, Tooltip, } from 'chart.js'; -import { useContext } from 'react'; import { Line } from 'react-chartjs-2'; -import { GetApiUrl } from '../../../../helpers/api'; -import { chartLabels } from '../../../../helpers/graph'; ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler); export default function TrajetsGraph({ title,indic }: { title: string, indic:FluxIndicators }) { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const options = { responsive: true, plugins: { diff --git a/public/src/app/observatoire/territoire/graphs/IncentiveGraph.tsx b/public/src/app/observatoire/territoire/graphs/IncentiveGraph.tsx index 489f21effd..0155d6ebc7 100644 --- a/public/src/app/observatoire/territoire/graphs/IncentiveGraph.tsx +++ b/public/src/app/observatoire/territoire/graphs/IncentiveGraph.tsx @@ -1,18 +1,17 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; -import { DashboardContext } from '@/context/DashboardProvider'; +import { GetApiUrl } from '@/helpers/api'; import { useApi } from '@/hooks/useApi'; +import { useDashboard } from '@/hooks/useDashboard'; import { IncentiveDataInterface } from '@/interfaces/observatoire/dataInterfaces'; import { fr } from '@codegouvfr/react-dsfr'; import { ArcElement, ChartData, Chart as ChartJS, Legend, Title, Tooltip } from 'chart.js'; import ChartDataLabels, { Context } from 'chartjs-plugin-datalabels'; -import { useContext } from 'react'; import { Doughnut } from 'react-chartjs-2'; -import { GetApiUrl } from '../../../../helpers/api'; ChartJS.register(ArcElement, Title, Tooltip, Legend); export default function IncentiveGraph({ title }: { title: string }) { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const options = { responsive: true, maintainAspectRatio: false, diff --git a/public/src/app/observatoire/territoire/graphs/OccupationGraph.tsx b/public/src/app/observatoire/territoire/graphs/OccupationGraph.tsx index d947d06350..cbd53bbbaf 100644 --- a/public/src/app/observatoire/territoire/graphs/OccupationGraph.tsx +++ b/public/src/app/observatoire/territoire/graphs/OccupationGraph.tsx @@ -1,6 +1,8 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; -import { DashboardContext } from '@/context/DashboardProvider'; +import { GetApiUrl } from '@/helpers/api'; +import { chartLabels } from '@/helpers/graph'; import { useApi } from '@/hooks/useApi'; +import { useDashboard } from '@/hooks/useDashboard'; import { OccupationIndicators } from '@/interfaces/observatoire/componentsInterfaces'; import { fr } from '@codegouvfr/react-dsfr'; import { @@ -14,15 +16,12 @@ import { Title, Tooltip, } from 'chart.js'; -import { useContext } from 'react'; import { Line } from 'react-chartjs-2'; -import { GetApiUrl } from '../../../../helpers/api'; -import { chartLabels } from '../../../../helpers/graph'; ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler); export default function TrajetsGraph({ title,indic }: { title: string, indic:OccupationIndicators }) { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const options = { responsive: true, plugins: { diff --git a/public/src/app/observatoire/territoire/graphs/RepartitionDistanceGraph.tsx b/public/src/app/observatoire/territoire/graphs/RepartitionDistanceGraph.tsx index 07d4d94c91..f7440c2119 100644 --- a/public/src/app/observatoire/territoire/graphs/RepartitionDistanceGraph.tsx +++ b/public/src/app/observatoire/territoire/graphs/RepartitionDistanceGraph.tsx @@ -1,18 +1,17 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; -import { DashboardContext } from '@/context/DashboardProvider'; +import { GetApiUrl } from '@/helpers/api'; import { useApi } from '@/hooks/useApi'; +import { useDashboard } from '@/hooks/useDashboard'; import { DistributionDistanceDataInterface } from '@/interfaces/observatoire/dataInterfaces'; import { fr } from '@codegouvfr/react-dsfr'; import { ArcElement, ChartData, Chart as ChartJS, Legend, Title, Tooltip } from 'chart.js'; import ChartDataLabels, { Context } from 'chartjs-plugin-datalabels'; -import { useContext } from 'react'; import { Doughnut } from 'react-chartjs-2'; -import { GetApiUrl } from '../../../../helpers/api'; ChartJS.register(ArcElement, Title, Tooltip, Legend); export default function RepartitionDistanceGraph({ title }: { title: string }) { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const options = { responsive: true, maintainAspectRatio: false, diff --git a/public/src/app/observatoire/territoire/graphs/RepartitionHoraireGraph.tsx b/public/src/app/observatoire/territoire/graphs/RepartitionHoraireGraph.tsx index 9d08bcf84b..a72fa9de10 100644 --- a/public/src/app/observatoire/territoire/graphs/RepartitionHoraireGraph.tsx +++ b/public/src/app/observatoire/territoire/graphs/RepartitionHoraireGraph.tsx @@ -1,18 +1,17 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; -import { DashboardContext } from '@/context/DashboardProvider'; +import { GetApiUrl } from '@/helpers/api'; import { useApi } from '@/hooks/useApi'; +import { useDashboard } from '@/hooks/useDashboard'; import { Hour } from '@/interfaces/observatoire/Perimeter'; import { DistributionHoraireDataInterface } from '@/interfaces/observatoire/dataInterfaces'; import { fr } from '@codegouvfr/react-dsfr'; import { BarElement, CategoryScale, ChartData, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js'; -import { useContext } from 'react'; import { Bar } from 'react-chartjs-2'; -import { GetApiUrl } from '../../../../helpers/api'; ChartJS.register(BarElement, CategoryScale, LinearScale, Title, Tooltip, Legend); export default function RepartitionHoraireGraph({ title }: { title: string }) { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const options = { responsive: true, maintainAspectRatio: false, diff --git a/public/src/app/observatoire/territoire/maps/AiresMap.tsx b/public/src/app/observatoire/territoire/maps/AiresMap.tsx index 0b32fbf85e..8fa9621193 100644 --- a/public/src/app/observatoire/territoire/maps/AiresMap.tsx +++ b/public/src/app/observatoire/territoire/maps/AiresMap.tsx @@ -1,8 +1,8 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; import AppMap from '@/components/observatoire/maps/Map'; import { Config } from '@/config'; -import { DashboardContext } from '@/context/DashboardProvider'; import { useApi } from '@/hooks/useApi'; +import { useDashboard } from '@/hooks/useDashboard'; import { useSwitchFilters } from '@/hooks/useSwitchFilters'; import { ClasseInterface } from '@/interfaces/observatoire/componentsInterfaces'; import type { AiresCovoiturageDataInterface } from '@/interfaces/observatoire/dataInterfaces'; @@ -13,11 +13,11 @@ import bbox from '@turf/bbox'; import { feature, featureCollection } from '@turf/helpers'; import { FeatureCollection } from 'geojson'; import { LngLatBoundsLike } from 'maplibre-gl'; -import { useCallback, useContext, useMemo, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { CircleLayer, Layer, Popup, Source } from 'react-map-gl/maplibre'; export default function AiresCovoiturageMap({ title }: { title: string }) { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const mapTitle = title; const apiUrl = Config.get('next.public_api_url', ''); const url = `${apiUrl}/aires-covoiturage?code=${dashboard.params.code}&type=${dashboard.params.type}`; diff --git a/public/src/app/observatoire/territoire/maps/DensiteMap.tsx b/public/src/app/observatoire/territoire/maps/DensiteMap.tsx index cb93cff45e..0430676f38 100644 --- a/public/src/app/observatoire/territoire/maps/DensiteMap.tsx +++ b/public/src/app/observatoire/territoire/maps/DensiteMap.tsx @@ -1,9 +1,9 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; import DeckMap from '@/components/observatoire/maps/DeckMap'; import { Config } from '@/config'; -import { DashboardContext } from '@/context/DashboardProvider'; import { classColor, jenks } from '@/helpers/analyse'; import { useApi } from '@/hooks/useApi'; +import { useDashboard } from '@/hooks/useDashboard'; import type { DensiteDataInterface } from '@/interfaces/observatoire/dataInterfaces'; import { fr } from '@codegouvfr/react-dsfr'; import { H3HexagonLayer } from '@deck.gl/geo-layers/typed'; @@ -11,10 +11,10 @@ import bbox from '@turf/bbox'; import { multiPolygon } from '@turf/helpers'; import { cellsToMultiPolygon } from 'h3-js'; import { LngLatBoundsLike } from 'maplibre-gl'; -import { useContext, useMemo } from 'react'; +import { useMemo } from 'react'; export default function DensiteMap({ title }: { title: string }) { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const mapTitle = title; const apiUrl = Config.get('next.public_api_url', ''); const url = `${apiUrl}/location?code=${dashboard.params.code}&type=${dashboard.params.type}&year=${dashboard.params.year}&month=${dashboard.params.month}&zoom=8`; diff --git a/public/src/app/observatoire/territoire/maps/FluxMap.tsx b/public/src/app/observatoire/territoire/maps/FluxMap.tsx index 6a3acd5124..5984eed35f 100644 --- a/public/src/app/observatoire/territoire/maps/FluxMap.tsx +++ b/public/src/app/observatoire/territoire/maps/FluxMap.tsx @@ -1,20 +1,20 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; import DeckMap from '@/components/observatoire/maps/DeckMap'; import { Config } from '@/config'; -import { DashboardContext } from '@/context/DashboardProvider'; import { classWidth, getLegendClasses, jenks } from '@/helpers/analyse'; +import { GetApiUrl } from '@/helpers/api'; import { useApi } from '@/hooks/useApi'; +import { useDashboard } from '@/hooks/useDashboard'; import type { FluxDataInterface } from '@/interfaces/observatoire/dataInterfaces'; import { fr } from '@codegouvfr/react-dsfr'; import { ArcLayer } from '@deck.gl/layers/typed'; import bbox from '@turf/bbox'; import { multiPoint } from '@turf/helpers'; import { LngLatBoundsLike } from 'maplibre-gl'; -import { useContext, useMemo } from 'react'; -import { GetApiUrl } from '../../../../helpers/api'; +import { useMemo } from 'react'; export default function FluxMap({ title }: { title: string }) { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const params = [ `code=${dashboard.params.code}`, `type=${dashboard.params.type}`, diff --git a/public/src/app/observatoire/territoire/maps/OccupationMap.tsx b/public/src/app/observatoire/territoire/maps/OccupationMap.tsx index 5a3fa0e050..a5351eb7cd 100644 --- a/public/src/app/observatoire/territoire/maps/OccupationMap.tsx +++ b/public/src/app/observatoire/territoire/maps/OccupationMap.tsx @@ -1,9 +1,10 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; import AppMap from '@/components/observatoire/maps/Map'; import { Config } from '@/config'; -import { DashboardContext } from '@/context/DashboardProvider'; import { getLegendClasses } from '@/helpers/analyse'; +import { GetApiUrl } from '@/helpers/api'; import { useApi } from '@/hooks/useApi'; +import { useDashboard } from '@/hooks/useDashboard'; import { ClasseInterface } from '@/interfaces/observatoire/componentsInterfaces'; import type { OccupationDataInterface } from '@/interfaces/observatoire/dataInterfaces'; import { AnalyseInterface } from '@/interfaces/observatoire/helpersInterfaces'; @@ -12,12 +13,11 @@ import bbox from '@turf/bbox'; import { feature, featureCollection } from '@turf/helpers'; import { FeatureCollection } from 'geojson'; import { LngLatBoundsLike } from 'maplibre-gl'; -import { useCallback, useContext, useMemo, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { CircleLayer, Layer, Popup, Source } from 'react-map-gl/maplibre'; -import { GetApiUrl } from '../../../../helpers/api'; export default function OccupationMap({ title }: { title: string }) { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const mapTitle = title; const params = [ `code=${dashboard.params.code}`, diff --git a/public/src/app/observatoire/territoire/tables/BestFluxTable.tsx b/public/src/app/observatoire/territoire/tables/BestFluxTable.tsx index 24ac73678e..9f18bd08e8 100644 --- a/public/src/app/observatoire/territoire/tables/BestFluxTable.tsx +++ b/public/src/app/observatoire/territoire/tables/BestFluxTable.tsx @@ -1,12 +1,11 @@ -import { DashboardContext } from '@/context/DashboardProvider'; +import { GetApiUrl } from '@/helpers/api'; import { useApi } from "@/hooks/useApi"; +import { useDashboard } from '@/hooks/useDashboard'; import { BestFluxDataInterface } from "@/interfaces/observatoire/dataInterfaces"; import { fr } from "@codegouvfr/react-dsfr"; import { Table as TableStyled } from "@codegouvfr/react-dsfr/Table"; import { css } from "@emotion/react"; import styled from '@emotion/styled'; -import { useContext } from 'react'; -import { GetApiUrl } from '../../../../helpers/api'; const Table = styled(TableStyled)( css` @@ -23,7 +22,7 @@ const Table = styled(TableStyled)( `); export default function BestFluxTable({ title, limit}: { title: string, limit: number }) { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const params = [ `code=${dashboard.params.code}`, `type=${dashboard.params.type}`, diff --git a/public/src/app/observatoire/territoire/tables/BestTerritoriesTable.tsx b/public/src/app/observatoire/territoire/tables/BestTerritoriesTable.tsx index 57044ec860..3b13fbc8a5 100644 --- a/public/src/app/observatoire/territoire/tables/BestTerritoriesTable.tsx +++ b/public/src/app/observatoire/territoire/tables/BestTerritoriesTable.tsx @@ -1,12 +1,11 @@ -import { DashboardContext } from '@/context/DashboardProvider'; +import { GetApiUrl } from '@/helpers/api'; import { useApi } from "@/hooks/useApi"; +import { useDashboard } from '@/hooks/useDashboard'; import { BestTerritoriesDataInterface } from "@/interfaces/observatoire/dataInterfaces"; import { fr } from "@codegouvfr/react-dsfr"; import { Table as TableStyled } from "@codegouvfr/react-dsfr/Table"; import { css } from "@emotion/react"; import styled from '@emotion/styled'; -import { useContext } from 'react'; -import { GetApiUrl } from '../../../../helpers/api'; const Table = styled(TableStyled)( css` @@ -23,7 +22,7 @@ const Table = styled(TableStyled)( `); export default function BestTerritoriesTable({ title, limit }: { title: string, limit: number }) { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const params = [ `code=${dashboard.params.code}`, `type=${dashboard.params.type}`, diff --git a/public/src/components/observatoire/SelectIncentiveTerritory.tsx b/public/src/components/observatoire/SelectIncentiveTerritory.tsx index 534260d2ff..e118dd6268 100644 --- a/public/src/components/observatoire/SelectIncentiveTerritory.tsx +++ b/public/src/components/observatoire/SelectIncentiveTerritory.tsx @@ -1,15 +1,15 @@ 'use client' -import { DashboardContext } from '@/context/DashboardProvider'; import { castPerimeterType, getUrl } from '@/helpers/search'; +import { useDashboard } from '@/hooks/useDashboard'; +import { PerimeterType } from '@/interfaces/observatoire/Perimeter'; import { fr } from '@codegouvfr/react-dsfr'; import Autocomplete from '@mui/material/Autocomplete'; import TextField from '@mui/material/TextField'; import { useRouter } from 'next/navigation'; -import { useContext, useState } from 'react'; -import { PerimeterType } from '../../interfaces/observatoire/Perimeter'; +import { useState } from 'react'; export default function SelectIncentiveTerritory(props: { url: string, data:any[] }) { - const { dashboard } =useContext(DashboardContext) + const dashboard = useDashboard(); const router = useRouter(); const defaultOption = [props.data,{ code: dashboard.params.code, diff --git a/public/src/components/observatoire/SelectMonth.tsx b/public/src/components/observatoire/SelectMonth.tsx index c15c302694..0fb8cde208 100644 --- a/public/src/components/observatoire/SelectMonth.tsx +++ b/public/src/components/observatoire/SelectMonth.tsx @@ -1,12 +1,12 @@ 'use client' -import { DashboardContext } from '@/context/DashboardProvider'; import { monthList } from '@/helpers/lists'; -import { useContext, useEffect, useState } from 'react'; +import { useDashboard } from '@/hooks/useDashboard'; +import { useEffect, useState } from 'react'; import SelectInList from '../common/SelectInList'; export default function SelectMonth() { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const [monthAvailable, setMonthAvailable] = useState<{id: number; name: string; disabled: boolean;}[]>([]); useEffect(()=>{ diff --git a/public/src/components/observatoire/SelectObserve.tsx b/public/src/components/observatoire/SelectObserve.tsx index 33b128de54..6fbf58621d 100644 --- a/public/src/components/observatoire/SelectObserve.tsx +++ b/public/src/components/observatoire/SelectObserve.tsx @@ -1,8 +1,7 @@ import { territoryList } from '@/helpers/lists'; +import { useDashboard } from '@/hooks/useDashboard'; import { PerimeterType } from '@/interfaces/observatoire/Perimeter'; import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'; -import { useContext } from 'react'; -import { DashboardContext } from '@/context/DashboardProvider'; type SelectObserveProps = { id: string, @@ -10,7 +9,7 @@ type SelectObserveProps = { }; export default function SelectObserve(props: SelectObserveProps) { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const observeObject = territoryList.find(d=>d.id===dashboard.params.type) const filteredList = observeObject ? territoryList.filter(d=> territoryList.indexOf(d) < territoryList.indexOf(observeObject)) : []; diff --git a/public/src/components/observatoire/SelectPeriod.tsx b/public/src/components/observatoire/SelectPeriod.tsx index b1055b4d70..a07d773261 100644 --- a/public/src/components/observatoire/SelectPeriod.tsx +++ b/public/src/components/observatoire/SelectPeriod.tsx @@ -1,8 +1,7 @@ -import { DashboardContext } from '@/context/DashboardProvider'; import { periodList } from '@/helpers/lists'; +import { useDashboard } from '@/hooks/useDashboard'; +import { PeriodType } from '@/interfaces/observatoire/componentsInterfaces'; import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'; -import { useContext } from 'react'; -import { PeriodType } from '../../interfaces/observatoire/componentsInterfaces'; type SelectPeriodProps = { id: string, @@ -10,7 +9,7 @@ type SelectPeriodProps = { }; export default function SelectPeriod(props: SelectPeriodProps) { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); return ( <> diff --git a/public/src/components/observatoire/SelectSemester.tsx b/public/src/components/observatoire/SelectSemester.tsx index 9d743b56d7..e03f28fc10 100644 --- a/public/src/components/observatoire/SelectSemester.tsx +++ b/public/src/components/observatoire/SelectSemester.tsx @@ -1,12 +1,12 @@ 'use client' -import { DashboardContext } from '@/context/DashboardProvider'; import { semesterList } from '@/helpers/lists'; -import { useContext, useEffect, useState } from 'react'; +import { useDashboard } from '@/hooks/useDashboard'; +import { useEffect, useState } from 'react'; import SelectInList from '../common/SelectInList'; export default function SelectSemester() { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const [semesterAvailable, setSemesterAvailable] = useState<{id: number; name: string; disabled: boolean;}[]>([]); useEffect(()=>{ const monthSemester = [6,12]; diff --git a/public/src/components/observatoire/SelectTerritory.tsx b/public/src/components/observatoire/SelectTerritory.tsx index 65e6765f97..000c11524a 100644 --- a/public/src/components/observatoire/SelectTerritory.tsx +++ b/public/src/components/observatoire/SelectTerritory.tsx @@ -1,15 +1,15 @@ 'use client' -import { DashboardContext } from '@/context/DashboardProvider'; import { castPerimeterType, fetchSearchAPI, getUrl } from '@/helpers/search'; +import { useDashboard } from '@/hooks/useDashboard'; import { fr } from '@codegouvfr/react-dsfr'; import Tag from '@codegouvfr/react-dsfr/Tag'; import Autocomplete from '@mui/material/Autocomplete'; import TextField from '@mui/material/TextField'; import { useRouter } from 'next/navigation'; -import { useContext, useState } from 'react'; +import { useState } from 'react'; export default function SelectTerritory(props: { url:string }) { - const { dashboard } =useContext(DashboardContext) + const dashboard = useDashboard(); const router = useRouter(); const defaultOption = { territory: dashboard.params.code, diff --git a/public/src/components/observatoire/SelectTrimester.tsx b/public/src/components/observatoire/SelectTrimester.tsx index 727482eae0..d597708ddf 100644 --- a/public/src/components/observatoire/SelectTrimester.tsx +++ b/public/src/components/observatoire/SelectTrimester.tsx @@ -1,12 +1,12 @@ 'use client' -import { DashboardContext } from '@/context/DashboardProvider'; import { trimesterList } from '@/helpers/lists'; -import { useContext, useEffect, useState } from 'react'; +import { useDashboard } from '@/hooks/useDashboard'; +import { useEffect, useState } from 'react'; import SelectInList from '../common/SelectInList'; export default function SelectTrimester() { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); const [trimesterAvailable, setTrimesterAvailable] = useState<{id: number; name: string; disabled: boolean;}[]>([]); useEffect(()=>{ const monthTrimester = [3,6,9,12]; diff --git a/public/src/components/observatoire/SelectYear.tsx b/public/src/components/observatoire/SelectYear.tsx index 52e4fe6c21..f83b555cb1 100644 --- a/public/src/components/observatoire/SelectYear.tsx +++ b/public/src/components/observatoire/SelectYear.tsx @@ -1,12 +1,11 @@ 'use client' -import { DashboardContext } from '@/context/DashboardProvider'; import { yearList } from '@/helpers/lists'; -import { useContext } from 'react'; +import { useDashboard } from '@/hooks/useDashboard'; import SelectInList from '../common/SelectInList'; export default function SelectYear() { - const { dashboard } =useContext(DashboardContext); + const dashboard = useDashboard(); return ( <> diff --git a/public/src/helpers/api.ts b/public/src/helpers/api.ts index e8e2688cc2..ce082ae6f9 100644 --- a/public/src/helpers/api.ts +++ b/public/src/helpers/api.ts @@ -1,12 +1,11 @@ import { Config } from "@/config"; -import { DashboardContext } from "@/context/DashboardProvider"; -import { useContext } from "react"; +import { useDashboard } from "../hooks/useDashboard"; export const GetApiUrl = ( route: string, params: string[], ) => { - const { dashboard } = useContext(DashboardContext); + const dashboard = useDashboard(); switch (dashboard.params.period) { case "month": params.push(`month=${dashboard.params.month}`); @@ -18,7 +17,5 @@ export const GetApiUrl = ( params.push(`semester=${dashboard.params.semester}`); break; } - return `${Config.get("next.public_api_url", "")}/${route}?${ - params.join("&") - }`; + return `${Config.get("next.public_api_url", "")}/${route}?${params.join("&")}`; }; diff --git a/public/src/helpers/dashboard.ts b/public/src/helpers/dashboard.ts index d7f39aa675..e11632e0c2 100644 --- a/public/src/helpers/dashboard.ts +++ b/public/src/helpers/dashboard.ts @@ -1,8 +1,7 @@ -import { DashboardContext } from "@/context/DashboardProvider"; -import { useContext } from "react"; +import { useDashboard } from "@/hooks/useDashboard"; export function GetPeriod() { - const { dashboard } = useContext(DashboardContext); + const dashboard = useDashboard(); const period = { start_date: new Date(dashboard.params.year, dashboard.params.month - 1, 2) .toISOString().slice(0, 10), From d93207f2773107e9792527f96da2322228ecaf54 Mon Sep 17 00:00:00 2001 From: Ludovic Delhomme Date: Fri, 6 Dec 2024 15:20:05 +0100 Subject: [PATCH 2/3] fix: context dashboard --- .../src/app/observatoire/territoire/KeyFigures.tsx | 4 ++-- .../territoire/graphs/DistanceGraph.tsx | 4 ++-- .../observatoire/territoire/graphs/FluxGraph.tsx | 4 ++-- .../territoire/graphs/IncentiveGraph.tsx | 4 ++-- .../territoire/graphs/OccupationGraph.tsx | 4 ++-- .../territoire/graphs/RepartitionDistanceGraph.tsx | 4 ++-- .../territoire/graphs/RepartitionHoraireGraph.tsx | 4 ++-- .../app/observatoire/territoire/maps/AiresMap.tsx | 4 ++-- .../observatoire/territoire/maps/DensiteMap.tsx | 4 ++-- .../app/observatoire/territoire/maps/FluxMap.tsx | 4 ++-- .../observatoire/territoire/maps/OccupationMap.tsx | 4 ++-- .../territoire/tables/BestFluxTable.tsx | 4 ++-- .../territoire/tables/BestTerritoriesTable.tsx | 4 ++-- .../observatoire/SelectIncentiveTerritory.tsx | 4 ++-- public/src/components/observatoire/SelectMonth.tsx | 4 ++-- .../src/components/observatoire/SelectObserve.tsx | 4 ++-- .../src/components/observatoire/SelectPeriod.tsx | 4 ++-- .../src/components/observatoire/SelectSemester.tsx | 4 ++-- .../components/observatoire/SelectTerritory.tsx | 4 ++-- .../components/observatoire/SelectTrimester.tsx | 4 ++-- public/src/components/observatoire/SelectYear.tsx | 4 ++-- public/src/context/DashboardProvider.tsx | 14 ++++++++++++-- public/src/helpers/api.ts | 4 ++-- public/src/helpers/dashboard.ts | 4 ++-- 24 files changed, 58 insertions(+), 48 deletions(-) diff --git a/public/src/app/observatoire/territoire/KeyFigures.tsx b/public/src/app/observatoire/territoire/KeyFigures.tsx index da6cbe9288..98b630ffe0 100644 --- a/public/src/app/observatoire/territoire/KeyFigures.tsx +++ b/public/src/app/observatoire/territoire/KeyFigures.tsx @@ -1,13 +1,13 @@ import Rows from '@/components/observatoire/indicators/Rows'; import { Config } from '@/config'; import { useApi } from '@/hooks/useApi'; -import { useDashboard } from '@/hooks/useDashboard'; import { IndicatorProps } from '@/interfaces/observatoire/componentsInterfaces'; import { KeyFiguresDataInterface } from '@/interfaces/observatoire/dataInterfaces'; import { fr } from '@codegouvfr/react-dsfr'; +import { useDashboardContext } from '../../../context/DashboardProvider'; export default function KeyFigures() { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const apiUrl = Config.get('next.public_api_url', ''); const url = () => { const params = [ diff --git a/public/src/app/observatoire/territoire/graphs/DistanceGraph.tsx b/public/src/app/observatoire/territoire/graphs/DistanceGraph.tsx index a0316c9fd1..cb111e2336 100644 --- a/public/src/app/observatoire/territoire/graphs/DistanceGraph.tsx +++ b/public/src/app/observatoire/territoire/graphs/DistanceGraph.tsx @@ -2,7 +2,6 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; import { GetApiUrl } from '@/helpers/api'; import { chartLabels } from '@/helpers/graph'; import { useApi } from '@/hooks/useApi'; -import { useDashboard } from '@/hooks/useDashboard'; import { fr } from '@codegouvfr/react-dsfr'; import { CategoryScale, @@ -16,11 +15,12 @@ import { Tooltip, } from 'chart.js'; import { Line } from 'react-chartjs-2'; +import { useDashboardContext } from '../../../../context/DashboardProvider'; ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler); export default function DistanceGraph({ title }: { title: string }) { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const options = { responsive: true, plugins: { diff --git a/public/src/app/observatoire/territoire/graphs/FluxGraph.tsx b/public/src/app/observatoire/territoire/graphs/FluxGraph.tsx index ece51b9ab7..2ff05ba9e8 100644 --- a/public/src/app/observatoire/territoire/graphs/FluxGraph.tsx +++ b/public/src/app/observatoire/territoire/graphs/FluxGraph.tsx @@ -2,7 +2,6 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; import { GetApiUrl } from '@/helpers/api'; import { chartLabels } from '@/helpers/graph'; import { useApi } from '@/hooks/useApi'; -import { useDashboard } from '@/hooks/useDashboard'; import { FluxIndicators } from '@/interfaces/observatoire/componentsInterfaces'; import { fr } from '@codegouvfr/react-dsfr'; import { @@ -17,11 +16,12 @@ import { Tooltip, } from 'chart.js'; import { Line } from 'react-chartjs-2'; +import { useDashboardContext } from '../../../../context/DashboardProvider'; ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler); export default function TrajetsGraph({ title,indic }: { title: string, indic:FluxIndicators }) { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const options = { responsive: true, plugins: { diff --git a/public/src/app/observatoire/territoire/graphs/IncentiveGraph.tsx b/public/src/app/observatoire/territoire/graphs/IncentiveGraph.tsx index 0155d6ebc7..8f1a430fa0 100644 --- a/public/src/app/observatoire/territoire/graphs/IncentiveGraph.tsx +++ b/public/src/app/observatoire/territoire/graphs/IncentiveGraph.tsx @@ -1,17 +1,17 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; import { GetApiUrl } from '@/helpers/api'; import { useApi } from '@/hooks/useApi'; -import { useDashboard } from '@/hooks/useDashboard'; import { IncentiveDataInterface } from '@/interfaces/observatoire/dataInterfaces'; import { fr } from '@codegouvfr/react-dsfr'; import { ArcElement, ChartData, Chart as ChartJS, Legend, Title, Tooltip } from 'chart.js'; import ChartDataLabels, { Context } from 'chartjs-plugin-datalabels'; import { Doughnut } from 'react-chartjs-2'; +import { useDashboardContext } from '../../../../context/DashboardProvider'; ChartJS.register(ArcElement, Title, Tooltip, Legend); export default function IncentiveGraph({ title }: { title: string }) { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const options = { responsive: true, maintainAspectRatio: false, diff --git a/public/src/app/observatoire/territoire/graphs/OccupationGraph.tsx b/public/src/app/observatoire/territoire/graphs/OccupationGraph.tsx index cbd53bbbaf..3d19e54058 100644 --- a/public/src/app/observatoire/territoire/graphs/OccupationGraph.tsx +++ b/public/src/app/observatoire/territoire/graphs/OccupationGraph.tsx @@ -2,7 +2,6 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; import { GetApiUrl } from '@/helpers/api'; import { chartLabels } from '@/helpers/graph'; import { useApi } from '@/hooks/useApi'; -import { useDashboard } from '@/hooks/useDashboard'; import { OccupationIndicators } from '@/interfaces/observatoire/componentsInterfaces'; import { fr } from '@codegouvfr/react-dsfr'; import { @@ -17,11 +16,12 @@ import { Tooltip, } from 'chart.js'; import { Line } from 'react-chartjs-2'; +import { useDashboardContext } from '../../../../context/DashboardProvider'; ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler); export default function TrajetsGraph({ title,indic }: { title: string, indic:OccupationIndicators }) { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const options = { responsive: true, plugins: { diff --git a/public/src/app/observatoire/territoire/graphs/RepartitionDistanceGraph.tsx b/public/src/app/observatoire/territoire/graphs/RepartitionDistanceGraph.tsx index f7440c2119..fdd2e8369d 100644 --- a/public/src/app/observatoire/territoire/graphs/RepartitionDistanceGraph.tsx +++ b/public/src/app/observatoire/territoire/graphs/RepartitionDistanceGraph.tsx @@ -1,17 +1,17 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; import { GetApiUrl } from '@/helpers/api'; import { useApi } from '@/hooks/useApi'; -import { useDashboard } from '@/hooks/useDashboard'; import { DistributionDistanceDataInterface } from '@/interfaces/observatoire/dataInterfaces'; import { fr } from '@codegouvfr/react-dsfr'; import { ArcElement, ChartData, Chart as ChartJS, Legend, Title, Tooltip } from 'chart.js'; import ChartDataLabels, { Context } from 'chartjs-plugin-datalabels'; import { Doughnut } from 'react-chartjs-2'; +import { useDashboardContext } from '../../../../context/DashboardProvider'; ChartJS.register(ArcElement, Title, Tooltip, Legend); export default function RepartitionDistanceGraph({ title }: { title: string }) { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const options = { responsive: true, maintainAspectRatio: false, diff --git a/public/src/app/observatoire/territoire/graphs/RepartitionHoraireGraph.tsx b/public/src/app/observatoire/territoire/graphs/RepartitionHoraireGraph.tsx index a72fa9de10..b8fa151fbc 100644 --- a/public/src/app/observatoire/territoire/graphs/RepartitionHoraireGraph.tsx +++ b/public/src/app/observatoire/territoire/graphs/RepartitionHoraireGraph.tsx @@ -1,17 +1,17 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; import { GetApiUrl } from '@/helpers/api'; import { useApi } from '@/hooks/useApi'; -import { useDashboard } from '@/hooks/useDashboard'; import { Hour } from '@/interfaces/observatoire/Perimeter'; import { DistributionHoraireDataInterface } from '@/interfaces/observatoire/dataInterfaces'; import { fr } from '@codegouvfr/react-dsfr'; import { BarElement, CategoryScale, ChartData, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js'; import { Bar } from 'react-chartjs-2'; +import { useDashboardContext } from '../../../../context/DashboardProvider'; ChartJS.register(BarElement, CategoryScale, LinearScale, Title, Tooltip, Legend); export default function RepartitionHoraireGraph({ title }: { title: string }) { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const options = { responsive: true, maintainAspectRatio: false, diff --git a/public/src/app/observatoire/territoire/maps/AiresMap.tsx b/public/src/app/observatoire/territoire/maps/AiresMap.tsx index 8fa9621193..ca676f4867 100644 --- a/public/src/app/observatoire/territoire/maps/AiresMap.tsx +++ b/public/src/app/observatoire/territoire/maps/AiresMap.tsx @@ -2,7 +2,6 @@ import DownloadButton from '@/components/observatoire/DownloadButton'; import AppMap from '@/components/observatoire/maps/Map'; import { Config } from '@/config'; import { useApi } from '@/hooks/useApi'; -import { useDashboard } from '@/hooks/useDashboard'; import { useSwitchFilters } from '@/hooks/useSwitchFilters'; import { ClasseInterface } from '@/interfaces/observatoire/componentsInterfaces'; import type { AiresCovoiturageDataInterface } from '@/interfaces/observatoire/dataInterfaces'; @@ -15,9 +14,10 @@ import { FeatureCollection } from 'geojson'; import { LngLatBoundsLike } from 'maplibre-gl'; import { useCallback, useMemo, useState } from 'react'; import { CircleLayer, Layer, Popup, Source } from 'react-map-gl/maplibre'; +import { useDashboardContext } from '../../../../context/DashboardProvider'; export default function AiresCovoiturageMap({ title }: { title: string }) { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const mapTitle = title; const apiUrl = Config.get('next.public_api_url', ''); const url = `${apiUrl}/aires-covoiturage?code=${dashboard.params.code}&type=${dashboard.params.type}`; diff --git a/public/src/app/observatoire/territoire/maps/DensiteMap.tsx b/public/src/app/observatoire/territoire/maps/DensiteMap.tsx index 0430676f38..6ba83a8385 100644 --- a/public/src/app/observatoire/territoire/maps/DensiteMap.tsx +++ b/public/src/app/observatoire/territoire/maps/DensiteMap.tsx @@ -3,7 +3,6 @@ import DeckMap from '@/components/observatoire/maps/DeckMap'; import { Config } from '@/config'; import { classColor, jenks } from '@/helpers/analyse'; import { useApi } from '@/hooks/useApi'; -import { useDashboard } from '@/hooks/useDashboard'; import type { DensiteDataInterface } from '@/interfaces/observatoire/dataInterfaces'; import { fr } from '@codegouvfr/react-dsfr'; import { H3HexagonLayer } from '@deck.gl/geo-layers/typed'; @@ -12,9 +11,10 @@ import { multiPolygon } from '@turf/helpers'; import { cellsToMultiPolygon } from 'h3-js'; import { LngLatBoundsLike } from 'maplibre-gl'; import { useMemo } from 'react'; +import { useDashboardContext } from '../../../../context/DashboardProvider'; export default function DensiteMap({ title }: { title: string }) { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const mapTitle = title; const apiUrl = Config.get('next.public_api_url', ''); const url = `${apiUrl}/location?code=${dashboard.params.code}&type=${dashboard.params.type}&year=${dashboard.params.year}&month=${dashboard.params.month}&zoom=8`; diff --git a/public/src/app/observatoire/territoire/maps/FluxMap.tsx b/public/src/app/observatoire/territoire/maps/FluxMap.tsx index 5984eed35f..76adfe511e 100644 --- a/public/src/app/observatoire/territoire/maps/FluxMap.tsx +++ b/public/src/app/observatoire/territoire/maps/FluxMap.tsx @@ -4,7 +4,6 @@ import { Config } from '@/config'; import { classWidth, getLegendClasses, jenks } from '@/helpers/analyse'; import { GetApiUrl } from '@/helpers/api'; import { useApi } from '@/hooks/useApi'; -import { useDashboard } from '@/hooks/useDashboard'; import type { FluxDataInterface } from '@/interfaces/observatoire/dataInterfaces'; import { fr } from '@codegouvfr/react-dsfr'; import { ArcLayer } from '@deck.gl/layers/typed'; @@ -12,9 +11,10 @@ import bbox from '@turf/bbox'; import { multiPoint } from '@turf/helpers'; import { LngLatBoundsLike } from 'maplibre-gl'; import { useMemo } from 'react'; +import { useDashboardContext } from '../../../../context/DashboardProvider'; export default function FluxMap({ title }: { title: string }) { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const params = [ `code=${dashboard.params.code}`, `type=${dashboard.params.type}`, diff --git a/public/src/app/observatoire/territoire/maps/OccupationMap.tsx b/public/src/app/observatoire/territoire/maps/OccupationMap.tsx index a5351eb7cd..8b79f2acf1 100644 --- a/public/src/app/observatoire/territoire/maps/OccupationMap.tsx +++ b/public/src/app/observatoire/territoire/maps/OccupationMap.tsx @@ -4,7 +4,6 @@ import { Config } from '@/config'; import { getLegendClasses } from '@/helpers/analyse'; import { GetApiUrl } from '@/helpers/api'; import { useApi } from '@/hooks/useApi'; -import { useDashboard } from '@/hooks/useDashboard'; import { ClasseInterface } from '@/interfaces/observatoire/componentsInterfaces'; import type { OccupationDataInterface } from '@/interfaces/observatoire/dataInterfaces'; import { AnalyseInterface } from '@/interfaces/observatoire/helpersInterfaces'; @@ -15,9 +14,10 @@ import { FeatureCollection } from 'geojson'; import { LngLatBoundsLike } from 'maplibre-gl'; import { useCallback, useMemo, useState } from 'react'; import { CircleLayer, Layer, Popup, Source } from 'react-map-gl/maplibre'; +import { useDashboardContext } from '../../../../context/DashboardProvider'; export default function OccupationMap({ title }: { title: string }) { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const mapTitle = title; const params = [ `code=${dashboard.params.code}`, diff --git a/public/src/app/observatoire/territoire/tables/BestFluxTable.tsx b/public/src/app/observatoire/territoire/tables/BestFluxTable.tsx index 9f18bd08e8..e19a7486fe 100644 --- a/public/src/app/observatoire/territoire/tables/BestFluxTable.tsx +++ b/public/src/app/observatoire/territoire/tables/BestFluxTable.tsx @@ -1,11 +1,11 @@ import { GetApiUrl } from '@/helpers/api'; import { useApi } from "@/hooks/useApi"; -import { useDashboard } from '@/hooks/useDashboard'; import { BestFluxDataInterface } from "@/interfaces/observatoire/dataInterfaces"; import { fr } from "@codegouvfr/react-dsfr"; import { Table as TableStyled } from "@codegouvfr/react-dsfr/Table"; import { css } from "@emotion/react"; import styled from '@emotion/styled'; +import { useDashboardContext } from '../../../../context/DashboardProvider'; const Table = styled(TableStyled)( css` @@ -22,7 +22,7 @@ const Table = styled(TableStyled)( `); export default function BestFluxTable({ title, limit}: { title: string, limit: number }) { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const params = [ `code=${dashboard.params.code}`, `type=${dashboard.params.type}`, diff --git a/public/src/app/observatoire/territoire/tables/BestTerritoriesTable.tsx b/public/src/app/observatoire/territoire/tables/BestTerritoriesTable.tsx index 3b13fbc8a5..842f87fec5 100644 --- a/public/src/app/observatoire/territoire/tables/BestTerritoriesTable.tsx +++ b/public/src/app/observatoire/territoire/tables/BestTerritoriesTable.tsx @@ -1,11 +1,11 @@ import { GetApiUrl } from '@/helpers/api'; import { useApi } from "@/hooks/useApi"; -import { useDashboard } from '@/hooks/useDashboard'; import { BestTerritoriesDataInterface } from "@/interfaces/observatoire/dataInterfaces"; import { fr } from "@codegouvfr/react-dsfr"; import { Table as TableStyled } from "@codegouvfr/react-dsfr/Table"; import { css } from "@emotion/react"; import styled from '@emotion/styled'; +import { useDashboardContext } from '../../../../context/DashboardProvider'; const Table = styled(TableStyled)( css` @@ -22,7 +22,7 @@ const Table = styled(TableStyled)( `); export default function BestTerritoriesTable({ title, limit }: { title: string, limit: number }) { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const params = [ `code=${dashboard.params.code}`, `type=${dashboard.params.type}`, diff --git a/public/src/components/observatoire/SelectIncentiveTerritory.tsx b/public/src/components/observatoire/SelectIncentiveTerritory.tsx index e118dd6268..151385443c 100644 --- a/public/src/components/observatoire/SelectIncentiveTerritory.tsx +++ b/public/src/components/observatoire/SelectIncentiveTerritory.tsx @@ -1,15 +1,15 @@ 'use client' import { castPerimeterType, getUrl } from '@/helpers/search'; -import { useDashboard } from '@/hooks/useDashboard'; import { PerimeterType } from '@/interfaces/observatoire/Perimeter'; import { fr } from '@codegouvfr/react-dsfr'; import Autocomplete from '@mui/material/Autocomplete'; import TextField from '@mui/material/TextField'; import { useRouter } from 'next/navigation'; import { useState } from 'react'; +import { useDashboardContext } from '../../context/DashboardProvider'; export default function SelectIncentiveTerritory(props: { url: string, data:any[] }) { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const router = useRouter(); const defaultOption = [props.data,{ code: dashboard.params.code, diff --git a/public/src/components/observatoire/SelectMonth.tsx b/public/src/components/observatoire/SelectMonth.tsx index 0fb8cde208..6ac5d83f9f 100644 --- a/public/src/components/observatoire/SelectMonth.tsx +++ b/public/src/components/observatoire/SelectMonth.tsx @@ -1,12 +1,12 @@ 'use client' import { monthList } from '@/helpers/lists'; -import { useDashboard } from '@/hooks/useDashboard'; import { useEffect, useState } from 'react'; +import { useDashboardContext } from '../../context/DashboardProvider'; import SelectInList from '../common/SelectInList'; export default function SelectMonth() { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const [monthAvailable, setMonthAvailable] = useState<{id: number; name: string; disabled: boolean;}[]>([]); useEffect(()=>{ diff --git a/public/src/components/observatoire/SelectObserve.tsx b/public/src/components/observatoire/SelectObserve.tsx index 6fbf58621d..a59b07e068 100644 --- a/public/src/components/observatoire/SelectObserve.tsx +++ b/public/src/components/observatoire/SelectObserve.tsx @@ -1,7 +1,7 @@ import { territoryList } from '@/helpers/lists'; -import { useDashboard } from '@/hooks/useDashboard'; import { PerimeterType } from '@/interfaces/observatoire/Perimeter'; import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'; +import { useDashboardContext } from '../../context/DashboardProvider'; type SelectObserveProps = { id: string, @@ -9,7 +9,7 @@ type SelectObserveProps = { }; export default function SelectObserve(props: SelectObserveProps) { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const observeObject = territoryList.find(d=>d.id===dashboard.params.type) const filteredList = observeObject ? territoryList.filter(d=> territoryList.indexOf(d) < territoryList.indexOf(observeObject)) : []; diff --git a/public/src/components/observatoire/SelectPeriod.tsx b/public/src/components/observatoire/SelectPeriod.tsx index a07d773261..8f753600f5 100644 --- a/public/src/components/observatoire/SelectPeriod.tsx +++ b/public/src/components/observatoire/SelectPeriod.tsx @@ -1,7 +1,7 @@ import { periodList } from '@/helpers/lists'; -import { useDashboard } from '@/hooks/useDashboard'; import { PeriodType } from '@/interfaces/observatoire/componentsInterfaces'; import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'; +import { useDashboardContext } from '../../context/DashboardProvider'; type SelectPeriodProps = { id: string, @@ -9,7 +9,7 @@ type SelectPeriodProps = { }; export default function SelectPeriod(props: SelectPeriodProps) { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); return ( <> diff --git a/public/src/components/observatoire/SelectSemester.tsx b/public/src/components/observatoire/SelectSemester.tsx index e03f28fc10..7c52c4bc7d 100644 --- a/public/src/components/observatoire/SelectSemester.tsx +++ b/public/src/components/observatoire/SelectSemester.tsx @@ -1,12 +1,12 @@ 'use client' import { semesterList } from '@/helpers/lists'; -import { useDashboard } from '@/hooks/useDashboard'; import { useEffect, useState } from 'react'; +import { useDashboardContext } from '../../context/DashboardProvider'; import SelectInList from '../common/SelectInList'; export default function SelectSemester() { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const [semesterAvailable, setSemesterAvailable] = useState<{id: number; name: string; disabled: boolean;}[]>([]); useEffect(()=>{ const monthSemester = [6,12]; diff --git a/public/src/components/observatoire/SelectTerritory.tsx b/public/src/components/observatoire/SelectTerritory.tsx index 000c11524a..7498dabfa2 100644 --- a/public/src/components/observatoire/SelectTerritory.tsx +++ b/public/src/components/observatoire/SelectTerritory.tsx @@ -1,15 +1,15 @@ 'use client' import { castPerimeterType, fetchSearchAPI, getUrl } from '@/helpers/search'; -import { useDashboard } from '@/hooks/useDashboard'; import { fr } from '@codegouvfr/react-dsfr'; import Tag from '@codegouvfr/react-dsfr/Tag'; import Autocomplete from '@mui/material/Autocomplete'; import TextField from '@mui/material/TextField'; import { useRouter } from 'next/navigation'; import { useState } from 'react'; +import { useDashboardContext } from '../../context/DashboardProvider'; export default function SelectTerritory(props: { url:string }) { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const router = useRouter(); const defaultOption = { territory: dashboard.params.code, diff --git a/public/src/components/observatoire/SelectTrimester.tsx b/public/src/components/observatoire/SelectTrimester.tsx index d597708ddf..ed9148cbc1 100644 --- a/public/src/components/observatoire/SelectTrimester.tsx +++ b/public/src/components/observatoire/SelectTrimester.tsx @@ -1,12 +1,12 @@ 'use client' import { trimesterList } from '@/helpers/lists'; -import { useDashboard } from '@/hooks/useDashboard'; import { useEffect, useState } from 'react'; +import { useDashboardContext } from '../../context/DashboardProvider'; import SelectInList from '../common/SelectInList'; export default function SelectTrimester() { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const [trimesterAvailable, setTrimesterAvailable] = useState<{id: number; name: string; disabled: boolean;}[]>([]); useEffect(()=>{ const monthTrimester = [3,6,9,12]; diff --git a/public/src/components/observatoire/SelectYear.tsx b/public/src/components/observatoire/SelectYear.tsx index f83b555cb1..e4bba93313 100644 --- a/public/src/components/observatoire/SelectYear.tsx +++ b/public/src/components/observatoire/SelectYear.tsx @@ -1,11 +1,11 @@ 'use client' import { yearList } from '@/helpers/lists'; -import { useDashboard } from '@/hooks/useDashboard'; +import { useDashboardContext } from '../../context/DashboardProvider'; import SelectInList from '../common/SelectInList'; export default function SelectYear() { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); return ( <> diff --git a/public/src/context/DashboardProvider.tsx b/public/src/context/DashboardProvider.tsx index d40c6d2a26..a13b93718e 100644 --- a/public/src/context/DashboardProvider.tsx +++ b/public/src/context/DashboardProvider.tsx @@ -1,13 +1,23 @@ import { useDashboard } from '@/hooks/useDashboard'; import { DashboardContextType } from '@/interfaces/common/contextInterface'; -import { createContext } from 'react'; +import { createContext, useContext } from 'react'; + +const DashboardContext = createContext(undefined); + export default function DashboardContextProvider({children}: { children: React.ReactNode}) { const dashboard = useDashboard(); - const DashboardContext = createContext({dashboard}) return( {children} ) } + +export const useDashboardContext = () => { + const context = useContext(DashboardContext); + if (!context) { + throw new Error('useDashboardContext must be used within an DashboardContextProvider'); + } + return context; +}; diff --git a/public/src/helpers/api.ts b/public/src/helpers/api.ts index ce082ae6f9..1dd54c0ca3 100644 --- a/public/src/helpers/api.ts +++ b/public/src/helpers/api.ts @@ -1,11 +1,11 @@ import { Config } from "@/config"; -import { useDashboard } from "../hooks/useDashboard"; +import { useDashboardContext } from "../context/DashboardProvider"; export const GetApiUrl = ( route: string, params: string[], ) => { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); switch (dashboard.params.period) { case "month": params.push(`month=${dashboard.params.month}`); diff --git a/public/src/helpers/dashboard.ts b/public/src/helpers/dashboard.ts index e11632e0c2..1324d04a60 100644 --- a/public/src/helpers/dashboard.ts +++ b/public/src/helpers/dashboard.ts @@ -1,7 +1,7 @@ -import { useDashboard } from "@/hooks/useDashboard"; +import { useDashboardContext } from "../context/DashboardProvider"; export function GetPeriod() { - const dashboard = useDashboard(); + const { dashboard } = useDashboardContext(); const period = { start_date: new Date(dashboard.params.year, dashboard.params.month - 1, 2) .toISOString().slice(0, 10), From f1ac74e761184c40231279a49dbb48dffb23f587 Mon Sep 17 00:00:00 2001 From: Jonathan Fallon Date: Mon, 9 Dec 2024 09:46:03 +0100 Subject: [PATCH 3/3] update browserslist definitions --- public/package-lock.json | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/public/package-lock.json b/public/package-lock.json index 65102c69e4..cad74e12d1 100644 --- a/public/package-lock.json +++ b/public/package-lock.json @@ -3253,9 +3253,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001593", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001593.tgz", - "integrity": "sha512-UWM1zlo3cZfkpBysd7AS+z+v007q9G1+fLTUU42rQnY6t2axoogPW/xol6T7juU5EUoOhML4WgBIdG+9yYqAjQ==", + "version": "1.0.30001687", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001687.tgz", + "integrity": "sha512-0S/FDhf4ZiqrTUiQ39dKeUjYRjkv7lOZU1Dgif2rIqrTzX/1wV2hfKu9TOm1IHkdSijfLswxTFzl/cvir+SLSQ==", "funding": [ { "type": "opencollective", @@ -3269,7 +3269,8 @@ "type": "github", "url": "https://github.com/sponsors/ai" } - ] + ], + "license": "CC-BY-4.0" }, "node_modules/cartocolor": { "version": "4.0.2",