feat(traffic): api support & adjust

src/components/traffic.tsx

-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"}

src/services/base.ts

+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;

src/services/index.ts

+import * as traffic from "./traffic";
+
+export default {
+  ...traffic,
+};

src/services/traffic.ts

+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;
+}