refactor: use react hooks

src/api/logs.js

@@ -26,7 +26,7 @@ let even = false;
 const store = {
   logs: [],
   size: Size,
-  updateCallback: null,
+  subscribers: [],
   appendData(o) {
     const now = new Date();
     const time = now.toLocaleString('zh-Hans');
@@ -36,8 +36,16 @@ const store = {
     o.even = even = !even;
     this.logs.unshift(o);
     if (this.logs.length > this.size) this.logs.pop();
-    // TODO consider throttle this
-    if (this.updateCallback) this.updateCallback();
+    this.subscribers.forEach(f => f(o));
+  },
+
+  subscribe(listener) {
+    const me = this;
+    this.subscribers.push(listener);
+    return function unsubscribe() {
+      const idx = me.subscribers.indexOf(listener);
+      me.subscribers.splice(idx, 1);
+    };
   }
 };
 

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>
-    );
-  }
-}
-
-class Logs extends Component {
-  // static propTypes = {
-  //   isOpen: PropTypes.bool.isRequired,
-  //   onRequestClose: PropTypes.func.isRequired
-  // };
-  state = {
-    logs: []
-  };
-
-  handle = null;
-
-  componentDidMount() {
-    this.handle = fetchLogs();
-    this.setState({ logs: this.handle.logs });
-    this.handle.updateCallback = () => {
-      this.setState({ logs: this.handle.logs });
-    };
-  }
-
-  componentWillUnmount() {
-    this.handle.updateCallback = null;
-  }
-
-  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>
-          </div>
-        ) : (
-          <div className={s0.logs}>
-            <ul className={s0.logUl}>
-              {logs.map(l => (
-                <LogLine key={l.id} {...l} />
-              ))}
-            </ul>
-          </div>
-        )}
+        <div className={s0.logText}>{payload}</div>
       </div>
-    );
-  }
+    </li>
+  );
 }
 
-export default Logs;
+LogLine.propTypes = {
+  time: PropTypes.string,
+  even: PropTypes.bool,
+  type: PropTypes.string.isRequired,
+  payload: PropTypes.string.isRequired
+};
+
+export default function Logs() {
+  const [logs, setLogs] = useState([]);
+
+  useEffect(() => {
+    const x = fetchLogs();
+    setLogs(x.logs);
+    return x.subscribe(() => setLogs(x.logs));
+  });
+
+  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>
+        </div>
+      ) : (
+        <div className={s0.logs}>
+          <ul className={s0.logUl}>
+            {logs.map(l => (
+              <LogLine key={l.id} {...l} />
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/TrafficChart.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import Chart from 'chart.js/dist/Chart.min.js';
 import prettyBytes from 'm/pretty-bytes';
 
@@ -107,26 +107,25 @@ const options = {
   }
 };
 
-class TrafficChart extends Component {
-  traffic = {
-    labels: [],
-    up: [],
-    down: []
-  };
+const chartWrapperStyle = {
+  position: 'relative',
+  width: '90%'
+};
 
-  componentDidMount() {
+export default function TrafficChart() {
+  useEffect(() => {
     const ctx = document.getElementById('myChart').getContext('2d');
-    this.traffic = fetchData();
+    const traffic = fetchData();
     const data = {
-      labels: this.traffic.labels,
+      labels: traffic.labels,
       datasets: [
         {
           ...upProps,
-          data: this.traffic.up
+          data: traffic.up
         },
         {
           ...downProps,
-          data: this.traffic.down
+          data: traffic.down
         }
       ]
     };
@@ -135,26 +134,12 @@ class TrafficChart extends Component {
       data,
       options
     });
-    this.unsubscribe = this.traffic.subscribe(() => c.update());
-  }
+    return traffic.subscribe(() => c.update());
+  }, []);
 
-  componentWillUnmount() {
-    this.unsubscribe();
-  }
-
-  render() {
-    return (
-      <div>
-        <div
-          style={{
-            position: 'relative',
-            width: '90%'
-          }}>
-          <canvas id="myChart" />
-        </div>
-      </div>
-    );
-  }
+  return (
+    <div style={chartWrapperStyle}>
+      <canvas id="myChart" />
+    </div>
+  );
 }
-
-export default TrafficChart;