@iotready/nextjs-components-library 1.0.0-preview1 → 1.0.0-preview11

package/components/accounts/AccountMenu.d.ts

@@ -2,7 +2,7 @@ import { UserType } from '../../types/user';
 import { Theme } from "@emotion/react";
 export default function UserMenuAccount({ userInfo, handleClick, handleSignOut, accountRoute, theme }: {
     userInfo: UserType;
-    handleClick: () => Promise<void>;
+    handleClick: () => void;
     handleSignOut: () => Promise<void>;
     accountRoute?: string;
     theme: Theme;

package/components/charts/TrendChart.d.ts

@@ -5,13 +5,15 @@ type Measure = {
     name: string;
     polltime: number;
     unit: string;
+    stepped: boolean;
 };
-declare const TrendChart: ({ deviceId, measures, enableExportData, enableDatePicker, handleGetInfluxData, handleGetFirstTimestamp, theme, ...props }: {
+declare const TrendChart: ({ deviceId, measures, enableExportData, enableDatePicker, handleGetInfluxData, theme }: {
     deviceId: string;
     measures: Array<Measure>;
     enableenableExportData: boolean;
+    enableExportData: boolean;
     enableDatePicker: boolean;
     handleGetInfluxData: (measure: string, timeStart: number, timeEnd: number, deviceId: string, timeGroup: string, raw: boolean) => Promise<any>;
     theme: Theme;
-} & any) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default TrendChart;

package/components/charts/TrendChart.js

@@ -18,6 +18,8 @@ import 'moment/locale/it';
 // import 'moment/locale/en-gb'; // TODO set locale based on browser
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { ThemeProvider } from '@mui/material/styles';
+import TimelineIcon from '@mui/icons-material/Timeline';
+import MuiTooltip from '@mui/material/Tooltip';
 const lineOptions = {
     parsing: false,
     normalized: true,
@@ -35,7 +37,7 @@ const lineOptions = {
         tooltip: {
             callbacks: {
                 label: (context) => {
-                    return `${context.dataset.label}: ${context.parsed.y.toFixed(2)} ${context.dataset.unit}`;
+                    return `${context.dataset.label}: ${context.parsed.y.toFixed(3)} ${context.dataset.unit}`;
                 }
             },
         },
@@ -74,15 +76,7 @@ const lineOptions = {
                 drawOnChartArea: false,
             }
         },
-        y: {
-            ticks: {
-                callback: function (value) {
-                    if (Math.floor(value) === value) {
-                        return value;
-                    }
-                }
-            }
-        },
+        y: {},
     },
 };
 const chartConfigByPeriod = {
@@ -119,7 +113,7 @@ const chartConfigByPeriod = {
         scaleUnit: 'year',
     }
 };
-function GetPoints(data) {
+function getChartPoints(data) {
     const points = data.results[0].series[0].values.map((row) => {
         return {
             x: moment.unix(row[0]),
@@ -160,8 +154,11 @@ function getCsvData(data, measures) {
             });
         });
     });
-    // Create rows from timestampMap
-    Object.values(timestampMap).forEach((entry) => {
+    // Sort timestamps in ascending order
+    const sortedTimestamps = Object.keys(timestampMap).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
+    // Create rows from sorted timestampMap
+    sortedTimestamps.forEach(timestamp => {
+        const entry = timestampMap[timestamp];
         const row = [entry.timestamp];
         measures.forEach(measure => {
             // Push the corresponding value or an empty string if undefined
@@ -169,7 +166,7 @@ function getCsvData(data, measures) {
         });
         // Check if the row contains only empty values (besides the timestamp)
         const hasNonEmptyValues = row.slice(1).some(value => value !== null && value !== '' && value !== undefined);
-        // If the row has at least one non-empty value or just the timestamp, add it to csvData
+        // If the row has at least one non-empty value, add it to csvData
         if (hasNonEmptyValues || row.length === 1) {
             csvData.push(row);
         }
@@ -178,19 +175,22 @@ function getCsvData(data, measures) {
     return csvData.map(row => row.join(',')).join('\n');
 }
 // eslint-disable-next-line no-unused-vars
-const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, handleGetInfluxData, handleGetFirstTimestamp, theme, ...props }) => {
+const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, handleGetInfluxData, theme }) => {
     const [chartJsLoaded, setChartJsLoaded] = useState(false);
     const [dataMeasures, setDataMeasures] = useState(null);
     const [chartPeriod, setChartPeriod] = useState('1D');
     const [chartPeriodConfig, setChartPeriodConfig] = useState(chartConfigByPeriod['1D']);
     const [chartLoading, setChartLoading] = useState(false);
+    const [timeStartPicker, setTimeStartPicker] = useState(moment().subtract(1, 'day').unix());
     const [timeStart, setTimeStart] = useState(moment().subtract(1, 'day').unix());
     const [timeEnd, setTimeEnd] = useState(moment().unix());
-    const [firstTimestamp, setFirstTimestamp] = useState();
     const [datePickerUsed, setDatePickerUsed] = useState(false);
+    const [pickerTimeStart, setPickerTimeStart] = useState(moment().subtract(1, 'day').unix());
+    const [pickerTimeEnd, setPickerTimeEnd] = useState(moment().unix());
     const [loadingButton, setLoadingButton] = useState(false);
     const csvLinkRef = useRef(null);
     const [csvData, setCsvData] = useState('');
+    const [spanGapsOption, setSpanGapsOption] = useState(true);
     const [options, setOptions] = useState({
         ...lineOptions,
         plugins: {
@@ -214,6 +214,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         }
     });
     const [zoomed, setZoomed] = useState(false);
+    const prevMeasures = useRef();
     const resetChart = () => {
         setOptions({
             ...options,
@@ -229,12 +230,20 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         setDataMeasures([...[]]);
         setCsvData("");
     };
+    const handleSpanGaps = (spanG) => {
+        setOptions({
+            ...options,
+            spanGaps: spanG,
+        });
+        setSpanGapsOption(spanG);
+    };
     const handleChange = (event, newPeriod) => {
+        setChartLoading(true);
         setZoomed(false);
         setDatePickerUsed(false);
         setCsvData('');
         if (newPeriod === "ALL") {
-            setTimeStart(firstTimestamp - 86400);
+            setTimeStart(1577854800);
             setTimeEnd(moment().unix());
             setChartPeriod(newPeriod);
             return;
@@ -249,10 +258,8 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
     };
     const handleExportData = async () => {
         setLoadingButton(true);
-        const intervalInSeconds = timeEnd - timeStart;
         const data = await Promise.all(measures.map(async (measure) => {
-            const polltime = getPollTime(intervalInSeconds, measure.polltime);
-            return await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, true);
+            return await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, "0s", true);
         }));
         const csvData = getCsvData(data, measures);
         setCsvData(csvData);
@@ -264,23 +271,23 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         }
     }, [csvData]);
     const loadDatasets = async (chartPeriod) => {
-        setChartLoading(true);
-        const intervalInSeconds = timeEnd - timeStart;
+        let intervalInSeconds = chartPeriod === "ALL" && !datePickerUsed && !zoomed ? 31536000 : timeEnd - timeStart;
+        const rawQuery = intervalInSeconds < 86400; // 
         // Inizializza un array di promesse per ottenere i dati per ciascuna misura
         const datasetsPromises = measures.map(async (measure) => {
-            const polltime = getPollTime(intervalInSeconds, measure.polltime);
-            const influxData = await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, false);
-            const points = GetPoints(influxData);
+            const polltime = getPollTime(intervalInSeconds, measure.polltime || 30);
+            const influxData = await handleGetInfluxData(measure.name, timeStart, timeEnd, deviceId, polltime, !measure.polltime && rawQuery);
+            const points = getChartPoints(influxData);
             return {
                 label: measure.name,
                 data: points,
                 unit: measure.unit,
-                // borderColor: `hsl(${index * 50}, 70%, 50%)`, // Colore unico per ogni dataset
                 borderWidth: 2,
                 pointRadius: 1,
                 pointHoverRadius: 5,
                 pointHoverBackgroundColor: 'rgba(52, 125, 236, 0.5)',
-                spanGaps: false,
+                change: !measure.polltime,
+                stepped: measure.stepped,
                 fill: false
             };
         });
@@ -288,24 +295,31 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         const datasets = await Promise.all(datasetsPromises);
         let min = null;
         let max = null;
-        let values = [];
+        let time;
+        let minTime = null;
         datasets.forEach(dataset => {
-            values = [...values, ...dataset.data.map((point) => point.y).filter((data) => data !== null)];
+            const values = dataset.data.map((point) => point.y).filter((data) => data !== null);
+            if (chartPeriod === "ALL" && !datePickerUsed && !zoomed && values.length) {
+                time = dataset.data.filter((data) => data.y !== null).map((data) => data.x)[0];
+            }
             const datasetMin = Math.min(...values);
             const datasetMax = Math.max(...values);
             if (min === null || datasetMin < min)
                 min = datasetMin;
             if (max === null || datasetMax > max)
                 max = datasetMax;
+            if (time && (minTime === null || time.unix() < minTime))
+                minTime = time.unix() - 86400;
         });
         let paddedMin = null;
         let paddedMax = null;
         if (min !== null && max !== null) {
-            const diff = Math.round((max - min) / 3) || 1;
-            paddedMin = min - diff;
-            paddedMax = max + diff;
+            const diff = ((max - min) * 0.2) < 0.1 ? 0.1 : (max - min) * 0.2;
+            paddedMin = Math.floor((min - diff) * 10) / 10;
+            paddedMax = Math.ceil((max + diff) * 10) / 10;
         }
         setDataMeasures([...datasets]);
+        setTimeStartPicker(minTime || timeStart);
         setOptions({
             ...options,
             scales: {
@@ -317,27 +331,14 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                 },
                 x: {
                     ...options.scales.x,
-                    min: moment.unix(timeStart).toString(),
-                    max: moment.unix(timeEnd).toString(),
-                    time: {
-                        ...options.scales.x.time,
-                        unit: chartPeriod.scaleUnit
-                    }
+                    min: moment.unix(minTime || timeStart).toString(),
+                    max: moment.unix(timeEnd).toString()
                 }
             }
         });
     };
     useEffect(() => {
-        const fetchFirstTimestamp = async () => {
-            const response = await handleGetFirstTimestamp(deviceId);
-            if (response) {
-                setFirstTimestamp(response);
-            }
-        };
-        fetchFirstTimestamp();
-    }, []);
-    useEffect(() => {
-        const timeDifference = Math.abs(moment(timeStart).valueOf() - moment(timeEnd).valueOf()); // Convert milliseconds to seconds
+        const timeDifference = Math.abs(moment(timeEnd).valueOf() - moment(timeStart).valueOf()); // Convert milliseconds to seconds
         let newChartPeriod = '1D'; // Default to 1 day
         if (timeDifference < 86400) { // Less than 1 day
             newChartPeriod = '1H'; // Set to 1 day
@@ -345,26 +346,34 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         else if (timeDifference < 604800) { // Less than 1 week
             newChartPeriod = '1D'; // Set to 1 day
         }
-        else if (timeDifference < 2629800) { // Less than 1 month
+        else if (timeDifference < 2678400) { // Less than 1 month
             newChartPeriod = '1W'; // Set to 1 week
         }
-        else if (timeDifference < 7889400) { // Less than 3 months
+        else if (timeDifference < 8035200) { // Less than 3 months
             newChartPeriod = '1M'; // Set to 1 month
         }
-        else if (timeDifference < 15778440) { // Less than 6 months
+        else if (timeDifference < 16070400) { // Less than 6 months
             newChartPeriod = '3M'; // Set to 3 months
         }
-        else if (timeDifference < 31556926) { // Less than 1 year
+        else if (timeDifference < 31536000) { // Less than 1 year
             newChartPeriod = '6M'; // Set to 6 months
         }
         else {
             newChartPeriod = '1Y'; // Set to 1 year
         }
         setChartPeriodConfig(chartConfigByPeriod[newChartPeriod]);
+        // check prev measures value in order to show the loader
+        // hide the loader if measure is the same (for interval get measure value)
+        const prevMeasuresValue = prevMeasures.current || [];
+        //@ts-ignore
+        prevMeasures.current = measures;
+        if (!prevMeasuresValue || prevMeasuresValue.length !== measures.length || (prevMeasuresValue[0] && prevMeasuresValue[0].name !== measures[0].name)) {
+            setChartLoading(true);
+        }
         loadDatasets(chartPeriod).then(() => {
             setChartLoading(false);
         });
-    }, [timeEnd, timeStart]);
+    }, [measures, timeEnd, timeStart]);
     useEffect(() => {
         const loadZoomPlugin = async () => {
             const zoomPlugin = (await import('chartjs-plugin-zoom')).default;
@@ -393,34 +402,41 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
         loadZoomPlugin();
         resetChart();
     }, []);
-    const datePicker = _jsx(Box, { sx: { display: 'flex', alignItems: 'center', mr: { xs: 0, lg: 2 } }, children: _jsxs(LocalizationProvider, { dateAdapter: AdapterMoment, adapterLocale: "it", children: [_jsx(DateTimePicker, { value: moment(timeStart * 1000), 
-                    // format="DD/MM/YY hh:mm A"
-                    onChange: (newValue) => {
-                        setTimeStart((moment(newValue).unix()));
-                    }, maxDate: moment(timeEnd * 1000), slotProps: {
+    const datePicker = _jsx(Box, { sx: { display: 'flex', alignItems: 'center', mr: { xs: 0, lg: 2 } }, children: _jsxs(LocalizationProvider, { dateAdapter: AdapterMoment, adapterLocale: "it", children: [_jsx(DateTimePicker, { value: moment(timeStartPicker * 1000), onChange: (newValue) => {
+                        setChartLoading(true);
+                        setDatePickerUsed(true);
+                        setZoomed(false);
+                        setPickerTimeStart(moment(newValue).unix());
+                        setTimeStart(moment(newValue).unix());
+                    }, maxDateTime: moment(timeEnd * 1000), slotProps: {
                         textField: { size: 'small', sx: { width: { sm: 210 } } }
-                    } }), " \u00A0\u00A0 ", _jsx(Box, { children: "\u2013" }), " \u00A0\u00A0", _jsx(DateTimePicker, { value: moment(timeEnd * 1000), 
-                    // format="DD/MM/YY hh:mm A"
-                    onChange: (newValue) => {
-                        setTimeEnd((moment(newValue).unix()));
-                    }, minDate: moment(timeStart * 1000), slotProps: {
+                    } }), " \u00A0\u00A0 ", _jsx(Box, { children: "\u2013" }), " \u00A0\u00A0", _jsx(DateTimePicker, { value: moment(timeEnd * 1000), onChange: (newValue) => {
+                        setChartLoading(true);
+                        setDatePickerUsed(true);
+                        setZoomed(false);
+                        setPickerTimeEnd(moment(newValue).unix());
+                        setTimeEnd(moment(newValue).unix());
+                    }, minDateTime: moment(timeStart * 1000), slotProps: {
                         textField: { size: 'small', sx: { width: { sm: 210 } } }
                     } })] }) });
-    return (_jsxs(ThemeProvider, { theme: theme, children: [enableDatePicker && _jsx(Box, { sx: { display: { xs: 'flex', lg: 'none', justifyContent: 'flex-end' }, mb: 2 }, children: datePicker }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { children: [enableExportData && (_jsxs(_Fragment, { children: [_jsxs(LoadingButton, { sx: { minWidth: '40px !important', mr: 1, px: 1 }, loading: loadingButton, type: "submit", variant: "text", color: "primary", onClick: handleExportData, disabled: !dataMeasures || !dataMeasures.length, size: 'small', children: [_jsx(LoginIcon, { fontSize: 'small', style: { transform: "rotate(90deg)" } }), _jsx(Box, { sx: { display: { xs: 'none', xl: 'block' }, ml: { md: 1 } }, children: "Export" })] }), _jsx(CSVLink
+    return (_jsxs(ThemeProvider, { theme: theme, children: [enableDatePicker && _jsx(Box, { sx: { display: { xs: 'flex', lg: 'none', justifyContent: 'flex-end' }, mb: 2 }, children: datePicker }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [!enableExportData && measures && measures.length === 1 ? _jsx(Typography, { variant: 'body1', sx: { mr: 2 }, children: measures[0].name }) : '', enableExportData && (_jsxs(_Fragment, { children: [_jsxs(LoadingButton, { sx: { minWidth: '40px !important', mr: 1, px: 1 }, loading: loadingButton, type: "submit", variant: "text", color: "primary", onClick: handleExportData, disabled: !dataMeasures || !dataMeasures.length, size: 'small', children: [_jsx(LoginIcon, { fontSize: 'small', style: { transform: "rotate(90deg)" } }), _jsx(Box, { sx: { display: { xs: 'none', xl: 'block' }, ml: { md: 1 } }, children: "Export" })] }), _jsx(CSVLink
                                     //@ts-ignore
                                     , { 
                                         //@ts-ignore
                                         ref: csvLinkRef, data: csvData, filename: `export_${moment().toISOString()}.csv`, separator: ';' })] })), zoomed && (_jsxs(Button, { sx: { minWidth: '40px !important', boxShadow: 1, px: 1 }, variant: "contained", color: "secondary", size: 'small', onClick: () => {
-                                    if (datePickerUsed) {
-                                        setZoomed(false);
-                                    }
-                                    else if (chartPeriod === "ALL") {
-                                        setZoomed(false);
+                                    setChartLoading(true);
+                                    setZoomed(false);
+                                    if (chartPeriod === "ALL") {
+                                        setDatePickerUsed(false);
+                                        setTimeStart(1577854800);
                                         setTimeEnd(moment().unix());
-                                        setTimeStart(firstTimestamp - 86400);
+                                    }
+                                    else if (datePickerUsed) {
+                                        setTimeStart(pickerTimeStart);
+                                        setTimeEnd(pickerTimeEnd);
                                     }
                                     else {
-                                        setZoomed(false);
+                                        setDatePickerUsed(false);
                                         setChartPeriodConfig(chartConfigByPeriod[chartPeriod]);
                                         setTimeStart(chartPeriodConfig.from?.days
                                             ? moment()
@@ -429,12 +445,13 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                                             : moment().subtract(1, 'day').unix());
                                         setTimeEnd(moment().unix());
                                     }
-                                }, children: [_jsx(ZoomOut, { fontSize: 'small' }), _jsx(Box, { sx: { display: { xs: 'none', xl: 'block' }, ml: { md: 1 } }, children: "Reset" })] }))] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: [enableDatePicker && _jsx(Box, { sx: { display: { xs: 'none', lg: 'flex' } }, children: datePicker }), _jsxs(ToggleButtonGroup, { color: "primary", value: chartPeriod, exclusive: true, onChange: handleChange, size: "small", 
+                                }, children: [_jsx(ZoomOut, { fontSize: 'small' }), _jsx(Box, { sx: { display: { xs: 'none', lg: 'block' }, ml: { md: 1 } }, children: "Reset" })] }))] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: [enableDatePicker && _jsx(Box, { sx: { display: { xs: 'none', lg: 'flex' } }, children: datePicker }), _jsxs(ToggleButtonGroup, { color: "primary", value: !datePickerUsed && !zoomed ? chartPeriod : null, exclusive: true, onChange: handleChange, size: "small", 
                                 // sx={{ boxShadow: 1 }}
-                                disabled: chartLoading, children: [_jsx(ToggleButton, { value: "1D", sx: { px: 1 }, children: "1d" }), _jsx(ToggleButton, { value: "1W", sx: { px: 1 }, children: "1w" }), _jsx(ToggleButton, { value: "1M", sx: { px: 1 }, children: "1M" }), _jsx(ToggleButton, { value: "3M", sx: { px: 1 }, children: "3M" }), _jsx(ToggleButton, { value: "6M", sx: { px: 1 }, children: "6M" }), _jsx(ToggleButton, { value: "1Y", sx: { px: 1 }, children: "1Y" }), _jsx(ToggleButton, { value: "ALL", sx: { px: 1 }, children: "ALL" })] })] })] }), _jsx(Box, { component: 'div', className: "chart-container", sx: { height: { xs: enableDatePicker && props.height ? `calc(${props.height} - 50px)` : props.height, lg: props.height }, minHeight: 300, mt: 2 }, children: chartJsLoaded && !chartLoading && typeof window !== 'undefined' ?
-                    _jsx(_Fragment, { children: dataMeasures && dataMeasures[0]?.data?.length ?
+                                disabled: chartLoading, children: [_jsx(ToggleButton, { value: "1D", sx: { px: 1 }, children: "1d" }), _jsx(ToggleButton, { value: "1W", sx: { px: 1 }, children: "1w" }), _jsx(ToggleButton, { value: "1M", sx: { px: 1 }, children: "1M" }), _jsx(ToggleButton, { value: "3M", sx: { px: 1 }, children: "3M" }), _jsx(ToggleButton, { value: "6M", sx: { px: 1 }, children: "6M" }), _jsx(ToggleButton, { value: "1Y", sx: { px: 1 }, children: "1Y" }), _jsx(ToggleButton, { value: "ALL", sx: { px: 1 }, children: "ALL" })] }), _jsx(MuiTooltip, { placement: "top", arrow: true, title: "Connect point values", children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: spanGapsOption, disabled: chartLoading, onChange: () => handleSpanGaps(!spanGapsOption), sx: { ml: 2 }, children: _jsx(TimelineIcon, {}) }) })] })] }), _jsx(Box, { component: 'div', className: "chart-container", sx: { mt: 2, height: '100%' }, children: chartJsLoaded && !chartLoading && typeof window !== 'undefined' ?
+                    _jsx(_Fragment, { children: dataMeasures && (dataMeasures.length > 1 || (dataMeasures.length === 1 && dataMeasures[0].data?.length)) ?
                             (_jsx(Line, { options: options, data: {
-                                    datasets: dataMeasures || [{ data: [] }]
+                                    // datasets: dataMeasures || [{ data: [] }]
+                                    datasets: dataMeasures.map(d => ({ ...d, showLine: spanGapsOption || !d.change })) || [{ data: [] }]
                                 } })) : _jsxs(Box, { sx: {
                                 display: 'flex',
                                 flexDirection: 'column',
@@ -448,7 +465,7 @@ const TrendChart = ({ deviceId, measures, enableExportData, enableDatePicker, ha
                         alignItems: 'center',
                         justifyContent: 'center',
                         textAlign: 'center',
-                        height: '100%'
+                        height: 'calc(100% - 50px)'
                     }, children: _jsx(CircularProgress, {}) })) })] }));
 };
 export default TrendChart;

package/components/groups/GroupsDevices.d.ts

@@ -14,7 +14,7 @@ declare const GroupsDevices: ({ userInfo, handleGetUsersList, handleAddUserToGro
     handleGetGroups: (productID: number, userInfo?: UserType) => Promise<any>;
     handleGetUsersGroup: (groupID: string) => Promise<any>;
     handleCreateGroup: (group: any) => Promise<any>;
-    handleGetDevices: (user: UserType, group: string, selected: string) => Promise<any>;
+    handleGetDevices: (user: UserType, query: string) => Promise<any>;
     handleGetPositions: (devices: any) => Promise<any>;
     handleAddDevicesToGroup: (user: UserType, group: string, devicesToPatch: any[]) => Promise<any>;
     handleRemoveDevicesFromGroup: (user: UserType, group: string, devicesToPatch: any[]) => Promise<any>;

package/components/groups/GroupsDevices.js

@@ -28,7 +28,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     const [selectedGroup, setSelectedGroup] = useState(group);
     const [groups, setGroups] = useState(null);
     const [usersList, setUsersList] = useState([]);
-    const [usersGroup, setUsersGroup] = useState([]);
+    const [usersGroup, setUsersGroup] = useState(null);
     const [groupInfo, setGroupInfo] = useState(null);
     const [openAdd, setOpenAdd] = useState(false);
     const [groupName, setGroupName] = useState('');
@@ -73,7 +73,20 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     const fetchDevices = async (group, selected) => {
         try {
             setLoadingDevices(true);
-            const devices = await handleGetDevices(userInfo, group, selected);
+            let queryParams = "last_handshake_at!=null";
+            if (group !== "all") {
+                queryParams = `last_handshake_at!=null&state.groups=/${group}/`;
+                if (userInfo.role === "admin") {
+                    queryParams += "&quarantined=false";
+                }
+            }
+            else if (selected !== "all") {
+                queryParams = `last_handshake_at!=null&state.groups!=/${selected}/`;
+                if (userInfo.role === "admin") {
+                    queryParams += "&quarantined=false";
+                }
+            }
+            const devices = await handleGetDevices(userInfo, queryParams);
             setDevices(devices);
             if (enableMaps) {
                 const positions = await handleGetPositions(devices);
@@ -119,7 +132,9 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
         if (currentGroup && !checkboxSelection) {
             setSelectedGroup(currentGroup);
             setGroupInfo(groups && groups.find((g) => g.id === currentGroup));
-            getUsersGroup(currentGroup);
+            if (currentGroup !== 'all') {
+                getUsersGroup(currentGroup);
+            }
             fetchDevices(currentGroup, currentGroup);
         }
     }, [currentGroup]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iotready/nextjs-components-library",
-  "version": "1.0.0-preview1",
+  "version": "1.0.0-preview11",
   "main": "index.js",
   "scripts": {
     "build": "rm -rf dist && tsc --project tsconfig.build.json && cp package.json dist/",

package/server-actions/trackle.d.ts

@@ -13,7 +13,7 @@ export declare function createCustomer(trackleConfig: TrackleConfig, uid: string
     organization: string;
     uid: string;
 }>;
-export declare function getDevices(trackleConfig: TrackleConfig, productId?: number, uid?: string, group?: string, selected?: string): Promise<{
+export declare function getDevices(trackleConfig: TrackleConfig, productId?: number, uid?: string, query?: string): Promise<{
     devices: any[];
 }>;
 export declare function getDevice(trackleConfig: TrackleConfig, id: string, productId?: number, uid?: string): Promise<{

package/server-actions/trackle.js

@@ -55,25 +55,12 @@ export async function createCustomer(trackleConfig, uid) {
         .post({ uid })
         .json();
 }
-export async function getDevices(trackleConfig, productId, uid, group, selected) {
-    let queryParams = "last_handshake_at!=null";
-    if (group !== "all") {
-        queryParams = `last_handshake_at!=null&state.groups=/${group}/`;
-        if (!uid) {
-            queryParams += "&quarantined=false";
-        }
-    }
-    else if (selected !== "all") {
-        queryParams = `last_handshake_at!=null&state.groups!=/${selected}/`;
-        if (!uid) {
-            queryParams += "&quarantined=false";
-        }
-    }
+export async function getDevices(trackleConfig, productId, uid, query) {
     const api = uid ? wretchApi(trackleConfig, uid) : wretchApi(trackleConfig);
     const response = await api
         .get(uid
-        ? `/devices?${queryParams}`
-        : `/products/${productId}/devices?${queryParams}`)
+        ? `/devices${query ? "?" + query : ""}`
+        : `/products/${productId}/devices${query ? "?" + query : ""}`)
         .setTimeout(trackleConfig.apiTimeout)
         .json();
     return (uid ? { devices: response } : response);