Factor out ArtNetDevices

spensbot · Jun 24, 2024 · f67ce2a · f67ce2a
1 parent 75049bf
commit f67ce2a
Showing 1 changed file with 17 additions and 6 deletions.
diff --git a/src/renderer/overlays/Devices.tsx b/src/renderer/overlays/Devices.tsx
@@ -79,12 +79,7 @@ export default function Devices({}: Props) {
                 }
               </div>
             )}
-            <SubSubTitle>Art-Net</SubSubTitle>
-            <Input
-              value={connectable.artNet[0] ?? ''}
-              onChange={(newVal) => dispatch(setArtNetConnectable([newVal]))}
-              placeholder="Enter Art-Net IP"
-            />
+            <ArtNetDevices />
           </Pane>
           <Divider />
           <Pane>
@@ -153,6 +148,22 @@ const SubSubTitle = styled.div`
   margin-top: 1rem;
 `
 
+function ArtNetDevices() {
+  const connectable = useControlSelector((state) => state.device.connectable)
+  const dispatch = useDispatch()
+
+  return (
+    <>
+      <SubSubTitle>Art-Net</SubSubTitle>
+      <Input
+        value={connectable.artNet[0] ?? ''}
+        onChange={(newVal) => dispatch(setArtNetConnectable([newVal]))}
+        placeholder="Enter Art-Net IP"
+      />
+    </>
+  )
+}
+
 interface Props2<T> {
   device: T
   connected: ConnectionId[]