chore(styles): prettyfy

nurikk · Feb 3, 2024 · cd141c8 · cd141c8
1 parent 919a3aa
commit cd141c8
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 33 deletions.
diff --git a/src/components/device-image/index.tsx b/src/components/device-image/index.tsx
@@ -17,8 +17,10 @@ type DeviceImageProps = {
 type ImageGeneratorFn = (device: Device) => string | undefined;
 const z2mBasePath = 'https://www.zigbee2mqtt.io/images/devices/';
 
-export const getZ2mDeviceImage = (device: Device): string =>`${z2mBasePath}${sanitizeZ2MDeviceName(device?.definition?.model)}.jpg`;
-export const getZ2mDeviceImagePng = (device: Device): string =>`${z2mBasePath}${sanitizeZ2MDeviceName(device?.definition?.model)}.png`;
+export const getZ2mDeviceImage = (device: Device): string =>
+    `${z2mBasePath}${sanitizeZ2MDeviceName(device?.definition?.model)}.jpg`;
+export const getZ2mDeviceImagePng = (device: Device): string =>
+    `${z2mBasePath}${sanitizeZ2MDeviceName(device?.definition?.model)}.png`;
 const getConverterDeviceImage = (device: Device): string | undefined => device.definition?.icon;
 
 /* prettier-ignore */

diff --git a/src/components/device-page/header-device-selector.test.tsx b/src/components/device-page/header-device-selector.test.tsx
@@ -7,50 +7,46 @@ import { HeaderDeviceSelector } from './header-device-selector';
 it('all devices are visible in dropdown', async () => {
     const ieeeAddress1 = 'FF:FF:FF:FF:FF:AA';
     const ieeeAddress2 = 'AA:AA:AA:AA:AA:AA';
-    const currentDevice = createMockDevice({ieee_address: ieeeAddress1, friendly_name: "Button"})
+    const currentDevice = createMockDevice({ ieee_address: ieeeAddress1, friendly_name: 'Button' });
     const devices = {
-        [ieeeAddress1]:  currentDevice,
-        [ieeeAddress2]:  createMockDevice({ieee_address: ieeeAddress2, friendly_name: "Light"}),
-    }
-    render(
-        <HeaderDeviceSelector allDevices={devices} currentDevice={currentDevice}/>,
-    );
+        [ieeeAddress1]: currentDevice,
+        [ieeeAddress2]: createMockDevice({ ieee_address: ieeeAddress2, friendly_name: 'Light' }),
+    };
+    render(<HeaderDeviceSelector allDevices={devices} currentDevice={currentDevice} />);
     await waitFor(() => fireEvent.click(screen.getByLabelText(/Select a device/)));
-    expect(document.querySelectorAll('.dropdown-item')).toHaveLength(2)
+    expect(document.querySelectorAll('.dropdown-item')).toHaveLength(2);
 });
 
 it('device can be selected', async () => {
     const ieeeAddress1 = 'FF:FF:FF:FF:FF:AA';
     const ieeeAddress2 = 'AA:AA:AA:AA:AA:AA';
-    const currentDevice = createMockDevice({ieee_address: ieeeAddress1, friendly_name: "Button"})
+    const currentDevice = createMockDevice({ ieee_address: ieeeAddress1, friendly_name: 'Button' });
     const devices = {
-        [ieeeAddress1]:  currentDevice,
-        [ieeeAddress2]:  createMockDevice({ieee_address: ieeeAddress2, friendly_name: "Light"}),
-    }
+        [ieeeAddress1]: currentDevice,
+        [ieeeAddress2]: createMockDevice({ ieee_address: ieeeAddress2, friendly_name: 'Light' }),
+    };
 
-    render(
-        <HeaderDeviceSelector allDevices={devices} currentDevice={currentDevice}/>,
-    );
+    render(<HeaderDeviceSelector allDevices={devices} currentDevice={currentDevice} />);
 
     await waitFor(() => fireEvent.click(screen.getByLabelText(/Select a device/)));
     await waitFor(() => fireEvent.click(screen.getByText(/Light/)));
-    expect(document.location.toString()).toContain(ieeeAddress2)
+    expect(document.location.toString()).toContain(ieeeAddress2);
 });
 
 it('devices list can be filtered', async () => {
     const ieeeAddress1 = 'FF:FF:FF:FF:FF:AA';
     const ieeeAddress2 = 'AA:AA:AA:AA:AA:AA';
-    const currentDevice = createMockDevice({ieee_address: ieeeAddress1, friendly_name: "Button"})
+    const currentDevice = createMockDevice({ ieee_address: ieeeAddress1, friendly_name: 'Button' });
     const devices = {
-        [ieeeAddress1]:  currentDevice,
-        [ieeeAddress2]:  createMockDevice({ieee_address: ieeeAddress2, friendly_name: "Light"}),
-    }
-    render(
-        <HeaderDeviceSelector allDevices={devices} currentDevice={currentDevice}/>,
-    );
+        [ieeeAddress1]: currentDevice,
+        [ieeeAddress2]: createMockDevice({ ieee_address: ieeeAddress2, friendly_name: 'Light' }),
+    };
+    render(<HeaderDeviceSelector allDevices={devices} currentDevice={currentDevice} />);
 
     await waitFor(() => fireEvent.click(screen.getByLabelText(/Select a device/)));
-    await waitFor(() => fireEvent.change(screen.getByPlaceholderText(/Type to filter.../), {target: {value: 'Light'}}));
+    await waitFor(() =>
+        fireEvent.change(screen.getByPlaceholderText(/Type to filter.../), { target: { value: 'Light' } }),
+    );
 
-    expect(document.querySelectorAll('.dropdown-item')).toHaveLength(1)
-});
+    expect(document.querySelectorAll('.dropdown-item')).toHaveLength(1);
+});
diff --git a/src/components/device-page/header-device-selector.tsx b/src/components/device-page/header-device-selector.tsx
@@ -8,7 +8,6 @@ import { Device } from '../../types';
 import Button from '../button';
 import { withTranslation } from 'react-i18next';
 
-
 interface HeaderDeviceSelectorProps {
     allDevices: Devices;
     currentDevice: Device;
@@ -27,7 +26,7 @@ export function HeaderDeviceSelectorRaw(props: HeaderDeviceSelectorProps): JSX.E
     const { allDevices, currentDevice, tab = 'info', t } = props;
     const [searchTerm, setSearchTerm] = useState<string>('');
 
-    const selectedDevices = Object.values(allDevices).filter(d => d.friendly_name.includes(searchTerm))
+    const selectedDevices = Object.values(allDevices).filter((d) => d.friendly_name.includes(searchTerm));
 
     return (
         <h1 className="h3">
@@ -44,7 +43,12 @@ export function HeaderDeviceSelectorRaw(props: HeaderDeviceSelectorProps): JSX.E
                         onChange={(e) => setSearchTerm(e.target.value)}
                         value={searchTerm}
                     />
-                    <HeaderDeviceSelectorItems devices={selectedDevices} currentDevice={currentDevice} tab={tab} setSearchTerm={setSearchTerm} />
+                    <HeaderDeviceSelectorItems
+                        devices={selectedDevices}
+                        currentDevice={currentDevice}
+                        tab={tab}
+                        setSearchTerm={setSearchTerm}
+                    />
                 </Dropdown.Menu>
             </Dropdown>
         </h1>
@@ -53,10 +57,15 @@ export function HeaderDeviceSelectorRaw(props: HeaderDeviceSelectorProps): JSX.E
 
 export const HeaderDeviceSelector = withTranslation('devicePage')(HeaderDeviceSelectorRaw);
 
-function HeaderDeviceSelectorItems({ devices, currentDevice, tab, setSearchTerm }: HeaderDeviceSelectorItemsProps): JSX.Element {
+function HeaderDeviceSelectorItems({
+    devices,
+    currentDevice,
+    tab,
+    setSearchTerm,
+}: HeaderDeviceSelectorItemsProps): JSX.Element {
     return (
         <>
-            {Object.values(devices).map(listDevice => (
+            {Object.values(devices).map((listDevice) => (
                 <Dropdown.Item
                     active={currentDevice.ieee_address === listDevice.ieee_address}
                     key={listDevice.ieee_address}