From fd07fae633a5f4d6d9c90769a4793f9085a4640a Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Mon, 14 Jan 2019 00:24:23 +0800
Subject: [PATCH] feat(logs): support search/filter logs

---
 src/components/LogSearch.js                   |  7 +++
 src/components/Logs.js                        |  2 +
 src/components/RuleSearch.js                  | 48 ++-----------------
 src/components/Search.js                      | 45 +++++++++++++++++
 ...eSearch.module.scss => Search.module.scss} |  0
 src/ducks/logs.js                             |  8 +++-
 src/ducks/rules.js                            |  1 -
 7 files changed, 63 insertions(+), 48 deletions(-)
 create mode 100644 src/components/LogSearch.js
 create mode 100644 src/components/Search.js
 rename src/components/{RuleSearch.module.scss => Search.module.scss} (100%)

diff --git a/src/components/LogSearch.js b/src/components/LogSearch.js
new file mode 100644
index 0000000..dd43c8a
--- /dev/null
+++ b/src/components/LogSearch.js
@@ -0,0 +1,7 @@
+import Search from './Search';
+import { getSearchText, updateSearchText } from 'd/logs';
+
+const mapStateToProps = s => ({ searchText: getSearchText(s) });
+const actions = { updateSearchText };
+
+export default Search({ mapStateToProps, actions });
diff --git a/src/components/Logs.js b/src/components/Logs.js
index c781866..2990502 100644
--- a/src/components/Logs.js
+++ b/src/components/Logs.js
@@ -10,6 +10,7 @@ import ContentHeader from 'c/ContentHeader';
 import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
 // TODO move this into a redux action
 import { fetchLogs } from '../api/logs';
+import LogSearch from './LogSearch';
 import { getLogsForDisplay, appendLog } from 'd/logs';
 
 import yacd from 's/yacd.svg';
@@ -72,6 +73,7 @@ export default function Logs() {
   return (
     <div>
       <ContentHeader title="Logs" />
+      <LogSearch />
       <div ref={refLogsContainer} style={{ paddingBottom }}>
         {logs.length === 0 ? (
           <div
diff --git a/src/components/RuleSearch.js b/src/components/RuleSearch.js
index 80d42d7..fa32229 100644
--- a/src/components/RuleSearch.js
+++ b/src/components/RuleSearch.js
@@ -1,49 +1,7 @@
-import React, { useState, useMemo } from 'react';
-import Icon from 'c/Icon';
-
-import search from 's/search.svg';
-import { useActions, useStoreState } from 'm/store';
-
-import debounce from 'lodash-es/debounce';
-
-import s0 from './RuleSearch.module.scss';
-
+import Search from './Search';
 import { getSearchText, updateSearchText } from 'd/rules';
 
-const mapStateToProps = s => ({
-  searchText: getSearchText(s)
-});
-
+const mapStateToProps = s => ({ searchText: getSearchText(s) });
 const actions = { updateSearchText };
 
-export default React.memo(function RuleSearch() {
-  const { updateSearchText } = useActions(actions);
-  const updateSearchTextDebounced = useMemo(
-    () => debounce(updateSearchText, 300),
-    [updateSearchText]
-  );
-  const { searchText } = useStoreState(mapStateToProps);
-  const [text, setText] = useState(searchText);
-  const onChange = e => {
-    setText(e.target.value);
-    updateSearchTextDebounced(e.target.value);
-  };
-
-  return (
-    <div className={s0.RuleSearch}>
-      <div className={s0.RuleSearchContainer}>
-        <div className={s0.inputWrapper}>
-          <input
-            type="text"
-            value={text}
-            onChange={onChange}
-            className={s0.input}
-          />
-        </div>
-        <div className={s0.iconWrapper}>
-          <Icon id={search.id} />
-        </div>
-      </div>
-    </div>
-  );
-});
+export default Search({ mapStateToProps, actions });
diff --git a/src/components/Search.js b/src/components/Search.js
new file mode 100644
index 0000000..88c6b44
--- /dev/null
+++ b/src/components/Search.js
@@ -0,0 +1,45 @@
+import React, { memo, useState, useMemo } from 'react';
+import Icon from 'c/Icon';
+
+import search from 's/search.svg';
+import { useActions, useStoreState } from 'm/store';
+
+import debounce from 'lodash-es/debounce';
+
+import s0 from './Search.module.scss';
+
+function getSerachComponent({ mapStateToProps, actions }) {
+  return memo(function RuleSearch() {
+    const { updateSearchText } = useActions(actions);
+    const updateSearchTextDebounced = useMemo(
+      () => debounce(updateSearchText, 300),
+      [updateSearchText]
+    );
+    const { searchText } = useStoreState(mapStateToProps);
+    const [text, setText] = useState(searchText);
+    const onChange = e => {
+      setText(e.target.value);
+      updateSearchTextDebounced(e.target.value);
+    };
+
+    return (
+      <div className={s0.RuleSearch}>
+        <div className={s0.RuleSearchContainer}>
+          <div className={s0.inputWrapper}>
+            <input
+              type="text"
+              value={text}
+              onChange={onChange}
+              className={s0.input}
+            />
+          </div>
+          <div className={s0.iconWrapper}>
+            <Icon id={search.id} />
+          </div>
+        </div>
+      </div>
+    );
+  });
+}
+
+export default getSerachComponent;
diff --git a/src/components/RuleSearch.module.scss b/src/components/Search.module.scss
similarity index 100%
rename from src/components/RuleSearch.module.scss
rename to src/components/Search.module.scss
diff --git a/src/ducks/logs.js b/src/ducks/logs.js
index c16ca65..ecf27af 100644
--- a/src/ducks/logs.js
+++ b/src/ducks/logs.js
@@ -7,10 +7,12 @@ const LogSize = 300;
 
 const getLogs = s => s.logs.logs;
 const getTail = s => s.logs.tail;
+export const getSearchText = s => s.logs.searchText;
 export const getLogsForDisplay = createSelector(
   getLogs,
   getTail,
-  (logs, tail) => {
+  getSearchText,
+  (logs, tail, searchText) => {
     const x = [];
     for (let i = tail; i >= 0; i--) {
       x.push(logs[i]);
@@ -20,7 +22,9 @@ export const getLogsForDisplay = createSelector(
         x.push(logs[i]);
       }
     }
-    return x;
+
+    if (searchText === '') return x;
+    return x.filter(r => r.payload.toLowerCase().indexOf(searchText) >= 0);
   }
 );
 
diff --git a/src/ducks/rules.js b/src/ducks/rules.js
index c38dc6c..b1f678c 100644
--- a/src/ducks/rules.js
+++ b/src/ducks/rules.js
@@ -1,7 +1,6 @@
 import * as rulesAPI from 'a/rules';
 import { getClashAPIConfig } from 'd/app';
 import invariant from 'invariant';
-// import { debounce } from 'lodash-es';
 import { createSelector } from 'reselect';
 
 export const getAllRules = s => s.rules.allRules;