chore: split function to get below line limit

nurikk · Dec 23, 2023 · 772b6a6 · 772b6a6
1 parent 9c45bcf
commit 772b6a6
Showing 1 changed file with 25 additions and 10 deletions.
diff --git a/src/components/device-page/header-device-selector.tsx b/src/components/device-page/header-device-selector.tsx
@@ -21,6 +21,13 @@ interface HeaderDeviceSelectorProps {
     t: TFunction;
 }
 
+interface HeaderDeviceSelectorItemsProps {
+    devices: Devices;
+    dev: string;
+    tab?: TabName;
+    setSearchTerm: (value: string) => void;
+}
+
 const SearchMenu = forwardRef<HTMLDivElement, PropsWithChildren<SearchMenuProps>>(function SearchMenu(
     { children, style, className, searchTerm, setSearchTerm, t },
     ref,
@@ -60,18 +67,26 @@ export function HeaderDeviceSelector(props: HeaderDeviceSelectorProps): JSX.Elem
                 </Dropdown.Toggle>
 
                 <Dropdown.Menu as={SearchMenu} searchTerm={searchTerm} t={t} setSearchTerm={setSearchTerm}>
-                    {Object.entries(devices).map(([id, device]) => (
-                        <Dropdown.Item
-                            active={id === dev}
-                            key={id}
-                            href={`#/device/${id}/${tab}`}
-                            onClick={() => setSearchTerm('')}
-                        >
-                            {device.friendly_name}
-                        </Dropdown.Item>
-                    ))}
+                    <HeaderDeviceSelectorItems devices={devices} dev={dev} tab={tab} setSearchTerm={setSearchTerm} />
                 </Dropdown.Menu>
             </Dropdown>
         </h1>
     );
 }
+
+function HeaderDeviceSelectorItems({devices, dev, tab, setSearchTerm}: HeaderDeviceSelectorItemsProps): JSX.Element {
+    return (
+        <>
+            {Object.entries(devices).map(([id, device]) => (
+                <Dropdown.Item
+                    active={id === dev}
+                    key={id}
+                    href={`#/device/${id}/${tab}`}
+                    onClick={() => setSearchTerm('')}
+                >
+                    {device.friendly_name}
+                </Dropdown.Item>
+            ))}
+        </>
+    )
+}