added: modal prompt to close previous connections when switch proxy

4 files changed, 87 insertions, 3 deletions

diff --git a/src/components/proxies/ClosePrevConns.tsx b/src/components/proxies/ClosePrevConns.tsx
new file mode 100644
index 0000000..567a3e5
--- /dev/null
+++ b/src/components/proxies/ClosePrevConns.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+import Button from '../Button';
+import { FlexCenter } from '../shared/Styled';
+
+const { useRef, useEffect } = React;
+
+type Props = {
+  onClickPrimaryButton?: () => void;
+  onClickSecondaryButton?: () => void;
+};
+
+export function ClosePrevConns({
+  onClickPrimaryButton,
+  onClickSecondaryButton,
+}: Props) {
+  const primaryButtonRef = useRef<HTMLButtonElement>(null);
+  const secondaryButtonRef = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    primaryButtonRef.current.focus();
+  }, []);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.keyCode === 39) {
+      secondaryButtonRef.current.focus();
+    } else if (e.keyCode === 37) {
+      primaryButtonRef.current.focus();
+    }
+  };
+
+  return (
+    <div onKeyDown={handleKeyDown}>
+      <h2>Close Connections?</h2>
+      <p>
+        Click "Yes" to close those connections that are still using the old
+        selected proxy in this group
+      </p>
+      <div style={{ height: 30 }} />
+      <FlexCenter>
+        <Button onClick={onClickPrimaryButton} ref={primaryButtonRef}>
+          Yes
+        </Button>
+        <div style={{ width: 20 }} />
+        <Button onClick={onClickSecondaryButton} ref={secondaryButtonRef}>
+          No
+        </Button>
+      </FlexCenter>
+    </div>
+  );
+}
diff --git a/src/components/proxies/Proxies.tsx b/src/components/proxies/Proxies.tsx
index 12e35ad..474d09f 100644
--- a/src/components/proxies/Proxies.tsx
+++ b/src/components/proxies/Proxies.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 
-import { connect } from '../StateProvider';
+import { connect, useStoreActions } from '../StateProvider';
 
 import Button from '../Button';
 import ContentHeader from '../ContentHeader';
 import { ProxyGroup } from './ProxyGroup';
 import BaseModal from '../shared/BaseModal';
 import Settings from './Settings';
+import { ClosePrevConns } from './ClosePrevConns';
 import Equalizer from '../svg/Equalizer';
 import { Zap } from 'react-feather';
 
@@ -19,6 +20,7 @@ import {
   getDelay,
   getProxyGroupNames,
   getProxyProviders,
+  getShowModalClosePrevConns,
   fetchProxies,
   requestDelayAll,
 } from '../../store/proxies';
@@ -26,7 +28,14 @@ import { getClashAPIConfig } from '../../store/app';
 
 const { useState, useEffect, useCallback, useRef } = React;
 
-function Proxies({ dispatch, groupNames, delay, proxyProviders, apiConfig }) {
+function Proxies({
+  dispatch,
+  groupNames,
+  delay,
+  proxyProviders,
+  apiConfig,
+  showModalClosePrevConns,
+}) {
   const refFetchedTimestamp = useRef<{ startAt?: number; completeAt?: number }>(
     {}
   );
@@ -69,6 +78,10 @@ function Proxies({ dispatch, groupNames, delay, proxyProviders, apiConfig }) {
     setIsSettingsModalOpen(false);
   }, []);
 
+  const {
+    proxies: { closeModalClosePrevConns, closePrevConnsAndTheModal },
+  } = useStoreActions();
+
   return (
     <>
       <div className={s0.topBar}>
@@ -84,7 +97,7 @@ function Proxies({ dispatch, groupNames, delay, proxyProviders, apiConfig }) {
       </BaseModal>
       <ContentHeader title="Proxies" />
       <div>
-        {groupNames.map((groupName) => {
+        {groupNames.map((groupName: string) => {
           return (
             <div className={s0.group} key={groupName}>
               <ProxyGroup
@@ -105,6 +118,15 @@ function Proxies({ dispatch, groupNames, delay, proxyProviders, apiConfig }) {
         text="Test Latency"
         position={fabPosition}
       />
+      <BaseModal
+        isOpen={showModalClosePrevConns}
+        onRequestClose={closeModalClosePrevConns}
+      >
+        <ClosePrevConns
+          onClickPrimaryButton={() => closePrevConnsAndTheModal(apiConfig)}
+          onClickSecondaryButton={closeModalClosePrevConns}
+        />
+      </BaseModal>
     </>
   );
 }
@@ -131,6 +153,7 @@ const mapState = (s) => ({
   groupNames: getProxyGroupNames(s),
   proxyProviders: getProxyProviders(s),
   delay: getDelay(s),
+  showModalClosePrevConns: getShowModalClosePrevConns(s),
 });
 
 export default connect(mapState)(Proxies);
diff --git a/src/components/shared/Styled.module.css b/src/components/shared/Styled.module.css
new file mode 100644
index 0000000..88b84ad
--- /dev/null
+++ b/src/components/shared/Styled.module.css
@@ -0,0 +1,5 @@
+.FlexCenter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/shared/Styled.tsx b/src/components/shared/Styled.tsx
new file mode 100644
index 0000000..2dbb8b2
--- /dev/null
+++ b/src/components/shared/Styled.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import s from './Styled.module.css';
+
+export function FlexCenter({ children }: { children: React.ReactNode }) {
+  return <div className={s.FlexCenter}>{children}</div>;
+}