Skip to content

Commit 2dfdafe

Browse files
henry-tphenry-tp
committed
WEB-4460 remove DataRecencyType from Data Recency dropdown via prop
1 parent 0c5f662 commit 2dfdafe

1 file changed

Lines changed: 213 additions & 0 deletions

File tree

‎app/pages/clinicworkspace/components/DataRecencyFilterDropdown.js‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
import React, { useState } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { useSelector } from 'react-redux';
4+
import { useTranslation } from 'react-i18next';
5+
import { trackMetric } from '../../../core/metricUtils';
6+
import { colors as vizColors } from '@tidepool/viz';
7+
8+
import { Box, Grid } from 'theme-ui';
9+
import KeyboardArrowDownRoundedIcon from '@material-ui/icons/KeyboardArrowDownRounded';
10+
import noop from 'lodash/noop';
11+
12+
import { bindPopover, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
13+
14+
import Button from '../../../components/elements/Button';
15+
import Popover from '../../../components/elements/Popover';
16+
import RadioGroup from '../../../components/elements/RadioGroup';
17+
import { lastDataFilterOptions } from '../../../core/clinicUtils';
18+
import useClinicMetricsPageName from '../useClinicMetricsPageName';
19+
20+
const DropdownContent = ({
21+
canSelectLastDataType,
22+
canClearSelection,
23+
onClose,
24+
onChange,
25+
lastData,
26+
lastDataType,
27+
filterOptions,
28+
}) => {
29+
const { t } = useTranslation();
30+
const selectedClinicId = useSelector((state) => state.blip.selectedClinicId);
31+
const pageName = useClinicMetricsPageName();
32+
33+
const [pending, setPending] = useState({ lastData, lastDataType });
34+
35+
const lastDataTypeFilterOptions = [
36+
{ value: 'cgm', label: t('CGM') },
37+
{ value: 'bgm', label: t('BGM') },
38+
];
39+
40+
const handleChange = (filters) => onChange(filters);
41+
42+
return (
43+
<Box data-testid="data-recency-filter-dropdown" mt={5} mx={2} sx={{ width: 300 }}>
44+
<Box>
45+
{canSelectLastDataType &&
46+
<>
47+
<Box mb={2} sx={{ padding: 1, color: vizColors.gray50, lineHeight: 1 }}>
48+
<Box sx={{ fontSize: 1, fontWeight: 'medium' }}>
49+
{t('Device Type')}
50+
</Box>
51+
</Box>
52+
53+
<Box sx={{ border: `1px solid ${vizColors.gray10}`, borderRadius: 6, padding: 2 }}>
54+
<RadioGroup
55+
id="last-upload-type"
56+
name="last-upload-type"
57+
options={lastDataTypeFilterOptions}
58+
variant="vertical"
59+
sx={{ fontSize: 0 }}
60+
value={pending.lastDataType}
61+
onChange={event => {
62+
setPending({ ...pending, lastDataType: event.target.value || null });
63+
}}
64+
/>
65+
</Box>
66+
</>
67+
}
68+
69+
<Box mt={3} mb={2} sx={{ padding: 1, color: vizColors.gray50, lineHeight: 1 }}>
70+
<Box sx={{ fontSize: 1, fontWeight: 'medium' }}>{t('Data Recency')}</Box>
71+
<Box sx={{ fontSize: 0 }} mt={1}>{t('Tidepool will only show patients who have data within the selected number of days.')}</Box>
72+
</Box>
73+
74+
<Box sx={{ border: `1px solid ${vizColors.gray10}`, borderRadius: 6, padding: 2 }}>
75+
<RadioGroup
76+
id="last-upload-filters"
77+
name="last-upload-filters"
78+
options={filterOptions}
79+
variant="vertical"
80+
sx={{ fontSize: 0 }}
81+
value={pending.lastData}
82+
onChange={event => {
83+
setPending({ ...pending, lastData: parseInt(event.target.value) || null });
84+
}}
85+
/>
86+
</Box>
87+
</Box>
88+
89+
<Grid sx={{ gridTemplateColumns: '1fr 1fr' }} mt={3} mb={2}>
90+
<Button
91+
id={canClearSelection ? 'clear-last-upload-filter' : 'cancel-last-upload-filter'}
92+
sx={{ fontSize: 1 }}
93+
variant="secondary"
94+
onClick={() => {
95+
if (canClearSelection) {
96+
trackMetric('Clinic - Last upload clear filter', { clinicId: selectedClinicId, pageName });
97+
setPending({ lastData: null, lastDataType: null });
98+
handleChange({ lastData: null, lastDataType: null });
99+
}
100+
101+
onClose();
102+
}}
103+
>
104+
{canClearSelection ? t('Clear') : t('Cancel')}
105+
</Button>
106+
107+
<Button
108+
id="apply-last-upload-filter"
109+
disabled={!pending.lastData || !pending.lastDataType}
110+
sx={{ fontSize: 1 }}
111+
variant="primary"
112+
onClick={() => {
113+
const dateRange = pending.lastData === 1
114+
? 'today'
115+
: `${pending.lastData} days`;
116+
117+
trackMetric('Clinic - Last upload apply filter', {
118+
clinicId: selectedClinicId,
119+
dateRange,
120+
type: pending.lastDataType,
121+
pageName,
122+
});
123+
124+
handleChange(pending);
125+
onClose();
126+
}}
127+
>
128+
{t('Apply')}
129+
</Button>
130+
</Grid>
131+
</Box>
132+
);
133+
};
134+
135+
const DataRecencyFilterDropdown = ({
136+
canSelectLastDataType = true,
137+
canClearSelection = true,
138+
onChange = noop,
139+
lastData = null,
140+
lastDataType = null,
141+
filterOptions = lastDataFilterOptions,
142+
}) => {
143+
const { t } = useTranslation();
144+
const pageName = useClinicMetricsPageName();
145+
146+
const lastDataPopupFilterState = usePopupState({
147+
variant: 'popover',
148+
popupId: 'lastDataFilters',
149+
});
150+
151+
const selectedClinicId = useSelector((state) => state.blip.selectedClinicId);
152+
153+
const handleCloseDropdown = () => {
154+
lastDataPopupFilterState.close();
155+
};
156+
157+
return (
158+
<>
159+
<Box
160+
onClick={() => {
161+
if (!lastDataPopupFilterState.isOpen) trackMetric('Clinic - Last data filter open', { clinicId: selectedClinicId, pageName });
162+
}}
163+
sx={{ flexShrink: 0 }}
164+
>
165+
<Button
166+
variant="filter"
167+
id="last-data-filter-trigger"
168+
selected={!!lastData}
169+
{...bindTrigger(lastDataPopupFilterState)}
170+
icon={KeyboardArrowDownRoundedIcon}
171+
iconLabel="Filter by last upload"
172+
sx={{ fontSize: 0, lineHeight: 1.3 }}
173+
>
174+
{t('Data Recency')}
175+
</Button>
176+
</Box>
177+
178+
<Popover
179+
minWidth="11em"
180+
closeIcon
181+
{...bindPopover(lastDataPopupFilterState)}
182+
onClickCloseIcon={() => {
183+
trackMetric('Clinic - Last upload filter close', { clinicId: selectedClinicId, pageName });
184+
}}
185+
onClose={handleCloseDropdown}
186+
>
187+
{ lastDataPopupFilterState.isOpen &&
188+
<DropdownContent
189+
canSelectLastDataType={canSelectLastDataType}
190+
canClearSelection={canClearSelection}
191+
lastData={lastData}
192+
lastDataType={lastDataType}
193+
filterOptions={filterOptions || lastDataFilterOptions}
194+
onClose={handleCloseDropdown}
195+
onChange={onChange}
196+
/>
197+
}
198+
</Popover>
199+
</>
200+
);
201+
};
202+
203+
DataRecencyFilterDropdown.propTypes = {
204+
onChange: PropTypes.func,
205+
lastData: PropTypes.number,
206+
lastDataType: PropTypes.oneOf(['bgm', 'cgm']),
207+
filterOptions: PropTypes.arrayOf(PropTypes.shape({
208+
value: PropTypes.number.isRequired,
209+
label: PropTypes.string.isRequired,
210+
})),
211+
};
212+
213+
export default DataRecencyFilterDropdown;

0 commit comments

Comments
 (0)