add filter option to Feed (closes #19)

Author: buzz

packages/client/package.json

@@ -36,6 +36,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.10.2",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "classnames": "^2.2.6",
+    "escape-string-regexp": "^2.0.0",
     "lazysizes": "^5.1.1",
     "prop-types": "^15.7.2",
     "rc-notification": "^3.3.1",

packages/client/src/components/FeedBox/Body/Edit/List/SortableFeed/index.js

@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   faBars,
   faEye,
+  faFilter,
   faLink,
   faPen,
   faTrash,
@@ -40,6 +41,7 @@ const FEED_ITEM_DISPLAY = {
   EDIT_TITLE: 1,
   EDIT_URL: 2,
   EDIT_DISPLAY: 3,
+  EDIT_FILTER: 4,
 }
 
 const Feed = ({ feed }) => {
@@ -49,6 +51,7 @@ const Feed = ({ feed }) => {
   const [newCustomTitle, setNewCustomTitle] = useState(feed.customTitle)
   const [newUrl, setNewUrl] = useState(feed.url)
   const [newDisplay, setNewDisplay] = useState(feed.display)
+  const [newFilter, setNewFilter] = useState(feed.filter)
 
   const dispatchTitle = () => {
     dispatch(editFeed(feed.id, { customTitle: newCustomTitle }))
@@ -62,6 +65,10 @@ const Feed = ({ feed }) => {
     dispatch(editFeed(feed.id, { display: val || newDisplay }))
   }
 
+  const dispatchFilter = () => {
+    dispatch(editFeed(feed.id, { filter: newFilter }))
+  }
+
   const makeInputOnKeyUp = (dispatchValue) => (
     (ev) => {
       if (ev.keyCode === 13) {
@@ -147,6 +154,21 @@ const Feed = ({ feed }) => {
         </form>
       </div>
     )
+  } else if (feedItemDisplay === FEED_ITEM_DISPLAY.EDIT_FILTER) {
+    feedDisplay = (
+      <div className={css.form}>
+        <form onSubmit={(ev) => ev.preventDefault()}>
+          <input
+            className="nondraggable"
+            onChange={(ev) => setNewFilter(ev.target.value)}
+            onKeyUp={makeInputOnKeyUp(dispatchFilter)}
+            placeholder={feed.filter}
+            ref={inputRef}
+            value={newFilter}
+          />
+        </form>
+      </div>
+    )
   } else {
     feedDisplay = (
       <span className={css.title} title={feed.url}>
@@ -186,6 +208,13 @@ const Feed = ({ feed }) => {
         >
           <FontAwesomeIcon icon={faEye} />
         </button>
+        <button
+          onClick={makeEditOnClick(dispatchUrl, FEED_ITEM_DISPLAY.EDIT_FILTER)}
+          title="Edit filter"
+          type="button"
+        >
+          <FontAwesomeIcon icon={faFilter} />
+        </button>
         <button
           onClick={() => dispatch(deleteFeed(feed.id))}
           title="Remove feed"

packages/client/src/store/models/Feed.js

@@ -18,6 +18,7 @@ export default class Feed extends Model {
       title: attr({ getDefault: () => 'New feed' }),
       status: attr({ getDefault: () => FEED_STATUS.NEW }),
       display: attr({ getDefault: () => FEED_DISPLAY.DETAILED }),
+      filter: attr(),
       error: attr(),
       index: attr(),
       lastFetched: attr({ getDefault: () => 0 }),

packages/client/src/store/selectors/feedItem.js

@@ -1,8 +1,31 @@
 import { createSelector } from 'redux-orm'
+import escapeStringRegexp from 'escape-string-regexp'
 
 import orm from 'newsdash/store/orm'
 import selectId from './id'
 
+const filterItems = (items, pattern) => {
+  const testFields = ['link', 'title', 'content']
+  const regexps = pattern.split(',').reduce((acc, word) => {
+    try {
+      acc.push(new RegExp(escapeStringRegexp(word.trim()), 'i'))
+    } catch {
+      //
+    }
+    return acc
+  }, [])
+  return items.filter((item) => {
+    for (let i = 0; i < testFields.length; i += 1) {
+      for (let j = 0; j < regexps.length; j += 1) {
+        if (regexps[j].test(item[testFields[i]])) {
+          return false
+        }
+      }
+    }
+    return true
+  })
+}
+
 const getAllFeedItems = createSelector(
   orm,
   (session) => session
@@ -16,12 +39,14 @@ const makeGetFeedItems = () => createSelector(
   selectId,
   (session, id) => {
     const feed = session.Feed.withId(id)
-    return feed
-      ? feed
-        .items
-        .toRefArray()
-        .sort((a, b) => b.date - a.date) // sort by date
-      : []
+    if (!feed) {
+      return []
+    }
+    const items = feed
+      .items
+      .toRefArray()
+      .sort((a, b) => b.date - a.date) // sort by date
+    return feed.filter ? filterItems(items, feed.filter) : items
   }
 )
 

packages/server/src/constants.js

@@ -35,6 +35,7 @@ export const FIELDS_FEED = [
   'link',
   'title',
   'display',
+  'filter',
   ['index', 'int'],
   ['feedBox', 'int'],
 ]

yarn.lock

@@ -3623,6 +3623,11 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
 eslint-config-airbnb-base@^14.0.0:
   version "14.0.0"
   resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.0.0.tgz#8a7bcb9643d13c55df4dd7444f138bf4efa61e17"