移动按钮位置

3 files changed, 67 insertions, 44 deletions

diff --git a/src/components/Proxies.js b/src/components/Proxies.js
index 9623010..83d5205 100644
--- a/src/components/Proxies.js
+++ b/src/components/Proxies.js
@@ -6,7 +6,7 @@ import { connect } from './StateProvider';
 import ContentHeader from './ContentHeader';
 import ProxyGroup from './ProxyGroup';
 import Button from './Button';
-import { Zap } from 'react-feather';
+import { Zap, Filter } from 'react-feather';
 
 import ProxyProviderList from './ProxyProviderList';
 
@@ -15,6 +15,7 @@ import s0 from './Proxies.module.css';
 import {
   getProxies,
   getDelay,
+  getRtFilterSwitch,
   getProxyGroupNames,
   getProxyProviders,
   fetchProxies,
@@ -30,13 +31,26 @@ function Proxies({
   proxies,
   delay,
   proxyProviders,
-  apiConfig
+  apiConfig,
+  filterZeroRT
 }) {
   const refFetchedTimestamp = useRef({});
+
+  const switchRequetState = (dispath, getState) => {
+    const preState = getRtFilterSwitch(getState());
+
+    dispatch('store/proxies#filterZeroRTProxies', s => {
+      s.filterZeroRT = !preState;
+    });
+  };
+  const filterZeroRTFn = useCallback(() => dispatch(switchRequetState), [
+    dispatch
+  ]);
   const requestDelayAllFn = useCallback(
     () => dispatch(requestDelayAll(apiConfig)),
     [apiConfig, dispatch]
   );
+
   const fetchProxiesHooked = useCallback(() => {
     refFetchedTimestamp.current.startAt = new Date();
     dispatch(fetchProxies(apiConfig)).then(() => {
@@ -60,6 +74,7 @@ function Proxies({
     return () => window.removeEventListener('focus', fn, false);
   }, [fetchProxiesHooked]);
   const icon = useMemo(() => <Zap width={16} />, []);
+  const filterIcon = useMemo(() => <Filter width={16} />, []);
 
   return (
     <>
@@ -71,6 +86,9 @@ function Proxies({
             start={icon}
             onClick={requestDelayAllFn}
           />
+          <Button start={filterIcon} onClick={filterZeroRTFn}>
+            <span>{filterZeroRT ? 'show' : 'hide'} 0ms proxies</span>
+          </Button>
         </div>
         {groupNames.map(groupName => {
           return (
@@ -97,7 +115,8 @@ const mapState = s => ({
   groupNames: getProxyGroupNames(s),
   proxies: getProxies(s),
   proxyProviders: getProxyProviders(s),
-  delay: getDelay(s)
+  delay: getDelay(s),
+  filterZeroRT: getRtFilterSwitch(s)
 });
 
 export default connect(mapState)(Proxies);
diff --git a/src/components/ProxyGroup.js b/src/components/ProxyGroup.js
index a6407d7..c000535 100644
--- a/src/components/ProxyGroup.js
+++ b/src/components/ProxyGroup.js
@@ -1,10 +1,11 @@
 import React from 'react';
 
 import Button from './Button';
+import { ChevronsDown } from 'react-feather';
 
 import cx from 'classnames';
 import { connect } from './StateProvider';
-import { getDelay } from '../store/proxies';
+import { getDelay, getProxies, getRtFilterSwitch } from '../store/proxies';
 
 import Proxy, { ProxySmall } from './Proxy';
 import { SectionNameType } from './shared/Basic';
@@ -22,23 +23,14 @@ function ProxyGroup({ name, proxies, apiConfig, dispatch }) {
   const isSelectable = useMemo(() => type === 'Selector', [type]);
 
   const [isShow, setIsShow] = useState({
-    show: false,
-    showAll: false
+    show: false
   });
 
   const updateShow = useCallback(
     type => {
-      if (type === 'all') {
-        setIsShow({
-          ...isShow,
-          showAll: !isShow.showAll
-        });
-      } else {
-        setIsShow({
-          ...isShow,
-          show: !isShow.show
-        });
-      }
+      setIsShow({
+        show: !isShow.show
+      });
     },
     [isShow]
   );
@@ -53,27 +45,28 @@ function ProxyGroup({ name, proxies, apiConfig, dispatch }) {
     [apiConfig, dispatch, name, isSelectable]
   );
 
+  const button = useMemo(
+    () => (
+      <Button
+        className="btn"
+        start={<ChevronsDown width={16} />}
+        onClick={() => updateShow()}
+        // text={isShow.show ? 'hide' : 'show'}
+      />
+    ),
+    [updateShow]
+  );
+
   return (
     <div className={s0.group}>
       <div className={s0.header}>
-        <SectionNameType name={name} type={group.type} />
-        <Button
-          className="btn"
-          onClick={() => updateShow()}
-          text={isShow.show ? 'hide' : 'show'}
-        ></Button>
-        <Button
-          className="btn"
-          onClick={() => updateShow('all')}
-          text={isShow.showAll ? 'hide error' : 'all proxies'}
-        ></Button>
+        <SectionNameType name={name} type={group.type} dropDown={button} />
       </div>
       <ProxyList
         all={isShow.show ? all : []}
         now={now}
         isSelectable={isSelectable}
         itemOnTapCallback={itemOnTapCallback}
-        filterError={!isShow.showAll}
       />
     </div>
   );
@@ -91,7 +84,6 @@ function ProxyListImpl({
   now,
   isSelectable,
   itemOnTapCallback,
-  filterError,
   sortedAll
 }: ProxyListProps) {
   const proxies = sortedAll || all;
@@ -130,32 +122,43 @@ const getSortDelay = (d, w) => {
   return w;
 };
 
-const mapState = (s, { all, filterError }) => {
+const mapState = (s, { all }) => {
   const delay = getDelay(s);
+  const filterError = getRtFilterSwitch(s);
+
+  const groupList = [];
+  const proxyList = [];
 
   let clonelist = [...all];
 
   if (filterError) {
-    clonelist = clonelist.filter(e => {
-      const d = delay[e];
-      if (d === undefined) return true;
-      if (d.error || d.number === 0 || d.number > 1000) {
+    const filterList = clonelist.filter(name => {
+      const d = delay[name];
+      if (d === undefined) {
+        groupList.push(name);
+        return true;
+      }
+      if (d.error || d.number === 0) {
         return false;
       } else {
+        proxyList.push(name);
         return true;
       }
     });
-  }
 
-  clonelist = clonelist.sort((first, second) => {
-    const d1 = getSortDelay(delay[first], 999999);
-    const d2 = getSortDelay(delay[second], 999999);
-
-    return d1 - d2;
-  });
+    //
+    if (proxyList.length > 0) {
+      //not test connection yet ,,show all
+      clonelist = filterList;
+    }
+  }
 
   return {
-    sortedAll: clonelist
+    all: clonelist.sort((first, second) => {
+      const d1 = getSortDelay(delay[first], 999999);
+      const d2 = getSortDelay(delay[second], 999999);
+      return d1 - d2;
+    })
   };
 };
 
diff --git a/src/components/shared/Basic.js b/src/components/shared/Basic.js
index dbd1bc7..9729411 100644
--- a/src/components/shared/Basic.js
+++ b/src/components/shared/Basic.js
@@ -2,11 +2,12 @@ import React from 'react';
 
 import s from './Basic.module.css';
 
-export function SectionNameType({ name, type }) {
+export function SectionNameType({ name, type, dropDown }) {
   return (
     <h2 className={s.sectionNameType}>
       <span>{name}</span>
       <span>{type}</span>
+      {dropDown}
     </h2>
   );
 }