diff --git a/src/widgets/spoolman/component.jsx b/src/widgets/spoolman/component.jsx index df87db225..9d7630586 100644 --- a/src/widgets/spoolman/component.jsx +++ b/src/widgets/spoolman/component.jsx @@ -8,24 +8,13 @@ export default function Component({ service }) { const { t } = useTranslation(); const { widget } = service; - const { data: spoolData, error: spoolError } = useWidgetAPI(widget, "spools"); + // eslint-disable-next-line prefer-const + let { data: spoolData, error: spoolError } = useWidgetAPI(widget, "spools"); - // Helper to handle filtering based on spoolIds - const filterSpools = (data, spoolIds) => { - if (!spoolIds || spoolIds.length === 0) return data; // No filtering if no spoolIds - const limitedspoolIds = spoolIds.slice(0, 4); // Limit to 4 names - return data.filter(spool => spoolIds.includes(spool.id)); - }; - - // Helper to limit spoolData length - const limitSpoolData = (data, limit = 4) => (data.length > limit ? data.slice(0, limit) : data); - - // Error handling if (spoolError) { return ; } - // Loading state if (!spoolData) { return ( @@ -35,12 +24,10 @@ export default function Component({ service }) { ); } - // API error or unexpected response if (spoolData.error || spoolData.message) { return ; } - // No spools available if (spoolData.length === 0) { return ( @@ -49,14 +36,17 @@ export default function Component({ service }) { ); } - // Filter and limit spools - let filteredSpoolData = filterSpools(spoolData, widget.spoolIds); - filteredSpoolData = limitSpoolData(filteredSpoolData); + if (widget.spoolIds?.length) { + spoolData = spoolData.filter((spool) => widget.spoolIds.includes(spool.id)); + } + + if (spoolData.length > 4) { + spoolData = spoolData.slice(0, 4); + } - // Render filtered and limited spools return ( - {filteredSpoolData.map((spool) => ( + {spoolData.map((spool) => (