diff --git a/client/src/components/legend/item/component.tsx b/client/src/components/legend/item/component.tsx index 5b600b27f..8af865f9e 100644 --- a/client/src/components/legend/item/component.tsx +++ b/client/src/components/legend/item/component.tsx @@ -1,6 +1,7 @@ import classNames from 'classnames'; import { EyeIcon, EyeOffIcon, XIcon } from '@heroicons/react/solid'; import { useCallback } from 'react'; +import { useSearchParams } from 'next/navigation'; import OpacityControl from './opacityControl'; import DragHandle from './dragHandle'; @@ -8,8 +9,6 @@ import { ComparisonToggle } from './comparisonModeToggle'; import InfoModal from './info-modal'; import Loading from 'components/loading'; -import { useAppSelector } from 'store/hooks'; -import { scenarios } from 'store/features/analysis'; import type { Dispatch } from 'react'; import type { InfoModalProps } from './info-modal'; @@ -45,7 +44,8 @@ export const LegendItem = ({ onToggle, isActive, }: LegendItemProps) => { - const { isComparisonEnabled } = useAppSelector(scenarios); + const searchParams = useSearchParams(); + const isComparisonEnabled = Boolean(searchParams.get('compareScenarioId')); const handleToggleActive = useCallback(() => { onToggle(!isActive); diff --git a/client/src/containers/analysis-sidebar/component.tsx b/client/src/containers/analysis-sidebar/component.tsx index 39a866947..ed355fda1 100644 --- a/client/src/containers/analysis-sidebar/component.tsx +++ b/client/src/containers/analysis-sidebar/component.tsx @@ -7,7 +7,6 @@ import { pickBy } from 'lodash-es'; import { useAppSelector, useAppDispatch } from 'store/hooks'; import { scenarios, - setComparisonEnabled, setCurrentScenario, setScenarioToCompare as setScenarioToCompareAction, } from 'store/features/analysis/scenarios'; @@ -64,7 +63,6 @@ const ScenariosComponent: React.FC<{ scrollref?: MutableRefObject = ({ className, }: AnalysisDynamicMetadataTypes) => { + const searchParams = useSearchParams(); + const isComparisonEnabled = Boolean(searchParams.get('compareScenarioId')); + const dispatch = useAppDispatch(); - const { currentScenario, scenarioToCompare, isComparisonEnabled } = useAppSelector(scenarios); + const { currentScenario, scenarioToCompare } = useAppSelector(scenarios); const { data: scenario } = useScenario(currentScenario); const { data: scenarioB } = useScenario(scenarioToCompare); diff --git a/client/src/containers/analysis-visualization/analysis-legend/impact-legend-item/component.tsx b/client/src/containers/analysis-visualization/analysis-legend/impact-legend-item/component.tsx index e2bf6b888..b55e06d25 100644 --- a/client/src/containers/analysis-visualization/analysis-legend/impact-legend-item/component.tsx +++ b/client/src/containers/analysis-visualization/analysis-legend/impact-legend-item/component.tsx @@ -1,8 +1,8 @@ import { useCallback, useMemo } from 'react'; +import { useSearchParams } from 'next/navigation'; import { useAppSelector, useAppDispatch, useSyncIndicators } from 'store/hooks'; import { analysisMap, setLayer } from 'store/features/analysis/map'; -import { scenarios } from 'store/features/analysis'; import LegendTypeChoropleth from 'components/legend/types/choropleth'; import LegendTypeComparative from 'components/legend/types/comparative'; import LegendItem from 'components/legend/item'; @@ -13,6 +13,9 @@ import type { Legend } from 'types'; const LAYER_ID = 'impact'; const ImpactLayer = () => { + const searchParams = useSearchParams(); + const isComparisonEnabled = Boolean(searchParams.get('compareScenarioId')); + const dispatch = useAppDispatch(); const [syncedIndicators] = useSyncIndicators(); @@ -40,8 +43,6 @@ const ImpactLayer = () => { [layer.metadata?.legend.items], ); - const { isComparisonEnabled } = useAppSelector(scenarios); - const name = useMemo(() => { if (!layer.metadata?.legend?.name) return null; diff --git a/client/src/containers/analysis-visualization/analysis-table/index.tsx b/client/src/containers/analysis-visualization/analysis-table/index.tsx index 9068b5e44..569f233c8 100644 --- a/client/src/containers/analysis-visualization/analysis-table/index.tsx +++ b/client/src/containers/analysis-visualization/analysis-table/index.tsx @@ -566,7 +566,7 @@ const AnalysisTable = () => {
- + {isComparisonEnabled && } ); }; diff --git a/client/src/containers/scenarios/comparison/component.tsx b/client/src/containers/scenarios/comparison/component.tsx index 02e72a01f..d10f31fcf 100644 --- a/client/src/containers/scenarios/comparison/component.tsx +++ b/client/src/containers/scenarios/comparison/component.tsx @@ -4,12 +4,8 @@ import { pickBy } from 'lodash-es'; import { useScenarios } from 'hooks/scenarios'; import { useAppDispatch } from 'store/hooks'; -import { - setComparisonEnabled, - setScenarioToCompare as setScenarioToCompareAction, -} from 'store/features/analysis/scenarios'; +import { setScenarioToCompare as setScenarioToCompareAction } from 'store/features/analysis/scenarios'; import { AutoCompleteSelect } from 'components/forms/select'; -import useEffectOnce from 'hooks/once'; import type { Option } from 'components/forms/select'; import type { Dispatch, FC } from 'react'; @@ -39,7 +35,6 @@ const ScenariosComparison: FC = () => { const handleOnChange = useCallback>( (current) => { // TODO: deprecated, we'll keep only for retro-compatibility - dispatch(setComparisonEnabled(!!current)); dispatch(setScenarioToCompareAction(current?.value || null)); push({ query: pickBy({ ...query, compareScenarioId: current?.value || null }) }, null, { @@ -51,7 +46,6 @@ const ScenariosComparison: FC = () => { const handleScenarioRemoval = useCallback(() => { // TODO: deprecated, we'll keep only for retro-compatibility - dispatch(setComparisonEnabled(false)); dispatch(setScenarioToCompareAction(null)); push({ query: pickBy({ ...query, compareScenarioId: null }) }, null, { @@ -64,7 +58,6 @@ const ScenariosComparison: FC = () => { if (selected?.value && compareScenarioId !== selected?.value) { // TO-DO: deprecated, we'll keep only for retro-compatibility dispatch(setScenarioToCompareAction(null)); - dispatch(setComparisonEnabled(false)); push( { @@ -78,11 +71,6 @@ const ScenariosComparison: FC = () => { } }, [selected, dispatch, options, compareScenarioId, push, query]); - // We consider comparison is enabled when compareScenarioId is present - useEffectOnce(() => { - if (compareScenarioId) dispatch(setComparisonEnabled(true)); - }); - return ( <> diff --git a/client/src/hooks/h3-data/index.ts b/client/src/hooks/h3-data/index.ts index 37b5bfe6f..c2e160696 100644 --- a/client/src/hooks/h3-data/index.ts +++ b/client/src/hooks/h3-data/index.ts @@ -39,7 +39,7 @@ export const useH3Data = ({ const isImpact = id === 'impact'; const filters = useAppSelector(analysisFilters); - const { currentScenario, scenarioToCompare, isComparisonEnabled } = useAppSelector(scenarios); + const { currentScenario, scenarioToCompare } = useAppSelector(scenarios); const impactParams = useMemo( () => @@ -47,11 +47,10 @@ export const useH3Data = ({ ...filters, currentScenario, scenarioToCompare, - isComparisonEnabled, materialId, startYear: year, }), - [currentScenario, filters, isComparisonEnabled, materialId, scenarioToCompare, year], + [currentScenario, filters, materialId, scenarioToCompare, year], ); const materialParams = useMemo(() => ({ materialId, year }), [materialId, year]); diff --git a/client/src/hooks/layers/impact.ts b/client/src/hooks/layers/impact.ts index 01ed58603..803cda719 100644 --- a/client/src/hooks/layers/impact.ts +++ b/client/src/hooks/layers/impact.ts @@ -1,6 +1,6 @@ import { useEffect, useMemo } from 'react'; -import { useRouter } from 'next/router'; import { omit } from 'lodash-es'; +import { useSearchParams } from 'next/navigation'; import { useIndicator } from '../indicators'; @@ -17,14 +17,15 @@ import { storeToQueryParams } from 'hooks/h3-data/utils'; import type { LegendItem as LegendItemProp } from 'types'; export const useImpactLayer = () => { + const searchParams = useSearchParams(); + const compareScenarioId = searchParams.get('compareScenarioId'); + const scenarioId = searchParams.get('scenarioId'); + const isComparisonEnabled = Boolean(compareScenarioId); + const dispatch = useAppDispatch(); const filters = useAppSelector(analysisFilters); - const { - query: { scenarioId, compareScenarioId }, - } = useRouter(); - const isComparisonEnabled = !!compareScenarioId; const { comparisonMode } = useAppSelector(scenarios); - const colorKey = !!compareScenarioId ? 'compare' : 'impact'; + const colorKey = isComparisonEnabled ? 'compare' : 'impact'; const [syncedIndicators] = useSyncIndicators(); const { @@ -36,11 +37,10 @@ export const useImpactLayer = () => { storeToQueryParams({ ...filters, indicators: syncedIndicators?.[0] ? [syncedIndicators?.[0]] : undefined, - currentScenario: scenarioId as string, - scenarioToCompare: compareScenarioId as string, - isComparisonEnabled, + currentScenario: scenarioId, + scenarioToCompare: compareScenarioId, }), - [compareScenarioId, filters, isComparisonEnabled, scenarioId, syncedIndicators], + [compareScenarioId, filters, scenarioId, syncedIndicators], ); const { year } = params; diff --git a/client/src/store/features/analysis/scenarios.ts b/client/src/store/features/analysis/scenarios.ts index 3472cf25f..5f8a8ca23 100644 --- a/client/src/store/features/analysis/scenarios.ts +++ b/client/src/store/features/analysis/scenarios.ts @@ -7,7 +7,6 @@ import type { Scenario } from 'containers/scenarios/types'; export type ScenarioComparisonMode = 'relative' | 'absolute'; export type ScenariosState = { - isComparisonEnabled: boolean; comparisonMode: ScenarioComparisonMode; /** * The current scenario id @@ -27,7 +26,6 @@ export type ScenariosState = { // Define the initial state using that type export const initialState: ScenariosState = { - isComparisonEnabled: false, comparisonMode: 'absolute', currentScenario: null, scenarioToCompare: null, @@ -48,13 +46,6 @@ export const analysisScenariosSlice = createSlice({ ...state, currentScenario: action.payload, }), - setComparisonEnabled: ( - state, - action: PayloadAction, - ) => ({ - ...state, - isComparisonEnabled: action.payload, - }), setScenarioToCompare: (state, action: PayloadAction) => ({ ...state, scenarioToCompare: action.payload, @@ -80,7 +71,6 @@ export const analysisScenariosSlice = createSlice({ export const { setCurrentScenario, - setComparisonEnabled, setScenarioToCompare, setComparisonMode, setScenarioFilter,