improved output of interface page.

.gitignore

@@ -2,6 +2,7 @@ backend/src/openocd*
 backend/static/
 node_modules/
 venv/
+__pycache__/
 bin/
 .DS_Store
 *.log

frontend/components/InterfaceList.js

@@ -29,43 +29,25 @@ const INTERFACE_LIST = gql`
   }
 `
 
-class InterfaceList extends React.Component {
-  state = {
-    connectionId: '',
-    command: '',
-    result: ''
-  }
-
-  sendCommand = async (event, client) => {
-    event.preventDefault()
-    const { data, error } = await client.query({
-      query: CONNECTION_SEND_QUERY,
-      variables: this.state
-    })
-    console.log(data, error)
-    const { result } = data
-    this.setState({ result })
-  }
+const InterfaceList = props => (
+  <Query query={INTERFACE_LIST}>
+    {({ data }, loading, error) => {
+      if (!data) return <p>No interfaces found.</p>
 
-  changeInput = event => {
-    this.setState({ [event.target.id]: event.target.value })
-  }
-
-  render() {
-    return (
-      <Query query={INTERFACE_LIST}>
-        {({data}, loading, error) => {
-          const {interfaces} = data
-          return (
-            <div>
-            <h1>Interface List</h1>
-            {interfaces.map(iface => <Interface key={iface.interfaceName} data={iface} />)}
-            </div>
-        )}}
-      </Query>
-    )
-  }
-}
+      const { interfaces } = data
+      return (
+        <div>
+          <h1>Interface List</h1>
+          {loading ? (
+            <p>Loading interfaces...</p>
+          ) : (
+            interfaces && interfaces.map(iface => <Interface key={iface.interfaceName} data={iface} />)
+          )}
+        </div>
+      )
+    }}
+  </Query>
+)
 
 export default InterfaceList
-export {INTERFACE_LIST}
+export { INTERFACE_LIST }