feat: support close all connections

for https://github.com/haishanh/yacd/issues/338

1 files changed, 27 insertions, 1 deletions

diff --git a/src/components/Connections.js b/src/components/Connections.js
index 2607606..8953722 100644
--- a/src/components/Connections.js
+++ b/src/components/Connections.js
@@ -4,12 +4,15 @@ import ConnectionTable from 'c/ConnectionTable';
 import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
 import { useStoreState } from 'm/store';
 import { getClashAPIConfig } from 'd/app';
+import { X as IconClose } from 'react-feather';
 import SvgYacd from './SvgYacd';
+import { ButtonWithIcon } from './Button';
+import ModalCloseAllConnections from './ModalCloseAllConnections';
 import * as connAPI from '../api/connections';
 
 import s from './Connections.module.css';
 
-const { useEffect, useState, useRef } = React;
+const { useEffect, useState, useRef, useCallback, useMemo } = React;
 
 const paddingBottom = 30;
 
@@ -31,6 +34,17 @@ function Conn() {
   const [refContainer, containerHeight] = useRemainingViewPortHeight();
   const config = useStoreState(getClashAPIConfig);
   const [conns, setConns] = useState([]);
+  const [isCloseAllModalOpen, setIsCloseAllModalOpen] = useState(false);
+  const openCloseAllModal = useCallback(() => setIsCloseAllModalOpen(true), []);
+  const closeCloseAllModal = useCallback(
+    () => setIsCloseAllModalOpen(false),
+    []
+  );
+  const closeAllConnections = useCallback(() => {
+    connAPI.closeAllConnections(config);
+    closeCloseAllModal();
+  }, [config, closeCloseAllModal]);
+  const iconClose = useMemo(() => <IconClose width={16} />, []);
   const prevConnsRef = useRef(conns);
   useEffect(() => {
     function read({ connections }) {
@@ -65,6 +79,18 @@ function Conn() {
           )}
         </div>
       </div>
+      <div className="fabgrp">
+        <ButtonWithIcon
+          text="Close"
+          icon={iconClose}
+          onClick={openCloseAllModal}
+        />
+      </div>
+      <ModalCloseAllConnections
+        isOpen={isCloseAllModalOpen}
+        primaryButtonOnTap={closeAllConnections}
+        onRequestClose={closeCloseAllModal}
+      />
     </div>
   );
 }