feat: close connection single or with filter (#64)

src/components/ConnectionTable.scss

@@ -0,0 +1,23 @@
+.connections-table {
+  td.ctrl {
+    min-width: 4em;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    svg {
+      height: 16px;
+    }
+  }
+
+  td.type,
+  td.start,
+  td.downloadSpeedCurr,
+  td.uploadSpeedCurr,
+  td.download,
+  td.upload {
+    min-width: 7em;
+    text-align: center;
+  }
+}

src/components/ConnectionTable.tsx

@@ -1,32 +1,28 @@
+import './ConnectionTable.scss';
+
 import cx from 'clsx';
 import { formatDistance, Locale } from 'date-fns';
 import { enUS, zhCN, zhTW } from 'date-fns/locale';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ChevronDown } from 'react-feather';
+import { XCircle } from 'react-feather';
 import { useTranslation } from 'react-i18next';
 import { useSortBy, useTable } from 'react-table';
 
+import { State } from '~/store/types';
+
+import * as connAPI from '../api/connections';
 import prettyBytes from '../misc/pretty-bytes';
+import { getClashAPIConfig } from '../store/app';
 import s from './ConnectionTable.module.scss';
-
-function renderCell(cell: { column: { id: string }; value: number }, locale: Locale) {
-  switch (cell.column.id) {
-    case 'start':
-      return formatDistance(cell.value, 0, { locale: locale });
-    case 'download':
-    case 'upload':
-      return prettyBytes(cell.value);
-    case 'downloadSpeedCurr':
-    case 'uploadSpeedCurr':
-      return prettyBytes(cell.value) + '/s';
-    default:
-      return cell.value;
-  }
-}
+import MOdalCloseConnection from './ModalCloseAllConnections';
+import { connect } from './StateProvider';
 
 const sortById = { id: 'id', desc: true };
 
-function Table({ data, columns, hiddenColumns }) {
+function Table({ data, columns, hiddenColumns, apiConfig }) {
+  const [operationId, setOperationId] = useState('');
+  const [showModalDisconnect, setShowModalDisconnect] = useState(false);
   const tableState = {
     sortBy: [
       // maintain a more stable order
@@ -61,21 +57,61 @@ function Table({ data, columns, hiddenColumns }) {
     locale = enUS;
   }
 
+  const disconnectOperation = () => {
+    connAPI.closeConnById(apiConfig, operationId);
+    setShowModalDisconnect(false);
+  };
+
+  const handlerDisconnect = (id) => {
+    setOperationId(id);
+    setShowModalDisconnect(true);
+  };
+
+  const renderCell = (
+    cell: { column: { id: string }; row: { original: { id: string } }; value: number },
+    locale: Locale
+  ) => {
+    switch (cell.column.id) {
+      case 'ctrl':
+        return (
+          <XCircle
+            style={{ cursor: 'pointer' }}
+            onClick={() => handlerDisconnect(cell.row.original.id)}
+          ></XCircle>
+        );
+      case 'start':
+        return formatDistance(cell.value, 0, { locale: locale });
+      case 'download':
+      case 'upload':
+        return prettyBytes(cell.value);
+      case 'downloadSpeedCurr':
+      case 'uploadSpeedCurr':
+        return prettyBytes(cell.value) + '/s';
+      default:
+        return cell.value;
+    }
+  };
+
   return (
     <div style={{ marginTop: '5px' }}>
-      <table {...getTableProps()} className={s.table}>
+      <table {...getTableProps()} className={cx(s.table, 'connections-table')}>
         <thead>
           {headerGroups.map((headerGroup, trindex) => {
             return (
               <tr {...headerGroup.getHeaderGroupProps()} className={s.tr} key={trindex}>
                 {headerGroup.headers.map((column) => (
                   <th {...column.getHeaderProps(column.getSortByToggleProps())} className={s.th}>
                     <span>{t(column.render('Header'))}</span>
-                    <span className={s.sortIconContainer}>
-                      {column.isSorted ? (
-                        <ChevronDown size={16} className={column.isSortedDesc ? '' : s.rotate180} />
-                      ) : null}
-                    </span>
+                    {column.id !== 'ctrl' ? (
+                      <span className={s.sortIconContainer}>
+                        {column.isSorted ? (
+                          <ChevronDown
+                            size={16}
+                            className={column.isSortedDesc ? '' : s.rotate180}
+                          />
+                        ) : null}
+                      </span>
+                    ) : null}
                   </th>
                 ))}
               </tr>
@@ -87,16 +123,11 @@ function Table({ data, columns, hiddenColumns }) {
             prepareRow(row);
             return (
               <tr className={s.tr} key={i}>
-                {row.cells.map((cell, j) => {
+                {row.cells.map((cell) => {
                   return (
                     <td
                       {...cell.getCellProps()}
-                      className={cx(
-                        s.td,
-                        i % 2 === 0 ? s.odd : false,
-                        j == 0 || (j >= 5 && j < 10) ? s.center : true
-                        // j ==1 ? s.break : true
-                      )}
+                      className={cx(s.td, i % 2 === 0 ? s.odd : false, cell.column.id)}
                     >
                       {renderCell(cell, locale)}
                     </td>
@@ -107,8 +138,18 @@ function Table({ data, columns, hiddenColumns }) {
           })}
         </tbody>
       </table>
+      <MOdalCloseConnection
+        confirm={'disconnect'}
+        isOpen={showModalDisconnect}
+        onRequestClose={() => setShowModalDisconnect(false)}
+        primaryButtonOnTap={disconnectOperation}
+      ></MOdalCloseConnection>
     </div>
   );
 }
 
-export default Table;
+const mapState = (s: State) => ({
+  apiConfig: getClashAPIConfig(s),
+});
+
+export default connect(mapState)(Table);

src/components/Connections.module.scss

@@ -68,40 +68,3 @@
   transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
   width: 100%;
 }
-
-.sourceipContainer {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  flex-direction: row;
-  justify-content: space-evenly;
-}
-
-.sourceipTable {
-  input {
-    width: 120px;
-  }
-}
-
-.iptableTipContainer {
-  width: 300px;
-}
-
-.columnManagerRow {
-  width: 200px;
-  display: flex;
-  margin: 5px 0;
-  align-items: center;
-
-  .columnManageLabel {
-    flex: 1;
-    margin-left: 10px;
-  }
-
-  .columnManageSwitch {
-    transform: scale(0.7);
-    height: 20px;
-    display: flex;
-    align-items: center;
-  }
-}