Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import {
import { fetchApiData } from '../../../utils/apiOperations';
import { SHARING_EP } from '../utils/constants';

export const getShareLink = (filters, settings, fundingType, selectedPrograms) => dispatch => {
export const getShareLink = (filters, settings, fundingType, selectedPrograms, meState) => dispatch => {
dispatch(fetchShareLinkPending());
return fetchApiData({
url: SHARING_EP,
body: {
title: '',
description: '',
stateBlob: JSON.stringify({
filters, settings, fundingType, selectedPrograms
filters, settings, fundingType, selectedPrograms, meState
})
}
})
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState, useEffect, useContext, useCallback } from 'react';
import { Container } from 'react-bootstrap';
import { bindActionCreators } from 'redux';
import { connect, useSelector } from 'react-redux';
import { connect, useSelector, useDispatch } from 'react-redux';
import PropTypes from 'prop-types';
import { NDDTranslationContext } from './StartUp';
import HeaderContainer from './HeaderContainer';
Expand All @@ -17,6 +17,7 @@ import './print.css';
import { removeFilter } from '../utils/Utils';
import { SRC_DIRECT } from './charts/FundingByYearChart';
import { useLocation, useParams } from 'react-router-dom';
import { setMeState } from '../medashboard/reducers/fetchSectorClassificationReducer';

const NDDDashboardHome = (props) => {
const {
Expand All @@ -39,6 +40,7 @@ const NDDDashboardHome = (props) => {

const location = useLocation();
const urlParams = useParams();
const dispatch = useDispatch();
const params = new URLSearchParams(window.location.search);
const [state, setState] = useState({
filters: undefined,
Expand Down Expand Up @@ -103,6 +105,9 @@ const NDDDashboardHome = (props) => {
if (savedData && savedData.selectedPrograms) {
ids = savedData.selectedPrograms;
}
if (savedData && savedData.meState) {
dispatch(setMeState(savedData.meState));
}
}

setState(prevState => ({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@ class Share extends Component {
// TODO: prepare data chart settings.
// eslint-disable-next-line no-shadow
const {
_getShareLink, filters, settings, fundingType, selectedPrograms
_getShareLink, filters, settings, fundingType, selectedPrograms, meState
} = this.props;
return _getShareLink(filters ? filters.filters : null, settings, fundingType, selectedPrograms);
return _getShareLink(filters ? filters.filters : null, settings, fundingType, selectedPrograms, meState);
}

generateModal() {
Expand Down Expand Up @@ -91,7 +91,8 @@ class Share extends Component {

const mapStateToProps = state => ({
shareLink: state.shareLinkReducer.shareLink,
translations: state.translationsReducer.translations
translations: state.translationsReducer.translations,
meState: state.fetchSectorClassificationReducer.meState
});

const mapDispatchToProps = dispatch => bindActionCreators({
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React, {useEffect} from "react";
import React, {useEffect, useRef} from "react";
import styles from './css/Styles.module.css';
import {Col, Row} from "react-bootstrap";
import ChartUtils from "../../utils/chart";
import {IndicatorObjectType, SectorObjectType} from "../../../../admin/indicator_manager/types";
import {DefaultTranslations} from "../../types";
import IndicatorProgressChart from "../IndicatorProgressChart";
import {useSelector} from "react-redux";
import {useSelector, useDispatch} from "react-redux";
import {setMeState} from "../../reducers/fetchSectorClassificationReducer";

interface IndicatorBySectorProps {
translations: DefaultTranslations;
Expand All @@ -21,6 +22,9 @@ const IndicatorBySector: React.FC<IndicatorBySectorProps> = (props) => {
// @ts-ignore
const globalSettings = useSelector(state => state.fetchSettingsReducer.settings);
const selectedSector: SectorObjectType = useSelector((state: any) => state.fetchSectorClassificationReducer.selectedSector);
const meState = useSelector((state: any) => state.fetchSectorClassificationReducer.meState);
const dispatch = useDispatch();
const hasRestoredRef = useRef(false);

const [selectedIndicatorId, setSelectedIndicatorId] = React.useState<number | null>(null);
const [selectedIndicator, setSelectedIndicator] = React.useState<IndicatorObjectType | null>(null);
Expand All @@ -33,8 +37,16 @@ const IndicatorBySector: React.FC<IndicatorBySectorProps> = (props) => {

useEffect(() => {
if (indicators.length > 0) {
setSelectedIndicatorId(indicators[0].id);
setSelectedIndicator(indicators[0])
let targetId = indicators[0].id;
if (!hasRestoredRef.current) {
hasRestoredRef.current = true;
const savedId = meState.indicators && meState.indicators[index];
if (savedId && indicators.find((i: IndicatorObjectType) => i.id === savedId)) {
targetId = savedId;
}
}
setSelectedIndicatorId(targetId);
setSelectedIndicator(indicators.find((i: IndicatorObjectType) => i.id === targetId) ?? indicators[0]);
}
}, [indicators]);

Expand Down Expand Up @@ -73,10 +85,12 @@ const IndicatorBySector: React.FC<IndicatorBySectorProps> = (props) => {
</select>
) : (
<select
defaultValue={indicators[0].id}
value={selectedIndicatorId ?? (indicators.length > 0 ? indicators[0].id : undefined)}
onChange={(e) => {
const newId = parseInt(e.target.value);
setSelectedIndicator(null);
setSelectedIndicatorId(parseInt(e.target.value))
setSelectedIndicatorId(newId);
dispatch(setMeState({ indicators: { ...meState.indicators, [index]: newId } }));
}}
style={{
backgroundColor: '#f3f5f8',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useEffect} from 'react';
import React, {useEffect, useRef} from 'react';
import {Col, Row} from "react-bootstrap";
import ChartUtils from "../../utils/chart";
import {useSelector, useDispatch } from "react-redux";
Expand All @@ -11,7 +11,7 @@ import {FUNDING_TYPE} from "../../../utils/constants";
import EllipsisText from "react-ellipsis-text";
import { Tooltip } from "react-tooltip";
import NoData from "../NoData";
import {setSelectedSectorState} from "../../reducers/fetchSectorClassificationReducer";
import {setSelectedSectorState, setMeState} from "../../reducers/fetchSectorClassificationReducer";

const CustomLegend = ({ data }) => (
<div style={{ display: 'flex', justifyContent: 'center', marginTop: '20px' }}>
Expand Down Expand Up @@ -50,10 +50,13 @@ const SectorClassification: React.FC<SectorProgressProps> = (props) => {

const [selectedSectorClassification, setSelectedSectorClassification] = React.useState<number | null>(null);
const [selectedSectorScheme, setSelectedSectorScheme] = React.useState<any>(null);
const [selectedSectorLocal, setSelectedSectorLocal] = React.useState<number | null>(null);

const [sectorScheme, setSectorScheme] = React.useState<SectorScheme>();

const sectorClassification: SectorClassifcation [] = useSelector((state: any) => state.fetchSectorClassificationReducer.data);
const meState = useSelector((state: any) => state.fetchSectorClassificationReducer.meState);
const pendingRestoreSectorIdRef = useRef<number | null>(null);
const [sectors, setSectors] = React.useState<SectorObjectType[]>([]);
const [sectorReport, setSectorReport] = React.useState<DataType[]>();

Expand All @@ -68,8 +71,17 @@ const SectorClassification: React.FC<SectorProgressProps> = (props) => {
setSectorScheme(classification.sectorScheme);
const sectorData = classification.sectorScheme.children;
setSectors(sectorData);
setSelectedSector(sectorData[0].id)
dispatch(setSelectedSectorState(sectorData[0]));

const restoreSectorId = pendingRestoreSectorIdRef.current;
pendingRestoreSectorIdRef.current = null;
const targetSector = (restoreSectorId && sectorData.find((s: SectorObjectType) => s.id === restoreSectorId))
? sectorData.find((s: SectorObjectType) => s.id === restoreSectorId)!
: sectorData[0];

setSelectedSectorLocal(targetSector.id);
setSelectedSector(targetSector.id);
dispatch(setSelectedSectorState(targetSector));
dispatch(setMeState({ sectorClassificationId: selectedSectorClassification, sectorId: targetSector.id }));
}
}

Expand Down Expand Up @@ -111,14 +123,14 @@ const SectorClassification: React.FC<SectorProgressProps> = (props) => {

useEffect(() => {
if (sectorClassification.length > 0) {
setSelectedSectorClassification(sectorClassification[0].id);
const initClassificationId = meState.sectorClassificationId ?? sectorClassification[0].id;
if (meState.sectorId) {
pendingRestoreSectorIdRef.current = meState.sectorId;
}
setSelectedSectorClassification(initClassificationId);
}
}, []);

useEffect(() => {
handleSectorClassificationChange();
}, [selectedSectorClassification]);

useEffect(() => {
setSectorReport(undefined);
if (sectorReportReducer.data) {
Expand Down Expand Up @@ -162,9 +174,11 @@ const SectorClassification: React.FC<SectorProgressProps> = (props) => {
</select>
) : (
<select
defaultValue={sectorClassification[0].id}
value={selectedSectorClassification ?? sectorClassification[0].id}
onChange={(e) => {
setSelectedSectorClassification(parseInt(e.target.value));
const newId = parseInt(e.target.value);
dispatch(setMeState({ sectorClassificationId: newId, sectorId: null, indicators: {} }));
setSelectedSectorClassification(newId);
}}
style={{
backgroundColor: '#f3f5f8',
Expand Down Expand Up @@ -208,8 +222,15 @@ const SectorClassification: React.FC<SectorProgressProps> = (props) => {
</select>
) : (
<select
defaultValue={sectors[0].id}
onChange={(e) => setSelectedSector(parseInt(e.target.value))}
value={selectedSectorLocal ?? (sectors.length > 0 ? sectors[0].id : undefined)}
onChange={(e) => {
const newId = parseInt(e.target.value);
setSelectedSectorLocal(newId);
setSelectedSector(newId);
dispatch(setMeState({ sectorId: newId, indicators: {} }));
const found = sectors.find((s: SectorObjectType) => s.id === newId);
if (found) dispatch(setSelectedSectorState(found));
}}
style={{
backgroundColor: '#f3f5f8',
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,34 @@ import {extractSectors} from "../utils/data";

const REDUCER_NAME = 'sectorClassification';

type MeStateType = {
sectorClassificationId: number | null;
sectorId: number | null;
indicators: Record<number, number>;
};

type SectorClassificationInitialStateType = {
data: SectorClassifcation[];
loading: boolean;
error: any;
sectors: SectorObjectType[];
selectedSector: SectorObjectType | null;
meState: MeStateType;
}

const initialMeState: MeStateType = {
sectorClassificationId: null,
sectorId: null,
indicators: {}
};

const initialState: SectorClassificationInitialStateType = {
data: [],
loading: false,
error: null,
sectors: [],
selectedSector: null
selectedSector: null,
meState: initialMeState
}

export const fetchSectorClassification = createAsyncThunk(
Expand All @@ -47,6 +61,12 @@ const fetchSectorClassificationSlice = createSlice({
},
clearSelectedSectorState: (state) => {
state.selectedSector = null;
},
setMeState: (state, action) => {
state.meState = { ...state.meState, ...action.payload };
},
clearMeState: (state) => {
state.meState = { ...initialMeState };
}
},
extraReducers: (builder) => {
Expand All @@ -72,7 +92,9 @@ const fetchSectorClassificationSlice = createSlice({
export const {
resetState,
setSelectedSectorState,
clearSelectedSectorState
clearSelectedSectorState,
setMeState,
clearMeState
} = fetchSectorClassificationSlice.actions;

export default fetchSectorClassificationSlice.reducer;
Loading