From a2e139e02d4113bc2bc304ef614dd10ca40b63a9 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 21 Nov 2024 15:14:32 -0800
Subject: [PATCH] Code improvement

---
 src/widgets/spoolman/component.jsx | 30 ++++++++++--------------------
 1 file changed, 10 insertions(+), 20 deletions(-)

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 <Container service={service} error={spoolError} />;
   }
 
-  // Loading state
   if (!spoolData) {
     return (
       <Container service={service}>
@@ -35,12 +24,10 @@ export default function Component({ service }) {
     );
   }
 
-  // API error or unexpected response
   if (spoolData.error || spoolData.message) {
     return <Container service={service} error={spoolData?.error ?? spoolData} />;
   }
 
-  // No spools available
   if (spoolData.length === 0) {
     return (
       <Container service={service}>
@@ -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 (
     <Container service={service}>
-      {filteredSpoolData.map((spool) => (
+      {spoolData.map((spool) => (
         <Block
           key={spool.id}
           label={spool.filament.name}