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,16 +18,7 @@ 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;
+function LogLine({ time, even, payload, type }) {
   const className = cx({ even });
   return (
     <li className={className}>
@@ -41,33 +32,23 @@ class LogLine extends Component {
     </li>
   );
 }
-}
 
-class Logs extends Component {
-  // static propTypes = {
-  //   isOpen: PropTypes.bool.isRequired,
-  //   onRequestClose: PropTypes.func.isRequired
-  // };
-  state = {
-    logs: []
+LogLine.propTypes = {
+  time: PropTypes.string,
+  even: PropTypes.bool,
+  type: PropTypes.string.isRequired,
+  payload: PropTypes.string.isRequired
 };
 
-  handle = null;
+export default function Logs() {
+  const [logs, setLogs] = useState([]);
 
-  componentDidMount() {
-    this.handle = fetchLogs();
-    this.setState({ logs: this.handle.logs });
-    this.handle.updateCallback = () => {
-      this.setState({ logs: this.handle.logs });
-    };
-  }
+  useEffect(() => {
+    const x = fetchLogs();
+    setLogs(x.logs);
+    return x.subscribe(() => setLogs(x.logs));
+  });
 
-  componentWillUnmount() {
-    this.handle.updateCallback = null;
-  }
-
-  render() {
-    const { logs } = this.state;
   return (
     <div>
       <ContentHeader title="Logs" />
@@ -90,6 +71,3 @@ class Logs extends Component {
     </div>
   );
 }
-}
-
-export default Logs;

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%'
-          }}>
+    <div style={chartWrapperStyle}>
       <canvas id="myChart" />
     </div>
-      </div>
   );
 }
-}
-
-export default TrafficChart;