From 0a3c59450b9d6650492c27637c77ddfd72a889ff Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Sat, 11 Dec 2021 20:52:06 +0800
Subject: [PATCH] feat(traffic): api support & adjust

---
 src/components/traffic.tsx | 37 ++++++++++++++++++++-----------------
 src/services/base.ts       | 11 +++++++++++
 src/services/index.ts      |  5 +++++
 src/services/traffic.ts    | 29 +++++++++++++++++++++++++++++
 4 files changed, 65 insertions(+), 17 deletions(-)
 create mode 100644 src/services/base.ts
 create mode 100644 src/services/index.ts
 create mode 100644 src/services/traffic.ts

diff --git a/src/components/traffic.tsx b/src/components/traffic.tsx
index 26b8f55..51c1b83 100644
--- a/src/components/traffic.tsx
+++ b/src/components/traffic.tsx
@@ -1,29 +1,32 @@
-import axios from "axios";
+import { CancelTokenSource } from "axios";
 import { useEffect, useState } from "react";
+import { Box, Typography } from "@mui/material";
 import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
 import parseTraffic from "../utils/parse-traffic";
-import { Typography } from "@mui/material";
-import { Box } from "@mui/system";
+import services from "../services";
 
 const Traffic = () => {
   const [traffic, setTraffic] = useState({ up: 0, down: 0 });
 
   useEffect(() => {
-    const onTraffic = () => {
-      axios({
-        url: `http://127.0.0.1:9090/traffic`,
-        method: "GET",
-        onDownloadProgress: (progressEvent) => {
-          const data = progressEvent.currentTarget.response || "";
-          const lastData = data.slice(data.trim().lastIndexOf("\n") + 1);
-          try {
-            if (lastData) setTraffic(JSON.parse(lastData));
-          } catch {}
-        },
-      }).catch(() => setTimeout(onTraffic, 500));
-    };
+    let timer: any = null;
+    let source: CancelTokenSource | null = null;
+
+    async function onTraffic() {
+      timer = null;
+      try {
+        source = await services.getTraffic(setTraffic);
+      } catch {
+        timer = setTimeout(onTraffic, 500);
+      }
+    }
 
     onTraffic();
+
+    return () => {
+      if (timer) clearTimeout(timer);
+      source?.cancel();
+    };
   }, []);
 
   const [up, upUnit] = parseTraffic(traffic.up);
@@ -45,7 +48,7 @@ const Traffic = () => {
 
   return (
     <Box width="110px">
-      <Box mb={2} display="flex" alignItems="center" whiteSpace="nowrap">
+      <Box mb={1.5} display="flex" alignItems="center" whiteSpace="nowrap">
         <ArrowUpward
           fontSize="small"
           color={+up > 0 ? "primary" : "disabled"}
diff --git a/src/services/base.ts b/src/services/base.ts
new file mode 100644
index 0000000..23b2d38
--- /dev/null
+++ b/src/services/base.ts
@@ -0,0 +1,11 @@
+import axios from "axios";
+
+const axiosIns = axios.create({
+  baseURL: "http://127.0.0.1:9090",
+});
+
+axiosIns.interceptors.response.use((respone) => {
+  return respone.data;
+});
+
+export default axiosIns;
diff --git a/src/services/index.ts b/src/services/index.ts
new file mode 100644
index 0000000..a15cef0
--- /dev/null
+++ b/src/services/index.ts
@@ -0,0 +1,5 @@
+import * as traffic from "./traffic";
+
+export default {
+  ...traffic,
+};
diff --git a/src/services/traffic.ts b/src/services/traffic.ts
new file mode 100644
index 0000000..09e0e34
--- /dev/null
+++ b/src/services/traffic.ts
@@ -0,0 +1,29 @@
+import axios from "axios";
+import axiosIns from "./base";
+
+export interface TrafficData {
+  up: number;
+  down: number;
+}
+
+/// Get the traffic stream
+export async function getTraffic(callback: (data: TrafficData) => void) {
+  const source = axios.CancelToken.source();
+
+  axiosIns.get("/traffic", {
+    cancelToken: source.token,
+    onDownloadProgress: (progressEvent) => {
+      const data = progressEvent.currentTarget.response || "";
+      const lastData = data.slice(data.trim().lastIndexOf("\n") + 1);
+
+      if (!lastData) callback({ up: 0, down: 0 });
+      try {
+        callback(JSON.parse(lastData) as TrafficData);
+      } catch {
+        callback({ up: 0, down: 0 });
+      }
+    },
+  });
+
+  return source;
+}