refactor: use react hooks

1 files changed, 46 insertions, 68 deletions

diff --git a/src/components/Logs.js b/src/components/Logs.js
index e81ae99..74cdb33 100644
--- a/src/components/Logs.js
+++ b/src/components/Logs.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
@@ -18,78 +18,56 @@ const colors = {
   error: '#c11c1c'
 };
 
-class LogLine extends Component {
-  static propTypes = {
-    time: PropTypes.string,
-    even: PropTypes.bool,
-    type: PropTypes.string.isRequired,
-    payload: PropTypes.string.isRequired
-  };
-
-  render() {
-    const { time, type, payload, even } = this.props;
-    const className = cx({ even });
-    return (
-      <li className={className}>
-        <div className={s0.logMeta}>
-          <div className={s0.logTime}>{time}</div>
-          <div className={s0.logType} style={{ backgroundColor: colors[type] }}>
-            {type}
-          </div>
-          <div className={s0.logText}>{payload}</div>
+function LogLine({ time, even, payload, type }) {
+  const className = cx({ even });
+  return (
+    <li className={className}>
+      <div className={s0.logMeta}>
+        <div className={s0.logTime}>{time}</div>
+        <div className={s0.logType} style={{ backgroundColor: colors[type] }}>
+          {type}
         </div>
-      </li>
-    );
-  }
+        <div className={s0.logText}>{payload}</div>
+      </div>
+    </li>
+  );
 }
 
-class Logs extends Component {
-  // static propTypes = {
-  //   isOpen: PropTypes.bool.isRequired,
-  //   onRequestClose: PropTypes.func.isRequired
-  // };
-  state = {
-    logs: []
-  };
-
-  handle = null;
+LogLine.propTypes = {
+  time: PropTypes.string,
+  even: PropTypes.bool,
+  type: PropTypes.string.isRequired,
+  payload: PropTypes.string.isRequired
+};
 
-  componentDidMount() {
-    this.handle = fetchLogs();
-    this.setState({ logs: this.handle.logs });
-    this.handle.updateCallback = () => {
-      this.setState({ logs: this.handle.logs });
-    };
-  }
+export default function Logs() {
+  const [logs, setLogs] = useState([]);
 
-  componentWillUnmount() {
-    this.handle.updateCallback = null;
-  }
+  useEffect(() => {
+    const x = fetchLogs();
+    setLogs(x.logs);
+    return x.subscribe(() => setLogs(x.logs));
+  });
 
-  render() {
-    const { logs } = this.state;
-    return (
-      <div>
-        <ContentHeader title="Logs" />
-        {logs.length === 0 ? (
-          <div className={s0.logPlaceholder}>
-            <div>
-              <Icon id={yacd.id} width={200} height={200} />
-            </div>
-            <div>No logs yet, hang tight...</div>
+  return (
+    <div>
+      <ContentHeader title="Logs" />
+      {logs.length === 0 ? (
+        <div className={s0.logPlaceholder}>
+          <div>
+            <Icon id={yacd.id} width={200} height={200} />
           </div>
-        ) : (
-          <div className={s0.logs}>
-            <ul className={s0.logUl}>
-              {logs.map(l => (
-                <LogLine key={l.id} {...l} />
-              ))}
-            </ul>
-          </div>
-        )}
-      </div>
-    );
-  }
+          <div>No logs yet, hang tight...</div>
+        </div>
+      ) : (
+        <div className={s0.logs}>
+          <ul className={s0.logUl}>
+            {logs.map(l => (
+              <LogLine key={l.id} {...l} />
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
 }
-
-export default Logs;