feat: add upload/download total and connectors number on overview

3 files changed, 63 insertions, 26 deletions

diff --git a/src/components/Connections.js b/src/components/Connections.js
index c3d9a6b..5dbccec 100644
--- a/src/components/Connections.js
+++ b/src/components/Connections.js
@@ -52,8 +52,8 @@ function Conn() {
   }, [config, closeCloseAllModal]);
   const iconClose = useMemo(() => <IconClose width={16} />, []);
   const prevConnsRef = useRef(conns);
-  useEffect(() => {
-    function read({ connections }) {
+  const read = useCallback(
+    ({ connections }) => {
       const x = connections.map(c => formatConnectionDataItem(c));
       // if previous connections and current connections are both empty
       // arrays, we wont update state to avaoid rerender
@@ -63,9 +63,12 @@ function Conn() {
       } else {
         prevConnsRef.current = x;
       }
-    }
+    },
+    [setConns]
+  );
+  useEffect(() => {
     return connAPI.fetchData(config, read);
-  }, [config]);
+  }, [config, read]);
   return (
     <div>
       <ContentHeader title="Connections" />
diff --git a/src/components/TrafficNow.js b/src/components/TrafficNow.js
index bcdd58a..f673337 100644
--- a/src/components/TrafficNow.js
+++ b/src/components/TrafficNow.js
@@ -1,24 +1,40 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import prettyBytes from 'm/pretty-bytes';
 
 import { useStoreState } from 'm/store';
 import { getClashAPIConfig } from 'd/app';
 import { fetchData } from '../api/traffic';
+import * as connAPI from '../api/connections';
 
 import s0 from 'c/TrafficNow.module.css';
 
+const { useState, useEffect, useCallback } = React;
+
 export default function TrafficNow() {
   const { upStr, downStr } = useSpeed();
+  const { upTotal, dlTotal, connNumber } = useConnection();
   return (
     <div className={s0.TrafficNow}>
-      <div className={s0.up}>
+      <div className="sec">
         <div>Upload</div>
         <div>{upStr}</div>
       </div>
-      <div className={s0.down}>
+      <div className="sec">
         <div>Download</div>
         <div>{downStr}</div>
       </div>
+      <div className="sec">
+        <div>Upload Total</div>
+        <div>{upTotal}</div>
+      </div>
+      <div className="sec">
+        <div>Download Total</div>
+        <div>{dlTotal}</div>
+      </div>
+      <div className="sec">
+        <div>Active Connections</div>
+        <div>{connNumber}</div>
+      </div>
     </div>
   );
 }
@@ -40,3 +56,26 @@ function useSpeed() {
   }, [hostname, port, secret]);
   return speed;
 }
+
+function useConnection() {
+  const [state, setState] = useState({
+    upTotal: '0 B',
+    dlTotal: '0 B',
+    connNumber: 0
+  });
+  const config = useStoreState(getClashAPIConfig);
+  const read = useCallback(
+    ({ downloadTotal, uploadTotal, connections }) => {
+      setState({
+        upTotal: prettyBytes(uploadTotal),
+        dlTotal: prettyBytes(downloadTotal),
+        connNumber: connections.length
+      });
+    },
+    [setState]
+  );
+  useEffect(() => {
+    return connAPI.fetchData(config, read);
+  }, [config, read]);
+  return state;
+}
diff --git a/src/components/TrafficNow.module.css b/src/components/TrafficNow.module.css
index 7c3aee7..0bb2276 100644
--- a/src/components/TrafficNow.module.css
+++ b/src/components/TrafficNow.module.css
@@ -2,25 +2,20 @@
   color: var(--color-text);
   display: flex;
   align-items: center;
-}
-
-.up,
-.down {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  width: 200px;
+  flex-wrap: wrap;
 
-  div:nth-child(1) {
-    color: var(--color-text-secondary);
-  }
-  div:nth-child(2) {
-    padding: 10px 0 0;
-    font-size: 2em;
+  :global {
+    .sec {
+      padding: 10px;
+      width: 180px;
+      div:nth-child(1) {
+        color: var(--color-text-secondary);
+        font-size: 0.7em;
+      }
+      div:nth-child(2) {
+        padding: 10px 0 0;
+        font-size: 1.8em;
+      }
+    }
   }
 }
-.up {
-  padding-right: 20px;
-}
-.down {
-  padding-left: 20px;
-}