update: convert more components to function ones

includes Input, Config, SideBard.

also removed react-redux Provider

1 files changed, 25 insertions, 30 deletions

diff --git a/src/components/ProxyLatency.js b/src/components/ProxyLatency.js
index 5d1aaee..96dd26f 100644
--- a/src/components/ProxyLatency.js
+++ b/src/components/ProxyLatency.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import s0 from './ProxyLatency.module.scss';
@@ -10,35 +10,30 @@ const colorMap = {
   na: '#909399'
 };
 
-class C extends Component {
-  static propTypes = {
-    latency: PropTypes.shape({
-      number: PropTypes.number,
-      error: PropTypes.string
-    })
-  };
-
-  render() {
-    const { latency } = this.props;
-    const { number, error } = latency;
-    let bg;
-
-    if (error !== '') {
-      bg = colorMap.na;
-    } else if (number < 200) {
-      bg = colorMap.good;
-    } else if (number < 400) {
-      bg = colorMap.normal;
-    } else {
-      bg = colorMap.bad;
-    }
-
-    return (
-      <span className={s0.proxyLatency} style={{ color: bg }}>
-        {error !== '' ? <span>{error}</span> : <span>{number} ms</span>}
-      </span>
-    );
+function getLabelColor(number, error) {
+  if (error !== '') {
+    return colorMap.na;
+  } else if (number < 200) {
+    return colorMap.good;
+  } else if (number < 400) {
+    return colorMap.normal;
   }
+  return colorMap.bad;
 }
 
-export default C;
+export default function ProxyLatency({ latency }) {
+  const { number, error } = latency;
+  const color = useMemo(() => getLabelColor(number, error), [number, error]);
+  return (
+    <span className={s0.proxyLatency} style={{ color }}>
+      {error !== '' ? <span>{error}</span> : <span>{number} ms</span>}
+    </span>
+  );
+}
+
+ProxyLatency.propTypes = {
+  latency: PropTypes.shape({
+    number: PropTypes.number,
+    error: PropTypes.string
+  })
+};