Splitted indi panel

src/apolloclient.js

@@ -78,6 +78,49 @@ const client = new ApolloClient({
   }),
 });
 
+const GETDEVICES = gql`
+  query devices {
+    devices {
+      id
+      ...DeviceInfo
+      messages @client
+      properties {
+        id
+        name
+        ...PropertyVector
+      }
+    }
+  }
+
+  ${deviceInfoFragment}
+  ${propertyVectorFragment}
+`;
+
+const NEW_DEVICE = gql`
+  subscription newIndiDevice {
+    newIndiDevice {
+      id
+      ...DeviceInfo
+    }
+  }
+
+  ${deviceInfoFragment}
+`;
+
+client
+  .subscribe({
+    query: NEW_DEVICE,
+  })
+  .subscribe(({ data }) => {
+    const res = client.readQuery({ query: GETDEVICES });
+    data.newIndiDevice.properties = [];
+    data.newIndiDevice.messages = [];
+    client.writeQuery({
+      query: GETDEVICES,
+      data: { devices: [...res.devices, data.newIndiDevice] },
+    });
+  });
+
 const GETDEVICE = gql`
   query device($id: String!) {
     device(id: $id) {

src/components/indi/panel.js

@@ -52,7 +52,6 @@ export const IndiPanel = () => {
           )}
         </Tabs>
       ) : null}
-      <Button icon={<Contact />} onClick={() => setOpenMsg(true)} />
     </Box>
   );
 };

src/devices.js

@@ -26,9 +26,9 @@ const GETDEVICES = gql`
   ${deviceInfoFragment}
 `;
 
-const CONNECT = gql`
-  mutation connect {
-    connect
+const START = gql`
+  mutation start {
+    start
   }
 `;
 
@@ -51,14 +51,9 @@ const useIndiState = () => {
 
 const Devices = () => {
   //const connected = useIndiState();
-  const { data } = useQuery(GETDEVICES);
-  const [connect] = useMutation(CONNECT);
+  const [connect] = useMutation(START);
   const [disconnect] = useMutation(DISCONNECT);
 
-  if (!data || !data.devices) {
-    return <div>No data</div>;
-  }
-
   return (
     <Box fill background="light-3">
       <Header background="brand" pad="small">
@@ -85,6 +80,7 @@ const Devices = () => {
               }}
             />
           )}
+          <Button icon={<Contact />} onClick={() => {}} />
         </Box>
       </Header>